:root{--night:#010204;--ink:#e9eefad1;--ink-faint:#e9eefa73;--ink-strong:#f0f4fd;--amber:#d4a14f;--amber-bright:#e9c87e;--hairline:#e9eefa29;--hud-fade:.9s;--panel-slide:.42s cubic-bezier(.22, .61, .36, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--night);color:var(--ink);-webkit-user-select:none;user-select:none;font-family:Marcellus,Palatino Linotype,Georgia,Hiragino Mincho ProN,Yu Mincho,Noto Serif CJK JP,Noto Serif JP,Source Han Serif,Songti SC,SimSun,serif}body.idle{cursor:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#sky{z-index:0;width:100vw;height:100vh;position:fixed;inset:0}#stage{z-index:1;transition:transform var(--panel-slide);place-items:center;display:grid;position:fixed;inset:0}body[data-drawer=controls] #stage{transform:translate(clamp(70px,13vw,180px))}body[data-drawer=moves] #stage{transform:translate(clamp(-180px,-13vw,-70px))}#stage>canvas{will-change:transform;grid-area:1/1}#vignette{z-index:2;pointer-events:none;opacity:.55;background:radial-gradient(130% 110% at 50% 42%,#0000 60%,#00000580 100%);transition:opacity 1.5s;position:fixed;inset:0}.hud{z-index:3;transition:opacity var(--hud-fade) ease;position:fixed}body.idle .hud{opacity:0;pointer-events:none}#status{letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);font-size:12px;top:clamp(16px,3vh,36px);left:50%;transform:translate(-50%)}#score{text-align:right;opacity:0;pointer-events:none;max-width:min(240px,68vw);top:clamp(16px,3vh,36px);right:clamp(18px,3vw,42px)}body[data-holding=true] #score{opacity:1}#score-head{letter-spacing:.04em;color:var(--amber-bright);text-shadow:-1px -1px #000000d9,1px -1px #000000d9,-1px 1px #000000d9,1px 1px #000000d9,0 2px 8px #000000b3;font-size:clamp(16px,2vw,22px);font-weight:600}#score-detail{letter-spacing:.1em;color:var(--ink);font-variant-numeric:tabular-nums;text-wrap:balance;text-shadow:-1px -1px #000000d9,1px -1px #000000d9,-1px 1px #000000d9,1px 1px #000000d9,0 2px 8px #000000b3;margin-top:6px;font-size:12px}#panel-toggle,#moves-toggle{appearance:none;border:1px solid var(--hairline);cursor:pointer;width:44px;height:44px;transition:opacity var(--hud-fade) ease, border-color .3s;background:#05081280;border-radius:12px;place-items:center;display:grid;bottom:clamp(18px,4vh,44px)}#panel-toggle{left:clamp(18px,3vw,42px)}#moves-toggle{right:clamp(18px,3vw,42px)}#panel-toggle:hover,#moves-toggle:hover{border-color:#e9eefa73}#panel-toggle:focus-visible,#moves-toggle:focus-visible{outline:2px solid var(--amber-bright);outline-offset:3px}.bars,.bars:before,.bars:after{background:var(--ink);border-radius:1px;width:17px;height:1.5px;display:block}.bars{position:relative}.bars:before,.bars:after{content:"";position:absolute;left:0}.bars:before{top:-5px}.bars:after{top:5px}.rows{width:17px;height:13px;display:block;position:relative}.rows:before,.rows:after{content:"";background:var(--ink);position:absolute;top:50%}.rows:before{border-radius:50%;width:7px;height:7px;margin-top:-3.5px;left:0}.rows:after{width:8px;height:1.5px;box-shadow:0 -4px 0 var(--ink), 0 4px 0 var(--ink);border-radius:1px;margin-top:-.75px;right:0}body:not([data-drawer=closed]) #panel-toggle,body:not([data-drawer=closed]) #moves-toggle{opacity:0;pointer-events:none}body[data-tv=true] #panel-toggle,body[data-tv=true] #moves-toggle{display:none}#panel-scrim{z-index:4;pointer-events:none;position:fixed;inset:0}body:not([data-drawer=closed]) #panel-scrim{pointer-events:auto}#panel{z-index:5;-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--hairline);width:clamp(288px,27vw,372px);max-width:92vw;transition:transform var(--panel-slide);background:linear-gradient(100deg,#04060eeb 0%,#04060edb 70%,#04060ec7 100%);flex-direction:column;gap:clamp(14px,2.2vh,22px);padding:clamp(22px,5vh,46px) clamp(20px,2vw,32px);display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-100%);box-shadow:24px 0 60px -30px #000000b3}body[data-drawer=controls] #panel{transform:translate(0)}.onboarding{color:var(--ink);font-size:12px;line-height:1.55}#credits{color:var(--ink);font-size:11px;line-height:1.6}#credits summary{cursor:pointer;color:var(--ink);border:1px solid #0000;border-radius:4px;align-items:center;gap:8px;padding:4px 0;list-style:none;transition:color .16s;display:flex}#credits summary::-webkit-details-marker{display:none}#credits summary:before{content:"›";text-align:center;width:10px;transition:transform .16s;display:inline-block}#credits[open] summary:before{transform:rotate(90deg)}#credits summary:hover,#credits summary:focus-visible{color:var(--ink-strong)}#credits p{margin:6px 0 0}#credits a:link,#credits a:visited{color:var(--ink);border-bottom:1px solid color-mix(in srgb, var(--ink) 35%, transparent);word-break:break-all;text-decoration:none;transition:color .16s,border-color .16s}#credits a:hover,#credits a:focus-visible{color:var(--ink-strong);border-bottom-color:currentColor}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.badge{appearance:none;max-width:100%;font:inherit;letter-spacing:.26em;color:var(--amber-bright);cursor:pointer;background:0 0;border:1px solid #d4a14f73;border-radius:999px;align-items:center;gap:7px;margin:0;padding:4px 11px 3px;font-size:10px;transition:border-color .3s,color .3s;display:inline-flex}.badge:hover{border-color:#e9eefa73}#badge-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.badge .pulse{background:var(--amber-bright);border-radius:50%;flex:none;width:5px;height:5px;animation:2.4s ease-in-out infinite pulse}body[data-synced=false] .badge{color:var(--ink-faint);border-color:var(--hairline)}body[data-synced=false] .badge .pulse{background:var(--ink-faint);animation:none}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 6px 1px #e9c87ecc}50%{opacity:.35;box-shadow:none}}#info{padding-top:clamp(4px,1vh,10px)}.pairing{font-size:clamp(17px,1.7vw,22px);line-height:1.45}.player{margin:0}.player em{color:var(--amber);letter-spacing:.08em;margin-left:.55em;font-size:.62em;font-style:normal}.dot{border-radius:50%;width:.55em;height:.55em;margin-right:.5em;display:inline-block;transform:translateY(-.08em)}.dot.black{background:radial-gradient(circle at 35% 30%,#555a5e,#08090a 70%);box-shadow:0 0 0 1px #e9eefa40}.dot.white{background:radial-gradient(circle at 35% 30%,#fff,#cfc8b8 75%)}#result{color:var(--amber-bright);letter-spacing:.06em;margin-top:6px;font-size:14px}.meta{letter-spacing:.1em;color:#e9eefab3;font-variant-numeric:tabular-nums;margin-top:5px;font-size:12px}.meta.dimmer{color:#e9eefa8c}#goto{border-bottom:1px solid var(--hairline);flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:clamp(14px,2vh,22px);display:flex}#goto-input{appearance:none;border:1px solid var(--hairline);min-width:0;color:var(--ink);letter-spacing:.08em;background:#0508128c;border-radius:999px;flex:1 1 0;padding:9px 14px;font:11px/1 inherit;transition:border-color .3s}#goto-input::placeholder{color:var(--ink-faint);letter-spacing:.08em}#goto-input:hover,#goto-input:focus-visible{border-color:#e9eefa73;outline:none}#goto-go{appearance:none;border:1px solid var(--hairline);color:var(--ink);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:#0508128c;border-radius:999px;flex:none;padding:9px 14px;font:11px/1 inherit;transition:border-color .3s,color .3s}#goto-go:hover{color:var(--amber-bright);border-color:#d4a14fb3}#goto-browse{appearance:none;border:1px solid var(--hairline);color:var(--ink);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:#0508128c;border-radius:999px;flex:100%;padding:9px 14px;font:11px/1 inherit;transition:border-color .3s,color .3s}#goto-browse:hover{color:var(--amber-bright);border-color:#d4a14fb3}#goto-suggest{flex-direction:column;gap:2px;margin:-8px 0 0;padding:0;list-style:none;display:flex}#goto-suggest[hidden]{display:none}#explorer{flex-direction:column;gap:clamp(10px,1.6vh,16px);min-height:0;display:none}body[data-explorer=true] #explorer{display:flex}body[data-explorer=true] :is(#goto,#goto-suggest,.panel-head,#info,.panel-tools,.onboarding,#credits){display:none}#explorer-crumb{letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0;font-size:10px}.explorer-head{align-items:center;gap:10px;display:flex}#explorer-back{appearance:none;border:1px solid var(--hairline);width:28px;height:28px;color:var(--ink-strong);cursor:pointer;background:0 0;border-radius:50%;flex:none;place-items:center;font:16px/1 inherit;transition:border-color .3s,color .3s;display:grid}#explorer-back:hover{color:var(--amber-bright);border-color:#d4a14fb3}#explorer-title{font:inherit;letter-spacing:.04em;color:var(--ink-strong);margin:0;font-size:clamp(15px,1.5vw,19px);font-weight:400}#explorer-shuffle{appearance:none;color:var(--amber-bright);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:#d4a14f1f;border:1px solid #d4a14f73;border-radius:999px;padding:11px 14px;font:11px/1 inherit;transition:border-color .3s,background-color .3s,color .3s}#explorer-shuffle:hover:not(:disabled){border-color:var(--amber-bright);background:#d4a14f33}#explorer-shuffle:disabled{opacity:.4;cursor:default}#explorer-refine,#explorer-list{margin:0;padding:0;list-style:none}#explorer-refine{flex-wrap:wrap;gap:6px;display:flex}#explorer-list{flex-direction:column;gap:3px;min-height:0;display:flex}.row{appearance:none;text-align:left;width:100%;color:var(--ink-strong);font:inherit;letter-spacing:.04em;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 11px;font-size:15px;font-weight:600;transition:border-color .3s,background-color .3s,color .3s;display:flex}.row:hover{border-color:var(--hairline);background:#e9eefa0f}#explorer-refine .row{border-radius:999px;padding:7px 12px}.row-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.row-meta{letter-spacing:.06em;color:var(--ink);flex:none;font-size:12px;font-style:normal;font-weight:400}.row[data-nav=leaf]{flex-direction:column;align-items:stretch;gap:3px}.row[data-nav=leaf] .row-meta{align-self:flex-start}.row-sentinel{pointer-events:none;height:1px}.row-note{color:var(--ink);padding:10px 11px;font-size:14px}#explorer-sort{appearance:none;border:1px solid var(--hairline);max-width:100%;color:var(--ink);cursor:pointer;background:#0508128c;border-radius:999px;align-self:flex-start;padding:8px 13px;font:13px/1 inherit;transition:border-color .3s,color .3s}#explorer-sort:hover{color:var(--ink-strong);border-color:#e9eefa73}#explorer-sort option{color:var(--ink);letter-spacing:normal;text-transform:none;background:#0a0f20}.panel-tools{flex-direction:column;gap:14px;display:flex}#controls{border-top:1px solid var(--hairline);flex-direction:column;align-items:stretch;gap:10px;padding-top:clamp(14px,2vh,22px);display:flex}#controls button{appearance:none;text-align:left;border:1px solid var(--hairline);width:100%;color:var(--ink);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:#0508128c;border-radius:999px;padding:11px 16px;font:11px/1 inherit;transition:border-color .3s,color .3s}#controls button:hover{border-color:#e9eefa73}#controls button[aria-pressed=true]{color:var(--amber-bright);border-color:#d4a14fb3}#preferences{border:1px solid var(--hairline);background:#05081247;border-radius:10px;overflow:hidden}.preference-row{min-height:38px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:16px;padding:0 12px;font-size:10px;display:flex}.preference-row+.preference-row{border-top:1px solid var(--hairline)}.preference-row select{appearance:none;min-width:0;max-width:62%;color:var(--ink);letter-spacing:normal;text-align:right;text-align-last:right;cursor:pointer;background:0 0;border:0;padding:8px 2px;font:12px/1 inherit;transition:color .3s}.preference-row select:hover{color:var(--ink-strong)}#preferences option{color:var(--ink);text-align:left;background:#0a0f20}.slider{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);align-items:center;gap:12px;padding:4px 6px;font-size:10px;display:flex}.slider>span{flex:none;min-width:5ch}.slider output{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;flex:none;min-width:4ch;font-size:11px}input[type=range]{appearance:none;background:var(--hairline);cursor:pointer;min-width:60px;height:2px;accent-color:var(--amber);border-radius:1px;flex:auto}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--amber);border:none;border-radius:50%;width:11px;height:11px}input[type=range]::-moz-range-thumb{background:var(--amber);border:none;border-radius:50%;width:11px;height:11px}#moves{--move-stone-size:26px;--move-row-pad-block:4px;--move-row-pad-inline:10px;z-index:5;-webkit-backdrop-filter:blur(16px);border-left:1px solid var(--hairline);width:clamp(200px,19vw,280px);max-width:88vw;transition:transform var(--panel-slide);background:linear-gradient(260deg,#04060eeb 0%,#04060edb 70%,#04060ec7 100%);flex-direction:column;gap:12px;padding:clamp(22px,5vh,46px) clamp(14px,1.5vw,24px);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-24px 0 60px -30px #000000b3}body[data-drawer=moves] #moves{transform:translate(0)}#moves-title{font:inherit;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-size:12px;font-weight:400}#moves-hint{color:var(--ink);font-size:11px;line-height:1.5;display:none}body[data-synced=true] #moves-hint{display:block}#move-list{min-height:0;padding-block:var(--move-gutter,0px);font-variant-numeric:tabular-nums;flex:auto;margin:0;padding-inline:0;list-style:none;position:relative;overflow-y:auto}#move-list li{color:var(--ink)}body[data-synced=true] #move-list li{padding:var(--move-row-pad-block) var(--move-row-pad-inline);border:1px solid #0000;align-items:center;gap:12px;display:flex}#move-list button{appearance:none;text-align:left;width:100%;color:inherit;font:inherit;padding:var(--move-row-pad-block) var(--move-row-pad-inline);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;align-items:center;gap:12px;transition:border-color .3s,background-color .3s,color .3s;display:flex}#move-list button:hover{border-color:var(--hairline);color:var(--ink-strong);background:#e9eefa0f}.move-stone{width:var(--move-stone-size);height:var(--move-stone-size);font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;font-size:12px;font-style:normal;display:grid}.move-stone.black{color:var(--ink-strong);background:radial-gradient(circle at 35% 30%,#555a5e,#08090a 70%);box-shadow:0 0 0 1px #e9eefa40}.move-stone.white{color:#14161c;background:radial-gradient(circle at 35% 30%,#fff,#cfc8b8 75%)}.move-coord{letter-spacing:.06em;font-size:15px}#move-list li[aria-current=step]{color:var(--amber-bright)}#panel :is(button,select,summary):focus-visible,#panel input:focus-visible{outline:2px solid var(--amber-bright);outline-offset:3px}#moves button:focus-visible{border-color:var(--hairline);background:#e9eefa0f;outline:none}body[data-synced=true] .free-only,body:not([data-filtered=true]) .channel-only{display:none}body[data-tv=true] #panel{gap:clamp(16px,2.4vh,26px);width:clamp(300px,28vw,400px)}body[data-tv=true] :is(#goto-input,#goto-go),body[data-tv=true] #explorer-sort{display:none}body[data-tv=true] :is(.row,.row-note){padding:13px 14px;font-size:18px}body[data-tv=true] .row-meta{font-size:14px}body[data-tv=true] #explorer-shuffle{padding:14px 16px;font-size:13px}body[data-tv=true] #explorer-title{font-size:clamp(19px,1.9vw,24px)}body[data-tv=true] .badge{font-size:11px}body[data-tv=true] .pairing{font-size:clamp(18px,1.9vw,24px)}body[data-tv=true] #result{font-size:15px}body[data-tv=true] .meta{font-size:13px}body[data-tv=true] #goto-input,body[data-tv=true] #goto-go{padding:10px 14px;font-size:13px}body[data-tv=true] #controls button{padding:11px 15px;font-size:13px}body[data-tv=true] .preference-row{min-height:44px;padding-inline:14px;font-size:11px}body[data-tv=true] .preference-row select{font-size:13px}body[data-tv=true] .slider{font-size:12px}body[data-tv=true] .slider output,body[data-tv=true] #status{font-size:13px}body[data-tv=true] #score-head{font-size:clamp(18px,2vw,24px)}body[data-tv=true] #score-detail{font-size:13px}body[data-tv=true] #moves{--move-stone-size:30px;--move-row-pad-block:6px;--move-row-pad-inline:12px;width:clamp(230px,21vw,320px)}body[data-tv=true] .move-stone{font-size:13px}body[data-tv=true] .move-coord{font-size:17px}@media (prefers-reduced-motion:reduce){#panel,#moves,#panel-toggle,#moves-toggle,#stage{transition:none}}