@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/bricolage-grotesque-vietnamese-wdth-normal-BKE08zty.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/bricolage-grotesque-latin-ext-wdth-normal-DoS1gVTC.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/bricolage-grotesque-latin-wdth-normal-Dtb2a5nO.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ground: #1a1c23;--raised: #242731;--line: #3a3e4b;--text: #ecebe6;--muted: #a3a5b0;--tile: #e9e5d9;--tile-ink: #171a20;--pressed: #0d0e12;--focus: #9db8f4;--yellow: #f2d15b;--green: #86c46f;--blue: #8fb0f0;--purple: #b98ad6;--gap: .5rem;--radius: .75rem;--tile-height: 4.5rem;font-family:Bricolage Grotesque Variable,system-ui,sans-serif;color:var(--text);background-color:var(--ground);color-scheme:dark;line-height:1.4;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--ground);display:flex;justify-content:center}#app{width:100%;max-width:30rem;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1.5rem,env(safe-area-inset-bottom))}h1,h2,p{margin:0}.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}h1{font-size:2rem;font-weight:800;font-stretch:85%;letter-spacing:-.01em;line-height:1.1}.puzzle-no{color:var(--muted);font-size:.95rem;font-variant-numeric:tabular-nums}.lede{margin:.25rem 0 0;color:var(--muted)}.masthead,.lede{margin-bottom:0}.masthead+.board,.lede+.board{margin-top:1rem}.technical{margin-top:1rem;color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}.board{display:grid;gap:var(--gap);position:relative}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}.tile{min-height:var(--tile-height);padding:.5rem .4rem;border:0;border-radius:var(--radius);background:var(--tile);color:var(--tile-ink);font:inherit;font-size:clamp(.8rem,3.6vw,1.05rem);font-weight:700;font-stretch:78%;line-height:1.1;text-wrap:balance;overflow-wrap:anywhere;cursor:pointer;transition:background-color .12s,color .12s,transform .12s}.tile:hover:not(:disabled):not(.selected){background:#f4f1e8}.tile.selected{background:var(--pressed);color:var(--tile);box-shadow:inset 0 0 0 2px var(--tile);transform:translateY(1px)}.tile:disabled{cursor:default}.group{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--tile-height);padding:.5rem .75rem;border-radius:var(--radius);color:var(--tile-ink);text-align:center}.group h2{font-size:1rem;font-weight:800;font-stretch:90%}.group p{font-size:.9rem;font-weight:500;font-stretch:85%}.group.yellow{background:var(--yellow)}.group.green{background:var(--green)}.group.blue{background:var(--blue)}.group.purple{background:var(--purple)}.toast{width:fit-content;min-height:2rem;margin:.75rem auto 0;padding:.3rem .9rem;border-radius:999px;background:var(--text);color:var(--ground);font-weight:700;font-size:.95rem;opacity:0;transition:opacity .15s}.toast.visible{opacity:1}.status{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.5rem;color:var(--muted);font-size:.95rem}.dots{display:inline-flex;gap:.4rem}.dot{width:.75rem;height:.75rem;border-radius:50%;background:var(--text);transition:background-color .2s,transform .2s}.dot.spent{background:transparent;box-shadow:inset 0 0 0 2px var(--line);transform:scale(.85)}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);margin-top:1rem}.btn{padding:.7rem 1.2rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-weight:700;cursor:pointer;transition:background-color .12s,opacity .12s}.btn:hover:not(:disabled){background:var(--raised)}.btn.primary{border-color:var(--text);background:var(--text);color:var(--ground)}.btn.primary:hover:not(:disabled){background:#fff}.btn:disabled{opacity:.4;cursor:default}button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.finish{margin-top:1rem;padding:1.25rem 1rem;border-radius:var(--radius);background:var(--raised);text-align:center}.finish h2{font-size:1.3rem;font-weight:800;font-stretch:90%}.finish p{margin-top:.25rem;color:var(--muted)}.result{margin:1rem 0 .75rem;font:inherit;font-size:1.5rem;line-height:1.2;letter-spacing:.06em}.finish .note{font-size:.9rem}@keyframes settle{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}@keyframes shake{20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.group.reveal{animation:settle .32s cubic-bezier(.2,.8,.3,1)}.tile.shake{animation:shake .36s}@media (prefers-reduced-motion: reduce){.group.reveal,.tile.shake{animation:none}.tile,.dot,.toast{transition:none}}