@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--canvas:#0B0D12;--surface:#181C24;--raised:#252B36;--ink:#F7F8FA;--muted:#B5BDCB;--divider:#384150;--boundary:#8995A8;
--positive:#8FDCB8;--caution:#F1D28B;--action:#F7F8FA;--on-action:#11151D;--action-pressed:#DDE3EB;--focus:#7AB8EA;
--yes:#8FDCB8;--no:#FF985E;--radius-card:20px;--radius-choice:16px}
@media (prefers-color-scheme: light){:root{--canvas:#F2F4F7;--surface:#FFFFFF;--raised:#E3E7ED;--ink:#11151D;--muted:#4C586B;
--divider:#CED5DF;--boundary:#647186;--positive:#245C43;--caution:#75550B;--action:#11151D;--on-action:#FFFFFF;--action-pressed:#252B36;
--focus:#1B4E9B;--yes:#245C43;--no:#A03A17}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--canvas);color:var(--ink);
font:400 17px/1.5 "Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background-image:radial-gradient(120% 60% at 50% -10%,rgba(143,220,184,.10),transparent 60%)}
.shell{max-width:480px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
.top{display:flex;justify-content:center;padding:12px 0 22px}
.top img{display:block;height:34px;width:auto}
.card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius-card);padding:24px 20px}
.eyebrow{margin:0 0 6px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--positive)}
h1{margin:0 0 18px;font:400 34px/1.05 "Anton",Impact,"Arial Narrow",sans-serif;letter-spacing:.01em;text-transform:uppercase}
fieldset{border:0;margin:0 0 16px;padding:0;display:grid;gap:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.choice{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;border-radius:var(--radius-choice);
background:var(--raised);border:2px solid transparent;cursor:pointer;transition:border-color .15s,background .15s}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice .mark{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--boundary);display:grid;place-items:center}
.choice-text{display:grid;line-height:1.25}
.choice-text strong{font-size:18px;font-weight:700}
.choice-text span{font-size:14px;color:var(--muted)}
.choice-yes:has(input:checked){border-color:var(--yes)}
.choice-yes:has(input:checked) .mark{border-color:var(--yes);background:var(--yes)}
.choice-yes:has(input:checked) .mark::after{content:"";width:10px;height:6px;border:solid var(--on-action);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)}
.choice-no:has(input:checked){border-color:var(--no)}
.choice-no:has(input:checked) .mark{border-color:var(--no);background:var(--no)}
.choice-no:has(input:checked) .mark::after{content:"";width:12px;height:2.5px;background:var(--on-action)}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.choice:has(input:disabled){opacity:.6;cursor:default}
button{width:100%;min-height:56px;border:0;border-radius:999px;background:var(--action);color:var(--on-action);
font:700 18px/1 "Hanken Grotesk",-apple-system,sans-serif;cursor:pointer;transition:background .15s,transform .05s}
button:active{background:var(--action-pressed);transform:scale(.99)}
button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button:disabled{opacity:.6;cursor:default}
#status{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--raised);color:var(--ink);font-size:16px}
#status:empty{display:none}
#status.error{background:transparent;border:1px solid var(--caution);color:var(--caution)}
#status.done{background:transparent;border:1px solid var(--positive);color:var(--positive);font-weight:600}
.app{margin:14px 0 0;text-align:center}
.app a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.meta,.note{margin:14px 0 0;font-size:14px;color:var(--muted);text-align:center}
footer{margin:18px 8px 0;font-size:13px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}