:root{--bg:#f7f6f2;--surface:#fff;--text:#1d1c1a;--muted:#5d5a54;--accent:#2f5d8a;--border:#dedad2;--on-accent:#fff;--lock-tint:#2f5d8a14;--section-tint:#faf8f3;--paper:#fff;--gutter:16px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#151514;--surface:#1f1f1d;--text:#ecebe7;--muted:#a8a59e;--accent:#8db8e3;--border:#34332f;--on-accent:#10202f;--lock-tint:#8db8e31a;--section-tint:#282825;--paper:#fbfaf7;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#151514;--surface:#1f1f1d;--text:#ecebe7;--muted:#a8a59e;--accent:#8db8e3;--border:#34332f;--on-accent:#10202f;--lock-tint:#8db8e31a;--section-tint:#282825;--paper:#fbfaf7;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}.site-header,main{max-width:1100px;padding:0 var(--gutter);margin:0 auto}.site-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.site-header h1{margin:24px 0 4px}.theme-toggle{flex-shrink:0;align-items:center;gap:6px;margin-top:24px;padding:4px 12px;display:inline-flex}.tagline,.hint{color:var(--muted);margin-top:0}.card{background:var(--surface);border:1px solid var(--border);padding:var(--gutter);margin:var(--gutter) 0;border-radius:8px}.card h2{margin-top:0;font-size:1.15rem}.transport{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}button{font:inherit;border:1px solid var(--accent);background:var(--accent);color:var(--surface);cursor:pointer;border-radius:6px;padding:6px 16px}button.play{border-radius:999px;justify-content:center;align-items:center;gap:8px;min-width:7.5rem;padding:10px 22px;font-size:1.1rem;font-weight:600;display:inline-flex;box-shadow:0 1px 3px #0000002e}.transport[data-player-state=playing] button.play{background:var(--playing-button);border-color:var(--playing-button);color:#fff}.play-icon{flex:none}button.secondary{color:var(--accent);background:0 0}button:disabled{opacity:.5;cursor:progress}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.score-paper{background:var(--paper);border-radius:6px;overflow-x:auto}.controls{--band-inset:12px;margin-bottom:16px}.controls fieldset{border:0;flex-wrap:wrap;align-items:end;gap:12px 20px;margin:0 0 12px;padding:0;display:flex}.controls fieldset+fieldset{margin-top:36px}.controls fieldset.tinted{background:var(--section-tint);margin-left:calc(-1 * var(--band-inset));margin-right:calc(-1 * var(--band-inset));padding:var(--band-inset);border-radius:8px}.controls fieldset.tinted+fieldset{margin-top:var(--gutter)}.controls legend{float:left;text-transform:uppercase;letter-spacing:.04em;width:100%;color:var(--muted);grid-column:1/-1;padding:0;font-size:.8rem;font-weight:600}.controls .tuning{color:var(--muted);font-variant-numeric:tabular-nums;align-self:center;padding-top:1.2rem}[hidden]{display:none!important}.controls label{color:var(--muted);flex-direction:column;gap:4px;font-size:.9rem;display:flex}.controls label.inline{color:var(--text);flex-direction:row;align-items:center}select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;min-width:10rem;padding:6px 8px}select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#key-details h3{margin:0 0 8px;font-size:1.1rem}.note-list{flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none;display:flex}.note-list li{text-align:center;border:1px solid var(--border);background:var(--bg);border-radius:999px;min-width:2.4rem;padding:4px 8px}.facts{margin:0 0 4px}.table-scroll{margin-top:8px;overflow-x:auto}.chord-table{border-collapse:collapse;min-width:100%}.chord-table th,.chord-table td{text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;padding:6px 12px 6px 0}.chord-table th{color:var(--muted);font-size:.85rem;font-weight:600}.chord-table .roman{font-family:Georgia,Times New Roman,serif}.chord-table .symbol{font-weight:600}.error{color:#b3261e}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .error{color:#f2b8b5}}:root[data-theme=dark] .error{color:#f2b8b5}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}input[type=number]{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;width:5.5rem;padding:6px 8px}.progression{flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none;display:flex}.progression li{border:1px solid var(--border);background:var(--bg);border-radius:6px;flex-direction:column;align-items:center;min-width:3.5rem;padding:6px 10px;display:flex}.progression .symbol{font-weight:600}.progression li.locked{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--lock-tint)}.progression-hint{margin-bottom:6px;font-size:.85rem}.progression .lock{border:1px dashed var(--border);min-width:24px;min-height:24px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border-radius:12px;align-items:center;gap:3px;margin-top:4px;padding:0 6px;font-size:.7rem;display:inline-flex}.progression .lock:hover,.progression .lock:focus-visible{border-style:solid;border-color:var(--accent);color:var(--accent)}.progression li.locked .lock{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}.progression .roman{color:var(--muted);font-family:Georgia,Times New Roman,serif;font-size:.85rem}details>summary{cursor:pointer;list-style-position:outside}details>summary h2{margin:0;display:inline}details[open]>summary{margin-bottom:12px}.mixer{color:var(--muted);flex-wrap:wrap;gap:8px 24px;margin:-4px 0 12px;font-size:.9rem;display:flex}.mixer label{align-items:center;gap:8px;display:flex}.mixer input[type=range]{width:9rem;accent-color:var(--accent)}.mixer output{font-variant-numeric:tabular-nums;min-width:3.2em;color:var(--text)}:root{--playing:#e8590c;--playing-bar:#e8590c1f;--playing-button:#c2410c}#score .at-cursor-bar{background:var(--playing-bar)}#score .at-cursor-beat{background:var(--playing);opacity:.85;width:3px}#score .at-highlight *{fill:var(--playing);stroke:var(--playing)}.controls select,.controls input[type=number],.controls button{height:2.4rem}.notice{border:1px solid var(--accent);background:var(--bg);border-radius:6px;justify-content:space-between;align-items:start;gap:12px;margin:0 0 16px;padding:10px 12px;display:flex}.notice p{margin:0}.notice p+p{margin-top:4px}.notice button{flex:none;padding:2px 12px}@media (max-width:640px){.controls fieldset{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:10px 12px;display:grid}.controls select,.controls input[type=number]{width:100%;min-width:0}.controls .tuning{align-self:end;padding-top:0;padding-bottom:8px}.transport{gap:8px}.transport button{padding:6px 12px}.transport button.play{padding:8px 18px}.mixer input[type=range]{width:100%;min-width:6rem}.mixer label{flex:12rem}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.progression-editor{margin-bottom:12px}.progression-editor label{margin-bottom:4px;font-weight:600;display:block}.progression-editor input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);box-sizing:border-box;border-radius:6px;width:100%;padding:6px 8px}.progression-editor input[aria-invalid=true]{border-color:#b3261e}.progression-editor .hint{margin:4px 0 0;font-size:.85rem}.progression-editor ul.error{margin:4px 0 0;padding-left:1.2rem}.progression .chord{color:var(--text);background:0 0;border:0;border-radius:4px;flex-direction:column;align-items:center;padding:0 4px;display:flex}.progression .chord:not(:disabled){cursor:pointer}.progression .chord:not(:disabled):hover{background:var(--section-tint);box-shadow:0 0 0 4px var(--section-tint)}.progression .chord .caret{color:var(--muted);font-size:.65rem;line-height:1}.progression .chord[aria-expanded=true]{outline:2px solid var(--accent);outline-offset:2px}.progression .chord:disabled{opacity:1;cursor:default}.chord-picker{border:1px solid var(--accent);background:var(--bg);border-radius:8px;margin:-8px 0 16px;padding:12px}.chord-picker .picker-head{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.chord-picker h3{flex:auto;margin:0;font-size:1rem}.chord-picker .colours{flex-wrap:wrap;gap:4px;display:flex}.chord-picker .colour{padding:2px 10px}.chord-picker button[aria-pressed=true]{background:var(--accent);color:var(--surface)}.chord-picker h4{color:var(--muted);margin:12px 0 6px;font-size:.85rem;font-weight:600}.chord-picker .choices{flex-wrap:wrap;gap:6px;display:flex}.chord-picker .choice{border:1px solid var(--border);background:var(--surface);min-width:3.5rem;min-height:24px;color:var(--text);flex-direction:column;align-items:center;padding:4px 8px;display:flex}.chord-picker .choice .symbol{font-weight:600}.chord-picker .choice .roman{color:var(--muted);font-family:Georgia,Times New Roman,serif;font-size:.8rem}.chord-picker .choice[aria-pressed=true] .roman{color:inherit}