:root{--ink: #1d2126;--accent: #1565c0;--danger: #c62828;--muted: #8a939c;font-family:system-ui,sans-serif;color:var(--ink)}body{margin:0;background:#f6f7f8}#app{max-width:1000px;margin:0 auto;padding:12px}.toolbar,.palette{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;background:#fff;border:1px solid #e0e3e6;border-radius:8px;margin-bottom:8px}.toolbar input.title{width:160px;font-weight:600}.toolbar input[type=number]{width:64px}.toolbar button,.palette button{padding:4px 10px;border:1px solid #cfd5da;border-radius:6px;background:#fff;cursor:pointer;font-size:14px}.toolbar button:disabled{opacity:.4;cursor:default}.palette button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.palette button:has(.note-glyph){display:inline-flex;align-items:center;padding:2px 8px}.note-glyph{display:block}.note-glyph .head{fill:currentColor}.note-glyph .head.hollow{fill:none;stroke:currentColor;stroke-width:1.4}.note-glyph .stem,.note-glyph .flag{stroke:currentColor;stroke-width:1.4;fill:none}.banner{padding:8px 12px;margin-bottom:8px;border-radius:6px;cursor:pointer;background:#fff8e1;border:1px solid #f0e0a0}.score-box{background:#fff;border:1px solid #e0e3e6;border-radius:8px;padding:8px}svg.score{display:block}.staff-line,.tab-line{stroke:#555;stroke-width:1}.barline{stroke:#999;stroke-width:1}.ledger{stroke:#555;stroke-width:1}.clef{font-size:44px;fill:var(--ink)}.keysig,.accidental{font-size:15px;fill:var(--ink)}.timesig{font-size:17px;font-weight:700;fill:var(--ink)}.tab-label{font-size:9px;fill:var(--muted);letter-spacing:1px}.note .head{fill:var(--ink)}.note .head.hollow{fill:#fff;stroke:var(--ink);stroke-width:1.4}.note .stem,.note .flag{stroke:var(--ink);stroke-width:1.4;fill:none}.note .dot{fill:var(--ink)}.note .note-hit{fill:transparent}.note{cursor:pointer}.note.selected .head,.note.selected .dot{fill:var(--accent)}.note.selected .head.hollow{fill:#fff;stroke:var(--accent)}.note.selected .stem,.note.selected .flag{stroke:var(--accent)}.note.out-of-range .head,.note.out-of-range .dot{fill:var(--danger)}.note.out-of-range .stem,.note.out-of-range .flag{stroke:var(--danger)}.ghost{fill:var(--accent);opacity:.45}.ghost-label{font-size:11px;fill:var(--accent)}.playhead{stroke:var(--accent);stroke-width:1.5;opacity:.8}.chord-symbol{font-size:15px;font-weight:700;fill:var(--accent)}.tab-fret{font-size:10px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3}.diagrams{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin-top:8px}.capo-label{width:100%;font-size:13px;color:var(--muted)}.diagram{background:#fff;border:1px solid #e0e3e6;border-radius:8px;padding:4px 6px;text-align:center}.diagram-name{font-size:13px;font-weight:700;color:var(--accent)}.diagram .grid{stroke:#777;stroke-width:1}.diagram .grid.nut{stroke-width:3}.diagram .dot{fill:var(--ink)}.diagram .open{fill:none;stroke:var(--ink);stroke-width:1.2}.diagram .mute,.diagram .base-fret,.diagram .no-shape{font-size:10px;fill:var(--muted)}