:root{--ink:#e6ebf5;--ink-dim:#93a0bb;--ink-faint:#5c6785;--accent-cyan:#38bdf8;--accent-indigo:#818cf8;--accent-violet:#c084fc;--success:#34d399;--danger:#f87171;--panel:#0f1428;--panel-edge:#94a3b824}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);isolation:isolate;background:#05070f;margin:0;padding:2.5rem 1.25rem 4rem;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;position:relative;overflow-x:hidden}.bg-fx{z-index:-1;background:radial-gradient(38rem 26rem at 12% -6%,#38bdf829,#0000 60%),radial-gradient(34rem 30rem at 108% 12%,#c084fc24,#0000 60%),radial-gradient(46rem 40rem at 50% 118%,#818cf81f,#0000 60%),linear-gradient(#070a16 0%,#05060f 55%,#030408 100%);position:fixed;inset:0}.bg-fx:after{content:"";background-image:linear-gradient(#94a3b80d 1px,#0000 1px),linear-gradient(90deg,#94a3b80d 1px,#0000 1px);background-size:2.5rem 2.5rem;position:absolute;inset:0;mask-image:radial-gradient(60% 60% at 50% 30%,#000,#0000 85%)}header{max-width:40rem;margin:0 auto 1.5rem}nav{align-items:center;display:flex}.brand{color:var(--ink);letter-spacing:.01em;border:1px solid var(--panel-edge);background:#ffffff08;border-radius:999px;align-items:center;gap:.6rem;padding:.4rem .9rem .4rem .5rem;font-weight:700;text-decoration:none;transition:border-color .2s,background .2s;display:inline-flex}.brand:hover{background:#818cf814;border-color:#818cf880}.brand-mark{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));border-radius:.5rem;width:1.4rem;height:1.4rem;box-shadow:0 0 .9rem #818cf88c}main{max-width:40rem;margin:0 auto}a{color:var(--accent-cyan)}.game-shell{background:linear-gradient(165deg, #ffffff0d, #fff0 40%), var(--panel);border:1px solid var(--panel-edge);border-radius:1.75rem;padding:2rem 2rem 1.75rem;position:relative;box-shadow:0 1.5rem 3.5rem -1.5rem #000000b3,inset 0 0 0 1px #0000004d,inset 0 1px #ffffff0f}.game-shell:before{content:"";background:linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-violet), transparent);opacity:.8;border-radius:999px;height:2px;position:absolute;top:0;left:8%;right:8%}h1{letter-spacing:-.01em;background:linear-gradient(120deg, #f8fafc, var(--accent-cyan) 55%, var(--accent-violet));color:#0000;text-shadow:0 0 2.5rem #818cf840;background-clip:text;margin:.25rem 0 .35rem;font-size:clamp(1.9rem,1.6rem + 1.4vw,2.5rem);font-weight:800}.tagline{color:var(--ink-dim);max-width:34rem;margin:0 0 1.5rem;font-size:.95rem}#hud{gap:.75rem;margin-bottom:1.1rem;display:flex}.hud-chip{border:1px solid var(--panel-edge);background:#ffffff09;border-radius:.9rem;align-items:baseline;gap:.55rem;padding:.55rem 1rem;display:flex;box-shadow:inset 0 1px #ffffff0d}.hud-chip--level{flex:auto}.hud-chip-label{letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-size:.68rem;font-weight:700}#level-label,#timer{font-variant-numeric:tabular-nums;color:var(--ink);font-size:1rem;font-weight:700}.level-dots{gap:.3rem;margin-left:.35rem;display:inline-flex}.level-dot{background:#94a3b840;border-radius:999px;width:.4rem;height:.4rem;transition:background .3s,box-shadow .3s}#hud[data-level="0"] .level-dot:first-child,#hud[data-level="1"] .level-dot:first-child,#hud[data-level="1"] .level-dot:nth-child(2),#hud[data-level="2"] .level-dot:first-child,#hud[data-level="2"] .level-dot:nth-child(2),#hud[data-level="2"] .level-dot:nth-child(3){background:linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));box-shadow:0 0 .5rem #818cf8b3}.board-frame{background-image:radial-gradient(circle at 35% 30%,#cbd5e1,#475569 70%,#1e293b),radial-gradient(circle at 35% 30%,#cbd5e1,#475569 70%,#1e293b),radial-gradient(circle at 35% 30%,#cbd5e1,#475569 70%,#1e293b),radial-gradient(circle at 35% 30%,#cbd5e1,#475569 70%,#1e293b),linear-gradient(160deg,#1c2440,#0a0e1c);background-position:.4rem .4rem,calc(100% - .95rem) .4rem,.4rem calc(100% - .95rem),calc(100% - .95rem) calc(100% - .95rem),0 0;background-repeat:no-repeat;background-size:.55rem .55rem,.55rem .55rem,.55rem .55rem,.55rem .55rem,auto;border:1px solid #ffffff14;border-radius:1.15rem;padding:.6rem;transition:box-shadow .25s;position:relative;box-shadow:inset 0 1px #ffffff14,0 .75rem 2rem -1rem #000c}.game-shell:has(#board[data-state=running]) .board-frame{box-shadow:inset 0 1px #ffffff14,0 .75rem 2rem -1rem #000c,0 0 0 3px #38bdf840,0 0 2.5rem #38bdf840}.game-shell:has(#board[data-state=lost]) .board-frame{animation:.32s shake;box-shadow:inset 0 1px #ffffff14,0 .75rem 2rem -1rem #000c,0 0 0 3px #f8717159}.game-shell:has(#board[data-state=won]) .board-frame{box-shadow:inset 0 1px #ffffff14,0 .75rem 2rem -1rem #000c,0 0 0 3px #34d39959,0 0 2.5rem #34d39940}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-.35rem)}40%{transform:translate(.3rem)}60%{transform:translate(-.2rem)}80%{transform:translate(.15rem)}}#board{aspect-ratio:5/3;touch-action:none;cursor:crosshair;border-radius:.75rem;width:100%;display:block;overflow:hidden}.board-bg{filter:none}.board-grid{pointer-events:none}#track{stroke:url(#trackGradient);stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .1rem .15rem #00000073)}.track-glow{fill:none;stroke:#a78bfa;stroke-linecap:round;stroke-linejoin:round;opacity:.5;filter:blur(2.6px);pointer-events:none}#bead{fill:url(#beadGradient);cursor:grab;filter:drop-shadow(0 .15rem .2rem #02061799)drop-shadow(0 0 .35rem #38bdf8d9)drop-shadow(0 0 .9rem #38bdf873);animation:1.4s ease-in-out infinite pulse}.bead-glow{fill:#38bdf8;opacity:.4;filter:blur(4px);pointer-events:none}#board[data-state=running] #bead{cursor:grabbing;animation:none}#board[data-state=won] #bead{fill:#1f9d55}#board[data-state=won] .bead-glow{fill:var(--success);opacity:.55}#board[data-state=lost] #bead{fill:#d64545;animation:none}#board[data-state=lost] .bead-glow{fill:var(--danger);opacity:.55}#end-dot{fill:#fbbf24;filter:drop-shadow(0 0 .3rem #fbbf24bf)}.end-ring{fill:none;stroke:#fbbf24;stroke-width:.6px;transform-box:fill-box;transform-origin:50%;pointer-events:none;animation:2.2s ease-out infinite radar}.end-ring--inner{animation-delay:1.1s}@keyframes radar{0%{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}#board[data-state=won] #end-dot{fill:var(--success);filter:drop-shadow(0 0 .4rem #34d399d9)}#board[data-state=won] .end-ring{stroke:var(--success)}@keyframes pulse{0%,to{r:2.5;opacity:1}50%{r:4;opacity:.6}}#status{text-align:center;border:1px solid var(--panel-edge);max-width:24rem;color:var(--ink);opacity:1;visibility:visible;background:#ffffff0a;border-radius:.75rem;margin:1.1rem auto 0;padding:.55rem 1rem;font-weight:700;transition:opacity .25s,transform .25s;transform:translateY(0)}#status:empty{opacity:0;visibility:hidden;border:0;margin-top:0;padding-block:0;transform:translateY(-.25rem)}.game-shell:has(#board[data-state=won]) #status{color:var(--success);background:#34d3991a;border-color:#34d39966}.game-shell:has(#board[data-state=lost]) #status{color:var(--danger);background:#f871711a;border-color:#f8717166}.hint{text-align:center;color:var(--ink-faint);margin:.85rem 0 0;font-size:.85rem}@media (prefers-reduced-motion:reduce){#bead,.end-ring,.board-frame{animation:none!important}}