:root{--ground:#071619;--ground-lift:#0d2429;--panel:#0f2a30;--channel:#1d3d44;--fluid:#ffb347;--fluid-hi:#ffe0a8;--fluid-glow:#ffb34780;--core:#fff4dc;--text:#bcd0cd;--text-dim:#5f817d;--bad:#e8674f;--line:#ffffff0f;--thin:#ffffff0e;--disp:"Space Grotesk", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}html,body{background:radial-gradient(120% 90% at 50% 20%, var(--ground-lift) 0%, var(--ground) 62%);min-height:100%;color:var(--text);font-family:var(--disp);-webkit-font-smoothing:antialiased;margin:0}#app{min-height:100vh}.stage{flex-direction:column;justify-content:center;align-items:center;gap:clamp(16px,3vh,30px);min-height:100vh;padding:26px 16px 38px;display:flex}.hud{letter-spacing:.04em;justify-content:space-between;align-items:baseline;width:min(92vw,560px);display:flex}.eyebrow{font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.22em;font-size:12px}.readout{font-family:var(--mono);color:var(--text);gap:20px;font-size:14px;display:flex}.readout .k{color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;margin-right:6px;font-size:11px}.hint{font-family:var(--mono);letter-spacing:.04em;color:var(--text-dim);height:16px;font-size:12px;transition:opacity .5s}.hint.gone{opacity:0}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.seg{border:1px solid var(--line);background:#ffffff05;border-radius:999px;display:inline-flex;overflow:hidden}.seg button{font-family:var(--mono);color:var(--text-dim);cursor:pointer;background:0 0;border:0;padding:8px 14px;font-size:13px;transition:color .2s,background .2s}.seg button[aria-pressed=true]{color:var(--ground);background:var(--fluid)}.seg button:not([aria-pressed=true]):hover{color:var(--text)}.btn{font-family:var(--mono);letter-spacing:.06em;color:var(--text);border:1px solid var(--line);cursor:pointer;background:#ffffff08;border-radius:999px;padding:9px 20px;font-size:13px;transition:border-color .2s,color .2s,background .2s}.btn:hover,.btn.primary{border-color:var(--fluid);color:var(--fluid)}.btn.primary:hover{background:var(--fluid);color:var(--ground)}.board-wrap{position:relative}.win{opacity:0;pointer-events:none;background:radial-gradient(closest-side,#07161999,#0000);flex-direction:column;justify-content:center;align-items:center;gap:6px;transition:opacity .5s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.win.show{opacity:1}.win .label{font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--fluid);font-size:12px}.win .time{font-family:var(--disp);color:var(--core);text-shadow:0 0 24px var(--fluid-glow);font-size:44px;font-weight:500}.run-rail{align-items:center;gap:8px;width:min(92vw,560px);display:flex}.run-pip{background:#ffffff14;border-radius:999px;flex:1;height:4px;position:relative;overflow:hidden}.run-pip.done{background:var(--fluid);box-shadow:0 0 8px var(--fluid-glow)}.run-pip.active:after{content:"";background:linear-gradient(90deg, var(--fluid), transparent);opacity:.5;animation:1.4s ease-in-out infinite railPulse;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes railPulse{0%,to{opacity:.25}50%{opacity:.6}}.brand{font-family:var(--disp);letter-spacing:.01em;color:var(--core);text-align:center;text-shadow:0 0 32px var(--fluid-glow);font-size:clamp(30px,7vw,52px);font-weight:600;line-height:1.05}.brand .of{color:var(--text-dim);font-weight:400}.tagline{font-family:var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);font-size:12px}.field{font-family:var(--mono);color:var(--text-dim);align-items:center;gap:10px;font-size:13px;display:flex}.field input{font-family:var(--mono);color:var(--text);border:1px solid var(--line);background:#ffffff08;border-radius:8px;width:160px;padding:8px 12px;font-size:14px}.field input:focus{border-color:var(--fluid);outline:none}.finish-total{font-family:var(--disp);color:var(--core);text-shadow:0 0 30px var(--fluid-glow);font-variant-numeric:tabular-nums;font-size:64px;font-weight:600}.splits{font-family:var(--mono);color:var(--text);flex-direction:column;gap:6px;min-width:220px;font-size:13px;display:flex}.splits .row{justify-content:space-between;display:flex}.splits .row .name{color:var(--text-dim)}@media (prefers-reduced-motion:reduce){.run-pip.active:after{animation:none}}.rn-board{aspect-ratio:1;gap:clamp(4px,1vw,8px);width:min(92vw,520px);transition:filter .5s;display:grid}.rn-tile{aspect-ratio:1;cursor:pointer;background:0 0;border:0;outline:none;padding:0;transition:transform .26s cubic-bezier(.34,1.42,.5,1);position:relative;transform:rotate(0)}.rn-tile:focus-visible .rn-cell{stroke:var(--fluid);stroke-opacity:.8}.rn-tile:hover .rn-cell{fill:#ffffff07}.rn-tile:active{transition-duration:.12s}.rn-tile svg{width:100%;height:100%;display:block;overflow:visible}.rn-cell{fill:#ffffff04;stroke:var(--line);stroke-width:1.5px;transition:fill .25s,stroke .25s}.rn-channel{fill:none;stroke:var(--channel);stroke-width:11px;stroke-linecap:round;stroke-linejoin:round}.rn-node{fill:var(--channel);transition:fill .3s}.rn-fluid,.rn-shimmer{fill:none;stroke-linecap:round;stroke-linejoin:round}.rn-fluid{stroke:var(--fluid);stroke-width:7px;opacity:0;filter:drop-shadow(0 0 5px var(--fluid-glow));transition:opacity .32s;transition-delay:calc(var(--d,0) * 45ms)}.rn-shimmer{stroke:var(--fluid-hi);stroke-width:3px;opacity:0;stroke-dasharray:14 26;transition:opacity .32s;transition-delay:calc(var(--d,0) * 45ms)}.rn-tile.lit .rn-fluid{opacity:1}.rn-tile.lit .rn-shimmer{opacity:.85;animation:2.4s linear infinite rnFlow}.rn-tile.lit .rn-node{fill:var(--fluid)}@keyframes rnFlow{to{stroke-dashoffset:-40px}}.rn-core-ring{fill:none;stroke:var(--fluid);stroke-width:2px;opacity:.5}.rn-core{fill:var(--core);filter:drop-shadow(0 0 8px var(--fluid-glow))}.rn-tile.source .rn-core{animation:3s ease-in-out infinite rnBreathe}@keyframes rnBreathe{0%,to{filter:drop-shadow(0 0 6px var(--fluid-glow))}50%{filter:drop-shadow(0 0 15px var(--fluid-glow))}}.rn-board.solved{filter:saturate(1.15)brightness(1.08)}.rn-board.solved .rn-tile.source .rn-core{animation:1.4s ease-out rnBurst}@keyframes rnBurst{0%{filter:drop-shadow(0 0 8px var(--fluid-glow))}30%{filter:drop-shadow(0 0 34px var(--fluid))}to{filter:drop-shadow(0 0 10px var(--fluid-glow))}}@media (prefers-reduced-motion:reduce){.rn-tile{transition:transform .12s linear}.rn-fluid,.rn-shimmer{transition-delay:0s!important}.rn-tile.lit .rn-shimmer,.rn-tile.source .rn-core,.rn-board.solved .rn-tile.source .rn-core{animation:none}}.sc-wrap{flex-direction:column;align-items:center;gap:16px;display:flex}.sc-target{flex-direction:column;align-items:center;gap:2px;display:flex}.sc-target .lbl{font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);font-size:11px}.sc-target .num{font-family:var(--disp);color:var(--core);text-shadow:0 0 18px var(--fluid-glow);font-variant-numeric:tabular-nums;font-size:40px;font-weight:600;line-height:1}.sc-scope{position:relative}.sc-grid{z-index:2;gap:var(--sc-gap,8px);touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:filter .5s;display:grid;position:relative}.sc-trail{z-index:1;pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;overflow:visible}.sc-trail line{stroke:#ffb34780;stroke-width:2.5px;stroke-linecap:round;filter:drop-shadow(0 0 2px #ffb34740)}.sc-cell{width:var(--sc-cell,60px);height:var(--sc-cell,60px);z-index:0;font-family:var(--disp);font-variant-numeric:tabular-nums;color:var(--text);text-shadow:0 1px 2px #00000073;border:1px solid var(--line);cursor:pointer;touch-action:manipulation;background:#ffffff08;border-radius:10px;justify-content:center;align-items:center;font-weight:500;transition:background .2s,color .2s,box-shadow .25s,border-color .2s,transform .1s;display:flex;position:relative}.sc-cell:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(20% 20% at 50% 50%, var(--ground) 0 60%, transparent 100%);position:absolute;top:0;bottom:0;left:0;right:0}.sc-cell:hover{border-color:#ffb3474d}.sc-cell:active{transform:scale(.94)}.sc-cell:focus-visible{outline:2px solid var(--fluid);outline-offset:2px}.sc-cell.found{color:var(--fluid);border-color:var(--fluid);box-shadow:0 0 12px var(--fluid-glow);text-shadow:0 0 6px var(--ground), 0 0 4px var(--ground), 0 1px 2px #0009;background:#ffb34712}.sc-cell.hit{color:var(--core);border-color:var(--fluid-hi);box-shadow:0 0 18px var(--fluid-glow)}.sc-cell.buzz{color:var(--bad);border-color:var(--bad);animation:.32s scShake}@keyframes scShake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.sc-grid.solved{filter:saturate(1.15)brightness(1.06)}.sc-grid.solved .sc-cell.found{animation:1.2s ease-out scPop}@keyframes scPop{0%{box-shadow:0 0 0 var(--fluid-glow)}40%{box-shadow:0 0 18px var(--fluid)}to{box-shadow:0 0 4px var(--fluid-glow)}}@media (prefers-reduced-motion:reduce){.sc-cell.buzz,.sc-grid.solved .sc-cell.found{animation:none}}.cd-wrap{flex-direction:column;align-items:center;gap:18px;display:flex}.cd-grid{touch-action:manipulation;background:#ffffff04;border:2px solid #ffe0a86b;border-radius:12px;transition:filter .5s;display:grid;overflow:hidden}.cd-cell{width:var(--cd-cell,62px);height:var(--cd-cell,62px);border-right:1px solid var(--thin);border-bottom:1px solid var(--thin);color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex;position:relative}.cd-cell.he-r{border-right:2px solid #ffe0a86b}.cd-cell.he-b{border-bottom:2px solid #ffe0a86b}.cd-cell:hover{background:#ffffff08}.cd-cell.sel{box-shadow:inset 0 0 0 2px var(--fluid);background:#ffb34724}.cd-cell.locked{color:var(--text-dim);cursor:default}.cd-cell.filled{color:var(--fluid)}.cd-cell.conflict{color:var(--bad)!important}.cd-cell:focus-visible{background:#ffb3471a;outline:none}.cd-token{font-family:var(--disp);font-weight:500;line-height:1;font-size:calc(var(--cd-cell,62px) * .42);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #0006}.cd-clabel{font-family:var(--mono);font-size:calc(var(--cd-cell,62px) * .2);color:var(--text-dim);letter-spacing:.02em;pointer-events:none;transition:color .2s,opacity .2s;position:absolute;top:3px;left:5px}.cd-clabel.done{color:var(--fluid);opacity:.35}.cd-tokwrap{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.cd-grid.solved{filter:saturate(1.15)brightness(1.08)}.cd-grid.solved .cd-cell.filled,.cd-grid.solved .cd-cell.locked{animation:1.3s ease-out cdPop}@keyframes cdPop{0%{text-shadow:0 0 0 var(--fluid-glow)}40%{text-shadow:0 0 14px var(--fluid)}to{text-shadow:0 1px 2px #0006}}.cd-pad{gap:8px;display:grid}.cd-key{border:1px solid var(--line);min-width:46px;height:46px;color:var(--text);cursor:pointer;font-family:var(--disp);background:#ffffff09;border-radius:10px;justify-content:center;align-items:center;font-size:18px;font-weight:500;transition:border-color .15s,color .15s,background .15s,transform 80ms;display:flex}.cd-key:hover{border-color:var(--fluid);color:var(--fluid)}.cd-key:active{transform:scale(.93)}.cd-key.erase{color:var(--text-dim)}@media (prefers-reduced-motion:reduce){.cd-grid.solved .cd-cell.filled,.cd-grid.solved .cd-cell.locked{animation:none}}.ng-puzzle{touch-action:none;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr;gap:10px;transition:filter .5s;display:grid}.ng-col-clues{gap:var(--ng-gap,3px);align-items:end;display:grid}.ng-col-clues .cc{font-family:var(--mono);color:var(--text);flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;padding-bottom:4px;font-size:13px;display:flex}.ng-col-clues .cc.done{color:var(--text-dim)}.ng-row-clues{gap:var(--ng-gap,3px);display:grid}.ng-row-clues .rc{font-family:var(--mono);color:var(--text);justify-content:flex-end;align-items:center;gap:7px;padding-right:4px;font-size:13px;display:flex}.ng-row-clues .rc.done{color:var(--text-dim)}.cc span,.rc span{transition:color .15s;position:relative}.cc span.crossed,.rc span.crossed{color:var(--text-dim)}.cc span.crossed:after,.rc span.crossed:after{content:"";background:var(--fluid);opacity:.6;transform-origin:50%;height:1.5px;position:absolute;top:50%;left:-2px;right:-2px;transform:rotate(-20deg)}.ng-grid{gap:var(--ng-gap,3px);cursor:pointer;display:grid}.ng-cell{width:var(--ng-cell,34px);height:var(--ng-cell,34px);border:1px solid var(--line);touch-action:none;background:#ffffff06;border-radius:6px;transition:background .12s,box-shadow .18s,border-color .12s;position:relative}.ng-cell.blk{background:#ffffff0b}.ng-cell:hover{border-color:#ffb34759}.ng-cell.on{background:var(--fluid);border-color:var(--fluid-hi);box-shadow:0 0 9px var(--fluid-glow), inset 0 0 6px #ffffff40}.ng-cell.x:before,.ng-cell.x:after{content:"";background:var(--text-dim);border-radius:2px;height:1.5px;position:absolute;top:48%;left:22%;right:22%}.ng-cell.x:before{transform:rotate(45deg)}.ng-cell.x:after{transform:rotate(-45deg)}.ng-cell:focus-visible{outline:2px solid var(--fluid);outline-offset:1px}.ng-puzzle.solved{filter:saturate(1.15)brightness(1.08)}.ng-puzzle.solved .ng-cell.x:before,.ng-puzzle.solved .ng-cell.x:after{opacity:0;transition:opacity .5s}.ng-puzzle.solved .ng-cell.on{animation:1.3s ease-out ngPulse}@keyframes ngPulse{0%{box-shadow:0 0 9px var(--fluid-glow)}35%{box-shadow:0 0 22px var(--fluid)}to{box-shadow:0 0 9px var(--fluid-glow)}}@media (prefers-reduced-motion:reduce){.ng-cell{transition:background 50ms linear}.ng-puzzle.solved .ng-cell.on{animation:none}}.pw-wrap{flex-direction:column;align-items:center;gap:16px;display:flex}.pw-grid{touch-action:none;-webkit-user-select:none;user-select:none;gap:4px;transition:filter .5s;display:grid}.pw-cell{width:var(--pw-cell,48px);height:var(--pw-cell,48px);border:1px solid var(--line);touch-action:none;background:#ffffff06;border-radius:8px;transition:background .12s,box-shadow .18s;position:relative}.pw-cell.head{box-shadow:inset 0 0 0 2px var(--fluid-hi)}.pw-node{pointer-events:none;border-radius:50%;position:absolute;top:18%;bottom:18%;left:18%;right:18%}.pw-grid.solved{filter:saturate(1.15)brightness(1.08)}.pw-grid.solved .pw-cell{animation:1.2s ease-out pwPulse}@keyframes pwPulse{0%{filter:brightness()}45%{filter:brightness(1.35)}to{filter:brightness()}}@media (prefers-reduced-motion:reduce){.pw-cell{transition:background 50ms linear}.pw-grid.solved .pw-cell{animation:none}}.fit-wrap{flex-direction:column;align-items:center;gap:16px;display:flex}.fit-board{touch-action:manipulation;-webkit-user-select:none;user-select:none;gap:3px;transition:filter .5s;display:grid}.fit-cell{width:var(--fit-cell,44px);height:var(--fit-cell,44px);border:1px solid var(--line);background:#ffffff06;border-radius:7px;transition:background .12s,box-shadow .18s}.fit-cell.ghost-ok{box-shadow:inset 0 0 0 2px var(--fluid)}.fit-cell.ghost-bad{box-shadow:inset 0 0 0 2px var(--bad)}.fit-tray{flex-wrap:wrap;justify-content:center;gap:12px;max-width:min(92vw,520px);min-height:40px;display:flex}.fit-piece{border:1px solid var(--line);cursor:pointer;background:#ffffff05;border-radius:10px;gap:2px;padding:6px;transition:border-color .15s,background .15s;display:grid}.fit-piece:hover{border-color:var(--fluid)}.fit-piece.held{border-color:var(--fluid);background:#ffb3471a}.fit-pcell{border-radius:4px;width:16px;height:16px}.fit-slot{width:16px;height:16px}.fit-board.solved{filter:saturate(1.15)brightness(1.08)}.fit-board.solved .fit-cell{animation:1.2s ease-out fitPop}@keyframes fitPop{0%{filter:brightness()}45%{filter:brightness(1.3)}to{filter:brightness()}}@media (prefers-reduced-motion:reduce){.fit-cell{transition:background 50ms linear}.fit-board.solved .fit-cell{animation:none}}
