*,: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:#555560;--accent:#e04545;--accent-hover:#f05555;--accent-glow:#e0454533;--blue:#4a9eff;--blue-hover:#5aafff;--blue-dim:#4a9eff26;--green:#4ecb6e;--green-dim:#4ecb6e26;--note-color:#4a9eff;--note-hover:#5aafff;--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:900px;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:2rem;padding:1.5rem 0 2rem;display:flex}.app-logo{align-items:center;gap:.625rem;display:flex}.app-logo-icon{object-fit:contain;border-radius:8px;width:100px;height:100px}.app-logo h1{letter-spacing:-.02em;color:var(--text);font-size:1.5rem;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 .75rem;font-size:12px;display:flex}.midi-status-dot{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:7px;height:7px}.midi-status-dot.connected{background:var(--green);box-shadow:0 0 6px 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:2rem;padding:1.75rem}.record-panel-top{align-items:center;gap:1.5rem;display:flex}.record-btn{background:var(--accent);color:#fff;cursor:pointer;width:64px;height:64px;box-shadow:0 4px 20px 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;display:flex}.record-btn:hover{background:var(--accent-hover);transform:scale(1.05)}.record-btn:active{transform:scale(.97)}.record-btn.recording{animation:1.4s ease-in-out infinite pulse-record}@keyframes pulse-record{0%,to{box-shadow:0 4px 20px var(--accent-glow)}50%{box-shadow:0 4px 32px #e0454580}}.record-btn svg{fill:currentColor;width:24px;height:24px}.record-info h2{margin-bottom:.25rem;font-size:1rem;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:.08em;color:var(--text-muted);margin-bottom:.625rem;font-size:11px;font-weight:600}.active-notes-pills{flex-wrap:wrap;gap:.375rem;min-height:28px;display:flex}.note-pill{background:var(--blue-dim);border:1px solid var(--blue);color:var(--blue);border-radius:100px;padding:.2rem .6rem;font-family:SF Mono,Fira Code,monospace;font-size:12px;font-weight:500}.note-pill.active{background:var(--blue);color:#fff;animation:.1s note-flash}@keyframes note-flash{0%{transform:scale(1.1)}to{transform:scale(1)}}.sessions-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.sessions-title{color:var(--text-secondary);white-space:nowrap;font-size:1rem;font-weight:600}.search-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:280px;color:var(--text);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888890' stroke-width='2' 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:.5rem .75rem .5rem 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:1rem;transition:border-color .15s;overflow:hidden}.session-card:hover{border-color:#3a3a3e}.session-card-header{justify-content:space-between;align-items:center;gap:1rem;padding:1.125rem 1.375rem;display:flex}.session-title-input{color:var(--text);background:0 0;border:none;border-bottom:1px solid #0000;outline:none;flex:1;min-width:0;padding-bottom:1px;font-size:1rem;font-weight:600;transition:border-color .15s}.session-title-input:hover,.session-title-input:focus{border-bottom-color:var(--border)}.session-meta{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.session-meta-tag{color:var(--text-muted);background:var(--surface-raised);border-radius:4px;padding:.2rem .5rem;font-size:11px}.btn-icon{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.375rem;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:0 1.375rem 1.375rem}.piano-roll-wrap{background:var(--surface-raised);border-radius:var(--radius);width:100%;height:120px;margin-bottom:1rem;position:relative;overflow:hidden}.piano-roll-grid{background-image:repeating-linear-gradient(90deg, transparent, transparent calc(25% - 1px), var(--border-subtle) calc(25% - 1px), var(--border-subtle) 25%);pointer-events:none;position:absolute;inset:0}.piano-roll-note{background:var(--note-color);cursor:grab;opacity:.85;border-radius:3px;transition:background .1s;position:absolute}.piano-roll-note:hover{background:var(--note-hover);opacity:1}.piano-roll-note-resize{cursor:ew-resize;background:#ffffff4d;border-radius:0 3px 3px 0;width:6px;height:100%;position:absolute;top:0;right:0}.piano-roll-empty{height:100%;color:var(--text-muted);justify-content:center;align-items:center;font-size:12px;display:flex}.playback-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.btn{border-radius:var(--radius);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:.375rem;padding:.45rem .875rem;font-size:13px;font-weight:500;transition:background .15s,color .15s;display:inline-flex}.btn svg{flex-shrink:0;width:14px;height:14px}.btn-primary{background:var(--blue-dim);color:var(--blue);border:1px solid #4a9eff4d}.btn-primary:hover{background:var(--blue);color:#fff;border-color:#0000}.btn-secondary{background:var(--surface-raised);color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-hover);color:var(--text)}.btn-danger{background:var(--accent-glow);color:var(--accent);border:1px solid #e045454d}.btn-danger:hover{background:var(--accent);color:#fff;border-color:#0000}.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:.4rem .625rem;font-size:12px}.speed-select:focus{border-color:var(--blue)}.tools-row{background:var(--surface-raised);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem;display:flex}.tools-row label{color:var(--text-secondary);align-items:center;gap:.375rem;font-size:12px;display:flex}.tools-input{background:var(--surface);border:1px solid var(--border);color:var(--text);text-align:center;border-radius:6px;outline:none;width:64px;padding:.3rem .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:6px;outline:none;padding:.3rem .5rem;font-size:12px}.tools-select:focus{border-color:var(--blue)}.tools-divider{background:var(--border);width:1px;height:18px;margin:0 .125rem}.export-row{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.accordion{border-top:1px solid var(--border-subtle);margin-top:.25rem}.accordion-btn{cursor:pointer;width:100%;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;background:0 0;border:none;justify-content:space-between;align-items:center;padding:.75rem 0;font-size:12px;font-weight:600;transition:color .15s;display:flex}.accordion-btn:hover{color:var(--text)}.accordion-btn svg{width:14px;height:14px;transition:transform .2s}.accordion-btn.open svg{transform:rotate(180deg)}.accordion-body{padding-bottom:.75rem}.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:.375rem;padding:.625rem .875rem}.measure-item strong{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.375rem;font-size:11px;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:4px;padding:.15rem .5rem;font-family:SF Mono,Fira Code,monospace;font-size:11px}.sheet-music-wrap{border-radius:var(--radius);background:#fff;margin-top:.5rem;padding:1rem;overflow-x:auto}.empty-state{text-align:center;color:var(--text-muted);padding:3rem 1rem}.empty-state p{margin-top:.5rem;font-size:13px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}