:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #111;--surface2: #1a1a1a;--border: rgba(255,255,255,.08);--border2: rgba(255,255,255,.15);--text: #fafafa;--text-dim: rgba(255,255,255,.55);--accent: #60a5fa;--accent2: #a78bfa;--radius: 6px}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}input,select,textarea{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--surface);gap:1rem}.app-title{font-size:1rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap}.header-center{display:flex;gap:.5rem;flex:1;justify-content:center}.song-title-input,.song-artist-input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:.3rem .6rem;font-size:.85rem}.song-title-input{width:14rem;font-weight:600}.song-artist-input{width:10rem;color:var(--text-dim)}.icon-btn{width:2rem;height:2rem;display:grid;place-items:center;border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border);font-size:1rem}.icon-btn:hover{background:var(--border)}.settings-panel{display:flex;gap:1.5rem;padding:.6rem 1rem;background:var(--surface2);border-bottom:1px solid var(--border);align-items:center}.settings-row{display:flex;align-items:center;gap:.4rem}.settings-row label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.settings-row select,.settings-row input[type=number]{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.2rem .4rem;font-size:.8rem;width:4rem}.settings-row input[type=range]{width:6rem;accent-color:var(--accent)}.settings-hint{font-size:.7rem;color:var(--text-dim)}.section-bar{padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--surface);overflow-x:auto}.section-list{display:flex;gap:.4rem;align-items:center}.section-chip{display:flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:var(--radius);background:var(--surface2);border:2px solid transparent;cursor:pointer;font-size:.8rem;white-space:nowrap;transition:border-color .15s;-webkit-user-select:none;user-select:none}.section-chip.active{background:#ffffff0f}.section-chip.playing{box-shadow:0 0 8px #60a5fa66}.section-chip.muted{opacity:.4}.section-color{width:8px;height:8px;border-radius:50%;flex-shrink:0}.section-name{font-weight:500}.section-mute,.section-remove{width:1.2rem;height:1.2rem;display:grid;place-items:center;border-radius:3px;font-size:.65rem;opacity:0;transition:opacity .15s}.section-chip:hover .section-mute,.section-chip:hover .section-remove{opacity:1}.section-mute:hover,.section-remove:hover{background:#ffffff1a}.section-add-wrapper{position:relative}.section-add-btn{padding:.3rem .6rem;border-radius:var(--radius);border:1px dashed var(--border2);font-size:.8rem;color:var(--text-dim)}.section-add-btn:hover{border-color:var(--accent);color:var(--accent)}.section-add-menu{position:absolute;top:100%;left:0;margin-top:.3rem;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:.3rem;display:flex;flex-direction:column;gap:.15rem;z-index:100;min-width:8rem}.section-add-item{padding:.3rem .5rem;border-radius:4px;font-size:.8rem;text-align:left}.section-add-item:hover{background:#ffffff0f}.transport{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--surface)}.transport-btn{padding:.4rem 1rem;border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border);font-size:.8rem;font-weight:500}.transport-btn:hover{background:#ffffff14}.play-btn{background:var(--accent);border-color:var(--accent);color:#000}.play-btn:hover{background:#7db8fc}.transport-info{display:flex;gap:.6rem;align-items:center;margin-left:.5rem}.transport-key,.transport-tempo{font-size:.75rem;padding:.15rem .5rem;background:var(--bg);border-radius:var(--radius);font-family:ui-monospace,monospace}.transport-section{font-size:.8rem;font-weight:600}.transport-meta{display:flex;align-items:center;gap:.4rem;margin-left:auto}.transport-meta label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.transport-meta select{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.2rem .3rem;font-size:.8rem;width:4rem}.section-name-input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.2rem .5rem;font-size:.8rem;width:8rem}.editor-area{flex:1;display:flex;overflow:hidden;min-height:0}.piano-roll{flex:1;display:flex;overflow:hidden;min-width:0}.piano-labels{width:3rem;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface);overflow-y:auto;scrollbar-width:none}.piano-labels::-webkit-scrollbar{display:none}.piano-key-label{height:16px;display:flex;align-items:center;justify-content:flex-end;padding-right:.3rem;font-size:.55rem;font-family:ui-monospace,monospace;color:var(--text-dim);border-bottom:1px solid var(--border)}.piano-key-label.black{background:var(--surface2)}.piano-grid-scroll{flex:1;overflow:auto;position:relative;min-width:0}.piano-grid{display:grid;grid-template-rows:repeat(auto-fill,16px);min-width:max-content}.grid-cell{height:16px;border-right:1px solid rgba(255,255,255,.02);border-bottom:1px solid var(--border);cursor:crosshair;transition:background .08s}.grid-cell.white-row{background:#ffffff03}.grid-cell.black-row{background:#ffffff08}.grid-cell:nth-child(4n+1){border-left:1px solid rgba(255,255,255,.06)}.grid-cell:hover{background:#ffffff14!important}.grid-cell.has-note{background:var(--accent)!important;border-radius:2px}.grid-cell.active-step{background:#ffffff0f!important}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#f472b6;pointer-events:none;z-index:10;box-shadow:0 0 6px #f472b6}.side-panel{width:20rem;flex-shrink:0;border-left:1px solid var(--border);background:var(--surface);overflow-y:auto;display:flex;flex-direction:column}.lyrics-panel{padding:.75rem;border-bottom:1px solid var(--border)}.lyrics-field{margin-bottom:.5rem}.lyrics-field label{display:block;font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem}.lyrics-field textarea,.lyrics-field .chords-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .5rem;font-size:.8rem;resize:vertical}.chords-input{height:2rem}.lyrics-field textarea:focus,.chords-input:focus{outline:none;border-color:var(--accent)}.chord-suggestions{padding:.75rem;border-bottom:1px solid var(--border)}.chord-suggestions h3{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}.chord-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem}.chord-btn{padding:.35rem;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);font-size:.75rem;font-family:ui-monospace,monospace;transition:background .1s,border-color .1s}.chord-btn:hover{background:var(--surface2);border-color:var(--accent)}.song-overview{padding:.75rem;flex:1}.song-overview h3{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}.structure-blocks{display:flex;flex-wrap:wrap;gap:.3rem}.structure-block{padding:.3rem .6rem;border-radius:var(--radius);font-size:.7rem;font-weight:600;color:#000;cursor:pointer;transition:opacity .15s,transform .1s}.structure-block:hover{transform:scale(1.05)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}