:root{color-scheme:light;--ink:#173f56;--teal:#147d78;--line:#cadce5;--paper:#fff;--soft:#edf4f8;--muted:#5c7380}
/* The existing logo stays in the fixed controls, not in a separate tall banner. */
.app-brand{display:flex;align-items:center;flex:none;margin:0;line-height:1;height:32px}
.app-brand svg{display:block}
.app-brand .brand-wordmark{width:152px;height:32px}
.app-brand .brand-mark{display:none}
.mobile-workspace .app-brand{order:10;width:30px;height:30px}
.mobile-workspace .app-brand .brand-wordmark{display:none}
.mobile-workspace .app-brand .brand-mark{display:block;width:30px;height:30px}
@media print{.app-brand{display:none!important}}
/* A third, compact folder uses the same dock in every orientation. */
#navigation-panel[hidden]{display:none!important}
#navigation-panel{padding:4px 0;max-height:40svh;overflow:auto}
.navigation-key-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:4px 0}
.navigation-key-row>span{width:90px;font-size:13px;color:var(--muted)}
.navigation-key-row button{font-size:16px;min-height:34px;padding:3px 10px;direction:ltr}
.navigation-glyph{width:34px;height:30px;display:block;fill:currentColor;pointer-events:none}
.navigation-key-row button.navigation-symbol-key{width:40px;min-width:40px;height:36px;padding:2px;display:flex;justify-content:center;align-items:center}
.navigation-key-row button[aria-pressed="true"]{background:var(--ink);color:#fff}
.annotation-key-row{grid-column:1/-1}.navigation-key-row button.annotation-part-key{width:36px;min-width:36px;height:36px;padding:2px;font-size:20px}
.score-annotation{cursor:grab}.score-annotation text{pointer-events:none}
#annotation-dialog{border:1px solid var(--line);border-radius:14px;padding:20px;max-width:min(440px,90vw);color:var(--ink)}
#annotation-dialog h2{width:auto;margin-bottom:12px;font-size:20px}#annotation-dialog label{display:block;font-size:14px;margin-bottom:5px}
#annotation-input{width:100%;padding:9px;font:inherit;border:1px solid var(--line);border-radius:8px}.annotation-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#annotation-edit[hidden]{display:none!important}
.navigation-sign{color:var(--ink);cursor:pointer}.navigation-sign:hover{color:var(--teal)}
.navigation-sign.navigation-selected{color:var(--teal);filter:drop-shadow(0 0 2px #147d7860)}
.score.erasing .navigation-sign{cursor:inherit}
.navigation-playback-options{display:grid;gap:8px;margin:12px 0;padding-bottom:8px;border-bottom:1px solid var(--line)}
.score.playback-seeking svg.staff,.score.playback-seeking .event,.score.playback-seeking .placed-chord{cursor:pointer!important}
.mobile-workspace .keyboard-tabs .writing-modes button{min-width:0!important;flex:1;padding-inline:8px!important;font-size:14px!important}
.mobile-workspace #navigation-panel{max-height:35svh}.mobile-workspace .navigation-key-row>span{width:66px;font-size:11px}.mobile-workspace .navigation-key-row button{padding:3px 7px;font-size:14px}
.mobile-workspace .navigation-key-row button.navigation-symbol-key{padding:2px}
.phone-landscape #navigation-keys{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}.phone-landscape #navigation-panel{max-height:32svh}
body:not(.mobile-workspace) #navigation-keys{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
body:not(.mobile-workspace) #navigation-keys>details{grid-column:1/-1}
*{box-sizing:border-box}body{margin:0;background:#edf3f7;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.5}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:9px;min-height:42px;padding:8px 14px}button:hover{border-color:var(--teal);background:#f3faf9}button:focus-visible,select:focus-visible,svg:focus-visible{outline:3px solid #e8a52e;outline-offset:3px}button:disabled{opacity:.4;cursor:default}main{max-width:1360px;margin:auto;padding:28px 30px 40px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{font-size:14px;color:var(--muted);margin:0 0 2px}h1{font-size:30px;line-height:1.2;margin:0;font-weight:750}h2{font-size:16px;margin:0;width:72px;flex-shrink:0}.meter-control{display:flex;gap:12px;align-items:center;font-size:14px}.meter-control>div{display:flex;gap:8px;align-items:center}select{font-size:18px;border:1px solid var(--line);border-radius:8px;padding:7px;background:white}.palette{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:12px 18px;box-shadow:0 2px 6px #173f5608}.palette-row{display:flex;align-items:center;gap:16px}.palette-row+ .palette-row{border-top:1px solid #e7eff3;padding-top:10px;margin-top:10px}.choices{display:grid;grid-template-columns:repeat(6,minmax(66px,1fr));gap:8px;flex:1;max-width:860px;direction:ltr}.choice{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 9px;min-height:61px;touch-action:none;user-select:none;-webkit-user-select:none}.choice svg{width:34px;height:46px;overflow:visible;pointer-events:none;flex-shrink:0}.choice span{font-size:14px;direction:rtl}.choice[aria-pressed="true"]{background:var(--ink);color:white;border-color:var(--ink);box-shadow:0 0 0 2px #d7e9ed}.workspace-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:18px 0 10px}.workspace-heading p{margin:0;font-size:15px;color:var(--muted)}.quiet{font-size:14px;flex-shrink:0;background:transparent}.score{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 6px 22px #173f5606}.measures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));direction:ltr}.measure{min-width:0;direction:rtl;position:relative}.measure-head{display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:14px;color:var(--muted)}.measure svg.staff{display:block;width:100%;height:auto;overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.staff-lines{stroke:#405865;stroke-width:1;fill:none}.symbol{fill:var(--ink);pointer-events:none}.event{cursor:grab}.event.selected .symbol{fill:var(--teal)}.hit{fill:transparent;stroke:none}.selection-ring{stroke:var(--teal);fill:#147d7812;stroke-width:1.5}.preview-ring{fill:#147d7818;stroke:#147d78;stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.ledger{stroke:#173f56;stroke-width:1.1}.position-guide{fill:#5c7380;font-size:12px}.workspace-footer{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:14px;margin:12px 2px 20px}.workspace-footer p{margin:0}.workspace-footer span{white-space:nowrap}.editbar{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#dfeaf0;border-radius:12px;padding:12px 16px;min-height:76px}.editbar p{margin:0;font-size:15px}.edit-actions{display:flex;gap:6px}.edit-actions button{font-size:14px;padding:7px 12px}.delete{color:#9c3945}.keyboard-hint{font-size:14px;color:var(--muted);margin:10px 2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.staff-scroll{overflow:visible}.notation-controls{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px;font-size:14px}.notation-controls label,.connection-actions label{display:flex;align-items:center;gap:8px}.notation-controls select,.connection-actions select{font-size:14px}.connection-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:14px}.connection-actions span{color:var(--muted);font-size:13px}.beam{stroke:var(--ink);stroke-width:4;fill:none;pointer-events:none}.stem{stroke:var(--ink);stroke-width:1.2;pointer-events:none}.tie{fill:var(--ink);pointer-events:none}.event.selected .stem{stroke:var(--teal)}
@media(max-width:1000px){.choice{gap:5px}.choice span{font-size:13px}.editbar{flex-wrap:wrap}.measures{grid-template-columns:repeat(2,minmax(0,1fr))}.measure:nth-child(n+3){border-top:1px solid #e7eff3;padding-top:12px}.choice svg{width:28px}}
@media(max-width:600px){main{padding:18px 12px 26px}header{margin-bottom:16px}h1{font-size:25px}.eyebrow{font-size:12px}.meter-control{gap:5px;flex-direction:column}.meter-control select{padding:3px 6px;font-size:16px}.palette{padding:10px}.palette-row{display:block}.palette-row h2{width:auto;font-size:14px;margin-bottom:6px}.choices{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.choice{flex-direction:column;gap:0;padding:2px;min-height:69px;border-radius:7px}.choice svg{width:28px;height:39px}.choice span{font-size:12px}.workspace-heading{align-items:start;margin-top:14px}.workspace-heading p{font-size:14px}.quiet{padding:4px 8px;font-size:13px;min-height:36px}.score{padding:10px 8px}.measures{grid-template-columns:1fr}.measure+.measure{border-top:1px solid #e7eff3;padding-top:10px}.measure-head{padding:0 8px}.measure svg.staff{max-height:232px}.workspace-footer{font-size:13px;margin-bottom:12px}.editbar{position:sticky;bottom:8px;padding:10px;box-shadow:0 4px 14px #173f5615;gap:8px}.editbar p{font-size:14px}.edit-actions{width:100%;gap:5px}.edit-actions button{flex:1;padding:6px 4px;font-size:13px}.keyboard-hint{display:none}}
.measure svg.staff{max-height:none}.measure-head{height:26px}.measure:nth-child(n){border-top:0;padding-top:0}.measures{row-gap:16px}
.notation-controls{align-items:center}.notation-controls button{font-size:14px;display:inline-flex;align-items:center;gap:7px}.notation-controls button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}.notation-controls button#eraser[aria-pressed="true"]{background:#9c3945;border-color:#9c3945}.notation-controls button svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.6;fill:none}.insert-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.insert-actions button{font-size:14px}.insert-actions button[hidden]{display:none}.insert-slot{cursor:pointer}.insert-slot rect{fill:#f3faf9;stroke:#aacdcc}.insert-slot text{fill:var(--teal);font-size:17px;text-anchor:middle;pointer-events:none}.insert-slot.active rect{fill:var(--teal);stroke:var(--teal)}.insert-slot.active text{fill:white}.insertion-guide{stroke:var(--teal);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.score.erasing .staff,.score.erasing .event{cursor:crosshair}.score.erasing .event:hover .symbol{fill:#9c3945}.dot{fill:var(--ink);pointer-events:none}.event.selected .dot{fill:var(--teal)}
.tool-dock{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 18px;box-shadow:0 2px 6px #173f5608}.tool-dock .palette{padding:0;border:0;box-shadow:none;background:transparent}.tool-dock .notation-controls{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid #e7eff3;gap:16px}.tool-dock #undo{margin-inline-start:auto}.notes-choices{grid-template-columns:repeat(8,minmax(0,1fr));max-width:1080px}.palette-tool{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 9px;min-height:61px;user-select:none;-webkit-user-select:none}.palette-tool svg{width:34px;height:46px;fill:currentColor;pointer-events:none;flex-shrink:0}.palette-tool span{font-size:14px;direction:rtl}.palette-tool[aria-pressed="true"]{background:var(--ink);color:white;border-color:var(--ink);box-shadow:0 0 0 2px #d7e9ed}.measure svg.staff{scroll-margin-top:240px}
@media(max-width:1000px){.palette-tool{flex-direction:column;gap:0;padding:4px}.palette-tool svg{width:28px;height:35px}.palette-tool span{font-size:13px}}
.editor-dock{position:sticky;top:max(6px,env(safe-area-inset-top));z-index:30;display:flex;flex-direction:column;gap:8px;background:var(--soft);border-radius:14px;box-shadow:0 5px 18px #173f5624}
@media(max-width:600px){.tool-dock{padding:8px}.tool-dock .notation-controls{gap:8px;flex-wrap:nowrap;padding-bottom:6px;margin-bottom:6px;min-height:36px}.tool-dock .control-label{display:none}.tool-dock .meter-control{flex-direction:row;gap:0}.tool-dock .meter-control>div{gap:4px}.tool-dock select{font-size:14px;min-height:36px;padding:3px 5px}.tool-dock .notation-controls button{min-height:36px;padding:4px 7px;font-size:14px}.tool-dock #eraser>span{display:none}.tool-dock #eraser{min-width:36px;justify-content:center}.tool-dock .palette-row h2{margin:0 0 2px;font-size:13px;line-height:18px}.tool-dock .palette-row+.palette-row{padding-top:5px;margin-top:5px}.tool-dock .choices{gap:3px}.tool-dock .notes-choices{grid-template-columns:repeat(8,minmax(0,1fr))}.tool-dock .choice,.tool-dock .palette-tool{min-height:55px;padding:2px;gap:0;flex-direction:column;border-radius:7px}.tool-dock .choice svg,.tool-dock .palette-tool svg{width:26px;height:30px}.tool-dock .choice span,.tool-dock .palette-tool span{font-size:12px;line-height:17px}.editbar{z-index:20}.measure svg.staff{scroll-margin-top:215px}}
@media(max-height:480px){.editor-dock{max-height:65svh;overflow-y:auto}}
.score-settings{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:16px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:14px}.bar-settings,.pdf-settings{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pdf-settings{margin-inline-start:auto}.score-settings input{font:inherit;color:inherit;width:68px;min-height:38px;border:1px solid var(--line);border-radius:8px;padding:6px;background:white}.score-settings select{font-size:14px;min-height:38px}.score-settings button{min-height:38px;font-size:14px;padding:6px 12px}#export-pdf{color:white;background:var(--ink);border-color:var(--ink)}#export-status{flex-basis:100%;margin:0;color:var(--muted);font-size:13px}input:focus-visible{outline:3px solid #e8a52e;outline-offset:3px}
@media(max-width:600px){.score-settings{padding:10px;gap:10px}.bar-settings,.pdf-settings{gap:6px;justify-content:flex-start;width:100%;margin:0}.score-settings button{padding:6px 9px}.score-settings input{width:56px}.score-settings label{font-size:13px}}
@media(max-width:600px){.tool-dock .control-label{display:block;font-size:12px;line-height:16px}.tool-dock .notation-controls>label,.tool-dock .meter-control{flex-direction:column;gap:2px}.tool-dock .notation-controls{align-items:flex-end}.score-settings .bar-settings{display:grid;grid-template-columns:minmax(56px,1fr) auto auto}.score-settings .pdf-settings{display:grid;grid-template-columns:68px minmax(0,1fr);border-top:1px solid #e7eff3;padding-top:10px}.score-settings label{grid-column:1/-1;font-weight:600}.score-settings input,.score-settings select{width:100%}.measure svg.staff{scroll-margin-top:235px}}
.title-settings{display:flex;align-items:center;gap:10px;flex-basis:100%;padding-bottom:12px;border-bottom:1px solid #e7eff3}.title-settings label{white-space:nowrap}.score-settings #piece-title{width:auto;flex:1;min-width:0}.title-settings button{white-space:nowrap}dialog{border:1px solid var(--line);border-radius:14px;padding:22px;max-width:420px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 12px 45px #173f5640}dialog::backdrop{background:#173f5670}dialog h2{width:auto;font-size:20px}dialog p{font-size:15px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.dialog-actions .delete{background:#9c3945;color:#fff;border-color:#9c3945}
@media(max-width:600px){.title-settings{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.title-settings label{grid-column:1/-1}.title-settings #piece-title{width:100%}}
.notes-choices{grid-template-columns:repeat(9,minmax(0,1fr))}.tuplet{pointer-events:none}.tuplet-number{fill:var(--ink)}.tuplet-bracket{stroke:var(--ink);stroke-width:1;fill:none}.tuplet-incomplete .tuplet-number{fill:#9c3945}.tuplet-incomplete .tuplet-bracket{stroke:#9c3945;stroke-dasharray:3 2}
@media(max-width:600px){.tool-dock .notes-choices{grid-template-columns:repeat(9,minmax(0,1fr))}.tool-dock .palette-tool span{font-size:10px}.edit-actions{flex-wrap:wrap}.edit-actions button{flex:1 0 20%;min-width:0}}
.editor-dock .score-settings{margin-top:0}
.measure svg.staff{scroll-margin-top:calc(var(--editor-dock-height,420px) + 18px)}
@media(max-width:600px){
  .editor-dock{gap:5px}
  .editor-dock .score-settings{padding:7px 8px;gap:5px}
  .editor-dock .title-settings{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:5px;padding-bottom:5px;margin:0}
  .editor-dock .title-settings label{grid-column:auto;white-space:normal}
  .editor-dock .bar-settings{grid-template-columns:minmax(0,1fr) 44px auto auto;gap:5px}
  .editor-dock .pdf-settings{grid-template-columns:minmax(0,1fr) 44px auto;gap:5px;padding-top:5px}
  .editor-dock .score-settings label{grid-column:auto;font-size:12px;line-height:16px}
  .editor-dock .score-settings input,.editor-dock .score-settings select,.editor-dock .score-settings button{min-height:34px;font-size:13px;padding:4px 6px}
  .editor-dock .score-settings #piece-title{width:100%}
  .editor-dock #export-status{font-size:11px;line-height:14px}
}
@media(max-width:600px) and (max-height:700px){
  .tool-dock .choice,.tool-dock .palette-tool{min-height:44px}
  .tool-dock .choice svg,.tool-dock .palette-tool svg{height:24px;width:24px}
  .tool-dock .palette-row h2{line-height:14px;font-size:12px}
  /* The lower edit panel must not cover the remaining staff on short phones. */
  .editbar{position:static;box-shadow:none}
}
.warning-toggle{display:flex;align-items:center;gap:7px;flex-shrink:0;font-size:14px;min-height:36px;cursor:pointer}
.warning-toggle input{width:20px;height:20px;accent-color:var(--teal);margin:0;cursor:pointer}
.measure-overflow{background:#fff7ed;box-shadow:inset 0 0 0 1px #d79a58;border-radius:8px}
.overflow-badge{color:#85420d;background:#ffe3bd;border-radius:5px;padding:0 6px;font-size:12px;font-weight:650}
.bar-feedback{color:#85420d;font-size:13px;line-height:18px;min-height:36px;margin:4px 8px 0;padding:0 0 4px}
@media(max-width:1000px){.workspace-heading{flex-wrap:wrap}.warning-toggle{font-size:13px}}
/* One compact keyboard, separate from note entry and note undo. */
@font-face{font-family:ChordSymbols;src:url('assets/fonts/DejaVuSans.ttf') format('truetype');font-display:swap}
.chord-panel[hidden],.palette[hidden]{display:none}
.chord-panel{max-width:820px;margin-inline:auto;width:100%;max-height:48svh;overflow-y:auto;padding-inline:2px}
.chord-preview-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 4px;border-bottom:1px solid #e7eff3;position:sticky;top:0;z-index:2;background:var(--paper)}
.chord-preview-row .control-label{font-size:12px;color:var(--muted)}
.chord-preview{display:flex;align-items:baseline;direction:ltr;unicode-bidi:isolate;font-family:ChordSymbols,Arial,sans-serif;font-size:32px;line-height:1.15;min-height:38px;min-width:0;max-width:100%;overflow-x:auto;white-space:nowrap;color:var(--ink);padding:1px 2px}
.chord-preview-row>div:first-child{min-width:0;flex:1;display:flex;align-items:center;gap:8px}.chord-preview-row .control-label{flex-shrink:0}
.chord-placeholder{font:18px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;direction:rtl;align-self:center;color:var(--muted)}
.chord-root-accidental{font-size:.66em;position:relative;top:-.35em;margin-left:.02em}
.chord-quality{font-size:.82em;margin-left:.03em}.chord-major-seventh{font-size:.68em;position:relative;top:-.18em;margin-left:.04em}
.chord-extension{font-size:.64em;position:relative;top:-.35em;margin-left:.04em}
.chord-modifier,.chord-alterations{font-size:.43em;position:relative;top:-.62em;margin-left:.08em}
.chord-bass{font-size:.8em;margin-left:.1em}
.chord-six-nine{display:inline-flex;flex-direction:column;align-self:center;font-size:.43em;line-height:1.05;margin-left:.1em}
.chord-edit-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:310px}.chord-edit-actions button{min-height:36px;font-size:13px;padding:4px 8px}
.chord-hint{font-size:13px;color:var(--teal);min-height:20px;margin:6px 0 8px}
.chord-hint[hidden]{display:none}
.chord-help summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:9px;font-size:13px;line-height:26px;min-height:36px;padding:4px 8px;white-space:nowrap}.chord-help summary::-webkit-details-marker{display:none}.chord-help summary:focus-visible{outline:3px solid #e8a52e;outline-offset:2px}
.chord-help-content{position:absolute;inset-inline-end:0;top:100%;width:min(360px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;box-shadow:0 4px 16px #173f5624;font-size:13px;line-height:1.5;z-index:4}.chord-help-content p{margin:4px 0 8px}
.bar-chord-grid{display:inline-flex;align-items:center;gap:4px;min-width:0}.bar-chord-grid span{font-size:10px;white-space:nowrap}.bar-chord-grid select{font-size:11px;min-height:28px;padding:2px 3px;max-width:100px}.chord-writing .measure-head{height:auto;min-height:32px;gap:5px;padding-inline:6px;flex-wrap:wrap}
.chord-key-row{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:8px;margin-top:6px}.chord-key-row>span{font-size:12px;color:var(--muted)}
.chord-keys{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px}
.chord-key{padding:5px 2px;min-height:44px;font-size:20px;font-family:ChordSymbols,Arial,sans-serif;line-height:1.25;touch-action:manipulation;user-select:none;scroll-margin-top:105px;scroll-margin-bottom:5px}
.chord-key[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}
.writing-modes{display:flex;gap:4px}.writing-modes button[aria-pressed="true"]:disabled{opacity:1;background:var(--ink);border-color:var(--ink);color:white}
.notation-controls button[hidden]{display:none}
.chord-key{position:relative}.chord-key-badge{font-size:10px;line-height:12px;position:absolute;bottom:1px;right:3px}
.chord-key.chord-pending{outline:2px solid #e8a52e;outline-offset:1px}
.diminished-circle{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;vertical-align:middle}
.chord-diminished{position:relative;top:-.19em}.chord-diminished .diminished-circle{width:.48em;height:.48em}
.chord-key[data-chord-value="major"],.chord-key[data-chord-action="removeBass"]{font-family:inherit;font-size:13px}
.chord-phase-note{font-size:12px;color:var(--muted);margin:10px 0 0}
@media(max-width:600px){
  .tool-dock .notation-controls{flex-wrap:wrap}
  .chord-preview-row{gap:5px}.chord-preview{font-size:30px;min-height:36px}.chord-preview-row .control-label{display:none}
  .chord-edit-actions{display:grid;grid-template-columns:repeat(2,auto);max-width:none;gap:3px}.chord-edit-actions button{font-size:11px;min-height:28px;padding:3px 5px}.chord-help summary{font-size:11px;min-height:28px;line-height:20px;padding:3px 5px;text-align:center}
  .chord-key-row{grid-template-columns:minmax(0,1fr);gap:2px;margin-top:5px}.chord-key-row>span{font-size:11px;line-height:14px}
  .chord-keys{gap:3px}.chord-key{font-size:18px;min-height:42px;border-radius:7px}
  #chord-numbers{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr))}
  .chord-key[data-chord-value="major"],.chord-key[data-chord-action="removeBass"]{font-size:11px}
  .chord-key[data-chord-value="aug"],.chord-key[data-chord-action="noChord"],.chord-key[data-chord-value="sus"],.chord-key[data-chord-value="add"]{font-size:15px}
  .chord-hint{font-size:12px;line-height:16px;min-height:32px;margin:5px 0}
  .chord-phase-note{font-size:11px;line-height:15px;margin-top:7px}
}
@media(max-width:360px){.chord-key[data-chord-value="aug"],.chord-key[data-chord-action="noChord"],.chord-key[data-chord-value="sus"],.chord-key[data-chord-value="add"]{font-size:12px}}
@media(max-width:360px){.chord-key[data-chord-action="noChord"]{font-size:11px}}
.chord-preview{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:8px}
.chord-preview:focus-visible{outline:3px solid #e8a52e;outline-offset:2px}
.chord-preview:active{cursor:grabbing;background:#edf7f6}
.chord-panel.is-collapsed .chord-key-row,.chord-panel.is-collapsed .chord-hint,.chord-panel.is-collapsed .chord-phase-note{display:none}
.chord-panel.is-collapsed{max-height:none;overflow:visible}
.chord-placement-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-size:13px;border-top:1px solid #e7eff3;padding-top:8px}
.chord-placement-controls select{font-size:13px;min-height:36px;padding:5px}
#chord-placement-status{color:var(--teal);flex:1;min-width:160px;font-size:12px}
.placed-chord{cursor:grab;touch-action:none}.staff-chord-text{pointer-events:none}
.chord-hit{fill:transparent;stroke:none}.chord-selection{fill:#147d7815;stroke:var(--teal);stroke-width:1.2}
.placed-chord.selected .staff-chord-text{fill:var(--teal)}.chord-ghost{opacity:.55;pointer-events:none}
.chord-slot{cursor:crosshair;scroll-margin-top:calc(var(--editor-dock-height,420px) + 28px)}.chord-slot-hit{fill:transparent;stroke:none}
.placed-chord{scroll-margin-top:calc(var(--editor-dock-height,420px) + 28px)}
.chord-beat-line{stroke:#147d782c;stroke-width:1;stroke-dasharray:3 4;pointer-events:none}
.chord-subbeat-line{stroke:#147d7817;stroke-width:.6;stroke-dasharray:2 5;pointer-events:none}
.chord-slot-dot{fill:#147d7880;pointer-events:none}.chord-beat-number{fill:#5c7380;font:11px Arial;pointer-events:none}
.chord-slot:focus-visible{outline:none}.chord-slot:focus-visible .chord-slot-hit{fill:#147d7817;stroke:var(--teal)}
/* Playback controls stay outside the engraving and never enter the PDF. */
.playback-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px 12px;font-size:13px}
.transport-buttons{display:flex;gap:5px;direction:ltr}.transport-buttons button{min-height:36px;padding:5px 12px;font-size:14px}.transport-buttons #play-score{background:var(--ink);color:#fff}
.tempo-control,.playback-mode-control{display:flex;align-items:center;gap:5px}.tempo-control input{width:65px;min-width:60px;flex:none;min-height:35px;padding:4px;border:1px solid var(--line);border-radius:7px;font:inherit;text-align:left;font-variant-numeric:tabular-nums}.playback-mode-control select{font-size:13px;min-height:35px;padding:4px}
#playback-status{font-size:12px;color:var(--muted);unicode-bidi:plaintext}.playback-strip[data-state="playing"] #playback-status{color:var(--teal)}
.mixer-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin:18px 0}.mixer-row input{grid-column:1/-1;width:100%;accent-color:var(--teal);min-height:32px}.mixer-row output{font-variant-numeric:tabular-nums}
#mobile-settings-body .desktop-playback-label{display:inline}#mobile-settings-body .playback-mode-control{justify-content:space-between;width:100%}
#playback-mixer-dialog{max-height:90dvh;overflow:auto}.playing-bar .staff-scroll{background:#fff8db}.event.is-playing .symbol,.event.is-playing .dot{fill:#bc7600}.event.is-playing .stem{stroke:#bc7600}.placed-chord.is-playing text{fill:#bc7600}
/* Desktop transport shares the existing bar/PDF row, not a separate panel. */
@media(min-width:601px){
  .editor-dock .score-settings{gap:8px 12px}
  .score-settings .playback-strip{border:0;border-radius:0;padding:0;gap:8px;flex-wrap:nowrap;margin-inline-start:auto}
  .score-settings .pdf-settings{margin-inline-start:0}
  .score-settings .transport-buttons button{padding:5px 9px}
  .score-settings .tempo-control input{width:64px}
  .score-settings .playback-mode-control select{width:83px}
  .score-settings #playback-status{display:none}
}
@media(min-width:601px) and (max-width:1100px){
  .score-settings .bar-settings{gap:6px}
  .score-settings .bar-settings input{width:54px}
  .score-settings .bar-settings button{padding-inline:8px}
  .score-settings .desktop-playback-label{display:none}
}
@media(max-width:600px){.mobile-workspace .playback-strip{order:1;flex:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 8px;gap:5px;min-height:44px}.mobile-workspace .score{order:2!important}.mobile-workspace .editor-dock{order:3!important}.mobile-workspace .transport-word,.mobile-workspace .desktop-playback-label{display:none}.mobile-workspace .transport-buttons button{min-width:36px;min-height:35px;padding:4px 8px}.mobile-workspace .tempo-control{gap:3px;font-size:11px}.mobile-workspace .tempo-control input{width:48px;min-height:33px;font-size:13px}.mobile-workspace .playback-mode-control select{min-height:33px;font-size:12px;max-width:83px}.mobile-workspace #playback-mixer{font-size:11px;padding:4px 6px;min-height:33px}.mobile-workspace #playback-status{flex-basis:100%;font-size:11px;line-height:14px}.mobile-workspace .playback-strip[data-state="idle"] #playback-status:empty{display:none}}
@media print{.playback-strip,#playback-mixer-dialog{display:none!important}.playing-bar .staff-scroll{background:transparent}.event.is-playing .symbol,.event.is-playing .dot,.placed-chord.is-playing text{fill:#000}.event.is-playing .stem{stroke:#000}}
/* Logical score systems are independent of responsive phone entry. */
.measures{display:block}.score-system+.score-system{margin-top:14px}
.system-measures{display:grid;direction:ltr;align-items:start}
.line-control{display:flex;align-items:center;justify-content:flex-end;gap:5px;direction:rtl;font-size:11px;color:var(--muted);min-height:30px;margin-bottom:2px}
.line-control select{font-size:13px;padding:2px 4px;min-height:28px;width:49px;color:var(--ink)}
.line-auto{font-size:10px}.system-measures .measure-head{height:34px;min-height:34px;flex-wrap:nowrap;padding-inline:5px;gap:3px}
.system-measures .measure-head>span{white-space:nowrap;font-size:12px}
.system-measures .bar-chord-grid span{display:none}.system-measures .bar-chord-grid select{max-width:72px}
#preview-pdf{display:inline-flex;align-items:center;justify-content:center}
@font-face{font-family:ScoreTitle;src:url('assets/fonts/DejaVuSans.ttf') format('truetype');font-display:swap}
#pdf-preview-dialog{width:calc(100% - 12px);max-width:680px;max-height:94svh;padding:0;background:#edf3f7;overflow:auto}
.pdf-preview-toolbar{position:sticky;top:0;z-index:2;background:white;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.pdf-preview-toolbar h2{font-size:16px}.pdf-preview-toolbar button{font-size:13px;min-height:34px;padding:3px 9px}
.pdf-preview-help{font-size:12px;padding:0 12px;margin:10px 0}
#pdf-preview-pages{padding:0 12px 12px 58px;direction:ltr}
.pdf-preview-page{container-type:inline-size;position:relative;aspect-ratio:210/297;background:white;box-shadow:0 2px 12px #173f5624;margin-bottom:14px;overflow:visible}
.pdf-preview-title{position:absolute;top:5.05%;left:7.14%;width:85.72%;font-family:ScoreTitle,Arial;font-size:3.0238cqw;line-height:1.25;text-align:center;white-space:pre-wrap}
.pdf-preview-system{position:absolute;left:7.142857%;width:85.714286%;padding-top:1.90476cqw}
.pdf-preview-system>svg{display:block;pointer-events:none}
.pdf-preview-number{position:absolute;left:0;top:0;font:1.3439cqw Arial;color:black}
.preview-line-control{position:absolute;left:calc(-8.3333% - 49px);top:0;margin:0;min-height:28px;width:44px}
.preview-line-control>span{display:none}.preview-line-control select{width:44px;background:#f3faf9}
@media(max-width:600px){
  #preview-pdf{display:inline-block}
  .editor-dock .pdf-settings{display:flex;border-top:0;padding:0;justify-content:flex-end;gap:6px}
  .system-measures .measure-head{height:34px;flex-wrap:nowrap}
  .system-measures .bar-chord-grid span{display:inline}
}
@media print{.line-control,#pdf-preview-dialog,.pdf-settings{display:none!important}}
.chord-writing .event{cursor:crosshair}
@media(max-width:600px){.chord-placement-controls{gap:4px 7px;font-size:12px}.chord-placement-controls select{font-size:12px;min-height:32px}#chord-placement-status{flex-basis:100%;line-height:16px}.chord-phase-note{margin-bottom:4px}}
/* Compact one-shot accidentals keep entry separate from selected-note edits. */
.accidental-tools{display:flex;align-items:center;justify-content:flex-start;gap:5px;margin:4px 0 7px;flex-wrap:wrap}
.transpose-check{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.6;margin:18px 0 12px}.transpose-check input{width:20px;height:20px;flex:none;accent-color:#173f56}.transpose-direction{display:flex;align-items:center;gap:10px;font-size:14px;flex-wrap:wrap}.transpose-direction select{max-width:100%}#key-change-description{unicode-bidi:plaintext}#key-change-error{color:#9c3945}#key-change-dialog{max-height:90svh;overflow:auto}
.accidental-tools span{font-size:12px;color:#536a77;margin-inline-end:4px}
.accidental-tools button{min-width:35px;min-height:34px;padding:3px 9px}
.accidental-tools button[data-accidental]:not([data-accidental="key"]){font-family:ChordSymbols,serif;font-size:23px;line-height:1}
.accidental-tools button[aria-pressed="true"]{background:#173f56;color:white}
.selected-accidental-label{display:flex;align-items:center;gap:6px;font-size:13px;margin:4px 0}

/* Phone workspace: the score owns the middle, the keyboard owns the bottom. */
.mobile-header,#mobile-keyboard-toggle,#mobile-zoom-reset{display:none}
.mobile-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
#mobile-settings-body{display:flex;flex-direction:column;gap:14px}
#mobile-settings-body>label{display:flex;justify-content:space-between;align-items:center;gap:12px}
#mobile-settings-body .control-label{font-size:14px}
#mobile-settings-body .meter-control{justify-content:space-between;flex-direction:row}
#mobile-settings-body .bar-settings{display:grid;grid-template-columns:1fr auto auto;gap:6px;width:100%}
#mobile-settings-body .bar-settings label{grid-column:1/-1}
#mobile-settings-body #bar-count{width:100%;min-height:40px;font:inherit;padding:5px;border:1px solid var(--line);border-radius:8px}
.mobile-help{font-size:13px;color:var(--muted)}
#mobile-settings-dialog{max-height:90dvh;overflow:auto}
@media(max-width:600px), (max-width:1200px) and (max-height:600px) and (orientation:landscape){
  html:has(body.mobile-workspace),body.mobile-workspace{height:100%;overflow:hidden}
  body.mobile-workspace main{height:100dvh;padding:0;display:flex;flex-direction:column;max-width:none;overflow:hidden;position:relative}
  .mobile-workspace main>header,.mobile-workspace .workspace-heading,.mobile-workspace .workspace-footer,.mobile-workspace .keyboard-hint,.mobile-workspace main>.connection-actions{display:none}
  .mobile-workspace .mobile-header{display:flex;order:0;align-items:center;gap:5px;flex:none;padding:max(6px,env(safe-area-inset-top)) 8px 6px;background:#fff;border-bottom:1px solid var(--line);z-index:35;min-height:54px}
  .mobile-workspace #mobile-title-slot{min-width:0;flex:1}
  .mobile-workspace #mobile-title-slot #piece-title{width:100%;min-width:0;border:0;background:transparent;color:var(--ink);font:600 17px/1.3 system-ui,sans-serif;padding:7px 3px;border-radius:6px;min-height:40px;text-overflow:ellipsis}
  .mobile-workspace #mobile-header-actions{display:flex;gap:4px;align-items:center}
  .mobile-workspace #mobile-header-actions button{font-size:12px;min-height:40px;min-width:40px;padding:5px 7px;border-radius:8px}
  .mobile-workspace #mobile-settings svg{width:22px;height:22px;fill:currentColor;stroke:none;display:block}
  .mobile-workspace #mobile-header-actions #add-bars{white-space:nowrap;font-size:11px;padding:5px 6px}
  .mobile-workspace .score{order:1;flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain;margin:0;border:0;border-radius:0;padding:14px 9px 20px;box-shadow:none;scroll-padding:12px;background:#fff;touch-action:none;direction:ltr}
  .mobile-workspace #mobile-zoom-reset:not([hidden]){display:block;position:absolute;top:calc(64px + env(safe-area-inset-top));right:12px;z-index:36;min-height:29px;padding:3px 8px;font-size:12px;background:#fff;box-shadow:0 2px 6px #173f5620}
  .mobile-workspace .score-system+.score-system{margin-top:20px}
  .mobile-workspace .system-measures{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .mobile-workspace .measure-head,.mobile-workspace .system-measures .measure-head{height:26px;min-height:26px;padding:0 4px;font-size:11px;gap:2px}
  .mobile-workspace .measure-head>span{font-size:11px}
  .mobile-workspace .bar-chord-grid span{display:none}
  .mobile-workspace .bar-chord-grid select{font-size:10px;min-height:25px;padding:1px;max-width:58px}
  .mobile-workspace .bar-feedback:empty{display:none}
  .mobile-workspace .bar-feedback{font-size:11px;line-height:15px;min-height:0;margin:4px}
  .mobile-workspace .editor-dock{order:2;flex:none;position:relative;top:auto;bottom:auto;gap:0;border-radius:0;box-shadow:0 -3px 14px #173f5618;max-height:48dvh;overflow-y:auto;background:#f0f5f7;padding-bottom:env(safe-area-inset-bottom)}
  .mobile-workspace .score-settings{display:none}
  .mobile-workspace .tool-dock{border:0;border-top:1px solid var(--line);border-radius:0;padding:5px 7px 7px;background:#f0f5f7}
  .mobile-workspace .notation-controls{gap:5px;margin:0 0 4px;padding:0 0 4px;min-height:34px;align-items:center;flex-wrap:nowrap}
  .mobile-workspace .notation-controls button{min-height:32px;font-size:12px;padding:4px 8px}
  .mobile-workspace #mobile-keyboard-toggle{display:block;margin-inline-start:auto}
  .mobile-workspace .tool-dock #undo{margin-inline-start:0}
  .mobile-workspace .palette-row h2{display:none}
  .mobile-workspace .choices{gap:3px}
  .mobile-workspace .choice,.mobile-workspace .palette-tool{min-height:43px;padding:1px;gap:0}
  .mobile-workspace .choice svg,.mobile-workspace .palette-tool svg{width:24px;height:27px}
  .mobile-workspace .choice span,.mobile-workspace .palette-tool span{font-size:10px;line-height:13px}
  .mobile-workspace .palette-row+.palette-row{margin-top:4px;padding-top:4px}
  .mobile-workspace .accidental-tools{flex-wrap:nowrap;margin:4px 0;gap:4px;justify-content:flex-start}
  .mobile-workspace #palette-context{display:none}
  .mobile-workspace .accidental-tools button{min-height:30px;min-width:32px;padding:2px 5px;font-size:12px}
  .mobile-workspace .accidental-tools button[data-accidental]:not([data-accidental="key"]){font-size:21px}
  .mobile-workspace #new-note{margin-inline-start:auto}
  .mobile-workspace .editbar{display:none;position:static;padding:4px 0 0;margin:0;border-radius:0;background:transparent;box-shadow:none;min-height:0}
  .mobile-workspace.has-score-selection .editbar{display:block}
  .mobile-workspace .editbar p{font-size:11px;line-height:15px;margin-bottom:3px}
  .mobile-workspace .edit-actions{flex-wrap:nowrap;gap:3px}
  .mobile-workspace .edit-actions button{min-height:29px;font-size:10px;padding:3px 2px;flex:1 1 0;white-space:nowrap}
  .mobile-workspace .connection-actions{display:none;gap:0;margin-top:4px}
  .mobile-workspace.has-score-selection .connection-actions:has(select:not(:disabled)){display:flex}
  .mobile-workspace .connection-actions label{font-size:11px}
  .mobile-workspace .connection-actions select{font-size:11px;padding:2px;min-height:27px}
  .mobile-workspace .connection-actions>span{display:none}
  .mobile-workspace .chord-panel{max-height:none;overflow:visible;padding:0}
  .mobile-workspace .chord-preview-row{min-height:32px;padding-bottom:3px;position:static;background:transparent}
  .mobile-workspace .chord-preview{font-size:26px;min-height:30px}
  .mobile-workspace .chord-edit-actions{display:flex;gap:3px}
  .mobile-workspace .chord-edit-actions button,.mobile-workspace .chord-help summary{min-height:27px;font-size:10px;padding:3px 4px}
  .mobile-workspace .chord-help{display:none}
  .mobile-workspace .chord-key-row{margin-top:4px;gap:0}
  .mobile-workspace .chord-key-row>span{display:none}
  .mobile-workspace #chord-numbers{grid-auto-flow:column;grid-template-columns:none}
  .mobile-workspace .chord-key{min-height:35px;font-size:18px;padding:3px 1px}
  .mobile-workspace .chord-key[data-chord-value="major"],.mobile-workspace .chord-key[data-chord-value="aug"],.mobile-workspace .chord-key[data-chord-action="noChord"],.mobile-workspace .chord-key[data-chord-action="removeBass"]{font-size:10px}
  .mobile-workspace .chord-hint{font-size:11px;line-height:15px;min-height:0;margin:3px 0}
  .mobile-workspace .chord-help-content{bottom:100%;top:auto}
  .mobile-workspace .mobile-keyboard-closed .palette,.mobile-workspace .mobile-keyboard-closed .chord-panel,.mobile-workspace .mobile-keyboard-closed .editbar,.mobile-workspace .mobile-keyboard-closed .connection-actions{display:none}
  .mobile-workspace.mobile-text-entry .editor-dock{display:none}
  .mobile-workspace .measure svg.staff,.mobile-workspace .placed-chord,.mobile-workspace .chord-slot{scroll-margin-top:12px;scroll-margin-bottom:12px}
  .mobile-workspace svg.staff .stem{stroke-width:calc(1.2px * var(--staff-scale,1))}
  .mobile-workspace svg.staff .beam{stroke-width:calc(4px * var(--staff-scale,1))}
  .mobile-workspace svg.staff .tuplet-bracket{stroke-width:calc(1px * var(--staff-scale,1))}
}
/* Wide keyboards use horizontal room instead of stacking tall key rows. */
@media(min-width:601px){
  body:not(.mobile-workspace) main{padding-top:14px}
  body:not(.mobile-workspace) main>header{margin-bottom:10px}
  body:not(.mobile-workspace) h1{font-size:25px}
  body:not(.mobile-workspace) .editor-dock{gap:6px}
  body:not(.mobile-workspace) .score-settings{padding:8px 12px}
  body:not(.mobile-workspace) .title-settings{padding-bottom:6px;gap:8px}
  body:not(.mobile-workspace) #export-status{font-size:11px;line-height:15px;margin:0}
  body:not(.mobile-workspace) .tool-dock{padding:8px 12px}
  body:not(.mobile-workspace) .notation-controls{gap:10px;margin-bottom:6px;padding-bottom:6px}
  body:not(.mobile-workspace) .notation-controls select{font-size:14px;min-height:33px;padding:3px 6px}
  body:not(.mobile-workspace) .notation-controls button{min-height:34px;padding:4px 9px}
  body:not(.mobile-workspace) .palette:not([hidden]){display:grid;grid-template-columns:3fr 2fr;gap:5px 12px}
  body:not(.mobile-workspace) .palette-row{display:flex;align-items:center;gap:8px;min-width:0;margin:0!important;padding:0!important;border:0!important}
  body:not(.mobile-workspace) .palette-row:first-child{grid-row:1;grid-column:1/-1}
  body:not(.mobile-workspace) .palette-row:last-child{grid-row:2;grid-column:1}
  body:not(.mobile-workspace) .palette-row h2{display:block;width:50px;font-size:12px}
  body:not(.mobile-workspace) .palette-row .choices{max-width:none;gap:4px}
  body:not(.mobile-workspace) #rests{grid-template-columns:repeat(6,minmax(0,1fr))}
  body:not(.mobile-workspace) .choice,body:not(.mobile-workspace) .palette-tool{height:32px;min-height:32px;padding:1px 5px;gap:4px;flex-direction:row}
  body:not(.mobile-workspace) .choice svg,body:not(.mobile-workspace) .palette-tool svg{width:24px;height:27px}
  body:not(.mobile-workspace) .choice span,body:not(.mobile-workspace) .palette-tool span{font-size:11px;line-height:14px}
  body:not(.mobile-workspace) .accidental-tools{grid-column:2;grid-row:2;margin:0;gap:5px;justify-content:flex-start;flex-wrap:wrap}
  body:not(.mobile-workspace) .accidental-tools button{min-height:30px;padding:2px 7px}
  body:not(.mobile-workspace) .chord-panel:not([hidden]):not(.is-collapsed){display:grid;grid-template-columns:3fr 1fr;gap:4px 12px;max-width:none}
  body:not(.mobile-workspace) .chord-preview-row,body:not(.mobile-workspace) .chord-hint{grid-column:1/-1}
  body:not(.mobile-workspace) .chord-key-row{margin:0;gap:5px}
  body:not(.mobile-workspace) .chord-root-row{grid-column:1;grid-row:2}
  body:not(.mobile-workspace) .chord-quality-row{grid-column:1;grid-row:3}
  body:not(.mobile-workspace) .chord-number-row{grid-column:1;grid-row:4}
  body:not(.mobile-workspace) .chord-operator-row{grid-column:2;grid-row:2/5;display:flex;flex-direction:column;align-items:stretch;border-inline-start:1px solid var(--line);padding-inline-start:12px!important;gap:4px}
  body:not(.mobile-workspace) #chord-operators{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;flex:1}
  body:not(.mobile-workspace) .chord-hint{grid-row:5}
  body:not(.mobile-workspace) .chord-key{min-height:36px;padding:3px 2px}
  body:not(.mobile-workspace) .chord-hint{min-height:0;margin:2px 0}
  body:not(.mobile-workspace) .score-system+.score-system{margin-top:8px}
  body:not(.mobile-workspace) .system-measures .measure-head{height:25px;min-height:25px}
  body:not(.mobile-workspace) .line-control{min-height:25px}
  body:not(.mobile-workspace) .line-control select{min-height:24px;padding:1px 4px}
  body:not(.mobile-workspace) .bar-feedback:empty{display:none}
  body:not(.mobile-workspace) .bar-feedback{min-height:0}
  body:not(.mobile-workspace) .workspace-heading{margin:8px 0 6px}
  body:not(.mobile-workspace) main>header>div{display:flex;align-items:baseline;gap:12px}
  body:not(.mobile-workspace) .score-settings{padding:6px 10px;gap:6px 10px}
  body:not(.mobile-workspace) .score-settings button,body:not(.mobile-workspace) .score-settings input{min-height:32px;padding:3px 8px}
  body:not(.mobile-workspace) .title-settings{padding-bottom:3px}
  body:not(.mobile-workspace) .chord-preview-row{min-height:30px;padding-bottom:2px}
  body:not(.mobile-workspace) .chord-preview{min-height:30px;font-size:28px}
  body:not(.mobile-workspace) .chord-edit-actions button,body:not(.mobile-workspace) .chord-help summary{min-height:30px;padding:2px 6px;line-height:24px}
  body:not(.mobile-workspace) .chord-key{min-height:32px}
  body:not(.mobile-workspace) .line-control{min-height:22px}
  body:not(.mobile-workspace) .line-control select{min-height:22px}
  body:not(.mobile-workspace) .bar-chord-grid select{min-height:22px}
}
.phone-landscape .mobile-header{min-height:38px;padding:2px max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));gap:7px}
.mobile-workspace #preview-pdf{display:inline-flex;align-items:center;justify-content:center}
.phone-landscape #mobile-title-slot #piece-title{min-height:32px;padding:3px;font-size:15px}
.phone-landscape #mobile-header-actions button{min-height:32px;min-width:32px;padding:3px 6px}
.phone-landscape .mobile-header .playback-strip{order:0;flex:none;margin:0;padding:0;min-height:0;border:0;gap:5px;flex-wrap:nowrap;background:transparent}
.phone-landscape .transport-word{display:none}
.phone-landscape .transport-buttons button{min-width:32px;min-height:30px;padding:2px 6px}
.phone-landscape .tempo-control{gap:3px;font-size:11px}
.phone-landscape .tempo-control input{width:60px;min-height:30px;padding:4px;font-size:12px}
.phone-landscape #playback-status{font-size:11px;max-width:160px}
.phone-landscape #playback-status:empty{display:none}
.phone-landscape .score{padding:4px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
.phone-landscape .score-system+.score-system{margin-top:6px}
.phone-landscape .system-measures .measure-head{min-height:18px;height:18px}
.phone-landscape .editor-dock{max-height:40dvh}
.phone-landscape .tool-dock{padding:3px max(6px,env(safe-area-inset-right)) 3px max(6px,env(safe-area-inset-left))}
.phone-landscape .notation-controls{min-height:29px;margin-bottom:2px;padding-bottom:2px}
.phone-landscape .notation-controls button{min-height:28px;padding:2px 8px}
.phone-landscape .palette:not([hidden]){display:grid;grid-template-columns:1fr;gap:3px}
.phone-landscape .palette-row{display:block;margin:0!important;padding:0!important;border:0!important;min-width:0}
.phone-landscape .notes-choices{grid-template-columns:repeat(9,minmax(0,1fr))}
.phone-landscape #rests{grid-template-columns:repeat(6,minmax(0,1fr));max-width:none}
.phone-landscape .choice,.phone-landscape .palette-tool{height:35px;min-height:35px;display:flex;flex-direction:row;padding:1px;gap:2px}
.phone-landscape .choice span,.phone-landscape .palette-tool span{display:none}
.phone-landscape .accidental-tools{grid-column:1/-1;grid-row:2;margin:0;gap:4px}
.phone-landscape .accidental-tools button{min-height:27px;padding:1px 7px}
.phone-landscape .chord-panel:not([hidden]):not(.is-collapsed){display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}
.phone-landscape .chord-preview-row{grid-column:1/-1;min-height:27px;padding-bottom:2px}
.phone-landscape .chord-preview{min-height:24px;font-size:24px}
.phone-landscape .chord-key-row{display:block;margin:0}
.phone-landscape .chord-key-row>span{display:none}
.phone-landscape .chord-key{min-height:28px;padding:1px}
.phone-landscape .chord-hint{display:none}
.phone-landscape .bar-chord-grid select{min-height:20px;height:20px}
.phone-landscape .tool-dock:has(#chord-panel:not([hidden]):not(.is-collapsed)){display:grid;grid-template-columns:3fr 1fr;gap:3px 8px}
.phone-landscape .tool-dock:has(#chord-panel:not([hidden]):not(.is-collapsed)) .notation-controls{grid-column:1;grid-row:1;align-self:start}
.phone-landscape #chord-panel:not([hidden]):not(.is-collapsed){display:contents}
.phone-landscape .chord-preview-row{grid-column:2;grid-row:1}
.phone-landscape .chord-preview-row .control-label{display:none}
.phone-landscape #chord-panel:not([hidden]):not(.is-collapsed) .chord-preview-row{display:flex;grid-column:2;grid-row:1;gap:5px;min-width:0;align-self:start;min-height:31px;border:0;padding:0}
.phone-landscape #chord-panel:not([hidden]):not(.is-collapsed) .chord-preview-row>div:first-child{min-width:0;overflow:hidden;align-self:center}
.phone-landscape #chord-panel:not([hidden]):not(.is-collapsed) .chord-edit-actions{flex:none;flex-wrap:nowrap;width:max-content}
.phone-landscape #chord-panel:not([hidden]):not(.is-collapsed) #chord-collapse{display:none}
.phone-landscape .tool-dock:has(#chord-panel:not([hidden]):not(.is-collapsed)) .notation-controls{justify-self:start;width:max-content}
.phone-landscape .chord-root-row{grid-column:1;grid-row:2}
.phone-landscape .chord-quality-row{grid-column:1;grid-row:3}
.phone-landscape .chord-number-row{grid-column:1;grid-row:4}
.phone-landscape .chord-operator-row{grid-column:2;grid-row:2/5;border-inline-start:1px solid var(--line);padding-inline-start:7px!important}
.phone-landscape #chord-operators{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:3px}
.phone-landscape .editor-dock:not(.mobile-keyboard-closed) .tool-dock:has(.palette:not([hidden])){display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}
.phone-landscape .tool-dock:has(.palette:not([hidden])) .notation-controls{grid-column:1;grid-row:1;align-self:start}
.phone-landscape .editor-dock:not(.mobile-keyboard-closed) .palette:not([hidden]){display:contents}
.phone-landscape .accidental-tools{grid-column:2;grid-row:1;align-self:start;justify-content:flex-end}
.phone-landscape .tool-dock:has(.palette:not([hidden])) .palette-row{grid-column:1/-1}
.phone-landscape .tool-dock:has(.palette:not([hidden])) .palette-row:first-child{grid-row:2}
.phone-landscape .tool-dock:has(.palette:not([hidden])) .palette-row:last-child{grid-row:3}
.phone-landscape .mobile-keyboard-closed .palette,.phone-landscape .mobile-keyboard-closed #chord-panel{display:none!important}
.warning-short-label{display:none}
.playback-strip .warning-toggle{min-height:30px;font-size:12px;gap:5px;white-space:nowrap}
.mobile-workspace .warning-long-label{display:none}
.mobile-workspace .warning-short-label{display:inline}
.mobile-workspace .playback-strip .warning-toggle{font-size:11px;min-height:30px;gap:4px}
.mobile-workspace .warning-toggle input{width:18px;height:18px}
.chord-key[data-chord-value="major"],.mobile-workspace .chord-key[data-chord-value="major"]{font-family:ChordSymbols,Arial,sans-serif;font-size:18px}
@media(min-width:601px){
  body:not(.mobile-workspace) main{padding-bottom:90px}
  body:not(.mobile-workspace) .editbar{position:fixed;z-index:45;bottom:8px;left:30px;right:30px;max-width:1300px;margin:0 auto;min-height:48px;padding:7px 12px;gap:12px;box-shadow:0 4px 18px #173f5630;border:1px solid var(--line);flex-wrap:nowrap}
  body:not(.mobile-workspace) .editbar p{font-size:13px;line-height:18px;min-width:0}
  body:not(.mobile-workspace) .edit-actions{flex-shrink:0;width:auto}
  body:not(.mobile-workspace) .edit-actions button{min-height:32px;padding:3px 10px;font-size:13px}
}
@media print{.editbar,.warning-toggle{display:none!important}}

/* Folder-like keyboard tabs, deliberately separate from score settings. */
.keyboard-tabs{border-bottom:1px solid var(--line);margin:0 0 8px;padding-top:4px}
.keyboard-tabs .writing-modes{gap:6px;align-items:flex-end}
.keyboard-tabs .writing-modes button{min-width:112px;min-height:39px;padding:7px 20px;border:1px solid #b4c8d2;border-radius:12px 12px 0 0;background:#e8eff4;font-size:16px;font-weight:650;position:relative;margin-bottom:-1px}
.keyboard-tabs .writing-modes button[aria-pressed="true"]:disabled{opacity:1;color:var(--teal);background:#fff;border-top:3px solid var(--teal);border-bottom-color:#fff;box-shadow:0 -2px 5px #173f5610;cursor:default}
.keyboard-tabs .writing-modes button[aria-pressed="false"]{color:#536b79}
.tool-dock .palette,.tool-dock .chord-panel{padding-top:3px}
.undo-action{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.undo-action svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.keyboard-footer{display:none}
body:not(.mobile-workspace) .editbar #undo{margin-inline-start:10px;border-color:#97b5c4}
.mobile-workspace .tool-dock{position:relative}
.mobile-workspace .notation-controls{display:none}
.mobile-workspace .keyboard-tabs{margin-bottom:4px;padding-top:0}
.mobile-workspace .keyboard-tabs .writing-modes button{min-height:35px;min-width:94px;padding:4px 14px;font-size:15px}
.mobile-workspace .keyboard-footer{display:flex;position:absolute;left:6px;bottom:4px;gap:4px;align-items:center;z-index:3}
.mobile-workspace .keyboard-footer button{min-width:32px;min-height:32px;height:32px;padding:3px;border-radius:7px}
.mobile-workspace .keyboard-footer #undo span,.mobile-workspace .keyboard-footer #eraser span{display:none}
.mobile-workspace .palette-row:last-child{padding-inline-end:78px!important}
.mobile-workspace #chord-operators{padding-left:39px}
.mobile-workspace.has-score-selection .keyboard-footer{position:static;justify-content:flex-end;padding-top:3px}
.phone-landscape .keyboard-tabs{grid-column:1;grid-row:1;align-self:start;margin:0;border-bottom:0}
.phone-landscape .keyboard-tabs .writing-modes button{min-width:94px;min-height:31px;font-size:15px;padding:3px 15px}
.phone-landscape #chord-operators{padding-left:0}
.phone-landscape #chord-operators button:last-child{grid-column:3}
.phone-landscape.has-score-selection .editbar{grid-column:1;grid-row:4}
.phone-landscape.has-score-selection .editor-dock{max-height:min(60dvh,220px)}
.phone-landscape.has-score-selection .keyboard-footer{grid-column:2;grid-row:4;align-self:end}
.phone-landscape .connection-actions{grid-column:1/-1;grid-row:5}
.keyboard-footer #eraser[hidden]{display:none}
.mobile-workspace #playback-status:empty{display:none}
/* Eraser is an explicit persistent mode in every keyboard, not a black glyph. */
#eraser{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none}
#eraser svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;flex:none}
#eraser[aria-pressed="true"]{background:#9c3945!important;color:#fff;border-color:#9c3945;box-shadow:0 0 0 2px #edc4ca}
.mobile-workspace .keyboard-footer #eraser{min-width:64px;width:auto}
.mobile-workspace .keyboard-footer #eraser span{display:inline;font-size:10px;white-space:nowrap}
.mobile-workspace .palette-row:last-child{padding-inline-end:110px!important}
.mobile-workspace #chord-operators{padding-left:110px;padding-bottom:34px}
.phone-landscape #chord-operators{padding-left:0;padding-bottom:34px}
.staff-chord-text{pointer-events:visiblePainted}
/* A placement preview must never intercept a click intended for the staff. */
.chord-ghost,.chord-ghost *{pointer-events:none;cursor:inherit}
.score.erasing .staff,.score.erasing .event,.score.erasing .placed-chord,.score.erasing .chord-slot{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='m4 20 13-14q2-2 4 0l6 6q2 2 0 4L15 28H9Z' fill='white' stroke='%239c3945' stroke-width='2'/%3E%3Cpath d='m12 12 10 10M4 29h24' fill='none' stroke='%239c3945' stroke-width='2'/%3E%3C/svg%3E") 7 26,crosshair}
.score.erasing .placed-chord:hover .staff-chord-text{fill:#9c3945}
.mobile-workspace.has-score-selection .editor-dock{max-height:min(60dvh,380px)}
.mobile-workspace.has-score-selection #chord-operators{padding-left:0;padding-bottom:0}
.phone-landscape.has-score-selection .editor-dock{max-height:min(60dvh,220px)}
.phone-landscape.has-score-selection .tool-dock:has(#chord-panel:not([hidden])) .editbar{grid-row:5}
.phone-landscape.has-score-selection .tool-dock:has(#chord-panel:not([hidden])) .keyboard-footer{grid-row:5}

#export-files[hidden],#export-pdf[hidden]{display:none!important}
#export-files{background:var(--ink);color:white;border-color:var(--ink)}
#export-files-dialog{width:min(460px,calc(100% - 24px));max-height:90svh;overflow:auto}
.export-file-options{display:grid;gap:10px;margin-top:14px}
.export-file-options button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:start;font-size:17px}
.export-file-options small{font-size:12px;color:var(--muted)}
#export-file-status{font-size:13px;unicode-bidi:plaintext}
.mobile-workspace #export-files{display:inline-flex;align-items:center;justify-content:center;min-height:33px;padding:4px 8px;font-size:12px}

/* Keep desktop transport and exports on the existing measure-controls row. */
.measure-signature-fields{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:16px 0}
.measure-signature-fields label{display:flex;gap:8px;align-items:center}
.measure-signature-fields select{min-height:36px}
.measure-signature-fields input{width:64px;min-height:36px;padding:6px;border:1px solid var(--line);border-radius:8px;font:inherit}
#measure-signature-dialog [hidden]{display:none!important}
.signature-key-row button{direction:rtl;font-size:14px}
.measure-signature-help{font-size:13px;line-height:1.7;color:var(--muted)}
#measure-signature-error{color:#9c3945}
#measure-signature-dialog{max-height:90svh;overflow:auto}
.phone-landscape #measure-signature-dialog{padding:14px 18px}
.phone-landscape #measure-signature-dialog h2{margin:0 0 8px}
.phone-landscape #measure-signature-dialog p{margin:8px 0;line-height:1.4}
.phone-landscape #measure-signature-dialog .measure-signature-fields{margin:8px 0;gap:10px}
.phone-landscape #measure-signature-dialog .transpose-check{margin:8px 0;line-height:1.4;font-size:14px}

.navigation-family{display:contents}.navigation-family-heading{display:none}
/* Three aligned, labelled families share one compact landscape keyboard. */
.phone-landscape .editor-dock:has(#navigation-panel:not([hidden])){max-height:none;overflow:visible}
.phone-landscape #navigation-panel{max-height:none;overflow:visible;padding:3px 0 0}
.phone-landscape #navigation-keys{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
.phone-landscape #navigation-keys .navigation-family{display:grid;grid-template-rows:16px 32px 32px 32px;gap:3px;padding:4px 5px 5px;min-width:0;border:1px solid var(--line);border-radius:9px;background:#fff;position:relative}
.phone-landscape #navigation-keys .navigation-family-heading{display:block;font-size:11px;line-height:16px;color:var(--muted);font-weight:600;text-align:right;padding-inline:2px}
.phone-landscape #navigation-keys .navigation-family-navigation{grid-column:1;grid-row:1}
.phone-landscape #navigation-keys .navigation-family-repeats{grid-column:2;grid-row:1}
.phone-landscape #navigation-keys .navigation-family-writing{grid-column:3;grid-row:1}
.phone-landscape #navigation-keys .navigation-key-row{display:grid;grid-column:1;grid-row:auto;margin:0;gap:3px;min-width:0;align-items:stretch}
.phone-landscape #navigation-keys .navigation-key-row>span{display:none}
.phone-landscape #navigation-keys .annotation-key-row,.phone-landscape #navigation-keys .barline-key-row{grid-template-columns:repeat(6,minmax(0,1fr))}
.phone-landscape #navigation-keys .volta-key-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.phone-landscape #navigation-keys .signature-key-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.phone-landscape #navigation-keys .marker-key-row{grid-template-columns:1fr 1fr 1.8fr 1.2fr}
.phone-landscape #navigation-keys .jump-key-row{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:32px 32px;grid-auto-flow:column;grid-row:3/5;direction:ltr}
.phone-landscape #navigation-keys button{width:100%;min-width:0;height:32px;min-height:32px;padding:2px 3px;font-size:12px;white-space:nowrap;border-radius:6px;background:#f6f9fb;justify-content:center}
.phone-landscape #navigation-keys button.annotation-part-key{width:100%;min-width:0;font-size:19px}
.phone-landscape #navigation-keys button.navigation-symbol-key{width:100%;min-width:0;padding:1px}
.phone-landscape #navigation-keys .navigation-glyph{width:28px;height:28px;max-width:100%}
.phone-landscape #navigation-keys .jump-main{display:block;font-size:14px;line-height:15px;font-weight:600}
.phone-landscape #navigation-keys .jump-modifier{display:block;font-size:10px;line-height:11px}
.phone-landscape #navigation-keys .jump-modifier:empty{display:none}
.phone-landscape #navigation-keys button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.phone-landscape #navigation-keys #annotation-edit{position:absolute;bottom:5px;right:5px;width:auto;font-size:11px}
.phone-landscape .tool-dock:has(#navigation-panel:not([hidden])) .keyboard-footer{position:absolute;left:12px;bottom:9px;padding:0}
@media(max-width:650px){
  .phone-landscape #navigation-keys{gap:4px}
  .phone-landscape #navigation-keys .navigation-family{padding-inline:3px;grid-template-rows:14px 30px 30px 30px}
  .phone-landscape #navigation-keys button{height:30px;min-height:30px;font-size:10px;padding:2px 1px}
  .phone-landscape #navigation-keys .jump-key-row{grid-template-rows:30px 30px}
  .phone-landscape #navigation-keys .jump-main{font-size:13px}
  .phone-landscape #navigation-keys button.annotation-part-key{font-size:18px}
  .phone-landscape #navigation-keys .navigation-glyph{width:27px;height:26px}
}
@media(min-width:601px){
  body:not(.mobile-workspace) .editor-dock .score-settings{gap:6px 8px}
  body:not(.mobile-workspace) .score-settings .bar-settings{gap:5px;flex-wrap:nowrap;font-size:13px}
  body:not(.mobile-workspace) .score-settings .bar-settings input{width:48px;min-height:32px;padding:4px}
  body:not(.mobile-workspace) .score-settings .bar-settings button{min-height:32px;font-size:12px;padding:4px 8px;white-space:nowrap}
  body:not(.mobile-workspace) .score-settings .playback-strip{gap:5px}
  body:not(.mobile-workspace) .score-settings .transport-buttons{gap:4px}
  body:not(.mobile-workspace) .score-settings .transport-buttons button{min-height:32px;padding:4px 7px}
  body:not(.mobile-workspace) .score-settings .tempo-control{gap:4px;font-size:12px}
  body:not(.mobile-workspace) .score-settings .tempo-control input{width:64px;min-height:32px}
  body:not(.mobile-workspace) .score-settings .playback-mode-control select{width:74px;min-height:32px;font-size:12px}
  body:not(.mobile-workspace) .score-settings #playback-mixer{min-height:32px;font-size:12px;padding:4px 7px}
  body:not(.mobile-workspace) .score-settings .warning-toggle{min-height:32px;font-size:11px;gap:4px}
  body:not(.mobile-workspace) .score-settings .warning-toggle input{width:16px;height:16px}
  body:not(.mobile-workspace) .score-settings .pdf-settings{gap:5px;flex-wrap:nowrap}
  body:not(.mobile-workspace) .score-settings .pdf-settings button{min-height:32px;font-size:12px;padding:4px 8px;white-space:nowrap}
}