:root{--surface:#faf9f7;--surface-container:#fff;--surface-container-low:#f4f3f1;--surface-container-highest:#e3e2e0;--ink:#171717;--muted:#6f6b65;--on-surface-variant:#3d4947;--outline:#6d7a77;--outline-variant:#bcc9c6;--border-soft:#e9e3db;--primary:#00685e;--primary-container:#008377;--secondary-container:#ffc23d;--card:#fff;color:var(--ink);background:var(--surface);font-synthesis:none;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{padding-top:52px}.site-header{border-bottom:1px solid var(--border-soft);text-align:center;justify-content:center;align-items:center;min-height:120px;margin:0 -24px 48px;padding:18px 24px;display:flex}.site-header h1{margin:0;font-size:clamp(2.65rem,7vw,4.25rem);font-weight:800;line-height:1.1}.hero,.quiz-shell,.result-shell{max-width:600px;margin-inline:auto}.hero{text-align:center;flex-direction:column;align-items:center;gap:50px;display:flex}.hero-poster{border-radius:48px;width:min(100%,360px);overflow:hidden}.hero-poster img{width:100%;display:block}.hero-copy h2{margin:0;font-size:clamp(2.8rem,7vw,4rem);font-weight:900;line-height:1.1}.hero-lead{color:var(--muted);max-width:430px;margin:12px auto 0;font-size:clamp(1.08rem,2.2vw,1.2rem);font-weight:600;line-height:1.75}.hero-actions,.result-actions{flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;margin-top:36px;display:flex}.hero-actions span{color:var(--muted);margin-top:12px;font-size:.95rem;font-weight:700}.primary-button,.ghost-button{cursor:pointer;border-radius:999px;min-height:64px;padding:13px 28px;font-size:1rem;font-weight:700}.primary-button{background:var(--primary-container);border:1px solid var(--primary);color:#fff;min-width:min(100%,520px)}.ghost-button{border:1px solid var(--primary);color:var(--primary);background:#fff;min-width:min(100%,520px)}.disclaimer{color:#8a847d;text-align:center;width:100%;max-width:560px;margin:74px auto 0;font-size:.9rem;font-weight:600;line-height:1.75}.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);text-align:center;border-radius:32px;padding:clamp(26px,5vw,52px)}.question-panel h2{max-width:480px;margin:0 auto 28px;font-size:clamp(1.45rem,4vw,2rem);font-weight:800;line-height:1.35}.choices{gap:12px;display:grid}.choice-button{border:1px solid var(--border-soft);color:var(--ink);cursor:pointer;text-align:center;background:#fff;border-radius:999px;min-height:68px;padding:19px 24px;font-size:1rem;font-weight:800;line-height:1.5;display:block}.choice-button:hover,.choice-button:focus-visible,.choice-button[aria-pressed=true]{background:color-mix(in srgb, var(--choice-color) 10%, #fff);border-color:color-mix(in srgb, var(--choice-color) 78%, #000);outline:none}.next-button{min-width:160px;min-height:58px;margin-top:28px;margin-left:auto}.plain-back-button{color:var(--muted);cursor:pointer;background:0 0;border:0;margin:28px auto 0;padding:10px;font-weight:700;display:block}.result-shell{gap:28px;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;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.8}@media (width<=620px){.hero-shell,.quiz-shell,.result-shell{padding:0 20px 40px}.site-header{min-height:96px;margin:0 -20px 34px}.hero-shell{padding-top:28px}.hero{gap:34px}.progress-track{margin-bottom:28px}.question-panel{padding:24px 18px 28px}}