:root{--bg:#30343b;--stage-light:#393e47;--panel:#2b2f36;--panel-2:#323740;--panel-3:#3a3f49;--border:#3a3f49;--border-strong:#4c525e;--text:#e7e5e0;--text-2:#c3c1bb;--muted:#8f929b;--ink:#e7e5e0;--ink-hover:#fff;--on-ink:#1c1b18;--accent:var(--ink);--accent-hover:var(--ink-hover);--accent-2:#2f8f5f;--accent-2-hover:#38a46f;--danger:#f0897f;--warn:#e3a642;--focus:#7aa7ff;--radius:6px;--radius-lg:10px;--shadow-sm:0 1px 2px #00000040;--shadow:0 1px 2px #00000040, 0 8px 24px #00000040;color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;font-family:IBM Plex Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}.mono{font-variant-numeric:tabular-nums;font-family:IBM Plex Mono,ui-monospace,Cascadia Code,Menlo,Consolas,monospace}.muted{color:var(--muted);font-weight:400}.app{flex-direction:column;height:100%;display:flex}.topbar{background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand h1{letter-spacing:0;margin:0;font-size:15px;font-weight:600}.brand-sub{color:var(--muted);font-weight:400}.topbar-links{align-items:center;gap:4px;display:flex}.topbar-link{border-radius:var(--radius);color:var(--text-2);align-items:center;gap:7px;padding:7px 11px;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:inline-flex}.topbar-link:hover{background:var(--panel-3);color:var(--text)}.workspace{flex:1;min-height:0;display:flex}.stage{background:radial-gradient(ellipse 70% 60% at 50% 46%, var(--stage-light) 0%, transparent 100%), var(--bg);flex:1;min-width:0;position:relative}.scene{touch-action:none;inset:0;position:absolute!important}.hud{pointer-events:none;flex-direction:column;align-items:flex-start;gap:10px;display:flex;position:absolute;top:16px;left:16px;right:16px}.hud-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-wrap:wrap;align-items:center;gap:22px;padding:10px 16px;display:flex}.size-badge{border-radius:var(--radius);background:var(--panel-3);color:var(--text);padding:4px 9px;font-size:14px;font-weight:600}.stat{flex-direction:column;gap:3px;min-width:70px;line-height:1.1;display:flex}.stat-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);align-items:center;gap:5px;font-size:10.5px;font-weight:500;display:inline-flex}.stat .mono{font-size:19px;font-weight:500}.hint{color:var(--muted);margin:0;padding:0 2px;font-size:13px}.pill{border-radius:4px;align-items:center;gap:7px;padding:4px 9px;font-size:12.5px;font-weight:500;display:inline-flex}.pill .dot{background:currentColor;border-radius:50%;width:6px;height:6px}.pill.busy .dot{animation:1s ease-in-out infinite pulse}.pill.good{color:#6fd3a0;background:#2f8f5f2e}.pill.warn{color:var(--warn);background:#e3a64224}.pill.busy{color:var(--text-2);background:var(--panel-3)}@keyframes pulse{50%{opacity:.25}}.panel{background:var(--panel);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;width:340px;min-height:0;display:flex}.panel-toggle{display:none}.panel-body{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;flex-direction:column;gap:20px;padding:20px;display:flex;overflow-y:auto}.panel h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);justify-content:space-between;margin:0 0 8px;font-size:11px;font-weight:600;display:flex}.panel h3 .muted{text-transform:none;letter-spacing:0;font-size:12px;font-weight:400}button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:center;gap:7px;padding:9px 12px;font-size:13.5px;font-weight:500;transition:background .15s,border-color .15s,transform 50ms;display:inline-flex}button:hover:not(:disabled){background:var(--panel-2);border-color:var(--muted)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-ink);font-weight:500}button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}button.primary.alt{background:var(--accent-2);border-color:var(--accent-2);color:#fff}button.primary.alt:hover:not(:disabled){background:var(--accent-2-hover);border-color:var(--accent-2-hover)}button.danger{color:var(--danger);border-color:#f0897f66}button.danger:hover:not(:disabled){border-color:var(--danger);background:#f0897f1a}button.icon-only{padding:8px}.action-bar{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:calc(100% - 24px);box-shadow:var(--shadow);flex-wrap:nowrap;justify-content:center;align-items:center;gap:14px;padding:8px 10px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.action-group{gap:6px;display:flex}.action-group+.action-group{border-left:1px solid var(--border);padding-left:14px}.action-bar button{white-space:nowrap;padding:9px 14px;font-size:13.5px}.action-bar button.primary{padding:9px 16px}.size-grid{background:var(--panel-3);border-radius:8px;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;display:grid}.size-btn{color:var(--text-2);background:0 0;border-color:#0000;padding:7px 0;font-weight:500}.size-btn:hover:not(:disabled){background:var(--panel-2);border-color:#0000}.size-btn.active{background:var(--panel);border-color:var(--border-strong);color:var(--text);box-shadow:var(--shadow-sm);font-weight:600}input[type=range]{width:100%;accent-color:var(--ink)}.moves-more,.help{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}.moves-more summary,.help summary{cursor:pointer;color:var(--text);justify-content:space-between;align-items:center;padding:11px 14px;font-size:13.5px;font-weight:500;list-style:none;display:flex}.moves-more summary::-webkit-details-marker{display:none}.help summary::-webkit-details-marker{display:none}.moves-more summary:after,.help summary:after{content:"▾";color:var(--muted);transition:transform .15s}.moves-more[open] summary:after,.help[open] summary:after{transform:rotate(180deg)}.moves-body{flex-direction:column;gap:16px;padding:4px 14px 14px;display:flex}.move-grid{grid-template-columns:1fr;gap:6px;display:grid}.move-set{grid-template-columns:24px repeat(3,1fr);align-items:center;gap:4px;display:grid}.move-key{height:24px;color:var(--muted);border:1px solid var(--border);background:var(--panel-2);border-bottom-width:2px;border-radius:4px;place-items:center;font-family:IBM Plex Mono,ui-monospace,Cascadia Code,Menlo,Consolas,monospace;font-size:11px;display:grid}.move-btn{background:var(--panel);padding:6px 0;font-family:IBM Plex Mono,ui-monospace,Cascadia Code,Menlo,Consolas,monospace;font-weight:500}.history{flex-wrap:wrap;gap:4px;max-height:120px;font-size:12.5px;display:flex;overflow-y:auto}.chip{background:var(--panel-3);color:var(--text-2);border-radius:4px;padding:2px 7px}.chip.undone{opacity:.5;border:1px dashed var(--border-strong);background:0 0}.help ul{color:var(--text-2);margin:0;padding:4px 14px 14px 32px;font-size:13px;line-height:1.8}kbd{border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-family:IBM Plex Mono,ui-monospace,Menlo,Consolas,monospace;font-size:11px}.panel-footer{text-align:center;color:var(--muted);margin-top:auto;padding-top:4px;font-size:12px}.hint-card{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--warn);border-radius:var(--radius-lg);max-width:calc(100% - 32px);box-shadow:var(--shadow);align-items:center;gap:12px;padding:10px 12px 10px 16px;animation:.25s ease-out pop;display:flex;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.hint-icon{color:var(--warn);flex-shrink:0}.hint-move{color:var(--text);min-width:2ch;font-size:20px;font-weight:600}.hint-text{color:var(--text-2);font-size:14px}.win{pointer-events:none;background:radial-gradient(circle,#30343bb3,#0000 70%);place-items:center;display:grid;position:absolute;inset:0}.win-card{pointer-events:auto;text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:28px 36px;animation:.35s cubic-bezier(.2,1.4,.4,1) pop;box-shadow:0 24px 60px #00000073}.win-icon{width:52px;height:52px;color:var(--warn);background:#e3a64224;border-radius:50%;place-items:center;margin:0 auto 12px;display:grid}.win-card h2{margin:0 0 14px;font-size:20px;font-weight:600}.win-stats{justify-content:center;gap:32px;margin:0 0 20px;display:flex}.win-stats div{flex-direction:column;gap:2px;display:flex}.win-stats dt{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:11px}.win-stats dd{margin:0;font-size:22px;font-weight:500}.win-actions{justify-content:center;gap:8px;display:flex}@keyframes pop{0%{opacity:0;transform:scale(.85)}}@media (width<=1180px){.action-bar{gap:6px}.action-group+.action-group{padding-left:6px}.action-bar button,.action-bar button.primary{padding:10px}.action-bar button span{display:none}}@media (width<=800px){.topbar{height:48px;padding:0 14px}.brand h1{font-size:14px}.brand-sub,.topbar-link span{display:none}.workspace{flex-direction:column}.panel{border-left:none;border-top:1px solid var(--border);width:100%;max-height:46vh}.panel.closed{max-height:none}.panel.closed .panel-body{display:none}.panel-toggle{background:var(--panel);color:var(--muted);border:none;border-radius:0;padding:10px;display:flex}.action-bar{padding:6px;bottom:10px}.hint-card{bottom:64px}.hud{top:10px;left:10px;right:10px}.hud-card{gap:14px;padding:8px 12px}.stat{min-width:0}.stat .mono{font-size:16px}.hint{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}