:root{--text:#485261;--text-h:#101820;--muted:#6f7a86;--bg:#eef2f5;--panel:#fff;--surface:#f8fafb;--border:#d8e0e7;--accent:#0d7480;--button-bg:#101820;--button-border:#101820;--button-text:#fff;--shadow:0 18px 50px #141f2b14;--sans:Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;font:16px/1.5 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}h1,h2,p{margin:0}h1,h2{color:var(--text-h)}h1{letter-spacing:0;font-size:42px;font-weight:800;line-height:1.02}h2{letter-spacing:0;font-size:18px;font-weight:800;line-height:1.2}#root{min-height:100svh}@media (width<=640px){h1{font-size:30px}}.app-shell{flex-direction:column;gap:24px;min-height:100svh;padding:28px;display:flex}.top-bar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:end;gap:20px;padding-bottom:22px;display:flex}.eyebrow{color:var(--muted);letter-spacing:0;text-transform:uppercase;margin:0 0 8px;font-size:13px;font-weight:700}.upload-button,button{border:1px solid var(--button-border);min-height:42px;color:var(--button-text);background:var(--button-bg);font:700 14px/1 var(--sans);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:0 16px;transition:border-color .16s,transform .16s,background .16s;display:inline-flex}.upload-button:hover,button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.45}.upload-button input{clip:rect(0 0 0 0);block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.workspace{grid-template-columns:minmax(0,1fr) 360px;align-items:stretch;gap:24px;display:grid}.waveform-panel,.chart-panel{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:8px}.waveform-panel{flex-direction:column;gap:18px;min-height:610px;padding:20px;display:flex}.play-panel{color:#dbe6ef;background:#101820}.waveform-panel:fullscreen{box-sizing:border-box;border:0;border-radius:0;block-size:100vh;inline-size:100vw;padding:16px}.play-panel h2,.play-panel .transport,.play-panel .game-actions span{color:#eef2f5}.play-panel .panel-header p{color:#a9b8c5}.panel-header,.note-list-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.panel-header p{color:var(--muted);margin-top:6px;font-size:14px}.transport{color:var(--text);font-family:var(--mono);white-space:nowrap;align-items:center;gap:12px;display:flex}.transport button{inline-size:46px;font-family:var(--mono);padding:0;font-size:18px}.mode-switch{border:1px solid var(--border);background:var(--surface);border-radius:7px;grid-template-columns:repeat(2,1fr);display:grid;overflow:hidden}.mode-switch button{inline-size:auto;min-height:40px;color:var(--text);background:0 0;border:0;border-radius:0;padding-inline:12px;font-size:13px}.mode-switch button.active{color:var(--button-text);background:var(--accent)}.waveform-canvas{border:1px solid var(--border);cursor:crosshair;border-radius:8px;block-size:430px;inline-size:100%}.game-stage-wrap{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#101820;border-radius:8px;block-size:460px;min-block-size:360px;inline-size:100%;position:relative;overflow:hidden}.game-stage-wrap:focus-visible{outline-offset:3px;outline:2px solid #f1c84b}.waveform-panel:fullscreen .game-stage-wrap{flex:1;block-size:auto;min-block-size:0}:is(.waveform-panel:fullscreen .panel-header,.waveform-panel:fullscreen .play-settings,.waveform-panel:fullscreen .game-actions){flex-shrink:0}.game-stage{position:absolute;inset:0}.game-stage canvas{block-size:100%;inline-size:100%;display:block}.score-overlay{pointer-events:none;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#101820b8;border:1px solid #ffffff38;border-radius:8px;min-inline-size:168px;padding:12px 14px;position:absolute;inset-block-start:16px;inset-inline-start:16px;box-shadow:0 14px 34px #00000047}.score-overlay span{color:#ffffffc2;letter-spacing:0;text-transform:uppercase;font-size:12px;font-weight:900;display:block}.score-overlay strong{font-family:var(--mono);margin-top:6px;font-size:30px;line-height:1;display:block}.score-overlay p{color:#ffffffc7;font-family:var(--mono);margin:6px 0 0;font-size:13px}.lane-label-overlay{pointer-events:none;grid-template-columns:repeat(4,1fr);gap:8px;display:grid;position:absolute;inset-block-end:18px;inset-inline:8%}.lane-label-overlay span{color:#fff;background:#101820bd;border:1px solid #ffffff52;border-radius:7px;justify-self:center;place-items:center;block-size:42px;inline-size:42px;font-weight:900;display:grid;box-shadow:0 10px 24px #00000047}.status,.error,.empty{color:var(--muted);margin:0;font-size:14px}.error{color:#b42318}.chart-panel{flex-direction:column;gap:20px;padding:18px;display:flex}.game-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.play-settings{grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px;display:grid}.play-settings label{border:1px solid var(--border);background:var(--surface);border-radius:7px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:10px 12px;display:grid}.play-settings span{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:800}.play-settings select{min-width:0;border:1px solid var(--border);inline-size:100%;color:var(--text-h);background:var(--panel);font:700 14px/1 var(--sans);border-radius:6px;padding:8px 10px}.play-panel .play-settings label{background:#ffffff14;border-color:#ffffff29}.play-panel .play-settings span{color:#a9b8c5}.game-actions button{min-height:38px}.game-actions span{color:var(--muted);font-size:14px}.score-board{border:1px solid var(--border);color:#fff;background:linear-gradient(135deg,#0d7480e6,#101820f5),#101820;border-radius:8px;padding:16px}.score-board span{letter-spacing:0;text-transform:uppercase;font-size:13px;font-weight:800;display:block}.score-board strong{margin-top:8px;font-size:34px;line-height:1;display:block}.score-board p{color:#ffffffc7;font-family:var(--mono);margin-top:8px;font-size:13px}.metric-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.metric-grid div{border:1px solid var(--border);background:var(--surface);border-radius:7px;min-width:0;padding:12px}.metric-grid span{color:var(--muted);margin-bottom:8px;font-size:12px;display:block}.metric-grid strong{color:var(--text-h);font-size:20px;line-height:1;display:block}.judgment-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.judgment-grid div{border:1px solid var(--border);background:var(--surface);text-align:center;border-radius:7px;min-width:0;padding:10px 8px}.judgment-grid span{color:var(--muted);font-size:11px;display:block}.judgment-grid strong{color:var(--text-h);margin-top:5px;font-size:18px;line-height:1;display:block}.lanes{grid-template-columns:repeat(4,1fr);gap:8px;min-height:180px;display:grid}.lane{border:1px solid var(--border);background:linear-gradient(180deg, transparent 0, #0d748014 100%), var(--surface);border-radius:7px;justify-content:center;align-items:end;padding:12px 0;display:flex}.lane span{color:#fff;background:#16202d;border-radius:6px;place-items:center;block-size:34px;inline-size:34px;font-weight:800;display:grid}.note-list{flex-direction:column;gap:9px;display:flex}.note-list-header button{min-height:34px;padding-inline:12px}.note-row{min-height:34px;color:var(--text);font-family:var(--mono);grid-template-columns:82px 32px 1fr;align-items:center;gap:10px;font-size:13px;display:grid}.note-row strong{color:#fff;block-size:28px;inline-size:28px;font-family:var(--sans);background:#d65141;border-radius:6px;place-items:center;display:grid}meter{block-size:10px;inline-size:100%}@media (width<=920px){.app-shell{padding:18px}.top-bar,.panel-header{flex-direction:column;align-items:stretch}.transport{flex-wrap:wrap}.workspace{grid-template-columns:1fr}.waveform-panel{min-height:auto}.waveform-canvas{block-size:320px}.game-stage-wrap{block-size:360px}.play-settings{grid-template-columns:1fr}}