:root{--ink:#201a17;--muted:#756b63;--paper:#f5efe4;--panel:#fffdf8;--line:#dccfbe;--accent:#bd4f2e;--accent-dark:#8f321a;--gold:#e9b553;--teal:#1f706d;--shadow:0 12px 30px rgba(72,43,24,.10)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top left,#fff9ed 0,transparent 32rem),var(--paper);font:15px/1.5 ui-rounded,"SF Pro Rounded","PingFang TC",system-ui,sans-serif;color:var(--ink)}
.topbar,main,footer{max-width:1280px;margin:auto}
.topbar{padding:34px 28px 22px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.eyebrow{font-size:11px;letter-spacing:.13em;color:var(--accent);font-weight:800;margin:0 0 2px}
h1,h2{font-family:Georgia,"Noto Serif TC",serif;margin:0}
h1{font-size:32px}
h2{font-size:21px}
.actions{display:flex;gap:8px;flex-wrap:wrap}.import-button{border:1px solid var(--line);background:#fffaf2;padding:9px 12px;border-radius:9px;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.import-button:hover{border-color:var(--accent);color:var(--accent-dark)}.import-button input{display:none}
.language-control{display:flex;align-items:center;gap:6px;color:#cbd1dc;font-size:12px;font-weight:700}.language-control select{min-width:88px;padding:5px 7px}.language-menu{display:flex;align-items:center;gap:6px;color:#cbd1dc;font-size:12px;font-weight:700}.language-options{display:flex;gap:2px;padding:2px;border:1px solid #586170;border-radius:4px;background:#1f232a}.language-options button{border:0;border-radius:2px;padding:5px 8px;background:transparent}.language-options button.selected,body[data-interface-language="zh-Hant"] .language-options button[data-language="zh-Hant"],body[data-interface-language="en"] .language-options button[data-language="en"]{background:#4c86e8!important;border:1px solid #9fc2ff!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}body[data-interface-language="zh-Hant"] .language-options button[data-language="zh-Hant"]::before,body[data-interface-language="en"] .language-options button[data-language="en"]::before{content:'✓ ';font-weight:900}.side-stack[hidden]{display:none!important}
button{border:1px solid var(--line);background:#fffaf2;padding:9px 12px;border-radius:9px;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
button:hover{border-color:var(--accent);color:var(--accent-dark)}
button.primary{background:var(--accent);border-color:var(--accent);color:white}
button.danger{color:#a33622}
.panel{background:rgba(255,253,248,.9);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:20px}
.score-settings{margin:0 28px 18px;display:flex;gap:14px;align-items:end;flex-wrap:wrap}
.import-panel{margin:0 28px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center}.import-panel p{margin:3px 0 0}.import-track{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.import-track label{display:grid;gap:5px;font-size:12px;font-weight:800;color:var(--muted)}
.score-settings label{display:grid;gap:5px;font-size:12px;font-weight:800;color:var(--muted)}
input,select{font:inherit;border:1px solid var(--line);border-radius:7px;background:white;padding:7px 8px;color:var(--ink)}
.checkbox{display:flex!important;align-items:center;gap:6px}.checkbox input[type="checkbox"]{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:18px;height:18px;min-width:18px;min-height:18px;margin:0;padding:0;flex:0 0 18px;border:2px solid #718198;border-radius:50%;background:#1d222b}.checkbox input[type="checkbox"]:checked{border-color:#8ab4ff;background:#4c86e8}.checkbox input[type="checkbox"]:checked::after{content:"✓";color:#fff;font-size:12px;font-weight:900;line-height:1}
main{padding:0 28px}
.workspace{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,.9fr);gap:18px}
.side-stack{display:grid;gap:18px;align-content:start}
.panel-title{display:flex;justify-content:space-between;align-items:start;gap:12px}
.status,.muted{color:var(--muted);font-size:13px;margin:0}
.jianpu-staff{margin:24px 0 14px;min-height:225px;display:grid;grid-template-columns:repeat(8,minmax(76px,1fr));gap:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow-x:auto}
.beat{min-width:76px;border-right:1px solid var(--line);padding:15px 0 10px;text-align:center;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:200px}
.beat:first-child{border-left:1px solid var(--line)}
.beat.active{background:#fae6bd}
.beat.playing{background:#f6c768}
.subbeat-grid{display:grid;grid-template-columns:repeat(var(--subdivisions,1),minmax(0,1fr));height:100%;min-height:160px}.subbeat-grid.count-2{--subdivisions:2}.subbeat-grid.count-4{--subdivisions:4}.subbeat-grid.count-8{--subdivisions:8}.subbeat-grid.count-16{--subdivisions:16}.subbeat{min-width:0;position:relative;display:flex;align-items:center;justify-content:center;padding:0 3px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit}.subbeat+.subbeat{border-left:1px dashed rgba(117,107,99,.45)}.subbeat.selected{background:rgba(233,181,83,.27)}
.subbeat{cursor:pointer}.subbeat:hover{background:rgba(102,157,242,.16)}.subbeat:focus-visible{outline:2px solid #4c86e8;outline-offset:-2px}
.bar-mark{position:absolute;top:0;right:-2px;height:100%;width:3px;background:var(--ink)}
.chord{min-height:72px;display:flex;justify-content:center;align-items:center;position:relative;font:700 35px/1 Georgia,serif}.note-stack{display:flex;flex-direction:column;justify-content:center;gap:1px}
.jianpu-note{display:grid;justify-items:center;min-height:45px;line-height:1}
.jianpu-note b{font:inherit}.jianpu-note .degree-number{position:relative;display:inline-flex;height:1em;align-items:flex-end;line-height:1;font-family:"Helvetica Neue",Arial,sans-serif;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}.accidental{position:absolute;right:100%;top:.08em;margin-right:.05em;font:700 .56em/.9 "Helvetica Neue",Arial,sans-serif;font-style:normal;letter-spacing:0}
.octave{display:block;height:10px;font:700 19px/.55 Georgia,serif;font-style:normal;letter-spacing:-2px}
.octave.above{align-self:end}
.octave.below{align-self:start}
.chord small{font:700 15px/1.1 Georgia,serif;color:var(--accent-dark)}
.rest{font-size:25px;color:var(--muted)}
.tech-link{position:absolute;top:17px;left:50%;width:calc(var(--link-width) - 12px);height:23px;border-top:2px solid var(--teal);border-radius:50% 50% 0 0;z-index:6;color:var(--teal);pointer-events:none}.tech-link b{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:13px;background:#fff;padding:0 3px}.ornament-link{position:absolute;top:25px;width:43%;height:16px;border-top:2px solid var(--teal);z-index:7;color:var(--teal);pointer-events:none}.ornament-link.before{right:54%;border-radius:75% 0 0 0}.ornament-link.after{left:54%;border-radius:0 75% 0 0}.ornament-link.up{transform:rotate(-18deg)}.ornament-link.down{transform:rotate(18deg)}.ornament-link b{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-size:12px;line-height:1;background:#fff;padding:0 2px;font-style:italic}.technique-help{align-self:center;color:#c7d1df;font-size:12px;white-space:nowrap}
.beat-selector,.slot-selector,.song-controls{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.beat-selector button,.slot-selector button{padding:4px 7px;font-size:12px}.beat-selector button.selected,.slot-selector button.selected{background:var(--teal);border-color:var(--teal);color:white}.duration-control{margin-top:9px}.duration-control label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:800}.duration{width:44px;height:13px;position:absolute;left:50%;transform:translateX(-50%);bottom:-4px}.duration.quarter{display:none}.duration.half,.duration.whole{bottom:auto;top:50%;left:calc(50% + 20px);transform:translateY(-50%);font:700 21px/1 Georgia,serif;color:var(--ink);white-space:nowrap}.duration.half::before{content:'—'}.duration.whole::before{content:'— — —'}.chord.notes-2 .duration.half,.chord.notes-2 .duration.whole{top:auto;bottom:17px}.duration-beam{position:absolute;z-index:4;left:calc(var(--beam-start) * 1% + 4px);width:calc(var(--beam-width) * 1% - 8px);min-width:4px;bottom:calc(20px - (var(--beam-level) - 1) * 6px);border-bottom:3px solid var(--ink);pointer-events:none}.tuplet-mark{position:absolute;z-index:5;left:calc(var(--tuplet-start) * 1%);width:calc(var(--tuplet-width) * 1%);top:10px;text-align:center;font:700 13px/1 Georgia,serif;color:var(--ink);pointer-events:none}
.beat-index{position:absolute;bottom:4px;color:var(--muted);font-size:11px}
.legend{display:flex;gap:13px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.composer{margin-top:18px;display:grid;gap:12px}
.composer fieldset{border:1px solid var(--line);border-radius:10px}
.composer legend{font-weight:800;color:var(--muted);font-size:12px}
.score-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 14px;background:#252a32;border-top:1px solid #414b59}.score-hint{margin-right:4px;color:#bac4d1;font-size:12px}.inline-duration,.score-actions .measure-key-toolbar{display:flex;align-items:center;gap:5px;color:#c1cbd7;font-size:12px;font-weight:700;line-height:1}.inline-duration select,.score-actions .measure-key-toolbar select{box-sizing:border-box;min-height:32px;padding:5px 8px;font:inherit;line-height:1}.action-divider{height:24px;border-left:1px solid #4c5766;margin:0 3px}.score-actions .degree-row{margin:0}.score-actions .degree-row button{min-width:30px;padding:5px}.score-actions button,.score-actions select{box-sizing:border-box;min-height:32px;font-size:12px}.score-actions button{padding:6px 8px}
.score-actions .degree-row button[data-input-kind="rest"],.score-actions .degree-row button[data-input-kind="sustain"]{min-width:34px;background:#303844;color:#f5f8fb;font-weight:800}.score-actions .degree-row button[data-input-kind="rest"]{border-color:#d4a251;color:#ffe0a2}.score-actions .degree-row button[data-input-kind="sustain"]{border-color:#7d94b0;color:#dbe9ff}
.degree-row,.edit-row,.technique-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.degree-row button{min-width:39px;padding:7px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}
.detail-grid div{border-left:3px solid var(--gold);padding-left:8px}
.detail-grid span{display:block;color:var(--muted);font-size:11px}
.detail-grid strong{font-size:16px}
.now-playing{margin-top:14px;padding:11px;background:#f6ede1;border-radius:8px;color:var(--accent-dark);font-weight:800}
.compatibility p{font-size:13px}
.fretboard-panel{margin-top:18px;overflow:hidden}
.fretboard{--string-count:6;--nut-width:34px;margin-top:18px;background:radial-gradient(circle at 26.9% 50%,#f5deb0 0 7px,transparent 8px),radial-gradient(circle at 42.3% 50%,#f5deb0 0 7px,transparent 8px),radial-gradient(circle at 57.7% 50%,#f5deb0 0 7px,transparent 8px),radial-gradient(circle at 73.1% 50%,#f5deb0 0 7px,transparent 8px),radial-gradient(circle at 96.1% 32%,#f5deb0 0 7px,transparent 8px),radial-gradient(circle at 96.1% 68%,#f5deb0 0 7px,transparent 8px),linear-gradient(100deg,#4e2919,#9c5e34 8%,#64361d 51%,#a86638);border:9px solid #3d2014;border-radius:10px;padding-left:var(--nut-width);display:grid;grid-template-rows:repeat(var(--string-count),44px);position:relative;overflow-x:auto;box-shadow:inset 0 0 22px #2c160b}
.nut{position:absolute;left:0;top:0;bottom:0;width:var(--nut-width);background:linear-gradient(90deg,#e7dbc2,#fff9df 55%,#a99b81);border-right:2px solid #6c5a43;z-index:4;box-shadow:3px 0 5px #31180c}
.string{min-width:700px;display:grid;grid-template-columns:repeat(13,1fr);align-items:center;position:relative}
.string::before{content:"";position:absolute;left:0;right:0;height:var(--string-width);background:linear-gradient(#faf8f1,#aaa89f);box-shadow:0 1px 1px #20130d;z-index:0}
.fret{height:44px;border-right:2px solid rgba(240,225,194,.78);position:relative;z-index:1;display:grid;place-items:center;box-shadow:inset -1px 0 rgba(64,32,15,.45)}.fret.open{background:rgba(255,247,218,.5);border-right:3px solid #fff3cf}.fret.open button{opacity:1;border:2px solid var(--gold);box-shadow:0 0 0 2px rgba(31,112,109,.55),0 2px 6px #432}
.fret button{display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(47,23,13,.76);color:#fff;box-shadow:0 2px 6px #432;opacity:.62;font-size:12px;position:relative;z-index:2}
.fret:hover button{opacity:1;transform:scale(1.12)}
.fret.active button{background:var(--gold);color:var(--ink);border:2px solid #fff;opacity:1}
.fret.playing button{background:#5c95f2;color:#fff;border-color:#d7e7ff;box-shadow:0 0 0 3px rgba(92,149,242,.28),0 2px 8px #193d74}
.fret.root button{background:var(--teal);opacity:.88}
.fret-labels{margin:5px 9px 0 51px;min-width:700px;display:grid;grid-template-columns:repeat(13,1fr);text-align:center;font-size:11px;color:var(--muted)}
footer{padding:18px 22px 34px;color:#aab0b9;font-size:12px}

/* Guitar Pro inspired workstation layout */
body{background:#20232a;color:#eef0f3}.topbar,main,footer{max-width:1440px}.topbar{min-height:62px;padding:8px 22px;background:#17191e;border-bottom:1px solid #3e4550}.brand{display:flex;align-items:baseline;gap:10px}.brand .eyebrow{margin:0;color:#9ec0ff}.topbar h1{font-size:19px;color:#fff}.actions,.transport{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.transport button{min-width:34px;padding:6px}.tempo-display{display:flex;align-items:center;gap:5px;color:#cbd1dc;font-weight:700}.tempo-display input{width:52px;padding:4px;background:#252a32;color:#fff;border-color:#586170}.import-button{border:1px solid #586170;background:#2d333d;padding:6px 10px;border-radius:4px;color:#f4f7fb;font:inherit;font-weight:700;cursor:pointer}.import-button input{display:none}button{background:#2c323c;border-color:#505a69;color:#e9edf2;border-radius:4px;padding:7px 10px}button:hover{border-color:#8fb8ff;color:#fff}button.primary{background:#4c86e8;border-color:#70a2ff}.panel{background:#2a2f38;border-color:#424b59;border-radius:5px;box-shadow:none}.score-settings{margin:10px 22px;padding:8px 12px;background:#292e37;border:1px solid #424b59;border-radius:4px}.score-settings label{color:#bcc5d2}.score-settings input,.score-settings select,input,select{background:#1f232a;border-color:#586170;color:#f2f4f8;border-radius:3px}.workspace{grid-template-columns:218px minmax(0,1fr);gap:10px}.side-stack{order:-1;display:grid;gap:10px;align-content:start;background:#252a32;border:1px solid #404956;border-radius:5px;padding:9px}.track-panel,.tool-panel{border-bottom:1px solid #444e5b;padding-bottom:10px}.track-item{width:100%;margin-top:4px;text-align:left;background:transparent;border-color:transparent}.track-item.selected{background:#3a485d;border-left:3px solid #72a8ff;border-radius:2px}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.tool-grid button{padding:7px;font-size:16px}.side-stack .panel{padding:10px;background:#292e37}.side-stack h2{font-size:15px}.import-panel{margin:0;display:grid;gap:8px}.import-track{display:grid;gap:6px}.import-track label{display:grid;gap:4px;color:#b9c3cf}.muted,.status{color:#aeb8c5}.editor-panel{padding:0;background:#edf1f7;border-color:#465262}.editor-panel .panel-title{padding:12px 15px;background:#2b313b;border-bottom:1px solid #47515f}.editor-panel .panel-title h2{color:#fff}.editor-panel .status{color:#cbd7e6}.editor-panel .eyebrow{color:#9ec0ff}.jianpu-staff{margin:0;min-height:0;padding:18px 14px;display:grid!important;grid-template-columns:repeat(16,minmax(52px,1fr))!important;align-content:start;background:#fff;color:#151515;border:0;border-radius:0}.beat{min-width:0;min-height:132px;padding:10px 0 8px;border-right:0;background:#fff}.beat:first-child{border-left:0}.beat::before{content:'';position:absolute;top:0;left:0;right:0;height:15px;background:repeating-linear-gradient(90deg,#e5edf9 0 20px,#83b2f1 20px 22px);border-bottom:1px solid #a7c8f5}.beat.active{background:#e9f1ff}.beat.playing{background:#c9ddff}.subbeat-grid{min-height:100px}.subbeat.selected{background:rgba(98,153,240,.18)}.bar-mark{top:17px;bottom:15px;height:auto;width:2px;background:#1e2630}.chord{font-size:29px;min-height:62px}.rest{color:#8c949e}.beat-index{top:17px;bottom:auto;left:4px;color:#7d8792}.legend{padding:7px 14px;background:#2b313b;color:#c8d0db}.composer{margin:0;padding:12px 14px;background:#252a32}.composer fieldset{border-color:#465161;border-radius:4px}.composer legend{color:#c2ccd8}.composer .muted{color:#b2bdca}.beat-selector button,.slot-selector button{font-size:11px;padding:4px 6px}.beat-selector button.selected,.slot-selector button.selected{background:#4c86e8;border-color:#70a2ff}.fretboard-panel{margin-top:10px}.fretboard-panel h2{color:#fff}.fretboard-panel .status{color:#c7d0db}.now-playing{background:#1f2530;color:#bcd5ff;border-radius:3px}.detail-grid div{border-left-color:#72a8ff}.detail-grid span{color:#b5bfcb}.compatibility p{color:#c1cad5}
.beat.measure-start::after{content:'';position:absolute;z-index:3;pointer-events:none;top:17px;bottom:15px;left:0;width:3px;background:#1e2630}.beat.measure-end .bar-mark{z-index:4;width:3px;background:#1e2630}.measure-label{position:absolute;z-index:5;top:0;left:4px;padding:0 3px;background:#fff;color:#56606e;font:700 11px/15px ui-rounded,"SF Pro Rounded",system-ui,sans-serif}.beat.active .measure-label,.beat.playing .measure-label{background:#e9f1ff}.beat.playing .measure-label{background:#c9ddff}.fretboard:has(.string:nth-child(5)){min-width:1360px}.fret-labels:has(span:nth-child(25)){min-width:1360px}
.fretboard{background:linear-gradient(100deg,#4e2919,#9c5e34 8%,#64361d 51%,#a86638)}.fret:nth-child(4)::after,.fret:nth-child(6)::after,.fret:nth-child(8)::after,.fret:nth-child(10)::after,.fret:nth-child(16)::after,.fret:nth-child(18)::after,.fret:nth-child(20)::after,.fret:nth-child(22)::after,.fret:nth-child(13)::after,.fret:nth-child(13)::before,.fret:nth-child(25)::after,.fret:nth-child(25)::before{content:'';position:absolute;z-index:1;pointer-events:none;left:50%;width:12px;height:12px;border-radius:50%;background:#f5deb0;box-shadow:0 1px 3px rgba(35,16,7,.7);transform:translate(-50%,-50%)}.fret:nth-child(4)::after,.fret:nth-child(6)::after,.fret:nth-child(8)::after,.fret:nth-child(10)::after,.fret:nth-child(16)::after,.fret:nth-child(18)::after,.fret:nth-child(20)::after,.fret:nth-child(22)::after{top:50%}.fret:nth-child(13)::after,.fret:nth-child(25)::after{top:31%}.fret:nth-child(13)::before,.fret:nth-child(25)::before{top:69%}
.fretboard:not(:has(.fret:nth-child(25))){min-width:0}.fretboard:has(.fret:nth-child(25)){min-width:1360px}.fretboard:has(.fret:nth-child(25)) .string{min-width:1360px}
.fretboard:has(.fret:nth-child(25)) .fret:nth-child(4)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(6)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(8)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(10)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(16)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(18)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(20)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(22)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(13)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(13)::before,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(25)::after,.fretboard:has(.fret:nth-child(25)) .fret:nth-child(25)::before{content:none}.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(4)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(6)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(8)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(10)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(16)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(18)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(20)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(2) .fret:nth-child(22)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(1) .fret:nth-child(13)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(3) .fret:nth-child(13)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(1) .fret:nth-child(25)::after,.fretboard:has(.fret:nth-child(25)) .string:nth-of-type(3) .fret:nth-child(25)::after{content:'';position:absolute;z-index:1;pointer-events:none;top:100%;left:50%;width:12px;height:12px;border-radius:50%;background:#f5deb0;box-shadow:0 1px 3px rgba(35,16,7,.7);transform:translate(-50%,-50%)}
.fretboard-panel{overflow-x:auto}
.jianpu-staff{grid-template-columns:repeat(var(--measures-per-line,4),minmax(220px,1fr))!important;gap:14px 0;padding-bottom:20px}.measure-group{display:grid;min-width:0;border-left:3px solid #1e2630;border-right:3px solid #1e2630;background:#fff}.measure-group .beat{min-width:0}.measure-group .beat:first-child{border-left:0}.tool-grid button.selected,.score-actions button.active{background:#4c86e8;border-color:#70a2ff;color:#fff}.tool-hint{min-height:36px;margin:8px 0 0;color:#b9c5d4;font-size:12px;line-height:1.45}.tool-grid button{position:relative}.tool-grid button:hover::after,.tool-grid button:focus-visible::after{content:attr(title);position:absolute;z-index:20;left:0;top:calc(100% + 5px);width:180px;padding:6px 7px;border:1px solid #667488;border-radius:4px;background:#171b21;color:#f4f7fb;font:12px/1.35 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;text-align:left;box-shadow:0 5px 14px rgba(0,0,0,.35);pointer-events:none}
.playback-volume{display:flex;align-items:center;gap:8px;margin:8px 0;color:#c1cad5;font-size:12px;font-weight:700}.playback-volume input{width:130px;accent-color:#70a2ff}.playback-volume output{min-width:36px;color:#bcd5ff}
.dead-note .degree-number{font-family:ui-rounded,system-ui,sans-serif;font-weight:700}.palm-mute-mark{position:absolute;top:15px;left:50%;transform:translateX(-50%);z-index:7;color:#19706b;font:800 11px/1 ui-rounded,system-ui,sans-serif;white-space:nowrap}.mute-palm .chord{padding-top:8px}
.workspace{grid-template-columns:minmax(0,1fr);gap:14px}.side-stack{order:0;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}.jianpu-staff{grid-template-columns:repeat(var(--measures-per-line,4),minmax(0,1fr))!important;overflow:hidden}.measure-group .chord{font-size:clamp(20px,2vw,29px)}.measure-group .subbeat{padding:0 1px}.measure-group .beat-index{font-size:clamp(9px,.8vw,11px)}.measure-group .jianpu-note{min-height:38px}.measure-group .octave{font-size:clamp(14px,1.2vw,19px)}
.score-title-actions{display:grid;justify-items:end;gap:5px;min-width:0}.score-title-primary,.score-title-rhythm{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.score-title-actions button{padding:5px 8px;font-size:12px}.score-title-rhythm{color:#b9c5d4;font-size:11px}.score-title-rhythm .inline-duration{white-space:nowrap}.score-title-rhythm .rhythm-hint{max-width:310px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9faab8}.measure-group:has(.beat:nth-child(6)) .chord{font-size:clamp(16px,1.35vw,22px);min-height:48px}.measure-group:has(.beat:nth-child(6)) .jianpu-note{min-height:30px}.measure-group:has(.beat:nth-child(6)) .octave{font-size:13px}.measure-group:has(.beat:nth-child(6)) .duration{transform:translateX(-50%) scale(.78)}body.score-focus .topbar,body.score-focus .score-settings,body.score-focus .side-stack,body.score-focus .fretboard-panel,body.score-focus footer{display:none}body.score-focus main{max-width:none;padding:0 10px}body.score-focus .workspace{display:block}body.score-focus .editor-panel{min-height:100vh}body.score-focus .jianpu-staff{padding-left:8px;padding-right:8px}
.score-heading-row{display:flex;align-items:center;gap:12px;min-width:0}.score-heading-row h2{white-space:nowrap}.score-title-name,.score-title-composer{display:flex;align-items:center;gap:6px;color:#b9c5d4;font-size:11px;font-weight:700}.score-title-name input,.score-title-composer input{width:min(260px,24vw);padding:5px 7px;font:inherit;color:#f4f7fb}.score-title-composer input{width:min(170px,17vw)}@media(max-width:700px){.editor-panel .panel-title{flex-wrap:wrap}.score-heading-row{flex-wrap:wrap;gap:7px}.score-title-name input{width:min(250px,58vw)}.score-title-composer input{width:min(190px,45vw)}}
body.score-focus .editor-panel{min-height:0}

/* Dense imported measures must fit their complete rhythmic grid inside the row. */
.measure-group:has(.beat:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))!important}
.measure-group:has(.beat:nth-child(7)){grid-template-columns:repeat(7,minmax(0,1fr))!important}
.measure-group:has(.beat:nth-child(8)){grid-template-columns:repeat(8,minmax(0,1fr))!important}
.measure-group:has(.beat:nth-child(6)) .chord{font-size:clamp(13px,1.35vw,22px)}
@media(max-width:800px){.topbar{align-items:start;flex-direction:column}
.import-panel{margin:0 16px 16px;align-items:start;flex-direction:column}
.workspace{grid-template-columns:1fr}
.score-settings{margin:0 16px 16px}
main{padding:0 16px}
.jianpu-staff{grid-template-columns:repeat(8,76px)}
.fretboard-panel{padding:14px}
.fretboard{padding-left:24px}
.fret-labels{margin-left:32px}
.topbar,footer{padding-left:16px;padding-right:16px}
}

/* Rhythm is laid out from the actual 4/4 duration grid, not a decorative ruler. */
.beat::before{content:none}
.beat.measure-start::after,.bar-mark{top:0;bottom:0}
.beat-index{top:5px}
.measure-group:has(.beat:nth-child(6)),.measure-group:has(.beat:nth-child(7)),.measure-group:has(.beat:nth-child(8)){grid-template-columns:repeat(192,minmax(0,1fr))!important}
.subbeat-grid{position:relative}

/* Focus mode keeps every essential score control at the bottom of the screen. */
.focus-only{display:none}
body.score-focus main{padding-bottom:136px}
body.score-focus .score-actions{position:fixed;z-index:50;left:10px;right:10px;bottom:10px;padding:8px 12px;border:1px solid #556274;border-radius:6px;box-shadow:0 -8px 24px rgba(0,0,0,.35);max-height:126px;overflow:auto}
body.score-focus .focus-only{display:flex}
body.score-focus .focus-only input{width:112px;padding:4px 6px}
body.score-focus .focus-only select{padding:4px 6px}

/* Editing controls stay reachable while reading any part of a long score. */
body{padding-bottom:132px}
.score-actions{position:fixed;z-index:50;left:max(12px,calc((100vw - 1400px)/2 + 12px));right:max(12px,calc((100vw - 1400px)/2 + 12px));bottom:10px;padding:8px 12px;border:1px solid #556274;border-radius:6px;box-shadow:0 -8px 24px rgba(0,0,0,.35);max-height:126px;overflow:auto}

/* Keep the playable fretboard beside the score tools at all times. */
body{padding-bottom:414px}
.rse-mapping{display:grid;gap:2px;min-width:235px;padding:7px 9px;border-left:3px solid #70a2ff;background:#202631;color:#d7e5ff;font:12px/1.35 ui-rounded,"SF Pro Rounded",system-ui,sans-serif}.rse-mapping strong{color:#fff}.rse-mapping code{font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9ec0ff;word-break:break-word}.rse-mapping .rse-note{margin-top:2px;color:#ffcf79}
.gp-settings{margin:0 22px 10px;padding:0;overflow:hidden}.gp-settings summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;cursor:pointer;list-style:none;color:#f4f7fb}.gp-settings summary::-webkit-details-marker{display:none}.gp-settings summary span:first-child{display:grid;gap:2px}.gp-settings summary b{font-size:14px}.gp-settings summary small{color:#aeb8c5;font-size:12px;font-weight:500}.gp-disclosure{color:#9ec0ff;font-size:12px}.gp-settings[open] .gp-disclosure{font-size:0}.gp-settings[open] .gp-disclosure::after{content:'收起';font-size:12px}.gp-settings-body{display:grid;gap:12px;padding:12px 14px 14px;border-top:1px solid #424b59;background:#252a32}.gp-file-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gp-import-hint{flex:1 1 240px;color:#aeb8c5;font-size:12px;line-height:1.35}.gp-sound-settings{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.gp-sound-settings label,.gp-import-status label{display:grid;gap:5px;color:#bcc5d2;font-size:12px;font-weight:800}.gp-import-status{display:grid;gap:8px}.gp-import-status p{margin:0}.gp-import-status .import-track{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.gp-settings .rse-mapping{min-width:min(100%,235px)}.gp-compatibility{border-top:1px solid #465161;padding-top:12px;color:#c1cad5}.gp-compatibility h3{margin:2px 0 8px;color:#fff;font-size:15px}.gp-compatibility p{margin:5px 0;font-size:13px}.gp-compatibility .eyebrow{margin:0;color:#9ec0ff}
.fretboard-panel{position:fixed;z-index:45;left:max(12px,calc((100vw - 1400px)/2 + 12px));right:max(12px,calc((100vw - 1400px)/2 + 12px));bottom:144px;margin:0!important;padding:8px 12px;max-height:258px;overflow:auto;border-color:#556274;box-shadow:0 -8px 24px rgba(0,0,0,.35)}

/* Keep every bass fret visible in the pinned editor panel. */
.fretboard-panel,.fretboard{overflow:hidden}
.fretboard{--nut-width:clamp(18px,3vw,34px);--fret-height:clamp(32px,4vw,44px)}
.topbar{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;align-items:stretch}.topbar-primary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}.topbar-primary .brand{flex:0 1 auto;min-width:0}.topbar-primary .actions{margin-left:auto;justify-content:flex-end;min-width:0}.transport-playback{display:grid;gap:7px;min-width:0;padding:9px 10px;border:1px solid #465161;border-radius:5px;background:#202631}.playback-main-row,.playback-source-row{display:flex;align-items:center;gap:10px;min-width:0}.playback-main-row{min-height:38px}.transport-playback .transport{flex:0 0 auto;min-width:auto}.transport-playback .playback-label{flex:0 0 auto;margin:0;color:#9ec0ff;font-size:10px;letter-spacing:.08em}.transport-playback .now-playing{flex:1 1 180px;min-width:0;margin:0;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.transport-playback .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.transport-playback .playback-volume{display:flex;align-items:center;gap:4px;flex:0 0 auto;white-space:nowrap;color:#cbd1dc;font-size:11px;font-weight:700}.transport-playback .playback-volume input{width:84px}.playback-source-row{padding-left:calc(10px + 0.08em);border-top:1px solid #394351;padding-top:7px}.playback-source-row #soundSourceReadout{flex:0 1 auto;color:#c4ccd8}.playback-source-row #loadBassSoundButton{flex:0 0 auto;padding:5px 7px;font-size:11px;white-space:nowrap}.playback-source-row #bassSampleStatus{flex:1 1 260px;color:#aeb8c5}.toolbar-readout{order:4;flex:1 1 280px;min-width:280px;margin:0;padding:4px 8px;gap:14px}.toolbar-readout div{min-width:0;padding-left:7px}.toolbar-readout strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.toolbar-readout span{font-size:10px}@media(max-width:1000px){.topbar-primary{flex-wrap:wrap;justify-content:flex-start}.topbar-primary .actions{margin-left:0}.playback-main-row,.playback-source-row{flex-wrap:wrap}.transport-playback .now-playing{order:4;flex-basis:calc(100% - 80px)}.playback-source-row{padding-left:0}}@media(max-width:700px){.topbar-primary .brand{flex-basis:100%}.playback-main-row{align-items:flex-start}.transport-playback .playback-volume{flex-basis:100%}.playback-source-row{display:none}.toolbar-readout{flex-basis:100%;min-width:0}}
.transport-playback{gap:0}.playback-main-row{flex-wrap:wrap}.transport-playback .playback-source{display:flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;color:#cbd1dc;font-size:11px;font-weight:700}.transport-playback .playback-source button{max-width:176px;padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.playback-help-tooltip{left:auto;right:0}@media(max-width:1000px){.transport-playback .playback-source{order:4}.transport-playback .now-playing{order:5;flex-basis:100%}}@media(max-width:700px){.transport-playback .playback-source,.transport-playback .playback-volume{flex-basis:auto}.transport-playback .now-playing{order:5;flex-basis:100%}}
.fretboard:has(.fret:nth-child(25)),.fretboard:has(.fret:nth-child(25)) .string,.fret-labels:has(span:nth-child(25)){min-width:0;width:100%}
.playback-help{position:relative;display:inline-flex;align-items:center}.playback-help>button{width:22px;height:22px;padding:0;border-radius:50%;border-color:#6880a0;background:#303946;color:#cfe0ff;font-size:13px;line-height:1}.playback-help-tooltip{position:absolute;z-index:70;left:0;bottom:calc(100% + 7px);display:grid;gap:6px;width:max-content;max-width:min(460px,80vw);padding:8px 10px;border:1px solid #617189;border-radius:4px;background:#171b21;color:#f4f7fb;font-size:11px;line-height:1.35;white-space:normal;box-shadow:0 6px 16px rgba(0,0,0,.38);opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease}.playback-help-tooltip .muted{display:block;overflow:visible;white-space:normal;color:#c6d0dc}.playback-help:hover .playback-help-tooltip,.playback-help:focus-within .playback-help-tooltip{opacity:1;transform:translateY(0)}
.topbar-primary .settings-trigger{flex:0 0 auto}.app-settings-dialog{position:fixed;inset:0;width:min(520px,calc(100vw - 28px));margin:auto;padding:0;border:1px solid #566274;border-radius:7px;background:#252a32;color:#edf1f7;box-shadow:0 22px 70px rgba(0,0,0,.62)}.app-settings-dialog::backdrop{background:rgba(7,10,15,.7);backdrop-filter:blur(2px)}.settings-dialog-header{position:relative;padding:16px 62px 13px 18px;border-bottom:1px solid #465161;background:#2b313b}.settings-dialog-header .eyebrow{margin:0;color:#9ec0ff}.settings-dialog-header h2{margin:3px 0;color:#fff;font-size:20px}.settings-dialog-header p:not(.eyebrow){margin:3px 0 0;color:#aeb8c5;font-size:13px}.settings-dialog-header button{position:absolute;top:12px;right:12px;min-width:34px;padding:4px 9px;font-size:22px;line-height:1}.settings-dialog-body{display:grid;gap:14px;padding:16px 18px 18px}.settings-section{display:grid;justify-items:start;gap:9px;padding:13px;border:1px solid #465161;border-radius:5px;background:#202631}.settings-section h3,.settings-section p{margin:0}.settings-section h3{color:#fff;font-size:15px}.settings-section p{color:#c1cad5;font-size:13px;line-height:1.45}.settings-section .muted{color:#9eb0c8;font-size:12px}.settings-section button:disabled{opacity:.58;cursor:default}@media(max-width:700px){.app-settings-dialog{width:calc(100vw - 16px)}}
.settings-section label{display:grid;gap:5px;color:#cbd4e0;font-size:12px;font-weight:800}.settings-section select{min-width:250px}.settings-section .custom-sample-import{display:flex;align-items:center;gap:8px}.settings-section .custom-sample-import input{max-width:220px;color:#cbd4e0;font-size:11px}
.sound-source-dialog{position:fixed;inset:0;width:min(460px,calc(100vw - 28px));margin:auto;padding:0;border:1px solid #566274;border-radius:7px;background:#252a32;color:#edf1f7;box-shadow:0 22px 70px rgba(0,0,0,.62)}.sound-source-dialog::backdrop{background:rgba(7,10,15,.7);backdrop-filter:blur(2px)}.sound-source-dialog-header{position:relative;padding:16px 62px 13px 18px;border-bottom:1px solid #465161;background:#2b313b}.sound-source-dialog-header .eyebrow{margin:0;color:#9ec0ff}.sound-source-dialog-header h2{margin:3px 0;color:#fff;font-size:20px}.sound-source-dialog-header p:not(.eyebrow){margin:3px 0 0;color:#aeb8c5;font-size:13px;line-height:1.45}.sound-source-dialog-header button{position:absolute;top:12px;right:12px;min-width:34px;padding:4px 9px;font-size:22px;line-height:1}.sound-source-options{display:grid;gap:9px;padding:14px 16px 16px}.sound-source-option{display:grid;gap:4px;width:100%;padding:12px;text-align:left;border-color:#566274;background:#202631}.sound-source-option strong{color:#f7f9fc;font-size:14px}.sound-source-option span{color:#bac5d3;font-size:12px;line-height:1.45}.sound-source-option.selected{border-color:#7eaeff;background:#294b7a;box-shadow:inset 0 0 0 1px rgba(183,214,255,.45)}.sound-source-option.selected::after{content:'✓ 目前使用';justify-self:end;margin-top:-23px;color:#dceaff;font-size:11px;font-weight:800}@media(max-width:700px){.sound-source-dialog{width:calc(100vw - 16px)}}
.source-library{align-items:stretch}.source-library>label{justify-self:start}.source-capabilities{padding:10px 11px;border-left:3px solid #73a7ff;background:#192231}.source-capabilities h4{margin:0 0 6px;color:#dce9ff;font-size:12px}.source-capabilities ul{display:grid;gap:4px;margin:0;padding-left:18px;color:#c1cad5;font-size:12px;line-height:1.4}.source-imports{display:grid;gap:8px;padding-top:2px;border-top:1px solid #3c4655}.source-library .source-description{min-height:36px;color:#d6e2f4}
.workspace{grid-template-columns:minmax(0,1fr)}
.score-editor-settings{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid #d6dce5;background:#f1f4f8}.score-editor-settings label{display:grid;gap:4px;color:#566273;font-size:11px;font-weight:800}.score-editor-settings input,.score-editor-settings select{min-height:28px;padding:4px 7px;background:#fff;color:#1f2733;border-color:#aeb8c5}.score-editor-settings #capoInput{width:58px}.score-editor-settings #bassNotationInput{min-width:150px}
.topbar-primary .gp-settings-trigger{flex:0 0 auto}.gp-settings-dialog{position:fixed;inset:0;width:min(760px,calc(100vw - 28px));max-height:min(82vh,780px);margin:auto;padding:0;border:1px solid #566274;border-radius:7px;background:#252a32;color:#edf1f7;box-shadow:0 22px 70px rgba(0,0,0,.62)}.gp-settings-dialog::backdrop{background:rgba(7,10,15,.7);backdrop-filter:blur(2px)}.gp-dialog-header{position:relative;display:block;padding:16px 62px 13px 18px;border-bottom:1px solid #465161;background:#2b313b}.gp-dialog-header .eyebrow{margin:0;color:#9ec0ff}.gp-dialog-header h2{margin:3px 0;color:#fff;font-size:20px}.gp-dialog-header p:not(.eyebrow){margin:3px 0 0;color:#aeb8c5;font-size:13px}.gp-dialog-header button{position:absolute;top:12px;right:12px;min-width:34px;padding:4px 9px;font-size:22px;line-height:1}.gp-settings-dialog .gp-settings-body{max-height:calc(min(82vh,780px) - 105px);overflow:auto;border:0;background:#252a32;padding:16px 18px 18px}.gp-settings-dialog .gp-compatibility{margin-top:2px}@media(max-width:700px){.gp-settings-dialog{width:calc(100vw - 16px);max-height:90vh}.gp-settings-dialog .gp-settings-body{max-height:calc(90vh - 105px)}}
.string{min-width:0}
.fret{height:var(--fret-height)}
.fret button{width:clamp(16px,2vw,28px);height:clamp(16px,2vw,28px);font-size:clamp(7px,.8vw,12px)}
.fret-labels{min-width:0;margin-left:calc(var(--nut-width) + 8px);margin-right:8px;font-size:clamp(7px,.8vw,11px)}
.fretboard-panel .panel-title{position:sticky;left:0;top:0;z-index:3;padding-bottom:5px;background:#2a2f38}
.fretboard{margin-top:6px}
body.score-focus .fretboard-panel{display:block}

/* The playable fretboard is part of the score toolbar, not a second panel. */
body,body.score-focus main{padding-bottom:460px}
.score-actions,body.score-focus .score-actions{max-height:min(54vh,400px);align-content:flex-start}
.toolbar-fretboard{--fret-nut-width:clamp(18px,3vw,34px);flex:1 0 100%;min-width:0;margin-top:3px;padding-top:7px;border-top:1px solid #4c5766}
.toolbar-fretboard-head{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#c1cbd7;font-size:11px}.toolbar-fretboard-head>div:first-child{display:flex;align-items:baseline;gap:8px;min-width:0}.toolbar-fretboard-head strong{color:#f3f6fb;font-size:12px}.toolbar-fretboard-head>div:first-child span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-fretboard-options{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.toolbar-fretboard-options .checkbox{display:flex;align-items:center;gap:5px;white-space:nowrap}.fretboard-help{position:relative;display:inline-flex}.fretboard-help button{width:22px;height:22px;padding:0;border-radius:50%;border-color:#6880a0;background:#303946;color:#cfe0ff;font-size:13px;line-height:1}.fretboard-help-tooltip{position:absolute;right:0;bottom:calc(100% + 7px);z-index:70;width:max-content;max-width:min(280px,75vw);padding:6px 8px;border:1px solid #617189;border-radius:4px;background:#171b21;color:#f4f7fb;font-size:11px;line-height:1.35;white-space:normal;box-shadow:0 6px 16px rgba(0,0,0,.38);opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease}.fretboard-help:hover .fretboard-help-tooltip,.fretboard-help:focus-within .fretboard-help-tooltip{opacity:1;transform:translateY(0)}
.toolbar-fretboard .fretboard{margin-top:5px;border-width:5px;border-radius:5px}.toolbar-fretboard .fret-labels{margin-top:3px;color:#bdc7d5}
.fretboard-hover-tooltip{position:fixed;z-index:70;max-width:min(280px,75vw);padding:6px 8px;border:1px solid #617189;border-radius:4px;background:#171b21;color:#f4f7fb;font-size:11px;line-height:1.35;white-space:normal;box-shadow:0 6px 16px rgba(0,0,0,.38);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease}.fretboard-hover-tooltip.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:800px){body,body.score-focus main{padding-bottom:410px}.score-actions,body.score-focus .score-actions{max-height:min(52vh,350px)}.toolbar-fretboard-head{align-items:start}.toolbar-fretboard-options .checkbox:not(.fretboard-show-finger){display:none}}

/* Keep identity, file actions, and transport controls available while reading a long score. */
.topbar{position:sticky;top:0;z-index:60;isolation:isolate;box-shadow:0 5px 16px rgba(0,0,0,.34)}

/* A left-handed instrument is a horizontal mirror; string order stays physical. */
.fretboard.left-handed{padding-left:0;padding-right:var(--nut-width)}
.fretboard.left-handed .nut{left:auto;right:0;border-right:0;border-left:2px solid #6c5a43;box-shadow:-3px 0 5px #31180c}
.fretboard.left-handed .string{transform:scaleX(-1)}
.fretboard.left-handed .fret button{transform:scaleX(-1)}
.fretboard.left-handed .fret:hover button{transform:scaleX(-1) scale(1.12)}
.fret-labels.left-handed{transform:scaleX(-1)}
.fret-labels.left-handed span{transform:scaleX(-1)}

/* The label row shares the fretboard's exact playable width, excluding nut and border. */
.toolbar-fretboard .fretboard{--nut-width:var(--fret-nut-width)}
.toolbar-fretboard .fret-labels{box-sizing:border-box;min-width:0;width:auto!important;margin-left:calc(var(--fret-nut-width) + 5px);margin-right:5px}
.toolbar-fretboard .fret-labels.left-handed{margin-left:5px;margin-right:calc(var(--fret-nut-width) + 5px)}

/* Print / PDF: the browser's print dialog can save this clean score as a PDF. */
.print-sheet-heading{display:none}
@page{size:A4 portrait;margin:12mm}
@media print{
  html,body{background:#fff!important;color:#000!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  body,body.score-focus main{padding:0!important}
  .topbar,.score-settings,.side-stack,.score-actions,.score-editor-settings,.legend,footer,.editor-panel .panel-title{display:none!important}
  main,.workspace{display:block!important;max-width:none!important;padding:0!important;margin:0!important}
  .print-sheet-heading{display:block!important;margin:0 0 7mm;text-align:center;color:#000}
  .print-sheet-heading h1{font-size:21pt;line-height:1.2}
  .print-sheet-heading p{margin:2mm 0 0;font-size:10pt;color:#333}
  .editor-panel{display:block!important;padding:0!important;border:0!important;background:#fff!important;box-shadow:none!important}
  .jianpu-staff{display:grid!important;grid-template-columns:repeat(var(--measures-per-line,4),minmax(0,1fr))!important;gap:5mm 0!important;padding:0!important;overflow:visible!important;background:#fff!important;color:#000!important}
  .measure-group{break-inside:avoid;page-break-inside:avoid;border:0!important}
  .measure-group .beat{min-height:82px!important;background:#fff!important}
  .beat.active,.beat.playing,.subbeat.selected{background:#fff!important}
  .measure-label{background:#fff!important;color:#333!important}
  .bar-mark,.beat.measure-end .bar-mark{width:1px!important;background:#555!important}
  .beat.measure-start::after{display:none!important}
  .measure-group:first-child .beat.measure-start::after{display:block!important;width:1px!important;background:#555!important}
  .tech-link,.ornament-link{color:#111!important;border-color:#111!important}
  .tech-link b,.ornament-link b{background:#fff!important}
  .beat-index{display:none!important}
  .duration-beam{border-color:#111!important}
  .rhythm-dot{color:#111!important}
}
 .rhythm-dot{position:absolute;z-index:5;right:3px;top:50%;transform:translateY(-43%);font:700 24px/1 Georgia,serif;font-style:normal;color:var(--ink);pointer-events:none}
 .rhythm-hint{align-self:center;max-width:260px;color:var(--muted);font-size:11px;line-height:1.25}

/* Precision score renderer: geometry lives in the SVG viewBox, never in a flex/grid cell. */
.precision-staff{grid-template-columns:repeat(var(--measures-per-line,4),minmax(0,1fr))!important;gap:12px 0;padding:20px 32px 24px!important}.precision-measure{display:block;min-height:0;border:0!important;background:#fff}.score-svg{display:block;width:100%;height:auto;min-height:154px;overflow:visible;background:#fff;color:#16191f}.score-svg text{font-family:"Times New Roman",Times,serif;fill:#14171c;user-select:none}.score-svg .score-bar{stroke:#1e2630;stroke-width:2}.score-svg .score-measure-number{font:400 12px/1 "Times New Roman",Times,serif;fill:#68717c}.score-svg .score-beat-number,.score-svg .score-beat-guide{display:none}.score-svg .score-hit-target{fill:transparent;pointer-events:all}.score-svg .score-slot{cursor:pointer}.score-svg .score-slot:hover .score-hit-target{fill:rgba(88,146,240,.12)}.score-svg .score-selection{fill:#f3e2b9;fill-opacity:.28;stroke:#c9912f;stroke-opacity:.82;stroke-width:1.2;pointer-events:none}.score-svg .score-slot.playing .score-selection{fill:#cfe0ff;fill-opacity:.28;stroke:#5c95f2;stroke-opacity:.82}.score-svg .score-note{font-family:"Times New Roman",Times,serif;font-size:31px;font-weight:400;dominant-baseline:alphabetic}.score-svg .score-dead{font-family:ui-rounded,system-ui,sans-serif;font-size:28px;font-weight:800}.score-svg .score-accidental{font-family:"Times New Roman",Times,serif;font-size:18px;font-weight:400;dominant-baseline:alphabetic}.score-svg .score-octave-dot,.score-svg .score-rhythm-dot{fill:#14171c}.score-svg .score-rest{font:400 31px/1 "Times New Roman",Times,serif;fill:#8a929d}.score-svg .score-beam{stroke:#14171c;stroke-width:2.2;stroke-linecap:butt}.score-svg .score-technique{fill:none;stroke:#17756f;stroke-width:1.35}.score-svg .score-technique-label,.score-svg .score-ornament,.score-svg .score-mute{font:700 11px/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;fill:#17756f}.score-svg .score-mute{font-size:9px}.score-svg .score-slot:focus-visible .score-hit-target{fill:rgba(88,146,240,.22);stroke:#4c86e8;stroke-width:2}
/* Tuplets share the same visual vocabulary as slides, H/P and ornaments. */
.score-svg .score-annotation,.score-svg .score-tuplet{fill:none;stroke:#17756f;stroke-width:1.35;stroke-linecap:round}.score-svg .score-annotation-label,.score-svg .score-tuplet-label{font:700 11px/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;fill:#17756f;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.precision-staff.show-beat-numbers .score-beat-number{display:block}.precision-staff.show-beat-numbers .score-beat-guide{display:block;stroke:#aeb6c1;stroke-width:1;stroke-dasharray:2 3}
.score-svg .score-rest:not(.score-sustain){fill:#14171c}.score-svg .score-sustain{fill:#8a929d}
.score-svg .score-sustain-dot{fill:#14171c}
.precision-measure .score-svg .score-bar:nth-child(2){display:none}.precision-measure.row-end .score-svg .score-bar:nth-child(2){display:block}
.precision-measure .score-svg .score-bar:first-child{transform:translateX(-12px)}.precision-measure.row-end .score-svg .score-bar:nth-child(2){transform:translateX(12px)}.score-ornament-curve{fill:none;stroke:#17756f;stroke-width:1.35}
.precision-staff{position:relative;display:block!important;gap:4px 0;padding-top:14px!important;padding-bottom:18px!important}.score-row{display:grid;grid-template-columns:repeat(var(--score-row-columns,4),minmax(0,1fr));width:100%;break-inside:avoid-page;page-break-inside:avoid}.score-row-spacer{display:block;min-width:0;min-height:1px}.score-svg{min-height:132px;background:transparent}.score-cross-measure-layer,.score-print-cross-measure-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:6}.score-print-cross-measure-layer{display:none}.score-cross-measure-technique{fill:none;stroke:#17756f;stroke-width:1.35;vector-effect:non-scaling-stroke}.score-cross-measure-label{fill:#17756f;font:700 11px/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}.save-state{font-size:.78rem;color:var(--muted);white-space:nowrap}.save-state.is-dirty{color:#f3bb4f;font-weight:700}
.precision-staff{gap:0;padding-top:8px!important;padding-bottom:10px!important}.score-svg{min-height:124px}
.score-print-row-end-bar{display:none}
.score-print-end-bar,.score-print-end-label{visibility:hidden}
.score-loading{grid-column:1/-1;align-self:stretch;display:grid;align-content:center;gap:10px;min-height:124px;padding:22px max(24px,6vw);color:#485466;font:600 14px/1.4 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;background:#fff}.score-loading-main{display:flex;align-items:center;gap:11px;width:min(560px,100%);margin:auto}.score-loading-main>div{display:grid;gap:1px;min-width:0}.score-loading strong{color:#253047;font-size:14px}.score-loading span[data-score-loading-detail]{color:#748094;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-loading output{margin-left:auto;color:#4c86e8;font-size:12px;font-weight:800}.score-loading-spinner{width:18px;height:18px;flex:0 0 auto;border:2px solid #d8e3f7;border-top-color:#4c86e8;border-radius:50%;animation:score-loading-spin .8s linear infinite}.score-loading-track{width:min(560px,100%);height:5px;margin:auto;overflow:hidden;border-radius:999px;background:#e8edf5}.score-loading-track i{display:block;width:var(--score-load-progress,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#78a9f8,#4c86e8);transition:width .18s ease}@keyframes score-loading-spin{to{transform:rotate(360deg)}}
@media print{.precision-staff{gap:0!important;padding:0!important;width:186mm!important;max-width:186mm!important;margin:0 auto!important}.precision-staff>.score-row{display:grid!important;grid-template-columns:repeat(var(--score-row-columns,4),minmax(0,1fr))!important;width:186mm!important;height:24mm!important;min-height:24mm!important;margin:0!important;break-inside:avoid-page!important;page-break-inside:avoid!important;-webkit-column-break-inside:avoid}.precision-staff>.score-row>.precision-measure,.precision-staff>.score-row>.score-row-spacer{width:auto!important;height:24mm!important;min-width:0;break-inside:avoid-page!important;page-break-inside:avoid!important}.precision-measure,.score-svg{overflow:visible!important;position:relative}.score-svg{height:24mm!important;min-height:24mm!important}.score-cross-measure-layer{display:none!important}.score-print-cross-measure-layer{display:block!important;inset:0!important}.score-svg .score-technique,.score-svg .score-technique-label{display:none!important}.precision-measure.row-end .score-svg .score-bar:nth-child(2){display:none!important}.precision-measure.row-end::after{content:"";position:absolute;z-index:8;right:0;top:3.2mm;height:17.6mm;width:.5mm;background:#222}.score-cross-measure-technique{stroke:#111}.score-cross-measure-label{fill:#111}.score-svg .score-selection,.score-svg .score-hit-target,.score-svg .score-beat-guide{display:none}.score-svg .score-bar{stroke:#222;stroke-width:1.2}.score-svg .score-note{font-size:30px}.score-svg .score-beam{stroke:#111;stroke-width:2.5}.score-svg .score-measure-number{display:block!important;fill:#444!important;font-size:10px}.score-svg .score-beat-number{display:none}}
@media print{.precision-staff.show-beat-numbers .score-beat-number,.precision-staff.show-beat-numbers .score-beat-guide{display:none}}
/* Keep the final bar inside the physical A4 printable area.  At exactly 186mm
   it can be clipped by browser print previews despite existing in the layout. */
@media print{.precision-staff,.precision-staff>.score-row{width:184mm!important;max-width:184mm!important}}
@media print{.precision-staff>.score-row{position:relative!important}.precision-measure.row-end::after{display:none!important}.precision-staff>.score-row>.score-print-row-end-bar{display:block!important;position:absolute!important;z-index:20;right:0;top:3.2mm;height:17.6mm;width:.5mm;background:#222}}
/* Keep the closing rule inside the final measure's SVG viewport.  This avoids
   Chromium PDF clipping positioned elements on the print area's outer edge. */
@media print{.precision-staff>.score-row>.score-print-row-end-bar{display:none!important}.precision-measure.row-end .score-svg .score-bar:nth-child(2){display:block!important;transform:translateX(-8px)!important;stroke-width:3!important}}
@media print{.precision-measure.row-end .score-print-end-bar{visibility:visible!important;fill:#222!important}}
@media print{.precision-measure.row-end .score-print-end-label{visibility:visible!important;fill:#222!important;font:132px/1 Georgia,serif!important}}
/* Print backgrounds are rasterized consistently by Chrome, unlike end-of-SVG
   strokes at the outer grid edge. */
@media print{.precision-staff>.score-row{background:none!important;border-right:0!important;box-sizing:border-box!important}}
/* Reserve a small gutter in the closing measure so its real SVG bar cannot
   coincide with the browser's physical clipping edge. */
@media print{.precision-measure.row-end .score-svg{width:calc(100% - 4mm)!important}}
@media print{.precision-measure.row-end .score-print-end-bar,.precision-measure.row-end .score-print-end-label{visibility:hidden!important}.precision-measure.row-end .score-svg .score-bar:nth-child(2){stroke-width:1.2!important}}

/* Fixed A4 artwork used by the PDF exporter.  It deliberately duplicates the
   print geometry instead of taking its size from the current device viewport. */
.pdf-export-root{position:fixed;left:-10000px;top:0;width:210mm;background:#fff;color:#111;z-index:-1}
.pdf-export-page{position:relative;box-sizing:border-box;width:210mm;height:297mm;overflow:hidden;padding:0;background:#fff}
.pdf-export-heading{height:21mm;text-align:center;color:#111;overflow:hidden}.pdf-export-heading h1{margin:0;font:700 24px/1.15 Georgia,serif}.pdf-export-heading p{margin:5px 0 0;font:14px/1.3 ui-rounded,system-ui,sans-serif}
.pdf-export-page .precision-staff{position:absolute;left:13mm;width:184mm!important;margin:0;padding:0;display:block!important;overflow:visible}
.pdf-export-page .score-row{position:relative;display:grid!important;grid-template-columns:repeat(var(--score-row-columns,4),minmax(0,1fr))!important;width:184mm!important;height:24mm!important;min-height:24mm!important;margin:0!important;break-inside:avoid-page!important}
.pdf-export-page .precision-measure,.pdf-export-page .score-svg{position:relative;overflow:visible!important}.pdf-export-page .precision-measure{height:24mm!important;min-width:0}.pdf-export-page .score-svg{height:24mm!important;min-height:24mm!important}.pdf-export-page .score-cross-measure-layer{display:none!important}.pdf-export-page .score-print-cross-measure-layer{display:block!important;inset:0!important}.pdf-export-page .score-svg .score-technique,.pdf-export-page .score-svg .score-technique-label{display:none!important}.pdf-export-page .score-svg .score-selection,.pdf-export-page .score-svg .score-hit-target,.pdf-export-page .score-svg .score-beat-guide{display:none!important}.pdf-export-page .score-svg .score-bar{stroke:#222;stroke-width:1.2}.pdf-export-page .score-svg .score-note{font-size:30px}.pdf-export-page .score-svg .score-beam{stroke:#111;stroke-width:2.5}.pdf-export-page .score-svg .score-measure-number{display:block!important;fill:#444!important;font-size:10px}.pdf-export-page .score-svg .score-beat-number{display:none}.pdf-export-page .precision-measure.row-end .score-svg{width:calc(100% - 4mm)!important}.pdf-export-page .precision-measure.row-end .score-svg .score-bar:nth-child(2){display:block!important;transform:translateX(-8px)!important;stroke-width:1.2!important}.pdf-export-page .score-print-end-bar,.pdf-export-page .score-print-end-label,.pdf-export-page .score-print-row-end-bar{visibility:hidden!important;display:none!important}

/* Technique and rhythm annotations are notation, not controls: keep them the
   same black as the notes in every score surface. */
.score-svg .score-technique,.score-svg .score-annotation,.score-svg .score-tuplet,.score-ornament-curve,.score-cross-measure-technique{stroke:#14171c}
.score-svg .score-technique-label,.score-svg .score-annotation-label,.score-svg .score-tuplet-label,.score-svg .score-ornament,.score-svg .score-mute,.score-cross-measure-label{fill:#14171c}
.score-svg .score-key-change{font:700 11px/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;fill:#14171c}

/* On touch devices, dragging the score is document navigation; a short tap
   still reaches the SVG slot and selects it. */
@media (pointer:coarse){
  /* Controls must never turn an accidental double-tap into browser zoom.
     The score deliberately retains pinch-zoom for close editing. */
  button,.import-button,label[role="button"],select,input,.topbar,.transport-playback,.score-actions,.score-editor-settings,dialog{touch-action:manipulation}
  .score-actions{overscroll-behavior:contain;-webkit-touch-callout:none}
  /* Pinch is handled by the score itself in app.js so that it enlarges
     notation only, rather than zooming the entire App WebView. */
  /* iPad's SVG implementation treats CSS zoom as reflow, leaving glyphs at
     nearly their original size. Transform the complete score canvas instead
     so notes, beams, technique letters and curves scale as one score. */
  /* Do not compensate the width here.  A compensated SVG viewport cancels
     the transform and makes only the whitespace appear to zoom. */
  .editor-panel{overflow-x:auto}
  .precision-staff{touch-action:pan-y;backface-visibility:hidden;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .precision-staff,.precision-staff *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  /* Do not promote the whole long score to one gigantic texture.  Each score
     row is a small composited layer, so both pinch directions remain smooth
     even after a large GP import. */
  .precision-staff.is-touch-zoomed>.score-row{transform:none!important;transform-origin:top left;backface-visibility:hidden}
  .precision-staff.is-touch-zoomed>.score-cross-measure-layer{transform:none!important;transform-origin:top left;backface-visibility:hidden}
  .score-svg,.score-svg .score-slot,.score-svg .score-hit-target{touch-action:pan-y}
  .precision-staff.is-pinching>.score-row,.precision-staff.is-pinching>.score-cross-measure-layer{will-change:transform}
  .precision-staff.is-pinching,.precision-staff.is-pinching *{touch-action:none}
}

/* The fretboard is a single interactive SVG surface.  The surrounding
   toolbar remains native so it retains iPad accessibility and file/input UI. */
.fretboard.fretboard-svg-host{display:block;min-width:0!important;width:100%;height:auto;padding:0;border:0;border-radius:10px;background:#3d2014;box-shadow:inset 0 0 22px #2c160b;overflow:hidden}
.fretboard-finger-picker{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:3px 5px;border:1px solid #4c596c;border-radius:8px;background:#202733}.fretboard-finger-picker>span{font-size:11px;font-weight:800;color:#b9c6d7;white-space:nowrap}.fretboard-finger-picker select{display:none;max-width:92px;min-height:26px;padding:2px 5px;font-size:11px}.fretboard-finger-picker.has-chord select{display:inline-block}.fretboard-finger-picker button{display:grid;place-items:center;box-sizing:border-box;width:28px;height:28px;min-width:28px;min-height:28px;margin:0;padding:0;flex:0 0 28px;border-radius:50%;font-size:13px;font-weight:850;line-height:1}.fretboard-finger-picker button.active{border-color:#f4cb68;background:#226f70;color:#fff;box-shadow:0 0 0 2px rgba(244,203,104,.3)}.fretboard-finger-picker[aria-disabled="true"]{opacity:.5}.fretboard-finger-picker[aria-disabled="true"] button{pointer-events:none}
.fretboard-marker-control{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid #4c596c;border-radius:8px;background:#202733}.fretboard-marker-control button{min-height:30px;padding:5px 11px;border:0;border-radius:5px;background:transparent;color:#c6d1df;font-size:12px;font-weight:750}.fretboard-marker-control button.active{background:#4c86e8;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.toolbar-fretboard-options [data-add-to-chord].active,.ipad-note-tools [data-add-to-chord].active{border-color:#f4cb68;background:#226f70;color:#fff;box-shadow:0 0 0 2px rgba(244,203,104,.25)}
.fretboard-svg{display:block;width:100%;height:auto;min-height:132px;touch-action:manipulation;background:#3d2014}
.fretboard-svg .fretboard-cell{cursor:pointer;outline:none}.fretboard-svg .fretboard-cell:focus-visible .fretboard-marker{stroke:#fff;stroke-width:4}.fretboard-svg .fretboard-cell:hover .fretboard-marker{filter:brightness(1.16)}
.fretboard-svg .fretboard-string-shadow{stroke:#160b06;stroke-opacity:.94;pointer-events:none}.fretboard-svg .fretboard-string{stroke:#d8d0c5;stroke-opacity:1;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}.fretboard-svg .fretboard-string-highlight{stroke:#fff7e8;stroke-opacity:.9;pointer-events:none}.fretboard-svg .fretboard-fret{stroke:#ead5b3;stroke-opacity:.7;filter:drop-shadow(1px 0 0 rgba(55,27,11,.72))}.fretboard-svg .fretboard-inlay{fill:#f5deb0;fill-opacity:.9;filter:drop-shadow(0 2px 2px rgba(35,16,7,.7))}.fretboard-svg .fretboard-label{fill:#cbd3df;font:600 22px ui-rounded,"SF Pro Rounded",system-ui,sans-serif}.fretboard-svg .fretboard-degree{fill:#fff;font:700 25px ui-rounded,"SF Pro Rounded",system-ui,sans-serif;pointer-events:none}
.fretboard-svg .fretboard-string-name{fill:#fff5d8;font:800 24px ui-rounded,"SF Pro Rounded",system-ui,sans-serif;paint-order:stroke;stroke:#251209;stroke-width:4px;pointer-events:none}

/* The lower editor uses the same four tabs on desktop and iPad.  Keeping the
   panels in one fixed tray prevents long annotation controls from intruding
   into playback while preserving the touch-friendly iPad workflow. */
.ipad-tool-tabs{display:flex;align-items:center;gap:3px;flex:1 1 360px;min-width:280px;padding:2px;border:1px solid #4c5766;border-radius:5px;background:#1f2530}
.ipad-tool-tabs button{flex:1 1 0;min-width:0;min-height:30px;padding:5px 7px;border:0;border-radius:3px;background:transparent;color:#c8d3e2;font-size:11px;white-space:nowrap}
.ipad-tool-tabs button.selected{background:#4c86e8;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.ipad-tool-section{display:none;align-items:center;gap:6px;flex:1 0 100%;min-width:0;flex-wrap:wrap}
.score-actions[data-tablet-mode="note"] .ipad-note-tools,.score-actions[data-tablet-mode="rhythm"] .ipad-rhythm-tools,.score-actions[data-tablet-mode="fretboard"] .toolbar-fretboard,.score-actions[data-tablet-mode="annotation"] .ipad-annotation-tools{display:flex}
.score-actions[data-tablet-mode="fretboard"] .toolbar-fretboard{margin-top:0;padding-top:0;border-top:0}
.notation-annotation-tools{align-content:flex-start;padding:7px 0 1px;border-top:0}
.notation-annotation-tools .annotation-tools-title{flex:0 0 100%}
@media(max-width:700px){.ipad-tool-tabs{flex-basis:100%;min-width:0}.ipad-tool-tabs button{font-size:10px;padding-inline:4px}}

/* iPhone uses the same editing features as iPad, but in a compact working
   surface: the tray stays reachable without consuming half of portrait view,
   and the 24-fret board scrolls horizontally instead of shrinking its notes. */
@media(max-width:700px){
  body,body.score-focus main{padding-bottom:calc(208px + env(safe-area-inset-bottom))}
  .topbar{padding:7px 10px}.brand-subtitle{display:none}.topbar h1{font-size:18px}
  .topbar-primary{gap:7px}.topbar-primary .actions{gap:4px}.topbar-primary .actions button{padding:6px 7px;font-size:12px}
  .transport-playback{padding:7px 8px}.playback-main-row{gap:7px}.transport-playback .now-playing{font-size:11px}
  .score-editor-settings{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding:7px 10px}.score-editor-settings label{flex:0 0 auto}
  .score-actions,body.score-focus .score-actions{height:min(43vh,250px);max-height:min(43vh,250px);padding:7px 8px}
  .ipad-tool-tabs button{min-height:34px;font-size:10px}.ipad-tool-section{gap:5px}
  .toolbar-fretboard{overflow-x:auto;overscroll-behavior-x:contain}.toolbar-fretboard-head{min-width:600px}
  .toolbar-fretboard .fretboard,.toolbar-fretboard .fret-labels{min-width:700px!important}
  .toolbar-fretboard .fretboard{--fret-height:32px;grid-template-rows:repeat(var(--string-count),32px)}
  .toolbar-fretboard .fretboard .fret button{width:25px;height:25px;font-size:10px}
}
.brand-subtitle{margin:2px 0 0;color:#aebed2;font-size:11px;font-weight:700;letter-spacing:.08em}

/* Keep the lower tool tray stable while moving between tool pages.  Its fixed
   height is sized for the complete fretboard page; shorter pages simply keep
   the same working area instead of shifting the score above them. */
.score-actions,body.score-focus .score-actions{height:min(54vh,270px);max-height:min(54vh,270px)}
@media(max-width:1180px){.score-actions,body.score-focus .score-actions{height:min(40vh,270px);max-height:min(40vh,270px)}}
@media screen and (min-width:701px) and (max-width:1180px) and (orientation:landscape) and (max-height:900px){.score-actions,body.score-focus .score-actions{height:min(31vh,250px);max-height:min(31vh,250px)}}

/* Persisted score annotations.  These remain on the SVG score instead of
   browser overlays, so they zoom and print in the same coordinate system. */
.notation-annotation-tools{display:flex;align-items:flex-start;gap:6px;flex:1 1 100%;flex-wrap:wrap;padding:6px 0;border-top:1px solid #4c5766}.annotation-tools-title{flex:0 0 100%;color:#9ec0ff;font-size:11px;font-weight:800;letter-spacing:.08em}.annotation-tool-row{display:flex;align-items:center;gap:6px;flex:0 0 100%;min-width:0;flex-wrap:wrap}.annotation-row-label{flex:0 0 56px;color:#c9d6e8;font-size:12px;font-weight:800}.notation-annotation-tools input[type="text"]{box-sizing:border-box;min-width:96px;max-width:150px;min-height:32px;padding:5px 8px;border:1px solid #59677a;border-radius:4px;background:#1d222b;color:#eef3fa;font:inherit}.notation-annotation-tools .checkbox{display:inline-flex;align-items:center;gap:4px;color:#d7e0ec;font-size:12px;font-weight:700;white-space:nowrap}.notation-annotation-tools .checkbox input{accent-color:#5e96f3}.articulation-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.articulation-actions button{min-width:0!important;padding-inline:9px!important}.articulation-actions button.active{border-color:#82b1ff;background:#355f9e;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}.score-range-highlight{fill:#f5ca54;fill-opacity:.34;stroke:#d39a12;stroke-width:1.4;pointer-events:none}.score-range-annotation{fill:#5b4100;font:800 13px/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;paint-order:stroke;stroke:#fff9df;stroke-width:3px;stroke-linejoin:round;pointer-events:none}.score-note-finger,.score-note-position,.score-note-articulation{fill:#14171c;font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;font-weight:800;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none}.score-note-finger{font-size:13px}.score-note-position{font-size:11px;letter-spacing:.02em}.score-note-articulation{font-size:11px;font-style:italic}

/* Keyboard note entry keeps pitch selection visible without committing the draft. */
.keyboard-entry{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;padding:4px 8px;border-left:1px solid #4c5766}.keyboard-entry-label{color:#9ec0ff;font-size:11px;font-weight:800}.keyboard-entry strong{min-width:112px;color:#f4f7fb;font-size:12px;white-space:nowrap}.fingering-entry-preview{min-width:104px;color:#9ec0ff;font-size:11px;font-weight:700;white-space:nowrap}.keyboard-entry button{padding:5px 7px;font-size:11px}.keyboard-entry button:disabled{opacity:.48;cursor:default}.score-entry-preview{opacity:.92;pointer-events:none}.score-slot.has-entry-preview>.score-entry-original{opacity:.45;fill:#687384}.score-slot.has-entry-preview>.score-selection{display:none}.score-slot.has-entry-preview:focus-visible .score-hit-target{fill:transparent;stroke:none}.score-entry-preview .score-note,.score-entry-preview .score-accidental,.score-entry-preview .score-octave-dot{fill:#2a78d5}
.fret.candidate button{border-color:#8ec1ff;background:rgba(37,83,137,.88);color:#eaf3ff;opacity:1;box-shadow:0 0 0 2px rgba(125,180,255,.24),0 2px 6px #432}.fret.candidate-selected button{background:#4c86e8;color:#fff;border-color:#e7f0ff;box-shadow:0 0 0 3px rgba(111,163,255,.5),0 2px 8px #193d74}
.quick-duration{display:flex;align-items:center;gap:3px}.quick-duration button{min-width:34px;padding:5px 5px;font-size:10px}.quick-duration button.selected{border-color:#79aaff;background:#345d9e;color:#fff}
@media(max-width:800px){.keyboard-entry{flex-basis:100%;border-top:1px solid #4c5766;border-left:0;padding-left:0}.keyboard-entry strong{min-width:0}}

.ipad-tool-tabs{display:none}.ipad-tool-section{display:contents}.touch-multi-select{display:none}
.score-actions .control-button-icon{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.28em;height:1.28em;min-width:1.28em;margin:0 .16em 0 0;font:800 1.3em/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;vertical-align:middle;transform:translateY(-.03em)}
#undoButton,#redoButton{display:inline-flex;align-items:center;justify-content:center;gap:5px;line-height:1}
#undoButton .control-button-icon,#redoButton .control-button-icon{margin:0;transform:scale(1.3)}
#undoButton .control-button-label,#redoButton .control-button-label{display:block;line-height:1}
.score-svg,.score-svg *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Focus mode is a reading surface: editing controls move out of the way. */
body.score-focus,body.score-focus main{padding-bottom:0!important}
body.score-focus .score-actions{display:none!important}
@media (pointer:coarse){.touch-multi-select{display:none}.touch-multi-select.active{border-color:#79aaff;background:#345d9e;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}}

/* Long-press quick editing remains a score-only affordance.  Toolbars use
   native controls, but must not surface Safari's selection/callout behavior. */
.score-quick-edit{position:fixed;z-index:180;display:flex;gap:4px;flex-wrap:wrap;max-width:min(330px,calc(100vw - 16px));padding:6px;border:1px solid #65758b;border-radius:10px;background:rgba(25,31,40,.98);box-shadow:0 10px 28px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.score-quick-edit.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.score-quick-edit button{min-height:34px;padding:6px 8px;border:1px solid #5f6d80;border-radius:6px;background:#303947;color:#f3f7fd;font-size:12px;font-weight:750;white-space:nowrap}.score-quick-edit button:active{background:#4c86e8;border-color:#84aeff}.score-quick-edit-fingers{display:flex;align-items:center;gap:4px;flex:1 0 100%;padding-top:5px;border-top:1px solid #536174}.score-quick-edit-fingers>span{margin-right:2px;color:#aec5e7;font-size:11px;font-weight:800;white-space:nowrap}.score-quick-edit-fingers button{min-width:0;flex:1 1 0}.score-quick-edit-fingers button:disabled{opacity:.42}.score-quick-finger-edit .score-quick-edit-fingers{padding-top:0;border-top:0}
@media (pointer:coarse){.topbar button,.transport-playback button,.score-actions button,.score-actions select,.score-editor-settings button,.score-editor-settings select,dialog button,dialog select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.score-quick-edit{min-width:250px}.score-quick-edit button{min-height:40px;font-size:13px}}

/* iPad: retain the desktop workflow, but reserve more room for the score and
   keep every fixed control within a comfortable touch target. */
@media (min-width:701px) and (max-width:1180px){
  html,body{overflow-x:clip}
  body,body.score-focus main{padding-bottom:min(52vh,392px)}
  .topbar{padding:8px 16px;gap:7px}
  main{padding-left:16px;padding-right:16px}
  .topbar-primary{gap:9px}
  .topbar h1{font-size:18px}
  .topbar-primary .actions{gap:4px}
  .topbar-primary .actions button,.topbar-primary .actions .import-button{padding:6px 8px;font-size:12px}
  .transport-playback{padding:7px 9px}
  /* A 10–11 inch iPad has room for transport on the first row, but not for
     every playback control and the three-part note readout.  Keeping them on
     one row caused their labels to paint on top of one another. */
  .playback-main-row{flex-wrap:wrap;gap:7px}
  .transport-playback .transport{gap:4px}
  .transport-playback .playback-label{font-size:9px}
  .transport-playback .playback-source{order:4;flex:0 1 auto;min-width:0;max-width:154px}
  .transport-playback .playback-source select{max-width:106px}
  .transport-playback .now-playing{order:initial;flex:1 1 120px;min-width:92px}
  .transport-playback .playback-volume{order:5;margin-left:auto;gap:3px}
  .transport-playback .playback-volume input{width:72px}
  .transport-playback .playback-help{order:6}
  .transport-playback .playback-readout{order:7;flex:1 1 100%;width:100%;min-width:0;margin-left:0}
  .playback-help-tooltip{left:auto;right:0;width:min(360px,calc(100vw - 40px));max-width:calc(100vw - 40px)}
  .score-editor-settings{gap:8px;padding:7px 12px}
  .precision-staff{padding-left:12px!important;padding-right:12px!important}
  .score-actions,body.score-focus .score-actions{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));padding:8px 10px;max-height:min(40vh,340px);scrollbar-gutter:stable both-edges}
  .score-actions button,.score-actions select{min-height:32px}
  .score-actions .score-hint{display:none}
  .ipad-tool-tabs{display:flex;align-items:center;gap:3px;flex:1 1 220px;min-width:0;padding:2px;border:1px solid #4c5766;border-radius:5px;background:#1f2530}
  .ipad-tool-tabs button{flex:1 1 0;min-width:0;min-height:30px;padding:5px 7px;border:0;border-radius:3px;background:transparent;color:#c8d3e2;font-size:11px;white-space:nowrap}
  .ipad-tool-tabs button.selected{background:#4c86e8;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
  .ipad-tool-section{display:flex;align-items:center;gap:6px;flex:1 0 100%;min-width:0;flex-wrap:wrap}
  .ipad-note-tools .degree-row,.ipad-note-tools .keyboard-entry{flex-basis:100%}
  .ipad-note-tools .toolbar-readout{flex-basis:100%;min-width:0}
  .score-actions[data-tablet-mode="note"] .ipad-rhythm-tools,.score-actions[data-tablet-mode="note"] .toolbar-fretboard{display:none}
  .score-actions[data-tablet-mode="rhythm"] .ipad-note-tools,.score-actions[data-tablet-mode="rhythm"] .toolbar-fretboard{display:none}
  .score-actions[data-tablet-mode="fretboard"] .ipad-note-tools,.score-actions[data-tablet-mode="fretboard"] .ipad-rhythm-tools{display:none}
  .score-actions[data-tablet-mode="fretboard"] .toolbar-fretboard{margin-top:0;padding-top:0;border-top:0}
  .toolbar-fretboard{margin-top:0;padding-top:5px}
  .toolbar-fretboard-head{gap:8px}
  .toolbar-fretboard .fretboard{--fret-height:30px;grid-template-rows:repeat(var(--string-count),30px);border-width:4px}
  .toolbar-fretboard .fretboard .fret button{width:24px;min-height:0;height:24px;font-size:10px}
  .toolbar-fretboard .fret-labels{margin-top:2px;font-size:9px}
}
@media (min-width:701px) and (max-width:850px) and (orientation:portrait){
  .precision-staff{padding-left:16px!important;padding-right:16px!important}
  .score-svg{min-height:142px}
  .score-svg .score-note{font-size:34px}
}
/* Compact the on-screen iPad score only.  Printing keeps its fixed physical
   row height, while this reduces the large visual gutters between score rows. */
@media screen and (min-width:701px) and (max-width:1180px){
  .precision-staff{padding-top:4px!important;padding-bottom:6px!important}
  .precision-staff .score-svg{min-height:110px}
  /* The SVG viewBox reserves annotation headroom.  Reclaim the unused part
     between adjacent display rows without scaling the notation itself. */
  /* Keep the tablet score compact, but reserve enough room for a selected
     slot's full outline below the note. */
  .precision-staff>.score-row:not(:last-child){margin-bottom:-12px}
  .precision-staff>.score-row:has(.score-selection){position:relative;z-index:4}
}
/* Landscape iPad has less vertical room than its wide canvas suggests. Keep
   the fixed editor tray compact; its tabs expose one tool group at a time. */
@media screen and (min-width:701px) and (max-width:1180px) and (orientation:landscape) and (max-height:900px){
  body,body.score-focus main{padding-bottom:270px}
  .score-actions,body.score-focus .score-actions{max-height:min(31vh,250px);padding:6px 8px}
  .score-actions button,.score-actions select{min-height:29px}
  .ipad-tool-tabs{padding:1px}
  .ipad-tool-tabs button{min-height:27px;padding:4px 6px}
  .toolbar-fretboard .fretboard{--fret-height:24px;grid-template-rows:repeat(var(--string-count),24px);border-width:3px}
  .toolbar-fretboard .fretboard .fret button{width:21px;height:20px;font-size:9px}
  .toolbar-fretboard .fret-labels{display:none}
  .toolbar-fretboard-head{font-size:10px}
}
@media (min-width:701px) and (max-width:850px) and (orientation:portrait){
  .precision-staff .score-svg{min-height:116px}
}
/* Compact repeat controls and the persistent selected-note readout. */
.playback-readout{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:300px}.playback-readout.detail-grid{grid-template-columns:repeat(3,minmax(78px,1fr));margin:0}.playback-readout.detail-grid div{min-width:0}.repeat-notation-controls{display:flex;align-items:center;gap:6px}.score-repeat-mark{fill:#14171c;font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;font-weight:800;font-size:38px}.score-repeat-bar{stroke:#14171c;stroke-width:1.4}.score-repeat-bar-heavy{stroke-width:4}.score-repeat-dot{fill:#14171c}.score-repeat-count{fill:#14171c;font:800 30px/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif}

/* Tool pages apply to desktop and iPad alike.  This final block deliberately
   follows the older tablet-only rules above. */
.ipad-tool-tabs{display:flex;align-items:center;gap:3px;flex:1 1 360px;min-width:280px;padding:2px;border:1px solid #4c5766;border-radius:5px;background:#1f2530}
.ipad-tool-tabs button{flex:1 1 0;min-width:0;min-height:30px;padding:5px 7px;border:0;border-radius:3px;background:transparent;color:#c8d3e2;font-size:11px;white-space:nowrap}
.ipad-tool-tabs button.selected{background:#4c86e8;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.ipad-tool-section{display:none;align-items:center;gap:6px;flex:1 0 100%;min-width:0;flex-wrap:wrap}
.score-actions[data-tablet-mode="note"] .ipad-note-tools,.score-actions[data-tablet-mode="rhythm"] .ipad-rhythm-tools,.score-actions[data-tablet-mode="fretboard"] .toolbar-fretboard,.score-actions[data-tablet-mode="annotation"] .ipad-annotation-tools{display:flex}
.score-actions[data-tablet-mode="fretboard"] .toolbar-fretboard{margin-top:0;padding-top:0;border-top:0}
.notation-annotation-tools{align-content:flex-start;padding:7px 0 1px;border-top:0}.notation-annotation-tools .annotation-tools-title{flex:0 0 100%}
@media(max-width:700px){.ipad-tool-tabs{flex-basis:100%;min-width:0}.ipad-tool-tabs button{font-size:10px;padding-inline:4px}}

/* Desktop has the width for full tool pages, including the complete bass
   fretboard. The fretboard tab needs about 320px (tabs, heading, SVG board
   and padding), so 340px gives it a small buffer without consuming the score.
   Keep this last: older tablet defaults otherwise cap the tray at 270px. */
@media (min-width:1181px){
  body:not(.score-focus){padding-bottom:350px}
  .score-actions{left:0;right:0;bottom:0;height:340px;max-height:340px;padding:8px max(14px,calc((100vw - 1400px)/2 + 12px));border-right:0;border-bottom:0;border-left:0;border-radius:0;overflow:hidden}
  .toolbar-fretboard{overflow:visible}
  .toolbar-fretboard .fretboard-svg-host{overflow:hidden}
}

/* Touch score zoom is a camera transform.  Do not reflow individual score
   rows; transformed overflow stays scrollable so playback can follow notes
   that extend beyond the left or right edge. */
@media screen {
  html.score-touch-viewer-active,body.score-touch-viewer-active{overflow-x:auto!important}
  .precision-staff.is-touch-zoomed{overflow:visible!important;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
  /* The transformed score can become wider than its editor panel.  Let a
     single finger pan in either axis: WebKit chooses the dominant direction,
     so vertical reading remains natural while a zoomed score can be inspected
     to the left and right.  A two-finger pinch still switches to `none` in
     the touch-specific rule above and stays owned by app.js. */
  .precision-staff.is-touch-zoomed .score-svg,.precision-staff.is-touch-zoomed .score-slot,.precision-staff.is-touch-zoomed .score-hit-target{touch-action:pan-x pan-y}
}

.playback-quick-controls{position:fixed;z-index:140;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;gap:5px;padding:5px;border:1px solid #617189;border-radius:8px;background:rgba(23,30,40,.94);box-shadow:0 7px 22px rgba(0,0,0,.35);backdrop-filter:blur(8px)}.playback-quick-controls[hidden]{display:none}.playback-quick-controls button{min-height:34px;padding:6px 9px;border-color:#70839d;background:#344050;color:#f4f8ff;font-size:12px;white-space:nowrap}.playback-quick-controls button:first-child{border-color:#8bb5ff;background:#3f78cf}.playback-quick-controls button:disabled{opacity:.72;cursor:default}.playback-quick-controls button.is-suspended{border-color:#78d3c3;background:#28776e;color:#fff}
.score-zoom-control{display:inline-flex!important;align-items:center;gap:6px;min-height:32px;padding:4px 7px;border:1px solid #536174;border-radius:5px;color:#cbd7e6;font-size:12px;font-weight:750;white-space:nowrap}.score-zoom-control input{width:84px;min-height:0;padding:0;accent-color:#76aaff}.score-zoom-control output{min-width:38px;color:#9ec0ff;font-variant-numeric:tabular-nums;text-align:right}



/* Phone-only reading mode: SVG notation keeps its own proportions while the
   surrounding chrome can be folded away for a clear score viewport. */
.mobile-chrome-toggle{display:none}
@media(max-width:700px){
  /* A narrow iPhone may need a sideways pan even before the user has enlarged
     the notation.  This does not create horizontal overflow by itself; it
     simply permits native panning whenever the editor panel has overflow. */
  .precision-staff,.precision-staff .score-svg,.precision-staff .score-slot,.precision-staff .score-hit-target{touch-action:pan-x pan-y}
  .editor-panel{overscroll-behavior-x:contain}
  .precision-staff{padding-top:3px!important;padding-bottom:4px!important}
  .precision-staff .score-svg{min-height:80px}
  /* Match the iPad's compact score rhythm: the SVG viewBox has annotation
     headroom, so reclaim it between rows without scaling the notation. */
  .precision-staff>.score-row:not(:last-child){margin-bottom:-12px}
  .mobile-chrome-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 7px;border-color:#637694;background:#303b4b;color:#dceaff;font-size:11px;font-weight:800;white-space:nowrap}
  .topbar-primary{position:relative}
  .topbar-primary>#toggleTopbarButton{margin-left:auto}
  .topbar:not(.is-collapsed) .topbar-primary>#toggleTopbarButton{align-self:flex-start}
  .topbar.is-collapsed{min-height:42px;padding-block:5px}
  .topbar.is-collapsed .topbar-primary .actions,.topbar.is-collapsed .transport-playback{display:none}
  .topbar.is-collapsed .brand .eyebrow,.topbar.is-collapsed .brand-subtitle{display:none}
  .topbar.is-collapsed .topbar-primary{align-items:center}
  .topbar.is-collapsed .topbar-primary .brand{flex-basis:auto}
  .score-actions.is-collapsed{height:44px!important;min-height:44px;max-height:44px!important;overflow:hidden;align-content:center}
  .score-actions.is-collapsed>*:not(#toggleToolbarButton){display:none!important}
  .score-actions.is-collapsed>#toggleToolbarButton{display:inline-flex}
  body.toolbar-collapsed,body.toolbar-collapsed.score-focus main{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}