.hive{--n: 7;--rows: 3;--w: 11rem;--g: .3rem;--h: calc(var(--w) * .866);--step-x: calc(var(--w) * .75 + var(--g));--row-h: calc(var(--h) * .5 + var(--g) / 2);--ox: calc(50% - (var(--w) + var(--step-x) * 4) / 2);--oy: calc(50% - (var(--h) + var(--row-h) * (var(--rows) - 1)) / 2);--cw: min(52rem, 100%);--note-gap: 2.4rem;--ch: min(29.25rem, 56.25vw, calc(100% - var(--note-gap)));--cut: 2.85rem;--band: 2rem;--fun-ease: cubic-bezier(.16, 1, .3, 1);position:relative;width:100%;height:100%;min-width:0;color:var(--ink)}.cell{--shape: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);--r: 0;--c: 0;--inset: 0;position:absolute;z-index:1;left:calc(var(--ox) + var(--c) * var(--step-x) * 2 + var(--inset) * var(--step-x));top:calc(var(--oy) + var(--r) * var(--row-h));width:var(--w);height:var(--h);color:var(--key-edge);transition:left .62s var(--fun-ease),top .62s var(--fun-ease),width .62s var(--fun-ease),height .62s var(--fun-ease),opacity .3s ease,transform .45s var(--fun-ease)}.cell-glow{position:absolute;inset:-14%;background:radial-gradient(closest-side,rgb(from var(--cream) r g b / .34),rgb(from var(--signal) r g b / .14) 55%,transparent 100%);filter:blur(10px);opacity:0;transition:opacity .4s ease}.cell-hex{position:absolute;inset:0;clip-path:var(--shape);background:var(--key-edge);transition:clip-path .62s var(--fun-ease),background-color .2s ease}.cell-face{position:absolute;inset:2px;clip-path:var(--shape);background:var(--key-face);transition:clip-path .62s var(--fun-ease),background-color .45s ease}.cell-tap{position:absolute;inset:0;z-index:3;padding:0;border:0;border-radius:0;background:none;cursor:pointer}.cell-tap:focus-visible{outline:none}.cell-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;pointer-events:none;transition:opacity .2s ease}.cell-idle .glyph{width:36px;height:36px;stroke-width:1.5}.cell-name{font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1}.cell-kind{max-width:60%;text-align:center;font-family:var(--font-mono);font-size:.54rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--hud-label);line-height:1.4}.cell-lit{position:absolute;left:38%;right:38%;bottom:17%;height:2px;border-radius:1px;background:var(--signal);opacity:0;transition:opacity .25s ease}.cell:hover,.cell:has(.cell-tap:focus-visible){color:var(--cream-hot)}.cell:hover .cell-hex,.cell:has(.cell-tap:focus-visible) .cell-hex{background:var(--cream-hot)}.cell:has(.cell-tap:focus-visible) .cell-glow{opacity:.6}.cell.is-lift .cell-hex{background:var(--cream-hot)}.cell.is-lift .cell-glow,.cell.is-lift .cell-lit{opacity:1}.cell.is-dim{opacity:.26;color:var(--cream-mute);pointer-events:none}.cell.is-dim .cell-kind{color:var(--hud-mute)}.cell.is-dim .cell-hex{background:var(--key-edge)}.cell.is-open{--shape: polygon( var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50% );z-index:5;left:calc(50% - var(--cw) / 2);top:calc(50% - (var(--ch) + var(--note-gap)) / 2);width:var(--cw);height:var(--ch);color:var(--key-edge)}.cell.is-open .cell-hex{background:var(--cream-hot)}.cell.is-open .cell-face{background:rgb(from var(--glass-abyss) r g b / .94)}.cell.is-open .cell-glow{opacity:1;inset:-6%}.cell.is-open .cell-tap,.cell.is-open .cell-idle{display:none}.hive.is-open .cell:not(.is-open){opacity:0;transform:scale(.82);pointer-events:none}.cell-court{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}.cell.is-open .cell-court{opacity:1;visibility:visible;pointer-events:auto;animation:screenReconstruct .56s cubic-bezier(.16,1,.3,1) .18s both;transition:visibility 0s}.court-well{position:absolute;left:calc(var(--cut) + .3rem);right:calc(var(--cut) + .3rem);top:.35rem;bottom:var(--band);display:flex;align-items:center;justify-content:center;background:rgb(from var(--glass-abyss) calc(r*.6) calc(g*.6) calc(b*.6) / .9)}.court-well:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 60px rgb(from var(--glass-abyss) calc(r/5) calc(g/5) calc(b/5) / .3)}.court-well canvas{display:block;flex:none;touch-action:none}.court-readout{position:absolute;left:0;right:0;bottom:0;height:var(--band);display:flex;align-items:center;gap:1rem;padding:0 calc(var(--cut) + .4rem) 0 calc(var(--cut) + .6rem);box-shadow:inset 0 1px 0 var(--sheet-edge)}.court-tag{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hud-label);min-width:4rem}.court-score{flex:1 1 auto;display:inline-flex;justify-content:center;align-items:baseline;gap:1.1rem;font-family:var(--font-mono);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cream)}.court-score b{display:inline-flex;align-items:baseline;gap:.4rem;font-weight:inherit}.court-score b small{font-size:.52rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--hud-label)}.court-score b.hot{color:var(--signal)}.court-state{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-width:0;color:var(--signal)}.led{display:inline-block;width:5px;height:5px;background:var(--hud-mute);transition:background .3s ease,box-shadow .3s ease}body.is-running .led{background:var(--signal);box-shadow:0 0 6px rgb(from var(--signal) r g b / .8)}body.is-running.is-still .led{background:var(--hud-mute);box-shadow:none}.court-close{position:relative;flex:none;width:20px;height:20px;margin-left:.2rem;padding:0;border:0;border-radius:4px;background:none;color:var(--close);cursor:pointer}.court-close:before,.court-close:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.85px;border-radius:999px;background:currentColor;transform:translate(-50%,-50%) rotate(var(--arm, 45deg))}.court-close:after{--arm: -45deg}.court-close:hover{filter:brightness(1.18)}.court-note{position:absolute;left:0;right:0;top:calc(50% + (var(--ch) - var(--note-gap)) / 2 + .7rem);margin:0;text-align:center;font-size:.78rem;letter-spacing:.02em;color:var(--muted);opacity:0;transition:opacity .3s ease .45s}.hive.is-open .court-note{opacity:1}.court-note:empty{display:none}.hive.no-anim,.hive.no-anim *{transition:none!important}.glyph{display:block;width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.glyph .f{fill:currentColor;stroke:none}.hex-field{transition:opacity .6s ease}body.is-running .hex-field{opacity:.5}@media(max-width:860px){.hive{--w: 4.2rem;--g: .2rem;--cw: 100%;--ch: min( calc((100vw - 1.7rem)*.5625) , calc(100% - var(--note-gap)));--cut: 1.3rem;--band: 1.7rem}.cell-idle{gap:.28rem}.cell-idle .glyph{width:22px;height:22px}.cell-name{font-size:.52rem}.cell-kind{font-size:.4rem}.court-readout{gap:.6rem}.court-tag{min-width:0}.court-score{font-size:.95rem;gap:.7rem}}@media(prefers-reduced-motion:reduce){.cell,.cell-hex,.cell-face,.cell-court,.cell-glow,.hex-field,.court-note{transition:none!important;animation:none!important}}
