:root{--bg:#f7f5f0;--paper:#fff;--ink:#222;--accent:#2b6cb0;--accent2:#8051b0;--good:#2f9e44;--bad:#e03131;--neutral:#495057;--border:#d7d2c8;--radius:10px}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{max-width:860px;margin:0 auto;padding:24px 20px 48px}.app-header{text-align:center;margin-bottom:20px}.app-header h1{margin:0 0 6px;font-size:2rem}.subtitle{color:var(--neutral);margin:0;font-size:.95rem}.toolbar{flex-wrap:wrap;justify-content:center;gap:18px;margin-bottom:18px;display:flex}.toolbar-group{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:6px;padding:8px 10px;display:flex}.label{color:var(--neutral);margin-right:4px;font-size:.85rem}.btn{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:8px;padding:8px 14px;font-size:.95rem;transition:background .15s,border-color .15s,transform 50ms}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.btn-small{padding:5px 10px;font-size:.85rem}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-accent{background:var(--accent2);border-color:var(--accent2);color:#fff}.btn-primary:hover,.btn-accent:hover{filter:brightness(1.08)}.sheet{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 2px 6px #0000000f}.staff{width:100%;overflow-x:auto}.staff svg{max-width:100%;height:auto;margin:0 auto;display:block}.hint{text-align:center;color:var(--neutral);margin-top:10px;font-size:.85rem}.piano{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);white-space:nowrap;margin:14px 0;padding:12px;overflow-x:auto;box-shadow:0 2px 6px #0000000f}.piano .key{vertical-align:bottom;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #999;border-radius:0 0 3px 3px;display:inline-block;position:relative}.piano .key.white{background:#fff;width:34px;height:120px;margin-left:-1px}.piano .key.black{z-index:2;vertical-align:top;background:#222;width:22px;height:70px;margin:-1px -11px 0}.piano .key:hover{border-color:var(--accent)}.piano .key.pressed{background:#a6c9e8}.piano .key.black.pressed{background:#6b8db5}.piano .key .key-label{text-align:center;color:#555;font-size:11px;position:absolute;bottom:4px;left:0;right:0}.controls{flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 18px;display:flex}.status{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.status-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:14px}.status-label{color:var(--neutral);font-size:.8rem}.status-value{margin-top:4px;font-size:1.35rem;font-weight:600}.feedback .status-value{min-height:1.4em;font-size:1.1rem}@media (width<=640px){.status{grid-template-columns:1fr}}.status-value.good{color:var(--good)}.status-value.bad{color:var(--bad)}.status-value.warn{color:#e8590c}.staff{position:relative}.row-key{border:1px solid var(--border);color:var(--neutral);background:#fff;border-radius:4px;padding:1px 2px;font-size:.75rem;position:absolute}.tempo{color:var(--neutral);align-items:center;gap:8px;font-size:.85rem;display:flex}.tempo span{min-width:64px}.pitch-label{fill:#495057;font:9px Segoe UI,system-ui,sans-serif}.pitch-arrow{fill:#e03131;font:700 15px Segoe UI,system-ui,sans-serif}.text-input{border:1px solid var(--border);border-radius:8px;width:150px;padding:5px 8px;font-size:.85rem}.btn:disabled{opacity:.5;cursor:default}.hide-pitch .pitch-label{display:none}