:root{font-family:Inter,Arial,Helvetica,sans-serif;color:#20272d;background:#d9d6cf}
*{box-sizing:border-box}body{margin:0}
.site-header{background:#20272d;color:#fff;padding:16px clamp(16px,3vw,36px);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.eyebrow{font-size:.65rem;letter-spacing:.16em;font-weight:800;color:#aebbc3}
.brand h1{font-size:1.45rem;margin:2px 0}.subtitle{font-size:.8rem;color:#cbd1d3}
.source-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.source-controls>label:first-child{font-size:.85rem}.source-controls select{min-width:230px}.or{font-size:.8rem;color:#cbd1d3}
select,input,button,.file-button{font:inherit}select,input[type=number]{padding:8px 10px;border:1px solid #c9c3b8;border-radius:6px;background:white;color:#20272d}
button,.file-button{border:0;border-radius:6px;background:#39444c;color:white;padding:9px 12px;cursor:pointer}.file-button{display:inline-block}button:disabled{opacity:.45;cursor:not-allowed}
#localFile{position:absolute;width:1px;height:1px;opacity:0}
#localFile:focus-visible+.file-button,.file-button:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,.measure:focus-visible{outline:3px solid #d7a653;outline-offset:2px}
main{max-width:1500px;margin:0 auto;padding:12px clamp(12px,2vw,28px) 80px}
.controls,.practice{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 14px;background:#fff;border:1px solid #d5d0c7;border-radius:9px;margin-bottom:10px}
.controls label,.practice label{display:flex;align-items:center;gap:8px;font-size:.83rem}.controls [hidden]{display:none!important}.controls input[type=range]{width:90px}
.practice{background:#f0ede7}.practice-label{display:flex;flex-direction:column;min-width:145px}.practice input[type=number]{width:75px;padding:6px}.practice-hint{font-size:.76rem;color:#69747a}
#message{color:#5c686d;text-align:center;margin:18px auto}.chart{transform-origin:top center;zoom:var(--zoom,1)}
.page{width:210mm;max-width:100%;min-height:297mm;background:#fff;box-shadow:0 10px 28px rgba(29,35,41,.18);margin:18px auto;padding:14mm;color:#111}
.chart-head{height:19mm;border-bottom:.5mm solid #222;margin-bottom:7mm;position:relative}
.chart-head h2{font-family:Georgia,'Times New Roman',serif;font-size:21pt;font-weight:500;line-height:1;margin:0 0 2mm}.chart-head p{margin:0;color:#555;font-size:8pt}
.meta{position:absolute;right:0;bottom:3mm;text-align:right;max-width:45%}.meta p{font-size:7pt}.meta p+p{display:none}
.section{margin:0 0 5mm;break-inside:avoid-page}.section-heading{height:6mm;display:flex;align-items:start;justify-content:space-between;color:#222}
.section-heading h3{margin:0;font-size:8.5pt;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.section-heading small{font-size:6.5pt;color:#555}
.section-cue{font-size:7pt;color:#555;margin:0 0 3mm}.row{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));column-gap:3.7mm;margin:0 0 2mm}
.measure{position:relative;min-width:0;min-height:19mm;cursor:pointer;overflow:visible}.view-instrumental .measure,.view-specialist .measure{min-height:12mm}
.measure.active .beat-ruler{border-top-width:.8mm}.measure.active .beat-tick{border-left-width:.3mm}
.measure-number{position:absolute;top:0;right:.5mm;color:#555;font-size:5.5pt;font-weight:500}
.beat-ruler{position:absolute;top:4mm;left:.5mm;right:.5mm;height:2mm;border-top:.3mm solid #222;pointer-events:none}
.beat-tick{position:absolute;top:0;height:2mm;border-left:.2mm solid #222}
.chords,.lyrics,.backing{position:absolute;left:.5mm;right:.5mm;min-height:0}
.chords{top:0;height:3mm;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#111;font-size:8pt;font-weight:700;white-space:nowrap}
.lyrics{top:9mm;font-family:Arial,Helvetica,sans-serif;font-size:8.625pt;line-height:1.12;font-weight:500;white-space:nowrap}
.backing{top:14mm;font-family:Arial,Helvetica,sans-serif;font-size:8pt;color:#555;white-space:nowrap}
.event{position:absolute;left:var(--left);top:0;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}.event.continuation{opacity:.45}
.snippet{display:block;width:100%;max-height:35mm;object-fit:contain;margin-top:7mm}
.snippet-block{margin:3mm 0;padding:2mm;border:1px solid #ccc;break-inside:avoid}.snippet-block img{max-width:100%;max-height:35mm;object-fit:contain}.snippet-block p{font-size:7pt;color:#555}
.empty{margin:12vh auto;text-align:center;max-width:520px;padding:55px 30px;border:1px dashed #aaa;border-radius:10px;color:#555}.empty h2{font-family:Georgia,serif;color:#20272d;font-weight:normal}
body.loaded #message{margin:10px auto}
main{display:block;padding-left:calc(clamp(12px,2vw,28px) + 265px);max-width:none}
.controls{margin:12px clamp(12px,2vw,28px) 0;justify-content:center}
main{padding-left:clamp(12px,2vw,28px);padding-right:calc(clamp(12px,2vw,28px) + 265px)}
.sidebar{position:fixed;right:clamp(12px,2vw,28px);top:170px;width:245px;max-height:calc(100vh - 182px);overflow:auto;display:grid;gap:10px}
.sidebar{width:205px;top:185px;max-height:calc(100vh - 197px);gap:6px}
main{padding-right:calc(clamp(12px,2vw,28px) + 225px)}
.practice-toggle{width:100%;padding:6px 10px;background:#39444c;font-size:.77rem;text-align:center}
.sidebar .practice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}
.sidebar .practice-label,.sidebar .practice label,.sidebar .practice-hint{grid-column:1/-1}
.sidebar .practice-label strong{font-size:.9rem}
.sidebar .practice button{padding:7px 4px;font-size:.8rem}
.sidebar .practice label{font-size:.75rem}
.sidebar .practice label:has(#tempo){display:flex;align-items:center;gap:5px}
.sidebar .practice input[type=number]{width:64px;padding:4px}
.sidebar .practice label:has(#metronome){display:flex;align-items:center;gap:5px}
.practice-hint{font-size:.7rem}
.practice[hidden]{display:none!important}
body.practice-collapsed main{padding-right:clamp(12px,2vw,28px)}
body.practice-collapsed .sidebar{width:128px}
.score-column{min-width:0}.sidebar .controls,.sidebar .practice{display:grid;gap:12px;margin:0;padding:16px}
.sidebar .controls label,.sidebar .practice label{display:grid;gap:5px;justify-content:stretch}
.sidebar select,.sidebar input[type=range],.sidebar button{width:100%}
.sidebar .practice-label{min-width:0}.sidebar .practice input[type=number]{width:100%}
.sidebar .practice{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}
.sidebar .practice button{padding:7px 4px;font-size:.8rem}
.sidebar .practice input[type=number]{width:64px;padding:4px}
.sidebar .practice label:has(#tempo),.sidebar .practice label:has(#metronome){display:flex;align-items:center;gap:5px}
.practice[hidden]{display:none!important}
.score-column .page{margin-top:12px}
@media(max-width:850px){main,body.practice-collapsed main{padding-right:clamp(12px,2vw,28px)}.sidebar,body.practice-collapsed .sidebar{position:static;width:auto;max-height:none;overflow:visible;grid-template-columns:1fr}.sidebar .practice{align-content:start}}
@media(max-width:550px){.sidebar{grid-template-columns:1fr}}
@media(max-width:700px){.site-header{align-items:start}.source-controls{width:100%}.source-controls select{width:100%}.controls label{width:100%;justify-content:space-between}.page{padding:6mm;min-height:150mm}.chart-head{height:auto;min-height:21mm}.meta{position:static;text-align:left;max-width:none;margin-top:2mm}.row{column-gap:1mm}.measure{min-height:20mm}.lyrics{font-size:8pt}.chords{font-size:7pt}}
@media print{@page{size:A4 portrait;margin:0}body{background:#fff}.site-header,.controls,.sidebar,#message{display:none!important}main{display:block;padding:0;max-width:none}.chart{zoom:1!important}.page{width:210mm;max-width:none;min-height:297mm;margin:0;padding:14mm;box-shadow:none;break-after:page}.section{break-inside:avoid}.measure{print-color-adjust:exact}}