:root{--bg: #0b0d12;--bg-elev: #11141c;--bg-elev-2: #1d2230;--bg-elev-3: #262c3d;--fg: #e8eaf2;--dim: #7a8092;--accent: #ffd166;--accent-fg: #1a1a1a;--danger: #ef476f;--ok: #06d6a0;--border: #1d2230}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}body{display:flex;flex-direction:column}#hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 16px;background:var(--bg-elev);border-bottom:1px solid var(--border);gap:16px}.hud-left,.hud-right{display:flex;align-items:center;gap:12px;min-width:0}.hud-right{justify-content:flex-end}.hud-center{display:flex;align-items:center;gap:8px}.hud-stat{font-variant-numeric:tabular-nums;font-size:13px;color:var(--dim);white-space:nowrap}.hud-stat b{color:var(--fg);font-size:15px;margin-left:4px;font-weight:600}.dim{color:var(--dim);font-size:13px}.filename{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button,.file-btn{font:inherit;border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none;border:0;transition:background .12s ease,transform .05s ease}button:active,.file-btn:active{transform:translateY(1px)}.file-btn{display:inline-block;padding:7px 12px;background:var(--bg-elev-2);font-size:13px;color:var(--fg)}.file-btn:hover{background:var(--bg-elev-3)}.file-btn input{display:none}button.primary{padding:7px 16px;background:var(--accent);color:var(--accent-fg);font-weight:600;font-size:14px}button.primary:hover:not(:disabled){background:#ffdd8a}button.secondary{padding:7px 14px;background:var(--bg-elev-2);color:var(--fg);font-size:13px}button.secondary:hover:not(:disabled){background:var(--bg-elev-3)}button.block{width:100%;padding:10px;margin-top:8px}button:disabled{opacity:.4;cursor:not-allowed}button.icon-btn{width:32px;height:32px;padding:0;background:transparent;color:var(--dim);font-size:16px;display:inline-flex;align-items:center;justify-content:center}button.icon-btn:hover{color:var(--fg);background:var(--bg-elev-2)}button[hidden]{display:none!important}kbd{background:var(--bg-elev-3);color:var(--fg);padding:1px 6px;border-radius:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;border-bottom:1px solid #0a0d14}#stage{flex:1 1 auto;display:block;width:100%;height:100%}#legend{position:fixed;bottom:8px;left:50%;transform:translate(-50%);display:flex;gap:14px;background:#11141cb3;padding:6px 14px;border-radius:999px;font-size:12px;color:var(--dim);pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--bg-elev);border-left:1px solid var(--border);z-index:50;display:flex;flex-direction:column;box-shadow:-4px 0 24px #00000080;animation:slide-in .18s ease}.drawer[hidden]{display:none}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}.drawer-head h2{margin:0;font-size:18px;font-weight:600}.drawer-body{padding:16px;overflow-y:auto;flex:1}.drawer-body section{margin-bottom:22px}.drawer-body h3{margin:0 0 10px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.drawer-body .hint{margin:0;font-size:13px;color:var(--dim);line-height:1.5}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px}.row .row-controls{display:flex;align-items:center;gap:10px}.row .num{min-width:64px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--accent)}.row.checkbox{cursor:pointer}.row.checkbox input{width:16px;height:16px;accent-color:var(--accent)}input[type=range]{width:160px;accent-color:var(--accent);cursor:pointer}select{background:var(--bg-elev-2);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:6px 8px;font:inherit;font-size:13px;cursor:pointer}select:focus{outline:2px solid var(--accent)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fade-in .15s ease}.overlay[hidden]{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.overlay-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:28px 36px;min-width:320px;text-align:center;box-shadow:0 20px 60px #00000080}.overlay-card.wide{min-width:420px}.overlay-card h1{margin:0 0 8px;font-size:28px;font-weight:700;color:var(--accent)}.overlay-card p{margin:0 0 18px}.overlay-actions{display:flex;gap:10px;justify-content:center}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:16px 0 22px}.result-grid>div{display:flex;flex-direction:column;gap:4px;text-align:center}.result-grid span{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}.result-grid b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.idle-hint{position:fixed;top:80px;right:20px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:240px;padding:14px 16px;background:#11141cb3;border:1px solid var(--border);border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in .4s ease}.idle-hint[hidden]{display:none}.idle-hint svg{width:100%;height:auto;max-width:220px}.idle-hint-text{display:flex;flex-direction:column;gap:6px;text-align:center}.idle-hint-text b{font-size:13px;font-weight:600;color:var(--fg);line-height:1.3}.idle-hint-text span{font-size:11px;color:var(--dim);line-height:1.5}.idle-hint-text kbd{font-size:10px;padding:0 4px}.idle-difficulty{position:fixed;left:50%;bottom:56px;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto}.idle-difficulty[hidden]{display:none}.idle-difficulty-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}.idle-difficulty-buttons{display:flex;gap:8px}.idle-difficulty-buttons button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 20px;background:#1d2230b3;color:var(--fg);font-size:14px;font-weight:600;border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:92px;transition:background .12s ease,border-color .12s ease,transform .05s ease}.idle-difficulty-buttons button span{font-size:11px;font-weight:400;color:var(--dim)}.idle-difficulty-buttons button:hover{background:#262c3dd9}.idle-difficulty-buttons button.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.idle-difficulty-buttons button.active span{color:#1a1a1ab3}.fps{position:fixed;top:60px;right:12px;z-index:30;background:#11141cb3;padding:4px 10px;border-radius:4px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);pointer-events:none}