:root{--surface:#faf9f7;--surface-container:#fff;--surface-container-low:#f4f3f1;--surface-container-highest:#e3e2e0;--ink:#171717;--muted:#6f6b65;--muted-strong:#5f5a54;--focus-ring:#ffc23d;--on-surface-variant:#3d4947;--outline:#6d7a77;--outline-variant:#bcc9c6;--border-soft:#e9e3db;--primary:#00685e;--primary-container:#008377;--secondary-container:#ffc23d;--card:#fff;--radius-panel:16px;--ease-out:cubic-bezier(.16, 1, .3, 1);--text-xs:.82rem;--text-sm:.94rem;--text-base:1rem;--text-lead:1.08rem;--text-subhead:1.42rem;--text-display:clamp(2.35rem, 8vw, 3.8rem);color:var(--ink);background:var(--surface);font-synthesis:none;font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizelegibility;font-family:Noto Sans Thai,Sukhumvit Set,Be Vietnam Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{font:inherit}button:disabled{cursor:not-allowed;opacity:.42}h1,h2,h3,p{overflow-wrap:anywhere}.hero-shell,.quiz-shell,.result-shell{min-height:100vh;padding:0 24px 56px}.hero-shell,.quiz-shell{padding-top:52px}.hero,.quiz-shell,.result-shell{max-width:600px;margin-inline:auto}.hero{text-align:center;flex-direction:column;align-items:center;gap:42px;display:flex}.hero-poster{border-radius:48px;width:min(100%,360px);overflow:hidden}.hero-poster img{width:100%;height:auto;display:block}.hero-copy h2{font-size:var(--text-display);text-wrap:balance;margin:0;font-weight:800;line-height:1.08}.hero-lead{color:var(--muted-strong);font-size:var(--text-lead);text-wrap:pretty;max-width:430px;margin:10px auto 0;font-weight:600;line-height:1.58}.hero-actions,.result-actions{flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;margin-top:32px;display:flex}.hero-actions span{color:var(--muted);font-size:var(--text-sm);margin-top:8px;font-weight:700}.primary-button,.ghost-button{cursor:pointer;font-size:var(--text-base);min-height:64px;transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);border-radius:999px;padding:13px 28px;font-weight:700}.primary-button{background:var(--primary);border:1px solid var(--primary);color:#fff;min-width:min(100%,520px)}.ghost-button{background:var(--surface-container);border:1px solid var(--primary);color:var(--primary);min-width:min(100%,520px)}.disclaimer{color:var(--muted);font-size:var(--text-sm);text-align:center;width:100%;max-width:560px;margin:56px auto 0;font-weight:600;line-height:1.65}.topbar{justify-content:space-between;align-items:center;margin:0 auto 6px;display:flex}.topbar span{color:var(--primary);font-weight:800}.progress-track{background:#8f9693;border-radius:999px;height:7px;margin:0 0 52px;overflow:hidden}.progress-fill{background:var(--primary-container);height:100%}.question-panel{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--radius-panel);text-align:center;padding:clamp(26px,5vw,52px)}.question-panel h2{font-size:var(--text-subhead);text-wrap:balance;max-width:480px;margin:0 auto 28px;font-weight:800;line-height:1.34}.choices{gap:12px;display:grid}.choice-button{background:var(--surface-container);border:1px solid var(--border-soft);color:var(--ink);cursor:pointer;font-size:var(--text-base);text-align:center;min-height:68px;transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);border-radius:999px;padding:19px 24px;font-weight:700;line-height:1.46;display:block}.choice-button:hover,.choice-button:focus-visible,.choice-button[aria-pressed=true]{background:var(--surface-container);border-color:var(--ink);outline:none}.choice-button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}.next-button{min-width:160px;min-height:58px;margin-top:28px;margin-left:auto}.plain-back-button{color:var(--muted);cursor:pointer;transition:color .18s var(--ease-out), transform .18s var(--ease-out);background:0 0;border:0;margin:28px auto 0;padding:10px;font-weight:700;display:block}.result-shell{gap:28px;padding-top:54px;display:grid}.result-hero{text-align:center}.result-illustration{aspect-ratio:1;justify-content:center;align-items:end;max-width:340px;margin:0 auto 30px;display:flex}.result-illustration img{object-fit:contain;object-position:center bottom;width:auto;max-width:90%;height:94%}.result-title-row h2{color:var(--winner-color);text-underline-offset:10px;margin:0;font-size:clamp(2.4rem,8vw,4rem);font-weight:800;line-height:1.05;text-decoration:underline;text-decoration-thickness:5px}.result-title-row p{color:var(--muted);max-width:460px;margin:22px auto 0;font-size:1.02rem;font-weight:700;line-height:1.7}.result-summary{text-align:center}.result-summary h2{margin:0 0 12px;font-size:1rem;font-weight:800}.result-summary p{color:var(--muted);max-width:520px;margin:0 auto;line-height:1.7}@media (hover:hover){.primary-button:not(:disabled):hover{background:#00584f;border-color:#00584f;transform:translateY(-1px)}.ghost-button:not(:disabled):hover{background:#eff7f5;transform:translateY(-1px)}.choice-button:hover{transform:translateY(-1px)}.plain-back-button:hover{color:var(--ink)}}.primary-button:focus-visible,.ghost-button:focus-visible,.plain-back-button:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-ring) 42%, transparent);outline:2px solid var(--primary);outline-offset:3px}.primary-button:not(:disabled):active,.ghost-button:not(:disabled):active,.choice-button:active,.plain-back-button:active{transform:translateY(1px)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}@media (width<=620px){:root{--text-sm:.9rem;--text-lead:1rem;--text-subhead:1.38rem;--text-display:clamp(2.15rem, 10vw, 3.15rem)}.hero-shell,.quiz-shell,.result-shell{padding:0 20px 40px}.hero-shell{padding-top:24px}.quiz-shell{padding-top:34px}.result-shell{padding-top:38px}.hero{gap:26px}.hero-poster{border-radius:38px;width:min(100%,310px)}.hero-actions{margin-top:26px}.disclaimer{margin-top:44px;font-size:.86rem;line-height:1.55}.progress-track{margin-bottom:28px}.question-panel{padding:24px 18px 28px}.question-panel h2{margin-bottom:24px}.choice-button{min-height:64px;padding:16px 20px;font-weight:700}}