:root{--bg:#07070d;--panel:#12121c;--panel2:#1a1a28;--line:#2a2a3c;--text:#e4e4ee;--dim:#8a8aa0;--accent:#4ab3ff;--hot:#ff4a6a;--good:#6be07b;--warn:#ffcf4a;--bar:#2b9ae4;--bar-weak:#eb345a}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:Segoe UI,Yu Gothic UI,Hiragino Sans,sans-serif;overflow:hidden}#game{display:block;position:fixed;inset:0}#ui{background:radial-gradient(ellipse at top, #141428 0%, var(--bg) 60%);position:fixed;inset:0;overflow-y:auto}#ui.hidden{display:none}.screen{max-width:980px;margin:0 auto;padding:32px 20px 64px}h1{letter-spacing:.04em;margin:0 0 4px;font-size:28px}h2{color:var(--accent);margin:28px 0 10px;font-size:18px}p{line-height:1.7}.sub{color:var(--dim);margin:0 0 20px}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}.card.clickable{cursor:pointer;transition:border-color .1s,transform .1s}.card.clickable:hover{border-color:var(--accent);transform:translateY(-1px)}.card h3{margin:0 0 6px;font-size:17px}.card .desc{color:var(--dim);font-size:13px;line-height:1.6}.big{font-size:30px;font-weight:700}.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:8px;padding:9px 18px;font-family:inherit;font-size:15px}.btn:hover{border-color:var(--accent)}.btn.primary{border-color:var(--accent);background:#1d4f7a}.btn.danger{border-color:var(--hot)}.row{flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;display:flex}.field{grid-template-columns:180px 1fr;align-items:center;gap:4px 12px;margin:10px 0;display:grid}.field .hint{color:var(--dim);grid-column:2;font-size:12px}input[type=number],select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;width:140px;padding:6px 8px;font-family:inherit;font-size:15px}.range{align-items:center;gap:10px;display:flex}.range input{width:220px}table{border-collapse:collapse;width:100%;font-size:14px}th,td{border-bottom:1px solid var(--line);text-align:left;padding:6px 8px}th{color:var(--dim);font-weight:400}.tag{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:99px;padding:1px 8px;font-size:12px;display:inline-block}.pass{color:var(--good)}.fail{color:var(--hot)}.dim{color:var(--dim)}.kbd{border:1px solid var(--line);background:var(--panel2);border-bottom-width:2px;border-radius:4px;padding:0 6px;font-size:12px;display:inline-block}.binding{border-bottom:1px solid var(--line);grid-template-columns:120px 1fr auto;align-items:center;gap:10px;padding:8px 0;display:grid}.binding.waiting{background:#1d2f45}.lamp{border-radius:2px;width:10px;height:10px;margin-right:6px;display:inline-block}canvas.chart{background:var(--panel);border:1px solid var(--line);border-radius:8px;width:100%;height:160px;display:block}.chart-wrap{position:relative}.chart-tip{pointer-events:none;background:var(--panel2);border:1px solid var(--line);white-space:nowrap;border-radius:6px;padding:6px 10px;font-size:12px;line-height:1.6;position:absolute}.chart-tip b{font-size:15px}.chart-tip.hidden{display:none}.table-view{margin-top:8px;font-size:13px}.table-view summary{color:var(--dim);cursor:pointer}.table-view td,.table-view th,.lane-table td,.lane-table th{font-variant-numeric:tabular-nums}.lane-table td{text-align:center;padding:4px 2px}.lane-table th{text-align:right;width:2.5em}.lane-rate{white-space:nowrap;font-size:13px}.lane-track{justify-content:center;align-items:flex-end;height:80px;margin-top:4px;display:flex}.lane-track i{background:var(--bar);border-radius:4px 4px 0 0;width:18px}.lane-track i.weak{background:var(--bar-weak)}.lane-name{font-weight:700}.pad-live{white-space:pre-wrap;background:var(--panel);border:1px solid var(--line);border-radius:8px;min-height:60px;padding:10px;font-family:Consolas,monospace;font-size:13px}.lanes-live{gap:4px;margin:10px 0;display:flex}.lanes-live div{color:#888;background:#222;border-radius:4px;justify-content:center;align-items:center;width:34px;height:46px;font-size:12px;display:flex}.lanes-live div.on{background:var(--accent);color:#000}.lanes-live div.tt{border-radius:50%;width:52px}.lanes-live div.tt.on{background:var(--hot)}.desc-2line{min-height:3.2em}.level-line{white-space:nowrap;align-items:baseline;gap:8px;margin-top:12px;display:flex}.level-num{font-variant-numeric:tabular-nums;min-width:2.1em;font-size:30px;font-weight:700}.level-star{color:var(--dim);white-space:nowrap;margin:2px 0 6px;font-size:14px}.one-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.row.nowrap{flex-wrap:nowrap}.btn.sm{padding:7px 12px}.push-right{margin-left:auto}.pad-focus{outline:2px solid var(--accent);outline-offset:2px;scroll-margin:72px 0}.card.pad-focus{border-color:var(--accent);outline-offset:3px}.field:has(.pad-focus){background:#4ab3ff14;border-radius:6px}.pad-hint{border-top:1px solid var(--line);color:var(--dim);text-align:center;background:#0a0a12f0;padding:6px 16px;font-size:12px;position:fixed;bottom:0;left:0;right:0}.pad-muted{color:var(--warn);margin-bottom:2px;display:none}.pad-hint.muted .pad-muted{display:block}.card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 18px #4ab3ff40;scroll-margin:72px 0}.pad-mod{outline:2px solid var(--warn);outline-offset:4px;border-radius:8px}