:root{color:#182026;background:#f5f7f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,select,input{font:inherit}button{min-height:40px;border:1px solid #c6d0d7;border-radius:8px;background:#fff;color:#182026;padding:0 14px;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button.primary{border-color:#176b87;background:#176b87;color:#fff}select,input{width:100%;min-height:40px;border:1px solid #c6d0d7;border-radius:8px;background:#fff;color:#182026;padding:0 10px}h1,h2,h3,p{margin:0}h1{font-size:28px;line-height:1.15}h2{font-size:18px}h3{font-size:14px}.app-shell{min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 32px;border-bottom:1px solid #dce3e7;background:#fff}.topbar p,.muted{color:#61717c}.state-pill{min-width:96px;border:1px solid #c6d0d7;border-radius:999px;padding:8px 12px;text-align:center;background:#f5f7f8;color:#40515c}.topbar-meta{display:flex;align-items:center;gap:10px}.version-pill{min-width:72px;border:1px solid #d2d9de;border-radius:999px;padding:8px 12px;text-align:center;background:#edf6f8;color:#176b87;font-variant-numeric:tabular-nums}.layout{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:24px;padding:24px 32px}.sidebar,.workspace,.settings-panel,.midi-panel,.progress-panel,.score-panel,.shortcut-panel{display:flex;flex-direction:column;gap:16px}.panel{border:1px solid #d8e0e5;border-radius:8px;background:#fff;padding:18px}.settings-panel label{display:flex;flex-direction:column;gap:6px;color:#40515c}.checkbox-row{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;cursor:pointer}.checkbox-row input{width:auto;min-height:auto;margin-top:3px}.checkbox-row span{display:grid;gap:4px}.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.static-settings,.stats-grid,.legend,.actions{display:flex;flex-wrap:wrap;gap:10px}.static-settings span,.stats-grid span,.legend-item{border:1px solid #d8e0e5;border-radius:999px;padding:6px 10px;background:#f5f7f8;color:#40515c;font-size:13px}.shortcut-grid{display:grid;gap:8px}.shortcut-grid span{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #edf1f3;padding-top:8px;color:#40515c}.shortcut-grid strong{display:inline-grid;min-width:42px;min-height:28px;place-items:center;border:1px solid #c6d0d7;border-radius:6px;background:#fbfcfd;color:#176b87;font-variant-numeric:tabular-nums}.error-text{color:#b3261e}.progress-number{font-size:32px;font-weight:700}.workspace{min-width:0}.ready-panel{display:grid;min-height:420px;align-content:center;justify-items:center;gap:18px;text-align:center}.countdown-stage{position:relative}.countdown-view{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;min-height:190px;pointer-events:none}.count-number{font-size:clamp(72px,18vw,180px);font-weight:800;color:#176b87;line-height:1;opacity:0;text-shadow:0 8px 28px rgba(255,255,255,.95);animation:count-fade .78s ease-out both}@keyframes count-fade{0%{opacity:0;transform:scale(.86)}28%{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}.staff-card{overflow-x:auto}.staff{min-width:980px}.recording-strip{display:flex;align-items:center;gap:12px;border-left:5px solid #d1495b;border-radius:8px;background:#fff7f8;padding:14px 16px}.score-main{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.score-main strong{font-size:52px;line-height:1;color:#176b87}.compare-panel{display:flex;flex-direction:column;gap:14px;overflow-x:auto}.compare-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.piano-roll{width:100%;min-width:980px;border:1px solid #e1e7eb;border-radius:8px;background:#fbfcfd}.beat-line{stroke:#cbd5dc;stroke-width:1}.measure-line{stroke:#7d8b95;stroke-width:1.5}.lane-title,.pitch-label{fill:#61717c;font-size:12px}.note-block{stroke:#18202647;stroke-width:1}.note-block.correct,.legend-item.correct{fill:#2f9e73;background:#e7f5ef;color:#17684b}.note-block.wrong_pitch,.legend-item.wrong_pitch{fill:#d1495b;background:#fff0f2;color:#9b2434}.note-block.early,.note-block.late,.note-block.too_short,.note-block.too_long,.legend-item.early{fill:#f2a541;background:#fff5e6;color:#8a520c}.note-block.missed,.note-block.extra,.legend-item.missed{fill:#6f7d88;background:#eef2f4;color:#40515c}.match-list{display:grid;gap:8px}.match-row{display:grid;grid-template-columns:80px 96px 1fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #edf1f3}.velocity-panel{display:flex;flex-direction:column;gap:16px}.velocity-summary{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center}.velocity-metric{display:grid;justify-items:end;gap:2px}.velocity-metric span{color:#61717c;font-size:12px}.velocity-metric strong{color:#176b87;font-size:28px;line-height:1}.velocity-badge{border:1px solid #c6d0d7;border-radius:999px;padding:7px 11px;background:#f5f7f8;color:#40515c;white-space:nowrap}.velocity-list{display:grid;gap:10px}.velocity-row{display:grid;grid-template-columns:86px minmax(140px,1fr) 42px 56px;gap:12px;align-items:center}.velocity-note,.velocity-value,.velocity-diff{color:#40515c;font-variant-numeric:tabular-nums}.velocity-track{height:12px;overflow:hidden;border-radius:999px;background:#edf1f3}.velocity-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f9e73,#176b87)}.finished-panel{display:flex;flex-direction:column;gap:18px}.analysis-panel{display:flex;flex-direction:column;gap:14px}.analysis-header{display:flex;flex-direction:column;gap:4px}.analysis-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.analysis-metric{display:grid;gap:4px;padding:12px;border:1px solid #e3e8eb;border-radius:8px;background:#fbfcfd}.analysis-metric span,.analysis-zone-head span,.analysis-zone-foot span{color:#61717c;font-size:12px}.analysis-metric strong{font-size:28px;color:#176b87;line-height:1}.analysis-badges{display:flex;flex-wrap:wrap;gap:8px}.analysis-badges span,.analysis-snippet span{border:1px solid #d8e0e5;border-radius:999px;padding:6px 10px;background:#f5f7f8;color:#40515c;font-size:13px}.analysis-snippet{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.analysis-zone{display:grid;gap:8px;padding:12px;border:1px solid #e3e8eb;border-radius:8px;background:#fff}.analysis-zone-head,.analysis-zone-foot{display:flex;justify-content:space-between;gap:12px}.analysis-zone-bar{height:10px;overflow:hidden;border-radius:999px;background:#edf1f3}.analysis-zone-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#7aa2f7,#176b87)}.trend.weak{color:#9b2434}.trend.neutral{color:#40515c}.trend.strong{color:#17684b}@media(max-width:860px){.topbar,.layout{padding-inline:16px}.layout{grid-template-columns:1fr}.compare-header,.topbar{align-items:flex-start;flex-direction:column}.velocity-summary,.velocity-row{grid-template-columns:1fr;justify-items:stretch}.velocity-metric{justify-items:start}.analysis-summary,.analysis-grid{grid-template-columns:1fr}}