:root{--ink:#f4efff;--ink-dim:#f4efffa6;--accent:#d6c5ec;--accent-ink:#1a1424;--alert:#ff7a45;--glass:#1812248c;--glass-strong:#181224c7;--line:#ffffff1f;--radius:14px;--font:"Avenir Next", "Helvetica Neue", Inter, system-ui, sans-serif;--fade:opacity 1.2s ease-in-out}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font);color:var(--ink);background:#070707;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.webgl{outline:none;position:fixed;top:0;left:0}.loading-text{text-align:center;transition:var(--fade);font-size:2rem;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)}.loading-text.ended{opacity:0;pointer-events:none}.loading-text img{width:80px;height:auto;margin:10px auto 0;display:block}.loading-bar{background:var(--accent);transform-origin:0 0;will-change:transform;border-radius:50px;width:60%;height:10px;transition:transform .5s;position:absolute;top:50%;left:20%;transform:scaleX(0)}.loading-bar.ended{transform-origin:100% 0;transition:transform 1.5s ease-in-out}.status,.fab,.lil-gui.root{opacity:0;transition:var(--fade)}body.ready .status,body.ready .fab,body.ready .lil-gui.root{opacity:1}.panel{z-index:20;background:var(--glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--radius);position:fixed;box-shadow:0 18px 50px #00000040}.panel header{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);justify-content:space-between;align-items:center;padding:12px 16px 8px;font-size:.8rem;display:flex}.panel .close{color:var(--ink-dim);font-size:1.2rem;line-height:1}.panel .close:hover{color:var(--ink)}.fab{z-index:21;background:var(--glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);width:44px;height:44px;transition:var(--fade), transform .2s, background .2s;border-radius:50%;place-items:center;font-size:1.1rem;font-weight:600;display:grid;position:fixed;bottom:24px}.fab:hover{background:var(--glass-strong);transform:translateY(-2px)}.fab.active{background:var(--accent);color:var(--accent-ink)}.fab-help{left:24px}.fab-palette{right:24px}.swatch-icon{background:conic-gradient(#ffb48a,#d6c5ec,#7fb6d6,#4a4f7a,#ffb48a);border-radius:50%;width:20px;height:20px;box-shadow:inset 0 0 0 2px #00000040}.pill{z-index:21;background:var(--glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);letter-spacing:.04em;opacity:0;transition:var(--fade), background .2s;border-radius:999px;padding:8px 16px;font-size:.85rem;position:fixed;top:16px;left:16px}body.ready .pill{opacity:1}.demo-cursor{z-index:40;pointer-events:none;will-change:transform;position:fixed;top:0;left:0}.demo-cursor svg{filter:drop-shadow(0 2px 3px #00000073);transform-origin:5px 3px;margin:-3px 0 0 -5px;transition:transform .12s;display:block}.demo-cursor.down svg{transform:scale(.82)}.demo-cursor .ring{border:2px solid var(--accent);opacity:0;border-radius:50%;width:28px;height:28px;position:absolute;top:-14px;left:-14px}.demo-cursor .ring.pulse{animation:.5s ease-out demo-pulse}@keyframes demo-pulse{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}.pill:hover{background:var(--glass-strong)}body[data-mode=gallery] .pill,body[data-mode=gallery] .fab-help,body[data-mode=gallery] .status,body[data-mode=gallery] .help,body[data-mode=victory] .pill,body[data-mode=victory] .fab-help,body[data-mode=victory] .status,body[data-mode=victory] .help,body[data-mode=victory] .promotion{opacity:0;pointer-events:none}.gallery-bar{text-align:center;opacity:0;pointer-events:none;width:min(720px,100vw - 48px);padding:18px 20px 16px;transition:opacity .6s,transform .6s;bottom:24px;left:50%;transform:translate(-50%)translateY(20px)}body[data-mode=gallery] .gallery-bar{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.gallery-name{letter-spacing:.02em;font-size:1.6rem;font-weight:500}.gallery-line{color:var(--ink-dim);margin-top:4px;font-size:.95rem}.gallery-history{max-width:560px;color:var(--ink-dim);margin:8px auto 0;font-size:.85rem;line-height:1.45}.gallery-stats{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-top:6px;font-size:.75rem}.gallery-nav{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:14px;display:flex}.gallery-chips{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.chip,.arrow,.back{border:1px solid var(--line);color:var(--ink-dim);border-radius:999px;padding:6px 12px;font-size:.85rem}.chip:hover,.arrow:hover,.back:hover{color:var(--ink);border-color:#ffffff4d}.chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.arrow{padding:4px 12px;font-size:1.2rem;line-height:1}.back{margin-left:12px}.victory-bar{text-align:center;opacity:0;pointer-events:none;width:min(480px,100vw - 48px);padding:20px 20px 18px;transition:opacity .6s .3s,transform .6s .3s;bottom:24px;left:50%;transform:translate(-50%)translateY(20px)}body[data-mode=victory] .victory-bar{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.victory-name{letter-spacing:.02em;font-size:2rem;font-weight:500}.victory-line{color:var(--ink-dim);margin-top:4px;font-size:.95rem}.victory-nav{justify-content:center;gap:8px;margin-top:16px;display:flex}.victory-nav .back{margin-left:0}.moves{opacity:0;width:210px;transition:var(--fade);top:64px;left:16px}body.ready .moves{opacity:1}body[data-mode=gallery] .moves,body[data-mode=victory] .moves{opacity:0;pointer-events:none}.moves header span:first-child{cursor:pointer}.moves-actions{gap:6px;display:flex}.moves-actions button{border:1px solid var(--line);letter-spacing:0;text-transform:none;color:var(--ink);border-radius:999px;padding:3px 10px;font-size:.75rem}.moves-actions button:hover{background:#ffffff1a}.moves-actions button:disabled{opacity:.35;cursor:default}.moves-list{font-variant-numeric:tabular-nums;max-height:34vh;padding:0 14px 10px;font-size:.85rem;list-style:none;overflow-y:auto}.moves.folded .moves-list{display:none}.moves-list li{grid-template-columns:2.2em 1fr 1fr;padding:2px 0;display:grid}.moves-list .n,.moves-list .empty{color:var(--ink-dim)}.moves-list .empty{display:block}.promotion{padding-bottom:14px;bottom:96px;left:50%;transform:translate(-50%)}.promotion-choices{gap:6px;padding:0 16px;display:flex}.help{width:300px;padding-bottom:8px;bottom:80px;left:24px}.help ul{padding:0 16px 8px;list-style:none}.help li{align-items:center;gap:8px;padding:6px 0;font-size:.9rem;line-height:1.35;display:flex}.help img{opacity:.85;flex:none;height:1.3rem}.help img.mirrored{transform:scaleX(-1)}.help .keys{flex-wrap:wrap;gap:6px 14px}.help .keys span{white-space:nowrap}kbd{border:1px solid var(--line);min-width:1.6em;font:inherit;text-align:center;background:#ffffff1f;border-radius:6px;padding:1px 6px;font-size:.8rem;display:inline-block}.palette{width:340px;max-height:calc(100vh - 120px);padding-bottom:12px;bottom:80px;right:24px;overflow-y:auto}.presets{flex-wrap:wrap;gap:6px;padding:0 16px 12px;display:flex}.presets button{border:1px solid var(--line);color:var(--ink-dim);border-radius:999px;padding:5px 10px;font-size:.8rem}.presets button:hover{color:var(--ink);border-color:#ffffff4d}.presets button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.slots{grid-template-columns:repeat(2,1fr);gap:6px;padding:0 16px 12px;display:grid}.slot{text-align:left;color:var(--ink-dim);border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:6px 8px;font-size:.82rem;display:flex}.slot:hover{color:var(--ink);background:#ffffff0f}.slot.active{border-color:var(--accent);color:var(--ink)}.slot img{border-radius:50%;flex:none;width:26px;height:26px}.swatches{border-top:1px solid var(--line);grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 16px 4px;display:grid}.swatch{border:2px solid #0000;border-radius:50%;width:36px;height:36px;padding:2px;transition:transform .15s}.swatch img{border-radius:50%;width:100%;height:100%;display:block}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:var(--accent)}.status{background:var(--glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);letter-spacing:.02em;pointer-events:none;white-space:nowrap;border-radius:999px;padding:9px 20px;font-size:.95rem;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.status[data-tone=alert]{background:#ff7a45cc;border-color:#0000}.status[data-tone=end]{background:var(--accent);color:var(--accent-ink);border-color:#0000}.clocks{z-index:20;opacity:0;transition:var(--fade);pointer-events:none;gap:8px;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.clocks[hidden]{display:none}body.ready .clocks{opacity:1}body[data-mode=gallery] .clocks,body[data-mode=victory] .clocks{opacity:0}.clock{text-align:center;border-radius:var(--radius);background:var(--glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);min-width:100px;color:var(--ink-dim);gap:1px;padding:8px 14px 9px;transition:border-color .3s,background .3s;display:grid}.clock .who{letter-spacing:.08em;text-transform:uppercase;font-size:.65rem}.clock .time{font-variant-numeric:tabular-nums;color:var(--ink);font-size:1.15rem}.clock.active{border-color:var(--accent);background:var(--glass-strong);color:var(--ink)}.clock.active .time{color:var(--accent)}.clock.active.low .time,.clock.flagged .time{color:var(--alert)}.lil-gui{--background-color:#181224b8;--text-color:var(--ink);--title-background-color:#181224e6;--title-text-color:var(--ink);--widget-color:#ffffff14;--hover-color:#ffffff24;--focus-color:#fff3;--number-color:var(--accent);--string-color:var(--accent);--font-family:var(--font);--font-size:12px;--widget-border-radius:6px}.lil-gui.root{border-radius:var(--radius);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);top:16px;right:16px;overflow:hidden}.webgl{touch-action:none}@media (width<=720px){.fab{width:40px;height:40px;bottom:14px}.fab-help{left:14px}.fab-palette{right:14px}.status{padding:7px 14px;font-size:.85rem;bottom:64px}.help,.palette{width:auto;max-height:60vh;bottom:64px;left:12px;right:12px}.swatches{grid-template-columns:repeat(6,1fr)}.moves{width:160px;top:58px;left:12px}.moves-list{max-height:22vh}.clocks{gap:6px;top:auto;bottom:104px}.clock{min-width:84px;padding:6px 10px 7px}.clock .time{font-size:1rem}.pill{padding:6px 12px;font-size:.8rem;top:12px;left:12px}.gallery-bar{padding:12px 12px 10px;bottom:12px}.gallery-name{font-size:1.2rem}.gallery-line{font-size:.85rem}.gallery-history{font-size:.78rem}.back{margin-left:0}.promotion{bottom:110px}.lil-gui.root{--width:190px;--font-size:12px;--input-font-size:12px;--widget-height:24px;--title-height:28px;width:190px;top:12px;right:12px}}