@font-face{font-family:Rubik;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/rubik-regular.woff2)format("woff2")}@font-face{font-family:Rubik;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/rubik-medium.woff2)format("woff2")}@font-face{font-family:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rubik-bold.woff2)format("woff2")}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/roboto-mono-medium.woff2)format("woff2")}:root{--tc-aqua:#16d6c7;--tc-topaz:#00bac2;--tc-pacific:#17a6b2;--tc-teal:#027f9e;--tc-eggplant:#291a3f;--tc-plum:#361e5b;--tc-violet:#6638f2;--tc-ghost:#f7f9fd;--tc-mist:#e7eafb;--tc-fog:#c3c7e6;--surface:#081a2e;--surface-raised:#0e2a47;--cream:var(--tc-ghost);--teal:var(--tc-aqua);--purple:var(--tc-violet);--slate:var(--tc-fog);--green:#3bb273;--orange:#e8833a;--red:#e05263;--amber:#f4b942;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--ring:0 0 0 3px #16d6c7b3;--ease:.22s cubic-bezier(.2, .7, .3, 1);--font:"Rubik", system-ui, -apple-system, Arial, sans-serif;--mono:"Roboto Mono", ui-monospace, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1200px 600px at 50% -10%, #14375c 0%, transparent 60%), var(--surface);min-height:100vh;color:var(--cream);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}.app{max-width:1100px;padding:var(--space-5) var(--space-4) var(--space-6);gap:var(--space-5);flex-direction:column;margin:0 auto;display:flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.topbar{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.brand{align-items:center;gap:var(--space-3);display:flex}.brand-mark{flex:none;width:36px;height:40px;display:block}.brand h1{letter-spacing:-.02em;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;margin:0;font-size:clamp(1.15rem,3.2vw,1.6rem);display:flex}.brand em{color:var(--slate);font-size:.62em;font-style:normal;font-weight:400}.levelnav{gap:var(--space-2);flex-wrap:wrap;margin-left:auto;display:flex}.levelnav button{font:inherit;color:var(--cream);padding:var(--space-1) var(--space-3);cursor:pointer;transition:background var(--ease), border-color var(--ease), transform var(--ease);background:#ffffff0f;border:1px solid #ffffff24;border-radius:999px;font-size:.82rem}.levelnav button:hover:not(:disabled){background:#ffffff21;transform:translateY(-1px)}.levelnav button[aria-current=true]{background:var(--teal);border-color:var(--teal);color:var(--surface);font-weight:500}.levelnav button:disabled{opacity:.4;cursor:not-allowed}.icon-btn{font:inherit;width:34px;height:34px;color:var(--cream);cursor:pointer;transition:background var(--ease);background:#ffffff0f;border:1px solid #ffffff24;border-radius:50%;place-items:center;display:grid}.icon-btn:hover{background:#ffffff21}.icon-btn[aria-pressed=false]{opacity:.45}:where(button,a,canvas):focus-visible{box-shadow:var(--ring);border-radius:var(--radius-sm);outline:none}.stage{aspect-ratio:16/9;background:var(--surface-raised);border-radius:var(--radius-lg);border:1px solid #ffffff1f;width:100%;position:relative;overflow:hidden;box-shadow:0 24px 60px #00000073;container-type:inline-size}.stage canvas{touch-action:manipulation;width:100%;height:100%;display:block}.hud{pointer-events:none;align-items:center;gap:1.2cqi;display:flex;position:absolute;inset:1.7cqi 1.7cqi auto}.hud-spacer{flex:1}.pill{letter-spacing:.04em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#081a2ee6;border:1px solid #ffffff29;border-radius:999px;padding:.55cqi 1.5cqi;font-size:1.3cqi;font-weight:600}.pill-level{color:var(--teal)}.pill-lives{color:var(--red);letter-spacing:.1em}.overlay{padding:var(--space-5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;background:#081a2eeb;place-items:safe center center;display:grid;position:absolute;inset:0;overflow-y:auto}.overlay[hidden]{display:none}.card{gap:var(--space-3);flex-direction:column;align-items:center;max-width:560px;display:flex}.card h2{letter-spacing:-.02em;margin:0;font-size:clamp(1.3rem,4vw,2rem)}.card .eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:0;font-size:.74rem}.card p{color:var(--tc-mist);margin:0;font-size:clamp(.88rem,2.4vw,1rem)}.card p.small{color:var(--slate);font-size:.82rem}.card .takeaway{border-left:3px solid var(--amber);padding-left:var(--space-3);text-align:left;color:var(--amber);font-size:.88rem}.card .stats{gap:var(--space-5);margin:var(--space-1) 0;flex-wrap:wrap;justify-content:center;display:flex}.card .stats div{flex-direction:column;display:flex}.card .stats b{font-size:1.5rem;line-height:1.1}.card .stats span{letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-size:.7rem}.btn{font:inherit;color:var(--cream);background:var(--tc-violet);padding:var(--space-3) var(--space-5);cursor:pointer;transition:transform var(--ease), filter var(--ease);border:0;border-radius:999px;font-weight:500}.btn:hover{background:var(--tc-aqua);color:var(--surface);transform:translateY(-2px)}.btn.ghost{color:var(--cream);background:0 0;border:1px solid #ffffff47}.btn.ghost:hover{color:var(--cream);background:#ffffff1a}.btn-row{gap:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.touchbar{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.touchbar[hidden]{display:none}.touchbar button{font:inherit;color:var(--cream);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#ffffff14;border:1px solid #ffffff2e;min-width:74px;font-size:.85rem;font-weight:600}.touchbar button:active{background:var(--teal);color:var(--surface)}.howto h2{letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin:0 0 var(--space-3);font-size:.78rem}.howto-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.howto-grid article{border-radius:var(--radius-md);padding:var(--space-4);background:#ffffff0d;border:1px solid #ffffff1a}.howto-grid h3{margin:0 0 var(--space-2);font-size:.95rem}.howto-grid h3 span{color:var(--teal)}.howto-grid p{color:var(--tc-mist);margin:0;font-size:.85rem}.howto-grid article[data-locked=true]{opacity:.5}.keys{color:var(--slate);margin:var(--space-4) 0 0;font-size:.82rem}kbd{font-family:var(--mono);border-radius:var(--radius-sm);background:#ffffff1a;border:1px solid #fff3;border-bottom-width:2px;margin:0 2px;padding:1px 6px;font-size:.78rem}footer{color:var(--slate);text-align:center;font-size:.8rem}footer a{color:var(--teal)}@media (width<=620px){.app{padding:var(--space-4) var(--space-3) var(--space-5);gap:var(--space-4)}.levelnav{width:100%;margin-left:0}.levelnav button{flex:1}}.rotate-hint{display:none}@media (orientation:portrait) and (width<=620px){.stage:has(.overlay:not([hidden])){min-height:360px}.rotate-hint{text-align:center;color:var(--slate);margin:0;font-size:.8rem;display:block}}@media (orientation:landscape) and (height<=620px){.app{padding:var(--space-3) var(--space-4) var(--space-4);gap:var(--space-3)}.brand h1{font-size:1rem}.brand em{display:none}.topbar{gap:var(--space-3);flex-wrap:nowrap}.levelnav{scrollbar-width:none;flex-wrap:nowrap;min-width:0;overflow-x:auto}.levelnav button{white-space:nowrap;flex:none}.icon-btn{flex:none}main{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.stage{width:min(100%,177.778dvh - 199.111px);height:auto;margin-inline:auto}.touchbar{flex-flow:column}.touchbar button{min-width:88px;padding:var(--space-2) var(--space-3)}.howto{flex-basis:100%}}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}.btn:hover,.levelnav button:hover{transform:none}}