:root{--ink:#3a2a5c;--ink-soft:#5b4b7a;--muted:#8a7ab0;--white:#fff;--purple:#7c3aed;--purple-soft:#ede9fe;--purple-deep:#5b21b6;--pink:#ec4899;--pink-soft:#fce7f3;--amber:#fbbf24;--amber-soft:#fef3c7;--amber-deep:#b45309;--green:#10b981;--green-soft:#d1fae5;--green-deep:#047857;--sky:#0ea5e9;--sky-soft:#e0f2fe;--sky-deep:#0369a1;--red:#ef4444;--red-soft:#fee2e2;--bg:#f4f1ff;--bg-raised:#fff;--bg-input:#faf8ff;--border:#3a2a5c;--radius:20px;--radius-sm:14px;--radius-lg:28px;--shadow-sticker:4px 4px 0 var(--border);--shadow-sticker-lg:6px 6px 0 var(--border);--shadow-sticker-sm:2px 2px 0 var(--border);--shadow-soft:0 8px 24px rgba(58,42,92,.1);--font-body:"Noto Sans Thai","Fredoka",ui-sans-serif,system-ui,sans-serif;--font-display:"Fredoka","Noto Sans Thai",ui-sans-serif,system-ui,sans-serif;--font-mono:"Fredoka",ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--bg);color-scheme:light;font-family:var(--font-body);line-height:1.55}*{box-sizing:border-box}html{scroll-behavior:smooth}body,html{min-width:320px}body{margin:0;background:var(--bg)}.app-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.app-bg-tint{position:absolute;inset:0;background:radial-gradient(circle at 12% 8%,#ffe4f0 0,transparent 35%),radial-gradient(circle at 88% 18%,#d6f5ff 0,transparent 35%),radial-gradient(circle at 50% 75%,#fff4d6 0,transparent 40%)}.app-bg-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(236,72,153,.5) 1px,transparent 1.5px),radial-gradient(circle,rgba(14,165,233,.5) 1px,transparent 1.5px),radial-gradient(circle,rgba(251,191,36,.5) 1px,transparent 1.5px);background-size:84px 84px,104px 104px,124px 124px;background-position:0 0,30px 40px,60px 80px;opacity:.18}button,input,select,textarea{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3{margin:0}h2{font-size:1.15rem;line-height:1.3}.site-footer{display:flex;flex-wrap:wrap;width:min(440px,calc(100% - 28px));justify-content:center;align-items:center;gap:6px;margin:0 auto 24px;color:var(--muted);font-size:.72rem;font-family:var(--font-mono);text-align:center}.site-footer .footer-sep{opacity:.5}.site-footer .footer-link{color:var(--purple);font-weight:700;text-decoration:none;transition:color .14s ease}.site-footer .footer-link:hover{text-decoration:underline}.page{min-height:100vh;padding:16px 14px 40px}.shell{width:min(440px,100%);margin:0 auto;display:grid;gap:18px}.panel{position:relative;border:2.5px solid var(--border);border-radius:var(--radius);padding:22px;background:var(--bg-raised);box-shadow:var(--shadow-sticker)}.stack{display:grid;gap:16px}.mono{font-family:var(--font-mono);letter-spacing:.04em}.eyebrow{display:inline-flex;width:-moz-fit-content;width:fit-content;align-items:center;gap:6px;border:2px solid var(--border);border-radius:999px;padding:4px 12px;background:var(--amber);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-sticker-sm)}.eyebrow,.headline{margin:0;color:var(--ink);font-weight:700}.headline{font-family:var(--font-display);font-size:2.4rem;line-height:1.08;letter-spacing:-.01em;overflow-wrap:anywhere}.sticker-text{color:var(--white);text-shadow:2px 2px 0 var(--border),-1.5px -1.5px 0 var(--border),1.5px -1.5px 0 var(--border),-1.5px 1.5px 0 var(--border),1.5px 1.5px 0 var(--border),4px 4px 0 rgba(124,58,237,.25)}.sticker-amber{color:var(--amber);text-shadow:2px 2px 0 var(--border),-1.5px -1.5px 0 var(--border),1.5px -1.5px 0 var(--border),-1.5px 1.5px 0 var(--border),1.5px 1.5px 0 var(--border),4px 4px 0 rgba(180,83,9,.3)}.sticker-pink{color:var(--pink);text-shadow:2px 2px 0 var(--border),-1.5px -1.5px 0 var(--border),1.5px -1.5px 0 var(--border),-1.5px 1.5px 0 var(--border),1.5px 1.5px 0 var(--border)}.compact-headline,.question-title{font-size:1.55rem}.subhead{max-width:680px;margin:0;color:var(--ink-soft);font-size:.98rem;overflow-wrap:anywhere;line-height:1.55}.muted,.trust-note{color:var(--muted)}.trust-note{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em}.statusbar{display:flex;justify-content:space-between;align-items:center;padding:4px 20px 8px;font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--ink)}.statusbar .sb-right{display:flex;gap:6px;align-items:center;font-size:.78rem}.button{position:relative;display:inline-flex;min-height:50px;align-items:center;justify-content:center;gap:8px;border:2.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 22px;background:var(--purple);color:var(--white);cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.2;text-align:center;text-decoration:none;box-shadow:var(--shadow-sticker);transition:transform .12s ease,box-shadow .12s ease}.button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--border)}.button:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--border)}.button.secondary{background:var(--white);color:var(--ink)}.button.danger{background:var(--red-soft);color:var(--red)}.button:disabled{cursor:not-allowed;opacity:.45;box-shadow:var(--shadow-sticker-sm);transform:none}.cta-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:60px;border:3px solid var(--border);border-radius:999px;padding:18px 28px;background:linear-gradient(180deg,#8b5cf6,var(--purple));color:var(--white);cursor:pointer;font-family:var(--font-display);font-size:1.2rem;font-weight:700;box-shadow:0 6px 0 var(--purple-deep),0 12px 22px #7c3aed59;transition:transform .1s ease,box-shadow .1s ease}.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--purple-deep),0 14px 26px #7c3aed66}.cta-button:active{transform:translateY(3px);box-shadow:0 3px 0 var(--purple-deep)}.button-row{display:flex;flex-wrap:wrap;gap:10px}.button-row,.pill{align-items:center}.pill{display:inline-flex;gap:6px;background:var(--white);border:2px solid var(--border);border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sticker-sm);cursor:pointer}.pill.circle{border-radius:50%;width:42px;height:42px;padding:0;justify-content:center}.postit{position:absolute;background:var(--amber-soft);border:1.5px solid var(--amber-deep);padding:7px 10px;font-size:.74rem;font-weight:700;color:var(--ink);border-radius:3px;box-shadow:2px 2px 5px #00000021;z-index:5;line-height:1.3;max-width:120px}.postit--pink{background:var(--pink-soft);border-color:var(--pink)}.postit--sky{background:var(--sky-soft);border-color:var(--sky-deep)}.postit--green{background:var(--green-soft);border-color:var(--green-deep)}.progress{position:relative;height:14px;overflow:hidden;border:2px solid var(--border);border-radius:999px;background:var(--pink-soft)}.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),#f43f5e);transition:width .22s ease}.progress-segments{display:flex;gap:4px}.progress-segments .seg{flex:1;height:5px;border-radius:3px;background:#3a2a5c26}.progress-segments .seg.done{background:var(--purple)}.progress-segments .seg.current{background:var(--purple-deep);position:relative;overflow:hidden}.progress-segments .seg.current:after{content:"";position:absolute;inset:0;background:var(--pink);animation:seg-fill 1.5s ease-in-out infinite}@keyframes seg-fill{0%,to{transform:scaleX(.4);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}.section{border-top:2px dashed rgba(58,42,92,.2);padding-top:18px}.section-title{display:flex;gap:10px;align-items:center;margin-bottom:14px}.section-icon{display:inline-grid;width:38px;height:38px;flex:0 0 auto;place-items:center;border:2px solid var(--border);border-radius:12px;background:var(--purple-soft);font-size:1.05rem;box-shadow:var(--shadow-sticker-sm)}.section-title h2{font-family:var(--font-display);font-size:1.1rem;font-weight:700}.answer-list{display:grid;gap:10px}.answer{position:relative;display:flex;width:100%;min-height:70px;align-items:center;gap:14px;border:2.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;background:var(--white);color:var(--ink);cursor:pointer;font-weight:700;font-size:.95rem;line-height:1.4;text-align:left;overflow-wrap:anywhere;box-shadow:var(--shadow-sticker);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.answer:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--border)}.answer .answer-key{display:inline-grid;width:36px;height:36px;flex:0 0 auto;place-items:center;border:2.5px solid var(--border);border-radius:12px;background:var(--purple);color:var(--white);font-family:var(--font-mono);font-size:1rem;font-weight:700}.answer.color-a{border-color:var(--pink)}.answer.color-a .answer-key{background:var(--pink)}.answer.color-a:hover{background:var(--pink-soft)}.answer.color-b{border-color:var(--amber)}.answer.color-b .answer-key{background:var(--amber);color:var(--ink)}.answer.color-b:hover{background:var(--amber-soft)}.answer.color-c{border-color:var(--green)}.answer.color-c .answer-key{background:var(--green)}.answer.color-c:hover{background:var(--green-soft)}.answer.color-d{border-color:var(--sky)}.answer.color-d .answer-key{background:var(--sky)}.answer.color-d:hover{background:var(--sky-soft)}.answer.selected{transform:translate(-2px,-2px) scale(1.02);background:var(--amber-soft);box-shadow:6px 6px 0 var(--border)}.answer.selected:after{content:"✓";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--green);font-size:1.4rem;font-weight:900}.badge{max-width:100%;border:2px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.78rem;overflow-wrap:anywhere}.badge,.role-pill{display:inline-flex;width:-moz-fit-content;width:fit-content;align-items:center;gap:6px;background:var(--sky-soft);color:var(--sky-deep);font-family:var(--font-mono);font-weight:700}.role-pill{border:2px solid var(--sky-deep);border-radius:999px;padding:6px 13px;font-size:.8rem}.tagline{font-size:1rem;font-style:italic;font-weight:600}.quote-box,.tagline{margin:0;color:var(--amber-deep)}.quote-box{border:2px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px;background:var(--amber-soft);font-size:1.05rem;font-weight:700;text-align:center;box-shadow:var(--shadow-sticker-sm)}.list{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}.list li{position:relative;padding-left:26px;color:var(--ink);line-height:1.45}.list li:before{content:"▸";position:absolute;left:6px;color:var(--purple);font-weight:900}.list.annoying li:before{content:"✕";color:var(--pink);font-size:.85rem;left:8px}.avatar-frame{position:relative;display:grid;place-items:center;min-height:180px}.avatar-emoji{font-size:5rem;line-height:1;animation:float 2.4s ease-in-out infinite}.avatar-frame .avatar-role{position:absolute;top:0;left:50%;transform:translate(-50%);border:2px solid var(--border);border-radius:999px;padding:4px 14px;background:var(--white);color:var(--ink);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;box-shadow:var(--shadow-sticker-sm)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loading-avatar{justify-self:center;font-size:4.5rem;line-height:1;animation:float 1.8s ease-in-out infinite}.score-chart{display:grid;gap:10px}.score-row{display:grid;grid-template-columns:92px minmax(60px,1fr) 30px;gap:8px;align-items:center}.score-label{display:flex;min-width:0;gap:5px;align-items:center;font-family:var(--font-mono);font-size:.74rem;font-weight:700}.score-track{height:14px;overflow:hidden;border:2px solid var(--border);border-radius:999px;background:var(--bg-input)}.score-track span{display:block;height:100%;border-radius:inherit;background:#8a7ab066;transition:width .5s ease}.score-row.active .score-track span{background:linear-gradient(90deg,var(--purple),var(--pink))}.score-value{font-family:var(--font-mono);font-size:.8rem;font-weight:700;text-align:right}.form-grid{display:grid;gap:14px}.field{display:grid;gap:6px;font-size:.9rem;font-weight:700}.field input,.field select,.field textarea{width:100%;border:2px solid var(--border);border-radius:12px;padding:12px 13px;background:var(--bg-input);color:var(--ink);font-family:inherit;font-weight:500;transition:border-color .14s ease,box-shadow .14s ease}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7c3aed26;outline:none}.field textarea{resize:vertical}.checkbox{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:.9rem;font-weight:600}.checkbox input{width:20px;height:20px;margin-top:2px;accent-color:var(--purple)}.error{color:var(--red);font-weight:700}.success{color:var(--green-deep);font-weight:700}.card-frame{overflow:hidden;border:2.5px solid var(--border);border-radius:var(--radius);background:var(--bg-input);box-shadow:var(--shadow-sticker)}#generated-result-card{scroll-margin-top:18px}.generated-card-canvas{display:block;width:100%;height:auto;aspect-ratio:4/5}.admin-header{gap:22px}.admin-login,.admin-stats,.admin-toolbar{display:grid;gap:12px}.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{display:grid;gap:4px;border:2.5px solid var(--border);border-radius:var(--radius-sm);padding:16px;background:var(--white);box-shadow:var(--shadow-sticker-sm)}.stat-card span{color:var(--purple);font-family:var(--font-mono);font-size:1.8rem;font-weight:700;line-height:1}.stat-card strong{font-size:.85rem}.submission-card{gap:14px}.submission-grid,.submission-top{display:grid;gap:12px}.submission-grid{grid-template-columns:minmax(0,1fr)}.submission-grid>div{display:grid;gap:2px;min-width:0}.submission-grid strong{overflow-wrap:anywhere}.submission-grid .label{color:var(--muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.admin-actions{display:flex;flex-wrap:wrap;gap:10px}.admin-actions .button{min-height:42px;padding:8px 14px;font-size:.86rem}.mascot{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2.5px solid var(--border);background:var(--amber-soft);font-size:1.4rem;flex-shrink:0}.mascot,.speech-bubble{box-shadow:var(--shadow-sticker-sm)}.speech-bubble{position:relative;display:inline-block;border:2px solid var(--border);border-radius:12px;padding:6px 12px;background:var(--white);color:var(--ink);font-size:.74rem;font-weight:700;max-width:180px}.text-center{text-align:center}.rotate-l1{transform:rotate(-2deg)}.rotate-l2{transform:rotate(-4deg)}.rotate-r1{transform:rotate(2deg)}.rotate-r2{transform:rotate(4deg)}@media(max-width:520px){.page{padding:10px 10px 30px}.panel{padding:18px}.headline{font-size:2rem}.compact-headline,.question-title{font-size:1.35rem}.subhead{font-size:.92rem}.button{width:100%}.button-row .button{width:auto}.answer{min-height:64px;padding:13px 14px;font-size:.9rem}.score-row{grid-template-columns:minmax(0,1fr) 30px}.score-label{grid-column:1/-1}.score-track{grid-column:1}}@media(min-width:760px){.shell{width:min(640px,100%)}.page{padding:30px 22px 48px}.panel{padding:28px}.headline{font-size:2.8rem}.compact-headline,.question-title{font-size:1.9rem}.result-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .button,.form-grid .checkbox,.form-grid .error,.form-grid .field-full,.form-grid .success{grid-column:1/-1}.admin-login{grid-template-columns:minmax(280px,1fr) auto;align-items:end}.admin-toolbar{grid-template-columns:minmax(220px,1fr) auto auto auto;align-items:end}.admin-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.submission-top{grid-template-columns:minmax(0,1fr) auto;align-items:start}.submission-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:1080px){.headline{font-size:3.2rem}}@media(prefers-reduced-motion:reduce){.avatar-emoji,.loading-avatar,.progress-segments .seg.current:after{animation:none}}