:root{--accent:#e06f3d;--line:#434645;--muted:#b5b7b5;font-family:"Segoe UI",Arial,sans-serif;background:#202121;color:#f3f2ef;color-scheme:dark}
.chords-demo .library-toggle,.chords-demo .library-close,.chords-demo .library-backdrop{display:none}
[hidden]{display:none!important}
@media(max-width:600px){
 body.chords-demo .mixer-options #audio-views button{flex:1 1 0;min-width:0;padding:7px 4px;text-align:center}
}
@media(max-width:600px){
 body.chords-demo .performance:has(.playback-row) .chord-now{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px}
 .chords-demo .performance #edit-current{text-align:center}
}
.chords-demo header #artist{display:none}
.chords-demo header .chord-title{align-items:center;gap:18px}
.chords-demo header .chord-artwork{width:90px;height:90px;flex:0 0 90px;border-radius:8px}
.chords-demo header .chord-title-text{align-items:flex-start;justify-content:center;gap:7px;min-height:90px}
.chords-demo header .chord-title-text h1{margin:0;line-height:1.3}
.chords-demo header .chord-title-text #album{margin:0}
.chords-demo .performance:has(.playback-row){display:flex;gap:22px;align-items:stretch}
.chords-demo .performance:has(.playback-row) .transport{display:flex;flex-direction:column;justify-content:center;gap:14px;flex:1;min-width:0}
.chords-demo .playback-row{display:flex;align-items:center;gap:14px;min-width:0}
.chords-demo .playback-row #play{flex:0 0 46px;align-self:center}
.chords-demo .seek-group{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.chords-demo .seek-group #seek{grid-column:2;grid-row:1;height:24px;margin:0}
.chords-demo .seek-group #clock{display:contents;font-size:10px;line-height:1.2;color:#a9b1a8;font-variant-numeric:tabular-nums;letter-spacing:0}
.chords-demo #elapsed-time{grid-column:1;grid-row:1}
.chords-demo #total-time{grid-column:3;grid-row:1}
.chords-demo .mixer-options{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;min-width:0;margin-top:auto}
.chords-demo .mixer-options #audio-views{order:2;flex:0 1 auto;min-width:0;padding:0;margin-left:auto}
.chords-demo .playback-options{order:1;display:flex;align-items:flex-end;gap:7px;flex-shrink:0}
.chords-demo .playback-options>*{min-width:66px}
@media(max-width:600px){
 .chords-demo .playback-options .speed-label{grid-column:1;grid-row:1;min-width:0;width:100%}
 .chords-demo .performance .playback-options #click{grid-column:2;grid-row:1;min-width:0}
 .chords-demo .performance .playback-options .sync-toggle{grid-column:3;grid-row:1;min-width:0}
 .chords-demo .playback-options .speed-label select{min-width:0;width:100%;padding-left:5px;padding-right:5px}
}
@media(min-width:1200px){.chords-demo .performance:has(.playback-row){padding:14px 20px}.chords-demo .performance:has(.playback-row) .chord-now{flex:0 0 150px;margin:0;min-height:104px;padding-top:0;padding-bottom:0;gap:5px}.chords-demo .performance:has(.playback-row) .transport{gap:10px}}
@media(max-width:1199px){.chords-demo .performance:has(.playback-row){display:flex;flex-direction:column;gap:10px}.chords-demo .performance:has(.playback-row) .chord-now{min-height:40px;flex-direction:row;align-items:center;justify-content:space-between}.chords-demo .performance:has(.playback-row) .transport{gap:12px}}
@media(max-width:600px){.chords-demo .mixer-options{flex-direction:column;align-items:stretch;gap:10px}.chords-demo .playback-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.chords-demo .playback-options>*{min-width:0;grid-column:auto;grid-row:auto}.chords-demo .playback-options #click,.chords-demo .playback-options .sync-toggle{grid-column:auto;grid-row:auto}.chords-demo .mixer-options #audio-views{margin:0;width:100%;flex:auto}.chords-demo .mixer-options #audio-views button{padding:7px 9px}.chords-demo .seek-group{gap:7px}}
.chords-demo .sync-toggle{position:relative;cursor:pointer}
.chords-demo .sync-toggle input#follow{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.chords-demo .sync-toggle:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
/* Phone transport: one primary row, one control row, and a scrollable mixer. */
 .chords-demo .performance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center;padding:14px 14px 8px;border-radius:14px;top:0;background:#242825;box-shadow:0 6px 18px #0003}
 .chords-demo .transport,.chords-demo .transport-top{display:contents}
 .chords-demo .chord-now{grid-column:1/3;grid-row:1;min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;border:0;padding:0}
 .chords-demo .chord-now>.eyebrow{display:none}
 .chords-demo #edit-current{max-width:100%;min-width:0;line-height:1;padding:0}
 .chords-demo .chord-now strong{font-size:32px;line-height:1.15;font-weight:550;letter-spacing:-1px;min-width:0}
 .chords-demo #current-position{font-size:11px;white-space:nowrap;color:#a9b1a8}
 .chords-demo #play{grid-column:4;grid-row:1;justify-self:end;width:46px;height:46px;box-shadow:none}
 .chords-demo #clock{grid-column:3;grid-row:1;justify-self:end;align-self:center;font-size:10px;letter-spacing:-.2px;white-space:nowrap;color:#b8c0b7}
 .chords-demo #seek{grid-column:1/-1;grid-row:2;display:block;appearance:none;width:100%;height:22px;margin:0;background:transparent;accent-color:var(--accent);touch-action:pan-y}
 .chords-demo #seek::-webkit-slider-runnable-track{height:3px;border:0;border-radius:8px;background:linear-gradient(to right,var(--accent) var(--progress,0%),#586056 var(--progress,0%))}
 .chords-demo #seek::-webkit-slider-thumb{appearance:none;width:18px;height:9px;border:0;border-radius:8px;background:var(--accent);margin-top:-3px}
 .chords-demo #seek::-moz-range-track{height:3px;border:0;border-radius:8px;background:#586056}
 .chords-demo #seek::-moz-range-progress{height:3px;border:0;border-radius:8px;background:var(--accent)}
 .chords-demo #seek::-moz-range-thumb{width:18px;height:9px;border:0;border-radius:8px;background:var(--accent)}
 .chords-demo .speed-label{grid-column:1;grid-row:3;margin:0;display:block;font-size:0}
 .chords-demo .speed-label select{width:100%;height:38px;padding:0 8px;font-size:12px;border:1px solid #41483f;border-radius:8px;background:#2d332e;text-align:center}
 .chords-demo #click,.chords-demo #loop,.chords-demo .sync-toggle{grid-row:3;height:38px;margin:0;padding:0 6px;border:1px solid #41483f;border-radius:8px;background:#2d332e;color:#c9d0c6;font-size:12px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px}
 .chords-demo #click{grid-column:2}.chords-demo #loop{grid-column:3}.chords-demo .sync-toggle{grid-column:4;cursor:pointer}
 .chords-demo #loop:after{content:none}
 .chords-demo .sync-toggle input{width:12px;height:12px;margin:0;accent-color:var(--accent)}
 .chords-demo #click[aria-pressed=true],.chords-demo #loop[aria-pressed=true],.chords-demo .sync-toggle:has(input:checked){background:#e06f3d20;border-color:#ac613e;color:#ffd6bf}
 .chords-demo #audio-views{grid-row:4;grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:5px;min-width:0;overflow-x:auto;padding:7px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .chords-demo #audio-views::-webkit-scrollbar{display:none}
 .chords-demo #audio-views button{flex:0 0 auto;min-height:36px;padding:7px 11px;border-radius:7px;font-size:12px;white-space:nowrap}
 .chords-demo #audio-views button.active{background:#e06f3d24;color:#ffd6bf}
.library{background:#262827;border-color:#434645}
@media(min-width:1200px){
 .chords-demo .performance{grid-template-columns:160px repeat(4,78px) minmax(90px,1fr) 48px;padding:20px;column-gap:10px;row-gap:8px;top:12px}
 .chords-demo .chord-now{grid-column:1;grid-row:1/4;align-self:stretch;min-height:142px;justify-content:center;align-items:flex-start;gap:9px;padding:12px 20px 12px 0;margin-right:10px;border-right:1px solid var(--line)}
 .chords-demo .chord-now>.eyebrow{display:block;font-size:9px;letter-spacing:1.5px}
 .chords-demo .chord-now strong{font-size:46px;line-height:1.15;letter-spacing:-1.5px}
 .chords-demo .speed-label{grid-column:2;grid-row:1}
 .chords-demo #click{grid-column:3;grid-row:1}.chords-demo #loop{grid-column:4;grid-row:1}.chords-demo .sync-toggle{grid-column:5;grid-row:1}
 .chords-demo #clock{grid-column:6;grid-row:1;font-size:12px}.chords-demo #play{grid-column:7;grid-row:1}
 .chords-demo #seek{grid-column:2/-1;grid-row:2}
 .chords-demo #audio-views{grid-column:2/-1;grid-row:3}
}
@media(max-width:850px){
 .chords-demo .library{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);height:100dvh;z-index:30;padding:24px 18px;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s;overflow-y:auto}
 .chords-demo.library-open{overflow:hidden}
 .chords-demo.library-open .library{transform:translateX(0);visibility:visible}
 .chords-demo .library-toggle,.chords-demo .library-close{display:inline-grid;place-items:center;flex-shrink:0;width:40px;height:40px;padding:0;background:transparent;font-size:22px}
 .chords-demo .library-close{position:absolute;top:19px;right:12px;font-size:28px}
 .chords-demo .library-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:29;background:#0009;border:0;border-radius:0}
 .chords-demo #song-list{display:block;overflow:visible}
 .chords-demo .song{width:100%;min-width:0;margin:4px 0}
 .chords-demo .song b{max-width:none;white-space:normal;font-size:14px}
 .chords-demo header{gap:10px}
 .chords-demo header .chord-title{min-width:0;gap:12px}
 .chords-demo .chord-title-text{min-width:0}
 .chords-demo header h1{font-size:22px;line-height:1.35}
 .chords-demo header .eyebrow{display:none}
 .chords-demo header .chord-artwork{width:72px;height:72px;flex-basis:72px}
 .chords-demo header .chord-title-text{min-height:72px;gap:5px}
}
.back-link{font-size:15px;text-decoration:none;color:#d8d9d5;display:block;padding:4px 10px}.back-link:hover{color:#e06f3d}
.library-title{font-size:20px;font-weight:550;margin:28px 10px 20px}
.song{color:#c7cac5}.song:hover{background:#303430}.song.active{background:#3a3e3a;color:#fff;box-shadow:none}.song .number{color:#b0b6ad}.song small{color:#a9afa7}
.performance{background:#262827;box-shadow:none;border-color:#434645}.chord-now{border-color:#434645}.chord-now>span:last-child,#clock{color:#b5b7b5}
button{background:#353a35;color:#f3f2ef}button:hover{background:#454c43}
select,input[type=number],input[type=text],input:not([type]){background:#303430;color:#f3f2ef;border-color:#555e53}
.play,.primary{background:#e06f3d;color:#fff}.play:hover{background:#ca5f30}
.audio-views button{color:#c2c8bf}.audio-views button:hover{background:#353a35}.audio-views button.active{background:#623921;color:#fff0e8}
.sync-toggle{border-color:#66705f;color:#c2c8bf}.sync-toggle:has(input:checked){background:#623921;color:#fff0e8;border-color:#a45a37}
.beat-cell{background:#2a2e2b;border-color:#454c43;color:#f3f2ef}.beat-cell:hover{background:#3a4039}.beat-cell.active{background:#e06f3d;color:#241b15;border-color:#e06f3d}.beat-cell.active .beat-number{color:#442719}.beat-number{color:#b1b8ac}.bar-lane{border-color:#7a8374}.bar-head{color:#b2b9ad}.bar-head:hover,.bar.current .bar-head{color:#f4f2ed}
.chords-demo .chart-heading{margin-top:26px}.chords-demo .song small{font-size:12px}.chords-demo .audio-views button{font-size:12px}.chords-demo .transport-top{flex-wrap:wrap}.chords-demo #chart-status{display:none}.chords-demo #edit-current{cursor:default}.chords-demo .beat-cell{transition:background-color .12s ease,transform .12s ease,box-shadow .12s ease}.chords-demo .beat-cell.active{transform:translateY(-1px);box-shadow:0 0 0 1px #e06f3d66,0 3px 8px #e06f3d20}