:root{--ink:#171717;--paper:#f7f3ea;--muted:#6e6a62;--line:rgba(23,23,23,.13);--accent:#ffcf45;--card:rgba(255,255,255,.42)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font:1.0625rem/1.5 ui-rounded,"Trebuchet MS",system-ui,sans-serif;display:flex;flex-direction:column;overflow-x:hidden;background-image:radial-gradient(rgba(23,23,23,.075) 1px,transparent 1px);background-size:24px 24px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,207,69,.12),transparent 34%,rgba(255,145,77,.07) 72%,transparent);z-index:-1}
.top{padding:max(1rem,env(safe-area-inset-top)) 1.25rem 0;max-width:56rem;width:min(100% - 32px,56rem);margin:0 auto}
.brand{font-weight:950;font-size:1.75rem;letter-spacing:-.08em;color:var(--ink);text-decoration:none;padding:.5rem 0;display:inline-block}
.brand:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
main{flex:1;width:min(100% - 32px,56rem);margin:0 auto;padding:clamp(2rem,6vw,4.5rem) 0 max(2rem,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:1.25rem}
h1,h2{margin:0;font-size:clamp(2.75rem,12vw,5.5rem);line-height:.88;letter-spacing:-.075em;font-weight:950}
h2{font-size:clamp(2.25rem,9vw,3.75rem)}
.lede{font-size:clamp(1.2rem,3vw,1.55rem);line-height:1.4;margin:0;color:#555149}.hint,.review{margin:0;color:var(--muted)}.big{margin:0;font-size:clamp(2.5rem,10vw,4rem);font-weight:950;letter-spacing:-.06em;line-height:.95}
.prompt{margin:0;font-weight:900;font-size:clamp(1.05rem,2vw,1.25rem)}
.menu{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.btn{font:inherit;font-weight:900;color:var(--ink);background:rgba(255,255,255,.5);border:1.5px solid var(--ink);border-radius:14px;min-height:3.5rem;padding:.75rem 1.25rem;cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .16s,box-shadow .16s,background .16s;touch-action:manipulation;overflow-wrap:anywhere}
.btn.primary{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--accent)}.btn.alt{background:var(--accent)}
.btn:hover{transform:translate(-2px,-2px)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible,.brand:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.stats{display:flex;gap:.75rem;margin:0}
.stat{flex:1;border:1.5px solid var(--line);border-radius:18px;padding:.65rem .8rem;background:rgba(255,255,255,.42)}
.stat dt{font-size:.85rem;font-weight:800;color:var(--muted)}.stat dd{margin:0;font-size:1.75rem;font-weight:950;font-variant-numeric:tabular-nums;line-height:1.2}
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.choice{min-height:5.5rem;font-size:clamp(1.35rem,6vw,2.6rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.55)}
.grid.numbers .choice{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:-.05em}
@media (min-width:40rem){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.choice{min-height:7rem}}
@media (min-width:80rem){body{font-size:1.1875rem}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn:hover,.btn:active{transform:none}}