*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0d0f;--surface:#161618;--surface-raised:#1e1e21;--surface-hover:#252528;--border:#2a2a2e;--border-subtle:#1e1e22;--text:#f0f0f2;--text-secondary:#888890;--text-muted:#484850;--accent:#e04545;--accent-hover:#f05555;--accent-glow:#e045452e;--blue:#4a9eff;--blue-dim:#4a9eff1f;--green:#4ecb6e;--note-color:#4a9eff;--note-dark:#2d7fdd;--radius:8px;--radius-lg:12px;--radius-xl:16px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:14px;line-height:1.5}.app-wrapper{max-width:860px;margin:0 auto;padding:0 1.5rem 4rem}.app-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:1.75rem;padding:1.25rem 0 1.5rem;display:flex}.app-logo{align-items:center;gap:.75rem;display:flex}.app-logo-icon{object-fit:contain;border-radius:10px;width:48px;height:48px}.app-logo h1{letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.midi-status{color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);border-radius:100px;align-items:center;gap:.5rem;padding:.375rem .875rem;font-size:12px;display:flex}.midi-status-dot{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:6px;height:6px}.midi-status-dot.connected{background:var(--green);box-shadow:0 0 5px var(--green)}.midi-status-dot.error{background:var(--accent)}.record-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);margin-bottom:1.75rem;padding:1.5rem 1.75rem}.record-panel-top{align-items:center;gap:1.25rem;display:flex}.record-btn{background:var(--accent);color:#fff;cursor:pointer;width:56px;height:56px;box-shadow:0 4px 16px var(--accent-glow);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,transform .1s,box-shadow .15s,opacity .15s;display:flex}.record-btn:not(:disabled):hover{background:var(--accent-hover);transform:scale(1.06)}.record-btn:not(:disabled):active{transform:scale(.96)}.record-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.record-btn.recording{animation:1.6s ease-in-out infinite pulse-record}@keyframes pulse-record{0%,to{box-shadow:0 4px 16px var(--accent-glow)}50%{box-shadow:0 4px 28px #e0454573}}.record-btn svg{fill:currentColor;width:22px;height:22px}.record-info h2{margin-bottom:.2rem;font-size:.9375rem;font-weight:600}.record-info p{color:var(--text-secondary);font-size:12px}.record-info .recording-label{color:var(--accent);font-weight:500}.active-notes{border-top:1px solid var(--border-subtle);margin-top:1.25rem;padding-top:1.25rem}.active-notes-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.5rem;font-size:10px;font-weight:700}.active-notes-pills{flex-wrap:wrap;gap:.3rem;display:flex}.note-pill{background:var(--blue-dim);color:var(--blue);letter-spacing:.02em;border:1px solid #4a9eff59;border-radius:100px;padding:.175rem .55rem;font-family:SF Mono,Fira Code,ui-monospace,monospace;font-size:11px;font-weight:600}.note-pill.active{background:var(--blue);border-color:var(--blue);color:#fff;animation:.12s note-pop}@keyframes note-pop{0%{transform:scale(1.15)}to{transform:scale(1)}}.sessions-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.875rem;display:flex}.sessions-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-size:13px;font-weight:600}.search-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:260px;color:var(--text);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23555560' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-position:.6rem;background-repeat:no-repeat;outline:none;flex:1;padding:.45rem .75rem .45rem 2rem;font-size:13px;transition:border-color .15s}.search-input:focus{border-color:var(--blue)}.search-input::placeholder{color:var(--text-muted)}.session-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);margin-bottom:.875rem;transition:border-color .15s;overflow:hidden}.session-card:hover{border-color:#333338}.session-card-header{border-bottom:1px solid var(--border-subtle);align-items:center;gap:.75rem;padding:1rem 1.25rem;display:flex}.session-title-input{color:var(--text);background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:.9375rem;font-weight:600}.session-title-input:hover,.session-title-input:focus{text-decoration:underline;-webkit-text-decoration-color:var(--border);text-decoration-color:var(--border);text-underline-offset:3px}.session-meta{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.session-meta-tag{color:var(--text-muted);background:var(--surface-raised);border-radius:4px;padding:.175rem .5rem;font-size:11px;font-weight:500}.btn-icon{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.3rem;transition:color .15s,background .15s;display:flex}.btn-icon:hover{color:var(--text);background:var(--surface-hover)}.btn-icon.danger:hover{color:var(--accent);background:var(--accent-glow)}.session-card-body{padding:1rem 1.25rem .25rem}.piano-roll-outer{border-radius:var(--radius);border:1px solid var(--border-subtle);background:#111113;margin-bottom:1rem;display:flex;overflow:hidden}.piano-roll-empty{width:100%;height:80px;color:var(--text-muted);justify-content:center;align-items:center;font-size:12px;display:flex}.piano-roll-keys{border-right:1px solid var(--border);background:#0e0e10;flex-direction:column;flex-shrink:0;width:38px;display:flex}.piano-roll-key-row{background:#0e0e10;border-bottom:1px solid #1a1a1c;justify-content:flex-end;align-items:center;padding-right:5px;display:flex}.piano-roll-key-row.black{background:#080809}.piano-roll-key-label{color:#3a3a45;letter-spacing:0;font-family:SF Mono,Fira Code,ui-monospace,monospace;font-size:7px;font-weight:700;line-height:1}.piano-roll-canvas{flex:1;position:relative;overflow:hidden}.piano-roll-pitch-row{pointer-events:none;border-bottom:1px solid #191919;position:absolute;left:0;right:0}.piano-roll-pitch-row.black{background:#00000038}.piano-roll-beat-grid{pointer-events:none;z-index:1;background-image:repeating-linear-gradient(90deg,#0000,#0000 calc(25% - 1px),#222226 calc(25% - 1px) 25%);position:absolute;inset:0}.piano-roll-note{background:var(--note-color);cursor:grab;z-index:2;border:none;border-radius:2px;padding:0;transition:filter .1s;position:absolute}.piano-roll-note:hover{filter:brightness(1.25)}.piano-roll-note-resize{cursor:ew-resize;background:#ffffff40;border-radius:0 2px 2px 0;width:5px;height:100%;position:absolute;top:0;right:0}.playback-row{flex-wrap:wrap;align-items:center;gap:.375rem;margin-bottom:.75rem;display:flex}.btn{border-radius:var(--radius);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:.35rem;padding:.4rem .8rem;font-size:12.5px;font-weight:500;line-height:1;transition:background .13s,color .13s,border-color .13s;display:inline-flex}.btn svg{flex-shrink:0;width:13px;height:13px}.btn-primary{background:var(--blue);color:#fff;border-color:#0000}.btn-primary:hover{background:#5aafff}.btn-secondary{background:var(--surface-raised);color:var(--text-secondary);border-color:var(--border)}.btn-secondary:hover{background:var(--surface-hover);color:var(--text)}.speed-select{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;outline:none;margin-left:auto;padding:.375rem .6rem;font-size:12px}.speed-select:focus{border-color:var(--blue)}.tools-row{background:var(--surface-raised);border-radius:var(--radius);border:1px solid var(--border-subtle);flex-wrap:wrap;align-items:center;gap:.625rem;margin-bottom:.75rem;padding:.625rem .875rem;display:flex}.tools-row label{color:var(--text-secondary);align-items:center;gap:.375rem;font-size:12px;font-weight:500;display:flex}.tools-input{background:var(--surface);border:1px solid var(--border);color:var(--text);text-align:center;border-radius:5px;outline:none;width:56px;padding:.25rem .5rem;font-size:12px}.tools-input:focus{border-color:var(--blue)}.tools-select{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:5px;outline:none;padding:.25rem .5rem;font-size:12px}.tools-select:focus{border-color:var(--blue)}.tools-divider{background:var(--border);width:1px;height:16px}.export-row{flex-wrap:wrap;gap:.375rem;margin-bottom:.25rem;display:flex}.accordion{border-top:1px solid var(--border-subtle)}.accordion-btn{cursor:pointer;width:100%;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;background:0 0;border:none;justify-content:space-between;align-items:center;padding:.7rem 0;font-size:11px;font-weight:700;transition:color .13s;display:flex}.accordion-btn:hover{color:var(--text-secondary)}.accordion-btn svg{width:13px;height:13px;color:var(--text-muted);transition:transform .18s}.accordion-btn.open svg{transform:rotate(180deg)}.accordion-body{padding-bottom:.875rem}.chord-pills{flex-wrap:wrap;gap:.375rem;display:flex}.chord-pill{background:var(--surface-raised);border:1px solid var(--border);color:var(--text-secondary);border-radius:100px;padding:.2rem .7rem;font-size:12px;font-weight:500}.measure-item{background:var(--surface-raised);border-radius:var(--radius);margin-bottom:.3rem;padding:.5rem .75rem}.measure-item strong{text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:.3rem;font-size:10px;font-weight:700;display:block}.measure-note-list{flex-wrap:wrap;gap:.25rem;list-style:none;display:flex}.measure-note-list li{color:var(--text-secondary);background:var(--surface);border-radius:3px;padding:.1rem .45rem;font-family:SF Mono,Fira Code,ui-monospace,monospace;font-size:11px}.sheet-music-container{border-radius:var(--radius);overflow:hidden}.sheet-music-loading,.sheet-music-error{color:var(--text-muted);background:var(--surface-raised);border-radius:var(--radius);align-items:center;gap:.625rem;padding:1.25rem 1rem;font-size:12px;display:flex}.sheet-music-error{color:var(--accent)}.sheet-music-spinner{border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sheet-music-wrap{border-radius:var(--radius);background:#fff;padding:1.25rem 1rem .5rem;overflow-x:auto}.empty-state{text-align:center;color:var(--text-muted);padding:3.5rem 1rem}.empty-state p{margin-top:.5rem;font-size:13px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}