/* The teacher's workbench shares the score's warm paper and handwritten ink. */
:root { --studio-ink:#4d5849; --studio-line:#c9cebc; --studio-paper:#fffef7; }
body .topbar { gap:18px; min-height:64px; height:auto; padding-top:10px; padding-bottom:10px; }
.topbar nav { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.topbar nav > button { min-height:36px; padding:8px 9px; font-size:11px; }
.topbar .profile-nav { background:#e9eddf; border:1px solid #c5ccb8; }
.profile-nav > span:last-child { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score-year { font-size:14px; font-weight:650; color:#7e846f; margin-top:8px; }
.song-info .difficulty { display:block; font-size:21px; letter-spacing:3px; margin-top:6px; }
.song-info .difficulty[hidden] { display:none; }
.score-description { box-sizing:border-box; width:calc(100% - 20px); max-width:850px; margin:12px auto 0; padding:18px 24px; position:relative; isolation:isolate; border:0; border-radius:0; background:transparent; color:#315c69; font-size:13px; line-height:1.85; text-align:left; white-space:pre-line; overflow-wrap:anywhere; }
.teacher-notes { margin:28px auto 20px; max-width:850px; padding:20px 25px; border-top:1px dashed #bfc5b2; color:#65705b; }
.score-description>p{margin:0}
.score-description>.paper-outline path{fill:#eaf5fa;stroke:#8eafbb;stroke-opacity:.75;stroke-width:1.2}
.teacher-notes summary{list-style:none;cursor:pointer;min-height:32px;display:flex;align-items:center}
.teacher-notes summary::-webkit-details-marker{display:none}
.teacher-notes summary:focus-visible{outline:2px solid #648772;outline-offset:5px;border-radius:3px}
.teacher-notes h3 { display:flex;align-items:center;gap:14px;width:100%;font-size:14px; margin:0; color:#4f5d43; }
.teacher-notes-arrow{display:inline-flex;margin-left:auto;transform:rotate(-90deg);transition:transform .15s ease}
.teacher-notes-arrow svg{width:18px;height:18px}
.teacher-notes[open] .teacher-notes-arrow{transform:rotate(0)}
.teacher-notes[open]>p{margin-top:12px}
.teacher-notes p { font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:2; margin:0; }
/* One continuous body with cutouts, instead of overlapping outlined rails. */
.instrument-frame.unified-frame { fill:url('#frameMetal'); stroke:#626a5c; stroke-width:1.8px; stroke-linejoin:round; }
.bar-face { stroke:#50594e; stroke-width:1.8px; }
.bar-rivet { fill:#d9ddd5; stroke:#697061; stroke-width:1.4px; }
.metallophone.chord-focus .metallo-illustration .chord-tone .bar-face,
.metallo-illustration .metallo-bar.sounding .bar-face { stroke:#3f4939; stroke-width:1.8px; }
/* Three progressive reading levels keep the same duration-based geometry. */
#score { position:relative; }
#score .note-block { flex-direction:column; gap:4px; }
.tile-names { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; }
#score .rest { font-size:18px; color:#72776c; }
.rhythm-symbols { display:flex; justify-content:center; align-items:center; max-width:100%; color:#353b33; min-height:48px; flex-shrink:1; }
.rhythm-unit { position:relative; display:inline-flex; min-width:0; }
.rhythm-glyph { width:35px; height:49px; max-width:100%; overflow:visible; }
.rhythm-join { width:11px; flex-shrink:0; font-size:18px; align-self:flex-end; margin-bottom:2px; }
.rhythm-triplet { position:absolute; left:50%; top:-3px; font-family:Playpen,sans-serif; font-size:11px; font-weight:700; }
[data-view="mixed"] .note-block { padding:7px 2px; }
:is([data-view="notation"],[data-view="plain"]) #score .note-block { background:transparent!important; border-color:transparent; box-shadow:none; border-radius:0; color:var(--pitch-color); }
:is([data-view="notation"],[data-view="plain"]) #score .note-block.active { background:#fff8!important; border-color:#6e7c60; border-radius:10px; }
:is([data-view="notation"],[data-view="plain"]) .rhythm-symbols { color:var(--pitch-color); filter:drop-shadow(0 1px .4px #394231a0); }
:is([data-view="notation"],[data-view="plain"]) #score :is(.pitch-name,.octave-mark,.rest-label) { color:var(--pitch-color); -webkit-text-stroke:1px #fffff5; }
:is([data-view="notation"],[data-view="plain"]) #score .rest .rhythm-symbols { color:#4c5547; filter:none; }
:is([data-view="notation"],[data-view="plain"]) #score .note-block :is(.pitch-label,.rest-label) { font-size:calc(var(--uniform-note-font)*.85); }
.tie-overlay { position:absolute; top:0; left:0; pointer-events:none; overflow:visible; z-index:4; }
.tie-overlay path { fill:none; stroke:#3d4738; stroke-width:3.6px; stroke-linecap:round; }
.repeat-start-dots { position:absolute; left:-4px; top:50%; transform:translateY(-54%); color:#4e5352; font-size:44px; line-height:.7; font-family:Georgia,serif; font-weight:900; z-index:3; }
.repeat-start .barline-start { display:block; width:8px; border-left:5px solid #4e5352; border-right:2px solid #4e5352; background:none; left:-12px; }
.repeat-times { position:absolute; right:0; top:-24px; font-size:12px; font-weight:700; color:#5b6553; }
/* A single playable strip with useful seeking and matching tactile buttons. */
.playback-dock { max-width:1050px; margin:24px auto 16px; padding:15px 18px 16px; background:#f5f5e9c9; border:1px solid #c6cdb7; border-radius:16px 20px 17px 19px; box-shadow:0 3px #b8c2a522; }
.studio .playback-dock .play-progress { position:relative; height:10px; margin:4px 12px 18px; background:#dfe4d1; box-shadow:inset 0 1px 2px #64725328; }
.play-progress input { position:absolute; inset:-12px 0; width:100%; height:34px; opacity:0; cursor:pointer; margin:0; z-index:2; }
.play-progress:focus-within { outline:2px solid #8b9d6b; outline-offset:6px; }
.studio .play-progress #progressFill { background:#a6b575; }
.progress-head { opacity:1; background:#ead372; top:-3px; width:16px; height:16px; }
.playback-dock .transport { display:flex; padding:0; flex-wrap:wrap; justify-content:center; gap:14px; }
.transport-left,.transport-right { display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:center; }
.play-button,.transport-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:Playpen,sans-serif; min-height:42px; padding:10px 14px; border:1.5px solid #8c9679; border-radius:10px 13px 11px 12px; box-shadow:0 3px #929d7928; font-size:11px; font-weight:650; color:#626d51; background:#edf0df; cursor:pointer; }
.transport-button:hover { background:#e2e8cc; }
.transport-button[aria-pressed="true"] { background:#d4dfac; border-color:#788858; color:#435631; }
.transport-button svg { width:17px; height:17px; }
.play-button { min-width:145px; background:#f7df75; border-color:#7f896c; color:#4e593d; }
.tempo-control { padding:4px 12px; }
.tempo-control label { font-size:10px; }
.tempo-control input { width:100px; }
/* A unified, scrollable editor with a stable action bar. */
dialog.studio-dialog { width:min(1060px,calc(100vw - 28px)); max-width:1060px; max-height:92dvh; padding:0; overflow:auto; background:var(--studio-paper); border:1.5px solid var(--studio-line); border-radius:17px 21px 18px 20px; }
dialog::backdrop { background:#2630216b; backdrop-filter:blur(3px); }
.studio-dialog .dialog-top { padding:25px 28px 18px; margin:0; border-bottom:1px solid #e1e5d6; gap:15px; }
.dialog-top h2 { font-family:Playpen,sans-serif; font-size:24px; margin:6px 0 0; }
.eyebrow { font-size:9px; letter-spacing:1.6px; }
.dialog-head-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.studio-dialog button,.profile-dialog button { font-family:Playpen,sans-serif; }
.studio-dialog .outline,.profile-dialog .outline { display:inline-flex; align-items:center; gap:6px; background:#f4f5e9; color:#6d795e; border:1px solid #c1c9b1; padding:9px 12px; border-radius:8px; font-size:11px; }
.editor-jumps { display:flex; gap:7px; padding:13px 28px; border-bottom:1px solid #e5e8db; background:#f6f7ec; position:sticky; top:0; z-index:8; flex-wrap:wrap; }
.editor-jumps button,.library-scopes button { border:0; background:none; color:#7e886d; border-radius:7px; padding:8px 12px; font-size:11px; }
.editor-jumps button:hover,.library-scopes button.selected { background:#e4ead5; color:#4c603b; }
.editor-body { padding:24px 28px; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:30px; align-items:start; }
.editor-main,.editor-aside { min-width:0; }
.editor-section { scroll-margin-top:74px; margin-bottom:25px; }
.editor-section h3 { font-family:Playpen,sans-serif; font-size:15px; color:#526345; margin:0 0 17px; }
.editor-section+.editor-section { border-top:1px dashed #cdd4bc; padding-top:22px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.span-two { grid-column:1/-1; }
.studio-dialog label,.profile-dialog label { display:flex; flex-direction:column; gap:7px; font-size:11px; font-weight:600; color:#738063; }
.studio-dialog input:not([type=checkbox]),.studio-dialog select,.studio-dialog textarea,.profile-dialog input:not([type=file]),.profile-dialog select,.profile-dialog textarea { width:100%; min-width:0; box-sizing:border-box; padding:11px 12px; border:1px solid #cbd2bd; border-radius:8px; color:#4e5a44; background:#fffef9; font-family:Playpen,sans-serif; font-size:12px; outline-offset:3px; }
.studio-dialog textarea,.profile-dialog textarea { resize:vertical; line-height:1.85; }
.studio-dialog small { font-size:10px; line-height:1.7; color:#929a84; font-weight:400; }
.level-picker { display:flex; align-items:center; gap:15px; border:0; padding:0; margin:0; }
.level-picker legend { font-size:11px; color:#738063; margin-bottom:6px; }
#levelStars { display:flex; gap:2px; }
#levelStars button { padding:0 2px; border:0; background:none; font-size:32px; color:#a8ae9b; line-height:1.3; }
#levelStars .filled { color:#c86265; }
.text-button { padding:3px 0; background:none; border:0; color:#929c81; font-size:10px; text-decoration:underline; text-underline-offset:3px; }
.image-upload { width:88px; aspect-ratio:1; flex-shrink:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; border:1px dashed #b7c2a4; background:#f0f3e4; border-radius:10px; color:#99a386; overflow:hidden; padding:0; }
.image-upload svg { width:25px; height:25px; }
.image-upload span { font-size:9px; }
.image-upload img { width:100%; height:100%; object-fit:cover; }
.editor-image-field { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.editor-image-field strong { color:#6a785b; font-size:12px; }
.editor-image-field p { color:#99a18b; font-size:10px; margin:6px 0; line-height:1.7; }
.studio-dialog .drop-zone { width:100%; margin:0; padding:23px 12px; border:1px dashed #b6c2a1; border-radius:11px; background:#f0f4e5; display:flex; flex-direction:column; align-items:center; gap:9px; }
.drop-zone strong { font-size:13px; color:#6b7f54; }
.drop-zone >span { font-size:10px; color:#8f9e7a; }
.drop-zone svg { width:26px; height:26px; }
.drop-zone.dragover { background:#e0ecc7; }
.field-help,.local-note { font-size:10px; color:#98a08a; line-height:1.9; font-weight:400; }
.local-note { padding:0; margin:14px 0; }
.field-help code { color:#788667; background:#edf1e2; border-radius:4px; padding:2px 4px; }
.note-entry { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:15px; }
.note-entry >label:first-child { flex:1; }
.studio-dialog .check-label,.repeat-check { display:flex; flex-direction:row; align-items:center; font-size:10px; }
.entry-keys { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; margin:0 0 15px; }
.entry-key { padding:11px 0; font-family:Playpen,sans-serif; font-size:14px; background:var(--key-color); border:1px solid #89917b; }
.entry-key.rest { background:#e4e7da; color:#717a64; -webkit-text-stroke:0; font-size:9px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:25px; }
.section-heading h3 { margin:0; }
.measure-editor { display:grid; gap:7px; }
.measure-edit-row { display:grid; grid-template-columns:22px minmax(70px,1fr) 76px 140px; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid #e9ecdf; }
.measure-edit-row >b { font-size:12px; color:#8d987e; }
.measure-edit-row input:not([type=checkbox]),.measure-edit-row select { padding:9px 7px; font-size:11px; }
.measure-edit-row .repeat-check { font-size:9px; gap:4px; }
.reference-panel { margin-top:20px; max-width:100%; background:#eff1e6; border:1px solid #d0d6c2; padding:9px; border-radius:8px; }
.reference-heading { display:flex; gap:7px; justify-content:space-between; font-size:10px; }
#referencePreview img { width:100%; height:auto; }
#referencePreview iframe { width:100%; min-height:350px; border:0; }
#editorError { margin:0; padding:0 28px; }
.sticky-actions { position:sticky; bottom:0; z-index:9; margin:0; padding:16px 28px; background:#fffef5ed; backdrop-filter:blur(8px); border-top:1px solid #d7deca; display:flex; gap:12px; align-items:center; justify-content:flex-end; }
.sticky-actions >span { margin-right:auto; font-size:10px; color:#9aa48a; }
.studio-dialog .primary,.profile-dialog .primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:Playpen,sans-serif; font-size:12px; border-radius:9px 12px 10px 11px; background:#e8ce6d; color:#56613e; border:1px solid #afb181; padding:11px 16px; box-shadow:0 2px #8b9b6b26; }
/* Library and local teacher identities. */
.library-toolbar { display:flex; gap:14px; align-items:center; padding:20px 28px 0; flex-wrap:wrap; }
.library-scopes { display:flex; gap:3px; }
.library-toolbar input { flex:1; min-width:150px!important; }
.library-toolbar select { width:145px; }
.library-dialog >.local-note { padding:0 28px; }
.library-dialog .library-grid { padding:6px 28px 28px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.library-card.score-card { display:flex; gap:15px; align-items:flex-start; padding:15px; background:#f7f7ee; border:1px solid #d9dfcc; border-radius:12px 15px 13px 14px; text-align:left; }
.library-card.score-card:hover { background:#eff3e3; border-color:#b6c59b; transform:none; }
.library-cover { width:94px; aspect-ratio:1; flex-shrink:0; background:#e7ecd9; border-radius:9px; overflow:hidden; display:grid; place-items:center; }
.library-cover img { width:100%; height:100%; object-fit:cover; }
.cover-motif { position:relative; width:65px; height:65px; display:flex; align-items:center; justify-content:center; }
.cover-motif svg { width:35px; height:35px; color:#b1bd99; }
.cover-motif i { position:absolute; width:10px; height:32px; border-radius:3px; transform:rotate(-18deg); background:#d7be69; left:8px; bottom:3px; opacity:.85; }
.cover-motif i:nth-of-type(2) { left:23px; height:25px; background:#a7b57a; }
.cover-motif i:nth-of-type(3) { left:38px; height:19px; background:#ca9193; }
.card-copy { min-width:0; }
.score-card h3 { font-family:Playpen,sans-serif; font-size:15px; line-height:1.6; margin:5px 0; color:#58664a; }
.score-card p { font-size:10px; line-height:1.8; color:#99a18d; margin:0 0 5px; max-height:3.6em; overflow:hidden; }
.score-card .card-owner { color:#9ba68b; font-size:8px; line-height:1.7; }
.card-stars { font-size:15px; letter-spacing:2px; color:#c57978; }
.library-empty { grid-column:1/-1; padding:45px 25px; text-align:center; font-size:13px; line-height:2; color:#939e82; }
.profile-dialog { width:min(500px,calc(100vw - 28px)); max-height:90dvh; overflow:auto; background:#fffef7; padding:25px; border-radius:16px; }
.profile-dialog label { margin-top:17px; }
.profile-photo-row { display:flex; align-items:center; gap:18px; margin-top:18px; }
.profile-photo { width:90px; border-radius:50%; }
@media (max-width:1050px) { .topbar nav >button { font-size:0!important; padding:8px; gap:0; }.topbar nav >button>span:last-child:not([data-icon]){display:none}.topbar nav>button svg{width:18px;height:18px}.editor-body{grid-template-columns:minmax(0,1fr) 220px;gap:22px}.measure-edit-row{grid-template-columns:20px minmax(65px,1fr) 66px 125px}.playback-dock{margin-left:5px;margin-right:5px}.transport-button{padding:10px;font-size:10px}.tempo-control input{width:85px} }
@media (max-width:700px) { .editor-body{grid-template-columns:1fr;padding:19px;gap:0}.editor-aside{display:grid;grid-template-columns:1fr 1fr;gap:18px}.editor-aside .editor-section+.editor-section{padding-top:0;border:0}.editor-aside>.local-note{grid-column:1/-1}.editor-image-field{flex-direction:column;align-items:flex-start}.studio-dialog .dialog-top{padding:19px}.editor-jumps{padding:9px 14px;gap:2px}.editor-jumps button{padding:8px;font-size:10px}.dialog-top h2{font-size:21px}.sticky-actions{padding:13px 18px}.sticky-actions>span{display:none}.library-dialog .library-grid{grid-template-columns:1fr;padding:5px 18px 20px}.library-toolbar{padding:18px 18px 0}.library-dialog>.local-note{padding:0 18px}.library-toolbar input{width:100%;flex-basis:60%}.profile-dialog{padding:20px}.playback-dock{padding:14px 8px}.transport-left,.transport-right{gap:7px}.tempo-control{padding:3px 7px}.play-button{min-width:135px}.transport-button{min-height:40px}.transport .class-button{font-size:10px}.score-year{font-size:10px}.song-info .difficulty{font-size:14px;letter-spacing:1px}.score-description{font-size:11px;margin-bottom:15px}.score-card h3{font-size:14px}.teacher-notes{padding:18px 12px}.teacher-notes p{font-size:11px}.rhythm-glyph{height:43px;width:31px} }
@media (max-width:450px) { .topbar{gap:8px!important}.stage-brand .brand-name{display:none}.topbar nav{gap:2px}.topbar nav>button{padding:8px 7px}.field-grid{gap:12px}.level-picker{flex-wrap:wrap;gap:5px}.measure-edit-row{grid-template-columns:17px minmax(55px,1fr) 67px;gap:6px}.measure-edit-row>label:last-child{grid-column:2/-1}.studio-dialog{width:calc(100vw - 12px)!important}.dialog-head-actions .outline{font-size:0}.dialog-head-actions{gap:4px}.editor-aside{gap:14px}.entry-keys{gap:3px}.entry-key{font-size:11px;padding:12px 0}.note-entry{gap:8px}.note-entry select{font-size:10px}.image-upload{width:75px}.editor-image-field strong{font-size:11px}.library-toolbar select{width:130px}.transport-right{width:100%}.transport-button{font-size:9px;padding:9px}.transport-button svg{width:15px}.transport-left{gap:6px}.play-button{min-width:124px;padding:10px 13px}.tempo-control{padding:3px}.tempo-control input{width:70px} }
@media print { .playback-dock{display:none!important}.teacher-notes{break-inside:avoid;margin-top:20px}.teacher-notes h3{font-size:12px}.teacher-notes p{font-size:11px}.score-description{font-size:11px}.score-year{font-size:12px}.tie-overlay{print-color-adjust:exact}.rhythm-glyph{height:40px;width:30px}.song-info .difficulty{font-size:18px}.score-paper{overflow:visible}.studio-dialog{display:none!important} }
.score-description{order:5}.playback-dock{order:4;width:calc(100% - 20px)}.teacher-notes{order:6;width:100%}
.poly-symbols{display:flex;justify-content:center;align-items:center;width:100%;gap:3px}.poly-note{display:flex;flex-direction:column;align-items:center;min-width:0;flex:1}.poly-note .pitch-label{font-size:calc(var(--uniform-note-font)*.85)!important}.profile-nav img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.measure-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.section-heading>.measure-actions .outline{font-size:10px;padding:7px 9px}
/* Canonical engraved music shapes, with separate values for every simultaneous pitch. */
#score .note-block{border-color:var(--note-border,#5c625c)}
#score .note-block.rest{border-color:#8b9282;background:#e8ebe0;background-image:none;color:#646f59}
.rhythm-symbols{width:100%;min-width:0;overflow:hidden;padding-top:3px}
.rhythm-unit{flex:0 1 35px;min-width:0;width:35px;justify-content:center}
.rhythm-glyph{width:100%;max-width:35px;flex-shrink:1;height:49px;overflow:visible}
#score .note-block.polyphony{border:0;background:transparent!important;box-shadow:none;border-radius:0;padding:0;overflow:visible}
.poly-symbols{flex-direction:column;height:100%;width:100%;gap:3px}
.poly-note{flex:1;flex-direction:row;align-items:center;justify-content:center;gap:4px;width:100%;min-height:0;border:2px solid var(--note-border);border-radius:7px 9px 8px 8px;background:var(--pitch-color);overflow:hidden}
.poly-note .rhythm-symbols{width:30px;flex:0 1 30px;min-height:0;padding:0}
.poly-note .rhythm-glyph{height:40px}
.poly-note .pitch-label{font-size:var(--uniform-note-font)!important}
:is([data-view="notation"],[data-view="plain"]) #score .poly-note{background:transparent;border-color:transparent}
:is([data-view="notation"],[data-view="plain"]) #score .poly-note .pitch-name,:is([data-view="notation"],[data-view="plain"]) #score .poly-note .octave-mark{color:var(--pitch-color)}
@media (max-width:650px){.rhythm-glyph{height:43px}.poly-note .rhythm-symbols{width:24px;flex-basis:24px}.poly-note .rhythm-glyph{height:35px}}
/* Octave marks stay close to the name instead of floating outside its line. */
.pitch-label.has-octave.high{padding-right:.26em}.pitch-label.has-octave.low{padding-left:.24em}
.octave-mark.high{top:.2em}.octave-mark.low{bottom:.22em}
.has-octave>.octave-mark.high{right:0}.has-octave>.octave-mark.low{left:0}
body{background:#fff;position:relative;isolation:isolate;overflow-x:hidden}
body::before{content:'';position:fixed;inset:-120px;z-index:-1;pointer-events:none;background-image:linear-gradient(#b7bfaf26 1px,transparent 1px),linear-gradient(90deg,#b7bfaf26 1px,transparent 1px);background-size:36px 36px;transform:rotate(-2deg);transform-origin:50% 50%}
.playback-dock{background:#fafbf6}.score-artwork{background:#fafbf7}.editor-jumps{background:#f6f8f1}
@media print{body::before{display:none}}
/* Dynamics have their own warm, dark ink below the beat counts. */
.dynamics-lane{position:relative;min-height:38px;color:#51321f;margin-top:1px}.dynamics-lane.empty{display:none}
.dynamic-mark{position:absolute;top:0;z-index:2;color:#51321f;line-height:1;pointer-events:none}.dynamic-mark svg{display:block;height:36px}
.dynamic-hairpin{position:absolute;top:5px;height:24px;min-width:3px;color:#51321f}.dynamics-overlay{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;color:#51321f;z-index:4}.dynamics-overlay path{fill:none;stroke:currentColor;stroke-width:1.8px;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.dynamics-editor{display:grid;gap:12px;margin-top:15px}.dynamic-edit-row{display:grid;grid-template-columns:70px 72px minmax(130px,1fr) 75px 22px;align-items:end;gap:8px;padding:12px 0;border-bottom:1px solid #e0e4d5}.dynamic-edit-row select,.dynamic-edit-row input{padding:9px 6px!important;font-size:11px!important}.dynamic-edit-row [data-dynamic-kind]{color:#51321f}.dynamic-edit-row label{font-size:10px}.remove-dynamic{padding:7px 1px;font-size:20px;color:#8d7664}
@media(max-width:700px){.dynamic-edit-row{grid-template-columns:62px 65px minmax(100px,1fr) 60px 18px;gap:6px}}
@media(max-width:450px){.dynamic-edit-row{grid-template-columns:1fr 1fr 22px}.dynamic-edit-row>label:nth-child(3){grid-column:1/3}.dynamic-edit-row>label:nth-child(4){grid-column:1/3}.dynamic-edit-row>.remove-dynamic{grid-column:3;grid-row:1}.dynamic-mark svg{height:32px}.dynamics-lane{min-height:35px}}
@media print{.dynamics-lane{color:#51321f;print-color-adjust:exact;-webkit-print-color-adjust:exact}.dynamic-mark svg{height:32px}.dynamics-overlay path{stroke:#51321f}.teacher-notes-arrow{display:none}}
/* Playback stays inside the tile; it never grows over its neighbours. */
#score .note-block.active{transform:none!important;outline:2px solid var(--note-border,#5a654e);outline-offset:-3px;box-shadow:inset 0 0 0 1px #ffffff70;filter:brightness(.93);z-index:3}
#score .note-block.polyphony.active{outline-offset:-2px;box-shadow:none}
.syntax-hint{font-size:10px;color:#7d896e;line-height:1.8;margin:10px 0}.syntax-hint code{color:#5e6c4b;background:#edf1e6;border-radius:3px;padding:2px 4px}
.music-commands{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 18px}.music-commands button{background:#eff2e6;border:1px solid #c5cdb8;border-radius:6px;padding:7px 12px;color:#5e6d4c;font-size:12px}
#musicAdvanced{border-top:1px dashed #cdd4bc;padding-top:14px;margin-top:18px}#musicAdvanced summary{cursor:pointer;color:#748361;font-size:12px;padding:6px 0}#musicAdvanced .section-heading{margin-top:20px}.dynamic-mark{font-family:Playpen,sans-serif;font-weight:700;font-style:italic;font-size:22px;letter-spacing:-1px;padding:4px 1px}
/* Calm surfaces leave the strong colours to the musical material. */
:root{--studio-paper:#fff;--studio-line:#ccd4d0;--studio-ink:#344b47}
.settings-panel{background:#f6f9f8;border-color:#cbd6d1}.playback-dock{background:#f6f9f8;border-color:#cbd6d1}.topbar .profile-nav{background:#eef4f1;border-color:#c5d2cb}.transport-button{background:#eef4f1;border-color:#9aafa5;color:#3e5b50}.transport-button:hover{background:#e1ece6}.transport-button[aria-pressed="true"]{background:#d5e5dd;color:#2c5440;border-color:#789a89}.play-button{background:#f6df7b;color:#425347}.editor-jumps{background:#f4f7f5}.studio-dialog .outline,.profile-dialog .outline,.music-commands button{background:#f1f6f3;border-color:#c8d4ce;color:#526c5f}.syntax-hint code{background:#eef4f0}.score-artwork{background:#f7f9f7}
.note-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;gap:4px}
:is([data-view="notation"],[data-view="plain"]) #score .note-block,[data-view="symbols"] #score .note-block{align-items:flex-start;padding:0 1px;background:transparent!important;border-color:transparent!important;box-shadow:none;border-radius:0;color:var(--pitch-color)}
:is([data-view="notation"],[data-view="plain"]) .note-content,[data-view="symbols"] .note-content{width:min(100%,calc(100cqw / var(--beat-count,4) - 8px));flex:none}
:is([data-view="notation"],[data-view="plain"]) .rhythm-symbols,[data-view="symbols"] .rhythm-symbols{color:var(--pitch-color);filter:none}
:is([data-view="notation"],[data-view="plain"]) .rhythm-glyph path[fill="currentColor"],[data-view="symbols"] .rhythm-glyph path[fill="currentColor"]{stroke:#fff;stroke-width:1.4px;paint-order:stroke fill;stroke-linejoin:round;vector-effect:non-scaling-stroke}
:is([data-view="notation"],[data-view="plain"]) #score .poly-note,[data-view="symbols"] #score .poly-note{background:transparent;border-color:transparent;flex-direction:column;gap:0}
:is([data-view="notation"],[data-view="plain"]) #score .poly-note .rhythm-symbols,[data-view="symbols"] #score .poly-note .rhythm-symbols{width:100%;flex:0 1 43px}
[data-view="symbols"] #score .tile-names{display:none}
[data-view="symbols"] #score .rest .rhythm-symbols{color:#4c5547}
:is([data-view="notation"],[data-view="plain"]) #score .note-block.active,[data-view="symbols"] #score .note-block.active{background:transparent!important;border-radius:0;outline:0;box-shadow:none;filter:brightness(.8)}
.metallo-illustration .metallo-bar .bar-face{fill:#dce1de}.metallo-illustration .metallo-bar.shown-note .bar-face{fill:var(--bar-color)}
.metallo-illustration .metallo-bar[aria-disabled="true"]{cursor:default;pointer-events:none;opacity:.85}
.metallophone.chord-focus .metallo-illustration .metallo-bar.muted .bar-face{fill:#dce1de;stroke:#77827a}
.metallo-illustration .metallo-bar.sounding{outline:none;box-shadow:none;transform:none;filter:none}
.metallo-illustration .metallo-bar.striking{filter:brightness(.88)}
.metallo-illustration .metallo-bar.sounding .bar-halo{opacity:0}.metallo-illustration .metallo-bar:focus-visible .bar-halo{stroke:#42695a;stroke-width:4px;opacity:.6}
.editor-live-preview{margin:20px 0;background:#fff;border:1px solid #d5ded8;border-radius:10px;overflow:hidden}.editor-live-preview h4{font-size:11px;font-weight:600;color:#6d8275;padding:12px 14px;margin:0}.editor-live-preview iframe{display:block;border:0;width:100%;height:90px;min-height:90px}.editor-live-preview .field-error{padding:0 14px;font-size:11px}
.print-dialog{max-width:420px!important;background:#fff}.print-dialog h2{font-family:Playpen,sans-serif;font-size:22px}.print-dialog label{display:flex;flex-direction:column;gap:8px;margin:18px 0;font-size:13px}.print-dialog select{font-family:Playpen,sans-serif;background:#f4f8f5;border:1px solid #c3d1c8;border-radius:8px;padding:10px}
@media print{
 .score-paper,.class-view .score-paper{background:transparent!important;clip-path:none;padding-top:16px;padding-bottom:16px;overflow:visible!important}
 .score-paper::before{background:#dedfd9!important;filter:none!important;clip-path:polygon(0 4%,1% 2%,4% 3%,5% 0,10% 2%,15% 0,20% 2%,27% 0,35% 2%,42% 0,50% 2%,58% 0,67% 2%,74% 0,83% 2%,91% 0,97% 2%,99% 0,100% 5%,99.6% 22%,100% 40%,99.6% 60%,100% 80%,99% 97%,96% 99%,90% 97%,84% 100%,76% 98%,67% 100%,58% 98%,48% 100%,39% 98%,30% 100%,22% 98%,14% 100%,6% 98%,1% 100%,0 95%,.4% 72%,0 54%,.4% 28%);print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .tuplet-bracket b{background:#dedfd9}.print-dialog{display:none!important}.measure{break-inside:avoid}.song-info h2{font-size:32px!important}.sheet-heading{padding-bottom:12px!important;grid-template-columns:95px minmax(0,1fr) 95px!important}.metallophone{width:95px!important}.song-credit>p{font-size:14px!important}.score-artwork{width:65px!important;height:65px!important}
 body[data-print-size="compact"] .song-info h2{font-size:26px!important}body[data-print-size="compact"] .sheet-heading{grid-template-columns:75px minmax(0,1fr) 75px!important;padding-bottom:7px!important}body[data-print-size="compact"] .metallophone{width:75px!important}body[data-print-size="compact"] .score-artwork{width:48px!important;height:48px!important}body[data-print-size="compact"] .song-credit>p{font-size:11px!important}body[data-print-size="compact"] .chord-lane{height:36px}body[data-print-size="compact"] .chord-mark{font-size:23px;bottom:7px}body[data-print-size="compact"] #score .beat-row{height:22px;line-height:22px;font-size:12px}body[data-print-size="compact"] .score-grid{gap:10px 0}body[data-print-size="compact"] .score-paper{padding-top:10px;padding-bottom:10px}body[data-print-size="compact"] .score-description{font-size:10px;margin-bottom:8px}body[data-print-size="compact"] .teacher-notes{margin-top:12px;padding-top:12px}
}
@media print{.metallo-illustration{width:100%!important;max-width:100%}.metallo-illustration .metallo-bar.sounding{filter:none}}
/* Beat numbers and chords share the first subdivision of the beat. */
#score .beat-row{position:relative;display:block}#score .beat-row>span{position:absolute;text-align:left;display:block;white-space:nowrap;transform:none}
:is([data-view="notation"],[data-view="plain"]) .note-content,[data-view="symbols"] .note-content{width:min(100%,calc(100cqw * var(--onset-ratio,.25) - 8px))}
:is([data-view="notation"],[data-view="plain"]) .rhythm-unit,[data-view="symbols"] .rhythm-unit{width:48px;flex-basis:48px}
:is([data-view="notation"],[data-view="plain"]) .rhythm-glyph,[data-view="symbols"] .rhythm-glyph{max-width:48px;height:62px}
#editorPreviewError{margin:9px 0;color:#b83e3c;font-size:11px;line-height:1.8}
@media print{:is([data-view="notation"],[data-view="plain"]) .rhythm-glyph,[data-view="symbols"] .rhythm-glyph{height:40px;max-width:35px}}
/* A short subdivision sets the onset column, never the size of other symbols. */
:is([data-view="notation"],[data-view="plain"]) .rhythm-symbols,[data-view="symbols"] .rhythm-symbols{overflow:visible;flex-shrink:0}
:is([data-view="notation"],[data-view="plain"]) .rhythm-unit,[data-view="symbols"] .rhythm-unit{flex:0 0 40px;width:40px}
:is([data-view="notation"],[data-view="plain"]) .rhythm-glyph,[data-view="symbols"] .rhythm-glyph{width:40px;max-width:40px;flex:none}
.tuplet-bracket b{background:transparent}
@media print{:is([data-view="notation"],[data-view="plain"]) .rhythm-unit,[data-view="symbols"] .rhythm-unit{flex-basis:35px;width:35px}:is([data-view="notation"],[data-view="plain"]) .rhythm-glyph,[data-view="symbols"] .rhythm-glyph{width:35px;max-width:35px}}
/* Beam geometry follows the actual engraved stem positions, one beat at a time. */
.beam-overlay{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:4}.beam-overlay path{fill:none;stroke-linecap:butt;stroke-linejoin:round}.beam-halo{stroke:#fff;stroke-width:5px}.beam-ink{stroke-width:3.2px}
:is([data-view="notation"],[data-view="plain"]) #score .note-block,[data-view="symbols"] #score .note-block{overflow:visible}
.symbol-octave{display:block;height:16px;font-family:Playpen,sans-serif;font-size:14px;font-weight:700;line-height:16px;color:var(--pitch-color);-webkit-text-stroke:1px #fff;paint-order:stroke fill;letter-spacing:-2px}
[data-view="symbols"] #score .tile-names:has(.symbol-octave){display:flex}
@media print{.beam-overlay{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
/* The music uses the whole workbench; images stay beside the details. */
.editor-body{grid-template-columns:minmax(0,1fr) 220px;gap:24px}.editor-main{display:contents}#detailsSection{grid-column:1;grid-row:1}#musicSection{grid-column:1/-1;grid-row:2;margin-top:0;padding-top:22px}.editor-aside{grid-column:2;grid-row:1;display:block;min-width:0}.editor-live-preview{width:100%}
@media(max-width:700px){.editor-body{grid-template-columns:minmax(0,1fr) 110px;gap:18px;padding:18px}.editor-aside{display:block}.editor-aside .editor-section+.editor-section{padding-top:18px;border-top:1px dashed #d6dece}.editor-image-field{flex-direction:column}.editor-image-field strong{font-size:10px}.editor-aside .image-upload{width:70px;height:70px}.editor-aside .drop-zone{padding:13px 7px}.editor-aside .drop-zone strong{font-size:10px}.editor-aside .drop-zone span,.editor-aside .drop-zone small{font-size:9px}.editor-aside .text-button{font-size:9px}#detailsSection .field-grid{grid-template-columns:minmax(0,1fr)}#detailsSection .field-grid .span-two{grid-column:auto}.editor-aside .editor-section h3{font-size:12px}.field-grid input,.field-grid textarea,.field-grid select{min-width:0}}
@media(max-width:450px){.editor-body{grid-template-columns:minmax(0,1fr) 88px;gap:12px;padding:14px}.editor-aside .image-upload{width:61px;height:61px}.editor-aside .editor-section{padding-top:12px}.editor-aside .editor-image-field{gap:7px}.editor-aside .drop-zone{overflow-wrap:anywhere}.level-picker button[data-star]{font-size:21px;padding:0 1px}#levelStars{gap:1px}.editor-image-field strong{overflow-wrap:anywhere}}
/* Octave cues sit below a common baseline without lifting a sounding note. */
.note-content,.poly-note{position:relative}
[data-view="symbols"] #score .tile-names:has(.symbol-octave){position:absolute;left:0;top:calc(50% + 24px);height:16px;width:100%;pointer-events:none}
[data-view="symbols"] #score .poly-note>.symbol-octave{position:absolute;top:calc(50% + 24px);left:50%;transform:translateX(-50%)}
.dynamic-mark{font-style:italic;font-synthesis:style}
.studio-dialog .sticky-actions>button{height:44px;min-height:44px;max-height:44px;padding:0 16px;line-height:1.2;box-sizing:border-box;box-shadow:0 2px #8b9b6b26}
/* A common set of handwritten controls, with field-specific illustrations. */
:root{--control-height:44px;--control-ink:#425e52;--control-line:#c5d3ca;--control-fill:#f6f9f6}
.select-control{position:relative;width:100%;min-width:0;text-align:left;font-family:Playpen,sans-serif;font-size:12px;color:var(--control-ink)}
.native-select{display:none!important}
.select-trigger{width:100%;height:var(--control-height);min-height:var(--control-height);display:flex;align-items:center;gap:10px;padding:0 12px!important;border:1.5px solid var(--control-line)!important;border-radius:10px 13px 10px 12px!important;background:#fff!important;color:var(--control-ink)!important;font:inherit;font-weight:600;box-shadow:0 2px #73927a0b;text-align:left;cursor:pointer}
.select-trigger:hover{border-color:#91ad9b!important;background:#fbfdfb!important}.select-trigger:focus-visible,.select-control.open .select-trigger{outline:2px solid #8eac9c;outline-offset:2px}.selected-label{min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.control-icon{display:inline-flex;color:#6d927b;flex-shrink:0}.control-icon svg{width:20px!important;height:20px!important}.control-chevron{display:inline-flex;margin-left:auto;color:#8a9e8c;flex-shrink:0}.control-chevron svg{width:15px!important;height:15px!important}.select-control.open .control-chevron{transform:rotate(180deg)}
.select-menu{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:60;padding:6px;overflow-y:auto;overscroll-behavior:contain;border:1.5px solid #bfd1c3;border-radius:12px 15px 12px 14px;background:#fff;box-shadow:0 12px 26px #29483924;font-family:Playpen,sans-serif;text-align:left}.open-above .select-menu{top:auto;bottom:calc(100% + 7px)}
.select-menu>[role="option"]{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:7px 9px;border:0!important;border-radius:7px;background:transparent!important;box-shadow:none;text-align:left;color:#52695a;font-size:inherit;font-weight:500;line-height:1.4}.select-menu>[role="option"]>span:not(.control-icon):not(.reading-sample):not(.option-check){flex:1}.select-menu>[role="option"]:hover,.select-menu>[role="option"]:focus-visible{background:#f0f6ee!important;outline:none}.select-menu>[aria-selected="true"]{color:#314c3e;background:#eaf2e6!important;font-weight:650}.option-check{display:inline-flex;margin-left:auto;color:#668967;visibility:hidden}.option-check svg{width:17px;height:17px}.select-menu>[aria-selected="true"] .option-check{visibility:visible}
.reading-sample{display:flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:32px;flex:0 0 34px;position:relative;border-radius:5px;color:#e92c32;gap:0}.reading-sample.boxed{background:#e92c32;border:1px solid #9d3032;color:#fff}.reading-sample b{font-family:Playpen,sans-serif;font-size:10px;font-weight:750;line-height:12px;color:#e92c32}.reading-sample.boxed b{color:#fff;-webkit-text-stroke:.4px #732c2c;paint-order:stroke fill}.reading-sample .rhythm-symbols{height:22px;min-height:0;width:22px;padding:0;overflow:visible;color:inherit}.reading-sample .rhythm-unit{width:19px;flex:0 0 19px;justify-content:center}.reading-sample .rhythm-glyph{width:19px!important;max-width:19px!important;height:24px!important;flex:none}.reading-mixed .rhythm-symbols,.reading-plain .rhythm-symbols{color:#343d36}.reading-blocks b{font-size:13px}.reading-symbols .rhythm-symbols{height:30px;width:24px}.reading-symbols .rhythm-glyph{width:24px!important;height:32px!important;max-width:24px!important}
/* Five reading levels, including plain engraving with coloured pitch names. */
[data-view="plain"] #score .rhythm-symbols{color:#343d36!important}
/* Settings form a quiet workbench, with one size for its actions and choices. */
.studio .settings-panel{display:block;padding:19px 22px;margin:5px 10px 20px;border:1.5px solid #cbd8cd;border-radius:16px 19px 17px 16px;background:#f7faf6;box-shadow:0 3px #96ac9620}
.settings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.settings-heading h3{display:flex;align-items:center;gap:9px;margin:0;color:#4c6957;font-family:Playpen,sans-serif;font-size:15px}.settings-heading h3 svg{width:19px;height:19px}.settings-heading .icon-button{width:44px;height:44px;padding:0;display:grid;place-items:center;background:#edf4ed;border:1px solid #d1dfcf;border-radius:9px;color:#6f8c73}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.settings-panel .setting-field{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;font-size:11px;color:#6a816d}.setting-label{font-weight:600}.settings-panel .reading-choice{grid-column:span 2}.settings-panel .select-control{font-size:12px}.settings-panel .select-menu button{font-size:12px}.settings-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:19px;padding-top:16px;border-top:1px dashed #d1dfce}.setting-switch{position:relative;display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important;min-height:44px;padding:0 12px;border:1px solid #d0decd;border-radius:9px;background:#fff;color:#58745e;font-family:Playpen,sans-serif;font-size:11px!important;cursor:pointer}.setting-switch>span[data-icon]{display:flex}.setting-switch svg{width:18px;height:18px}.setting-switch input{position:absolute;opacity:0;width:1px;height:1px}.setting-switch>i{display:block;width:29px;height:17px;border:1px solid #a9bda9;border-radius:10px;background:#e5ebe3;position:relative}.setting-switch>i::after{content:'';position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#a2b49e;transition:transform .15s}.setting-switch:has(input:checked)>i{background:#d5e5ca;border-color:#93b084}.setting-switch input:checked+i::after{transform:translateX(12px);background:#6e9259}.setting-switch:focus-within{outline:2px solid #8eac9c;outline-offset:2px}.settings-foot .transpose-control{display:flex;align-items:center;gap:7px;margin-left:auto;font-size:11px}.settings-foot .transpose-control>span{margin-right:4px}.settings-foot .transpose-control button{height:44px;min-width:60px;border:1px solid #c4d4c5;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;gap:5px;color:#56775e}.transpose-control svg{width:15px;height:15px}
.topbar nav>button{height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.studio-dialog .outline,.studio-dialog .primary,.profile-dialog .outline,.profile-dialog .primary,.print-dialog .outline,.print-dialog .primary{min-height:44px}.dialog-top .icon-button{width:44px;height:44px;display:grid;place-items:center;padding:0}.studio-dialog .outline svg,.studio-dialog .primary svg,.profile-dialog .outline svg,.profile-dialog .primary svg{width:18px;height:18px}.entry-key,.music-commands button{height:44px;min-height:44px}.dialog-head-actions>button{height:44px}.transport-button,.play-button{height:44px;min-height:44px}.score-artwork:disabled{opacity:1;cursor:default}.score-readonly .chord-add{display:none}
/* Multiple removable categories, rather than comma-separated form fields. */
.tag-picker{min-width:0;border-top:1px dashed #dbe3d5;padding-top:16px}.tag-label{display:flex;align-items:center;gap:8px;color:#657c64;font-size:12px;font-weight:650;margin-bottom:10px}.tag-label svg{width:18px;height:18px}.tag-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}.tag-chips:empty{display:none}.chosen-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid #bed2bc;border-radius:9px;background:#edf5e8;color:#526f4a;padding-left:11px;font-size:11px;min-height:44px}.chosen-tag button{display:grid;place-items:center;width:36px;height:44px;color:#7e9974}.chosen-tag button svg{width:14px;height:14px}.tag-add{height:44px;display:flex;align-items:center;gap:8px;border:1px dashed #b7cbb4;border-radius:9px;padding:0 13px;background:#fbfdf9;color:#6b8562;font-size:11px}.tag-add>svg{width:16px;height:16px}.tag-add>svg:last-child{width:13px;margin-left:8px}.tag-bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:7px;padding:11px;margin-top:9px;border:1px solid #d1dfcb;border-radius:10px;background:#f7faf4}.tag-bank button{height:44px;display:flex;align-items:center;gap:8px;padding:6px 9px;text-align:left;border:1px solid #d5e0cf;border-radius:7px;color:#6e8265;background:#fff;font-size:10px;line-height:1.3}.tag-bank button svg{width:16px;height:16px;flex:none}.tag-bank button[aria-pressed="true"]{background:#e6f0dc;border-color:#a9c49c;color:#54713e}
.library-toolbar{gap:13px}.library-scopes button{height:44px}.library-search{display:flex;align-items:center;gap:10px;width:100%;padding:0 13px;border:1.5px solid #c9d6ca;border-radius:11px;background:#fff;min-height:44px}.library-search>[data-icon]{display:flex;color:#87a17f}.library-search svg{width:19px;height:19px}.library-search input{min-width:0!important;width:100%;height:42px;border:0!important;background:none!important;outline:none!important;margin:0;padding:0!important;font-family:Playpen,sans-serif;font-size:12px}.library-search:focus-within{outline:2px solid #8eac9c;outline-offset:2px}.library-filters{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.library-filters .select-control{width:100%;font-size:11px}.card-tags{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.card-tags>span{padding:4px 7px;border:1px solid #d6e0ce;border-radius:5px;background:#f3f7ed;color:#809174;font-size:8px}.own-score-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:#6a8756}.own-score-badge svg{width:11px;height:11px}
@media(max-width:1050px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-panel .reading-choice{grid-column:span 2}.topbar nav{gap:5px}.topbar nav>button{width:39px;padding:0!important}.settings-panel .select-control{font-size:11px}}
@media(max-width:650px){.studio .settings-panel{margin:0 0 17px;padding:13px}.settings-grid{grid-template-columns:minmax(0,1fr);gap:13px}.settings-panel .reading-choice{grid-column:auto}.settings-panel .select-control{font-size:11px}.settings-panel .select-menu button{font-size:11px}.settings-foot{gap:9px;margin-top:15px;padding-top:13px}.settings-foot .setting-switch{flex:1;justify-content:space-between;font-size:10px!important}.settings-foot .transpose-control{width:100%;justify-content:flex-end}.select-trigger{padding:0 9px!important;gap:7px;font-size:11px}.library-filters{grid-template-columns:1fr;gap:8px}.chosen-tag{font-size:10px;padding-left:8px}.tag-label{font-size:11px}.music-commands{gap:5px}.music-commands button{padding:0 10px}.topbar nav{gap:2px}.topbar nav>button{width:34px}.select-menu{font-size:11px}.reading-sample{width:30px;flex-basis:30px}}
@media print{.settings-panel,.select-menu{display:none!important}}
/* Accompaniment sits beside the transport, using the same illustrated controls. */
.backing-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 13px;padding-bottom:13px;border-bottom:1px dashed #ccd7ce;font-family:Playpen,sans-serif}
.playback-modes{display:flex;align-items:center;gap:4px;padding:4px;background:#e9efea;border:1px solid #d4dfd5;border-radius:13px}
.playback-modes button{height:44px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid transparent;border-radius:9px;color:#738173;background:transparent;font:inherit;font-size:11px;font-weight:550;white-space:nowrap}
.playback-modes button[aria-pressed="true"]{background:#fffdf3;border-color:#d4c78e;color:#536348;box-shadow:0 2px #c7d1ba30}
.playback-modes button:hover{background:#fff9}.playback-modes svg{width:23px;height:23px;flex:none}
.backing-choice{height:44px;display:flex;align-items:center;gap:9px;min-width:0;padding:0 12px;background:#fff;border:1px solid #becfc2;border-radius:9px 12px 9px 10px;color:#526d5b;font-family:Playpen,sans-serif;font-size:11px;text-align:left}
.backing-choice>span:not([data-icon]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.backing-choice svg{width:23px;height:23px;flex:none}.backing-choice>span:last-child svg{width:13px;height:13px}.backing-choice:hover{background:#f5f9ee;border-color:#94b19a}
.playback-dock .tempo-control{height:44px;min-height:44px;padding:0 12px;display:flex;align-items:center;gap:12px;border:1px solid #9aafa5;border-radius:10px;background:#eef4f1;box-shadow:0 2px #78938516}
.playback-dock .tempo-control label{font-size:10px;display:flex;gap:8px;align-items:center;white-space:nowrap;margin:0}.playback-dock .tempo-control label strong{font-size:13px}.playback-dock .tempo-control input{width:95px;margin:0}.playback-dock .tempo-control:focus-within{outline:2px solid #8eac9c;outline-offset:2px}
.topbar nav button svg{width:21px;height:21px}.control-icon svg{width:24px!important;height:24px!important}.setting-switch svg{width:24px;height:24px}.setting-switch>span[data-icon]{align-items:center}
.editor-backing{padding:14px 16px;margin:0 0 22px;border:1px solid #d2dfd0;border-radius:11px 14px 11px 13px;background:#f6f9f2}.editor-backing h4{font-size:13px;margin:0;color:#67805f}.editor-backing .section-heading{margin:0 0 12px;gap:12px}.editor-backing .backing-choice{max-width:70%;background:#fff}.backing-settings{display:flex;align-items:center;flex-wrap:wrap;gap:15px}.backing-settings>label:first-child{flex:1;min-width:180px}.backing-settings .check-label{font-size:11px;flex:none;margin-top:21px}.backing-settings .check-label input{width:17px;height:17px}
.style-dialog{max-width:1040px!important}.style-dialog .dialog-top h2{font-size:25px}.style-dialog .dialog-top p{margin:6px 0 0;font-size:11px;color:#8a997f}.style-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;margin:18px 0 0}.style-status{font-size:11px;color:#9b7953;margin:10px 0;min-height:16px}.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-bottom:12px}.style-card{border:1px solid #d0dccb;border-radius:12px 15px 12px 13px;background:#f8faf4;display:flex;align-items:center;position:relative;min-width:0}.style-card.selected{border-color:#8cac7a;background:#eff6e8;box-shadow:inset 0 0 0 1px #afc69e}.choose-style{padding:14px 38px 14px 11px;display:flex;align-items:center;gap:11px;width:100%;min-width:0;text-align:left;min-height:98px}.style-art{display:grid;place-items:center;flex:0 0 38px;width:38px;height:48px;background:#fffaf0;border:1px solid #e5dcc0;border-radius:10px;transform:rotate(-4deg)}.style-art svg{width:30px;height:30px}.style-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.style-copy>small{font-size:9px;color:#8b997d}.style-copy>strong{font-size:12px;line-height:1.5;color:#536e4f;font-weight:650;overflow-wrap:anywhere}.style-copy>span{font-size:8px;color:#92a187}.style-selected{position:absolute;top:9px;right:8px;display:none;color:#779865}.style-selected svg{width:13px;height:13px}.selected .style-selected{display:flex}.style-audition{height:36px;width:30px;position:absolute;bottom:14px;right:5px;display:grid;place-items:center;background:#edf3e7;border:1px solid #c5d4b9;border-radius:9px;color:#789466}.style-audition svg{width:13px;height:13px}.style-audition:hover,.style-audition.listening{background:#f1d87b;color:#7b6937;border-color:#d6b95a}.style-empty{grid-column:1/-1;padding:35px 12px;text-align:center;font-size:13px;color:#8e9b81}
.has-forms .chord-lane{margin-top:20px}.form-mark{position:absolute;top:-19px;left:0;font-size:12px;font-weight:650;color:#626f5a;line-height:18px;max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.4px}
@media(max-width:1050px){.playback-modes{flex:1;justify-content:space-between}.playback-modes button{flex:1;padding:0 9px}.backing-choice{max-width:250px}.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.playback-dock .tempo-control input{width:70px}}
@media(max-width:650px){.backing-bar{gap:9px;margin-bottom:10px;padding-bottom:11px}.playback-modes{flex:0 0 100%;width:100%;gap:2px;padding:3px}.playback-modes button{flex:1;font-size:8px;padding:0 4px;gap:4px;min-width:0}.playback-modes svg{width:19px;height:19px}.backing-choice{height:44px;font-size:10px;max-width:calc(100% - 76px)}.playback-dock .transport-left{flex-wrap:wrap;justify-content:center;gap:7px}.playback-dock .tempo-control{gap:8px;padding:0 10px}.playback-dock .tempo-control label{font-size:9px}.playback-dock .tempo-control label strong{font-size:11px}.playback-dock .tempo-control input{width:76px}.topbar nav button svg{width:22px;height:22px}.style-toolbar{grid-template-columns:1fr;gap:9px}.style-grid{grid-template-columns:1fr}.style-dialog .dialog-top h2{font-size:19px}.style-card .choose-style{min-height:90px}.style-copy>strong{font-size:12px}.editor-backing{padding:12px}.editor-backing .section-heading{align-items:flex-start}.editor-backing .backing-choice{max-width:75%;font-size:9px}.backing-settings{gap:11px}.backing-settings>label:first-child{flex-basis:100%}.backing-settings .check-label{margin:0;font-size:9px}.form-mark{font-size:10px}}
@media print{.backing-bar,.style-dialog{display:none!important}.has-forms .chord-lane{margin-top:16px}.form-mark{font-size:10px;top:-16px}}
.studio-dialog .library-search{flex-direction:row;gap:10px;height:44px;min-height:44px}
.style-toolbar{margin:18px 24px 0}.style-status{margin:10px 24px}.style-grid{padding:0 24px 24px}
@media(max-width:650px){.style-toolbar{margin:14px 14px 0}.style-status{margin:9px 14px}.style-grid{padding:0 14px 18px}}
.brand-instrument{display:flex;width:37px;flex:0 0 37px;transform:rotate(-9deg)}.brand-instrument svg{width:37px;height:40px}
@media(max-width:650px){.brand-instrument{width:26px;flex-basis:26px}.brand-instrument svg{width:26px;height:32px}}
/* Rehearsal marks replace the row number, beside the opening barline. */
.has-forms .chord-lane{margin-top:0;margin-bottom:12px}
#score .form-mark{top:auto;bottom:calc(100% + 5px);left:calc(var(--form-position,0%) - var(--measure-gutter) + 2px);transform:translateX(-50%);max-width:54px;line-height:16px;padding:3px 6px;border:1px solid #8a98846b;border-radius:5px 7px 5px 6px;background:#e2e6dc7d;color:#5f7057;font-size:10px;font-weight:650;letter-spacing:.1px;z-index:4;box-sizing:border-box}
.repeat-start .barline-start{left:calc(-1 * var(--measure-gutter) - 5px);border-left-width:2px;border-right-width:5px}
:is([data-view="notation"],[data-view="plain"],[data-view="symbols"]) .note-content{width:min(100%,calc(100cqw * var(--onset-ratio,.25) - var(--onset-inset,0px) - 8px))}
.metallo-illustration .metallo-bar.striking .bar-face{stroke:#202a24;stroke-width:3.5px}
@media print{#score .form-mark{font-size:9px;line-height:14px;padding:2px 5px}.metallo-illustration .metallo-bar.sounding .bar-face{stroke:#50594e;stroke-width:1.8px}}
/* The teacher chooses the rhythm; listeners choose only which parts they hear. */
.playback-dock .transport{padding-top:0}.playback-mode-control{width:236px;flex:0 0 236px}.playback-mode-control .select-control{font-size:11px}.playback-mode-control .select-trigger{background:#fffdf2!important;border-color:#cec395!important}
.editor-title{display:flex;align-items:center;gap:13px}.editor-title>[data-icon]{display:flex;align-items:center;justify-content:center;flex:0 0 41px;width:41px;height:44px;border-radius:12px;background:#f4f5e7;border:1px solid #dce3cc;transform:rotate(-4deg)}.editor-title>[data-icon] svg{width:29px;height:29px}.editor-title h2{margin:0}
.field-caption{display:inline-flex;align-items:center;gap:7px;min-height:23px}.field-caption>[data-icon]{display:inline-flex;align-items:center}.field-caption svg{width:21px;height:21px}.editor-section>h3{display:flex;align-items:center;gap:9px}.editor-section>h3>[data-icon]{display:inline-flex}.editor-section>h3 svg{width:23px;height:23px}
.tag-bank{display:block}.tag-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:7px;max-height:260px;overflow-y:auto;overscroll-behavior:contain;padding:1px 3px 1px 1px}.custom-tag-entry{display:flex;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed #d3dec9}.custom-tag-entry input{flex:1;min-width:0;height:44px;margin:0!important;font-family:Playpen,sans-serif;font-size:12px;background:#fff;border:1px solid #c5d4ba;border-radius:8px}.custom-tag-entry button{width:44px;flex:0 0 44px;justify-content:center;padding:0;background:#e4efda;border-color:#b7cba4}.custom-tag-entry button svg{width:22px;height:22px}.tag-error{display:block;font-size:10px;color:#a56555;margin-top:6px}.tag-error:empty{display:none}
.backing-settings .check-label:has(input:disabled){opacity:.45;cursor:default}
@media(max-width:1050px){.playback-dock .transport{flex-wrap:wrap;gap:10px}.playback-dock .transport-left{flex-wrap:wrap;justify-content:center;gap:8px}.playback-dock .transport-right{justify-content:center;gap:8px}.playback-mode-control{width:222px;flex-basis:222px}}
@media(max-width:650px){.playback-dock .transport-left{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%}.playback-dock .play-button{width:100%}.playback-dock #restartButton{min-width:75px}.playback-mode-control{width:100%;min-width:0;grid-column:1}.playback-dock .tempo-control{grid-column:2;padding:0 8px;gap:5px;min-width:0}.playback-dock .tempo-control label{font-size:0;gap:0}.playback-dock .tempo-control label strong{font-size:11px}.playback-dock .tempo-control input{width:62px}.playback-mode-control .select-trigger{font-size:10px}.playback-dock .transport-right{width:100%;display:flex;justify-content:center}.editor-title{gap:8px;min-width:0}.editor-title>[data-icon]{width:31px;flex-basis:31px;height:36px}.editor-title>[data-icon] svg{width:24px;height:24px}.editor-title h2{font-size:18px!important}.field-caption{gap:5px}.field-caption svg{width:18px;height:18px}.tag-options{grid-template-columns:1fr}.custom-tag-entry input{font-size:10px}}

/* Boxed checkbox choices share the height and baseline of adjacent selects. */
.studio-dialog .option-toggle{min-height:44px;height:44px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:0 12px;border:1px solid #c6d4c5;border-radius:9px 11px 9px 10px;background:#fff;box-shadow:0 2px #8ba28d14;cursor:pointer;color:#71866a;line-height:1.3;transition:background .15s,border-color .15s}
.studio-dialog .option-toggle input{width:17px;height:17px;flex:0 0 17px;margin:0;accent-color:#658b73;cursor:inherit}
.studio-dialog .option-toggle>[data-icon]{display:flex;flex:0 0 21px}.studio-dialog .option-toggle svg{width:21px;height:21px}
.studio-dialog .option-toggle:has(input:checked){background:#edf4e9;border-color:#a7c0a3;color:#506d51}.studio-dialog .option-toggle:hover:not(:has(input:disabled)){border-color:#94b496;background:#f1f6ec}.studio-dialog .option-toggle:focus-within{outline:2px solid #8eac9c;outline-offset:2px}
.backing-settings{align-items:flex-end}.backing-settings .option-toggle{margin:0;flex:1;min-width:190px;align-self:flex-end}.backing-settings>label:first-child{flex:1.3}.note-entry .option-toggle{align-self:flex-end;margin:0}
@media(max-width:650px){.backing-settings>label:first-child{flex:1 0 100%}.backing-settings .option-toggle{min-width:0;flex:1 1 42%;font-size:9px;gap:6px;padding:0 8px}.backing-settings .option-toggle>[data-icon]{display:none}.note-entry .option-toggle{font-size:9px;padding:0 8px;gap:6px}.note-entry .option-toggle>[data-icon]{display:none}}
.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px}.preview-heading h4{margin:0!important;padding:0!important}.preview-heading .option-toggle{font-size:10px;min-width:0}.preview-heading+.editor-live-preview{padding-top:0}.editor-live-preview>.preview-heading{border-bottom:1px solid #e2e8df}
.style-toolbar{grid-template-columns:minmax(130px,1.2fr) minmax(125px,.8fr) minmax(165px,1.1fr) minmax(150px,1fr) 44px;gap:10px}.style-toolbar>.library-search{grid-column:1/-1}.style-toolbar .select-control{min-width:0}.style-toolbar .select-trigger{font-size:10px}.style-bpm-range{display:flex;align-items:center;gap:5px;height:44px;border:1px solid #c8d6c6;background:#fff;border-radius:9px;padding:0 7px}.studio-dialog .style-bpm-range input{min-width:0;width:100%;height:40px;margin:0;padding:0 3px;border:0;background:none;font-family:Playpen,sans-serif;font-size:10px}.style-bpm-range>span{color:#9aaa91}.style-bpm-range small{font-size:9px;color:#8a9c80}.style-toolbar #styleReset{width:44px;height:44px;display:grid;place-items:center;padding:0}.style-toolbar #styleReset svg{width:21px;height:21px}
#score .barline.double{width:13px;border-left:3px solid #4e5352;border-right:6px solid #4e5352;background:none;right:calc(-1 * var(--measure-gutter) - 3px)}
#score .repeat-start .barline-start{width:13px;background:none;border-left:6px solid #4e5352;border-right:3px solid #4e5352;left:calc(-1 * var(--measure-gutter) - 11.5px)}
.ending-lane{position:relative;height:30px}.volta-bracket{position:absolute;left:calc(-1 * var(--measure-gutter));right:calc(-1 * var(--measure-gutter));top:0;height:22px;border-top:2px solid #4e5352;padding:2px 8px;color:#4e5352;font-size:12px;font-weight:650;line-height:18px}.volta-start::before,.volta-end::after{content:'';position:absolute;top:-2px;width:0;height:11px;border-left:2px solid #4e5352}.volta-start::before{left:0}.volta-end::after{right:0}#score .has-endings .form-mark,#score .has-endings .measure-number{bottom:calc(100% + 32px)}
@media screen{#score .beat-row{font-size:clamp(14px,1.2vw,16px)}}
@media(max-width:850px){.style-toolbar{grid-template-columns:1fr 1fr}.style-toolbar .style-bpm-range{grid-column:1}.style-toolbar #styleReset{justify-self:end}.preview-heading{padding:10px;gap:8px}.preview-heading .option-toggle{font-size:9px;padding:0 8px}}
@media print{.ending-lane{height:24px}.volta-bracket{font-size:10px;height:19px}#score .has-endings .form-mark,#score .has-endings .measure-number{bottom:calc(100% + 26px)}}
.volta-start{left:calc(-1 * var(--measure-gutter) + 3px)}.volta-end{right:calc(-1 * var(--measure-gutter) + 3px)}
/* Every style has its own musical illustration, with room to recognize it. */
.style-card{background:#fcfdf9;border-color:#d7e1d1;border-radius:14px 18px 14px 16px}.style-card.selected{background:#f0f6e9}.choose-style{min-height:116px;padding:12px 38px 12px 9px;gap:10px}.style-art{flex:0 0 76px;width:76px;height:78px;border:0;border-radius:0;background:none;transform:none;overflow:visible}.style-art svg{display:block;width:100%;height:100%;overflow:visible}.style-copy>strong{font-size:12px;line-height:1.5}.style-audition{border-radius:50%;width:30px;height:30px;right:7px;bottom:12px;background:#f3f6ee}.backing-choice-art{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:34px}.backing-choice .backing-choice-art svg{width:38px;height:34px;overflow:visible}
@media(max-width:650px){.style-art{flex-basis:74px;width:74px;height:76px}.style-card .choose-style{min-height:112px;gap:12px}.backing-choice .backing-choice-art{flex-basis:31px;width:31px}.backing-choice .backing-choice-art svg{width:31px;height:30px}}
/* Short score pages and a transport that reads from left to right. */
.score-paper{scroll-margin-top:18px}
.score-pagination{order:3;display:flex;align-items:center;justify-content:center;gap:3px;width:max-content;max-width:100%;margin:12px auto 0;padding:3px;border:1px solid #c8d5cb;border-radius:10px 12px 10px 11px;background:#f4f8f4;box-shadow:0 2px #71908012;font-family:Playpen,sans-serif}
.score-pagination[hidden]{display:none}
.score-pagination button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;border:1px solid #d0dbd2;border-radius:9px;background:#fffefa;color:#486456;font:600 11px Playpen,sans-serif}
.score-pagination button:hover:not(:disabled){background:#e7f0e8;border-color:#8aa590}
.score-pagination button:disabled{opacity:.35;cursor:default}
.score-pagination button:focus-visible{outline:2px solid #648772;outline-offset:2px}
.score-page-label{min-width:48px;text-align:center;font-size:11px;font-weight:600;color:#5a7162}
.page-arrow{display:flex}.page-arrow svg{width:16px;height:16px}.page-arrow-back{transform:rotate(90deg)}.page-arrow-next{transform:rotate(-90deg)}
#score .measure.row-start:first-child:not([data-measure-index="0"]) .measure-number{display:block}
.brand-instrument{transform:none}
.playback-dock{max-width:1180px;padding:14px 16px;background:#f8faf8}
.playback-dock .transport{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:11px}
.transport-group{display:flex;align-items:center;gap:8px;min-width:0;flex:0 0 auto}
.transport-divider{display:block;align-self:center;height:28px;flex:0 0 1px;width:1px;background:#c9d6ce}
.playback-dock .transport-button,.playback-dock .play-button{height:44px;min-height:44px;padding:0 11px;white-space:nowrap;font-size:11px}
.playback-dock .play-button{min-width:126px}
.playback-dock .tempo-control{flex:0 0 auto;gap:9px;padding:0 10px;margin:0}
.playback-dock .tempo-control input{width:74px}
.playback-dock .playback-mode-control{flex:0 0 224px;width:224px;min-width:0}
.playback-mode-control .control-icon,.playback-mode-control .control-icon svg{width:30px;height:30px;flex-basis:30px}
.playback-mode-control .select-trigger{padding-left:8px;gap:8px;background:#fffefa!important;border-color:#c8d5cb!important}
.playback-mode-control .select-menu .control-icon,.playback-mode-control .select-menu .control-icon svg{width:34px;height:34px;flex-basis:34px}
.playback-mode-control .select-menu [role="option"]{min-height:54px;gap:10px}
@media(max-width:1150px){.playback-dock .transport{flex-wrap:wrap;gap:10px 16px}.transport-divider{display:none}.playback-dock .transport-group{gap:8px}}
@media(max-width:650px){
 .playback-dock{padding:12px;width:calc(100% - 10px)}.playback-dock .transport{gap:12px;width:100%}.transport-play{flex-basis:100%}.playback-dock .transport-play .play-button{width:100%}
 .transport-navigation{flex:1 1 100%}.transport-navigation .transport-button{flex:1}.playback-dock .tempo-control{flex:1 1 100%;justify-content:space-between;padding:0 12px}.playback-dock .tempo-control label{font-size:10px;gap:8px}.playback-dock .tempo-control label strong{font-size:13px}.playback-dock .tempo-control input{width:42%;max-width:160px}
 .transport-audio{flex:1 1 100%;width:100%}.playback-dock .playback-mode-control{width:auto;flex:1 1 auto}.playback-mode-control .select-trigger{font-size:10px}.transport-audio #metronomeButton{width:44px;flex:0 0 44px;padding:0}.transport-audio #metronomeButton>span:last-child{display:none}.transport-audio #metronomeButton svg{width:19px;height:19px}
}
@media print{.score-pagination{display:none!important}}
/* One quiet menu for score actions. */
.topbar{position:relative;z-index:20}.topbar nav{gap:16px}
.management-menu{position:relative}.topbar nav #manageButton{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 12px;border:1px solid #c5d4c9;border-radius:10px 12px 10px 11px;background:#f4f8f3;font:600 11px Playpen,sans-serif;color:#496557}
.topbar nav #manageButton svg{width:22px;height:22px}.topbar nav #manageButton .manage-chevron svg{width:13px;height:13px}.topbar nav #manageButton[aria-expanded="true"]{background:#e9f1e9;border-color:#93af9b}
.manage-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:50;min-width:244px;padding:7px;background:#fffefa;border:1px solid #c8d6ca;border-radius:13px 16px 13px 14px;box-shadow:0 10px 30px #2f4c3e26}
.manage-menu[hidden],.manage-menu [hidden]{display:none!important}.topbar nav .manage-menu button{height:46px;width:100%;padding:0 11px;display:flex;justify-content:flex-start;align-items:center;gap:11px;border-radius:8px;text-align:left;font:600 12px Playpen,sans-serif!important;color:#4b6657;white-space:nowrap}
.topbar nav .manage-menu button svg{width:25px;height:25px}.topbar nav .manage-menu button:hover,.topbar nav .manage-menu button:focus-visible{background:#edf4ec;outline:none}.manage-rule{height:1px;background:#e1e9df;margin:5px 8px}
.setting-label{display:flex;align-items:center;gap:7px}.setting-label>[data-icon]{display:flex}.setting-label svg{width:22px;height:22px}
.learning-instrument-section{max-width:420px}.learning-instrument-section label{display:block}.learning-instrument-section .select-trigger{width:100%}
.playback-dock .tempo-control{box-sizing:border-box;width:218px;flex:0 0 218px;gap:8px}.playback-dock .tempo-control label{flex:1;min-width:0;gap:7px}.playback-dock .tempo-control label strong{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap}.playback-dock #tempoValue{display:inline-block;width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.playback-dock #tempo{appearance:none;-webkit-appearance:none;flex:0 0 72px;width:72px;height:6px;border:0;border-radius:10px;background:linear-gradient(to right,#7d9e88 var(--tempo-fill,35%),#dce6dd var(--tempo-fill,35%));box-shadow:inset 0 1px 1px #4a65551c;cursor:pointer}
.playback-dock #tempo::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:2px solid #fffdf0;border-radius:50%;background:#d8ba5e;box-shadow:0 1px 4px #506b4c55}
.playback-dock #tempo::-moz-range-thumb{width:13px;height:13px;border:2px solid #fffdf0;border-radius:50%;background:#d8ba5e;box-shadow:0 1px 4px #506b4c55}.playback-dock #tempo:focus-visible{outline:2px solid #86a78f;outline-offset:6px}
@media(min-width:651px){.topbar nav>button{font-size:11px!important;gap:7px;padding:8px 3px}.topbar nav>button>span:last-child:not([data-icon]){display:inline}}
@media(max-width:650px){.topbar nav{gap:6px}.topbar nav #manageButton{font-size:10px;padding:0 8px;gap:5px}.topbar nav #manageButton svg{width:20px;height:20px}.topbar nav .manage-menu button{font-size:12px!important}.manage-menu{right:-50px;min-width:235px}.playback-dock .tempo-control{flex:1 1 100%;width:100%}.playback-dock #tempo{flex:0 0 42%;width:42%;max-width:160px}}
@media(min-width:1151px){.playback-dock .transport{gap:9px}.playback-dock .playback-mode-control{width:216px;flex-basis:216px}}
.learning-instrument-field{display:block}.learning-instrument-field .select-control{max-width:420px}.editor-live-preview+.editor-backing{margin-top:24px}
.count-in-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;background:#edf3ea44;backdrop-filter:blur(1px)}
.count-in-overlay[hidden]{display:none}.count-in-card{max-width:calc(100vw - 32px);padding:24px 28px 28px;border:2px solid #9ab29c;border-radius:23px 28px 23px 25px;background:#fffef7f5;box-shadow:0 10px 45px #35544330;text-align:center;font-family:Playpen,sans-serif}
.count-in-card>[data-icon]{display:inline-flex}.count-in-card>[data-icon] svg{width:36px;height:36px}.count-in-card>p{font-size:24px;font-weight:650;color:#496353;margin:10px 0 22px}
.count-in-beats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:550px}
.count-in-beats>span{display:grid;place-items:center;width:60px;height:68px;border:1.5px solid #cbd8c8;border-radius:14px 16px 14px 15px;background:#f4f7ef;color:#8b9c87;font-size:36px;font-weight:750;line-height:1;transition:background .08s,color .08s,border-color .08s}
.count-in-beats>span.counted{background:#e8efdf;color:#758a6e}.count-in-beats>span.current{background:#f2d875;border-color:#aa934d;color:#405848;box-shadow:0 3px #b7a36526}
@media(max-width:650px){.count-in-card{padding:20px 18px 24px}.count-in-card>p{font-size:21px}.count-in-beats{gap:7px}.count-in-beats>span{width:49px;height:59px;font-size:31px}}
@media print{.count-in-overlay{display:none!important}}
.topbar nav #manageButton,.topbar nav #manageButton[aria-expanded="true"]{border:0;border-radius:0;background:transparent;box-shadow:none;padding:8px 3px;color:#59675e;font-weight:550}
.topbar .nav-separator{width:1px;flex:0 0 1px;height:22px;background:#c6ceca;border:0;margin:0 3px}
@media(max-width:650px){.topbar nav #manageButton{padding:8px 3px}.topbar .nav-separator{margin:0 1px}}
/* Authored details share one paper colour and one field baseline. */
#editorDialog .select-trigger,#editorDialog .select-trigger:hover{background:#fffef9!important;border-color:#cbd2bd!important;border-radius:8px!important;color:#4e5a44!important;box-shadow:none}
#editorDialog .level-field{display:block;min-width:0;padding:0;border:0;margin:0}
#editorDialog .level-field legend{padding:0;margin:0 0 7px;height:23px;line-height:23px}
#editorDialog .level-field #levelStars{height:44px;align-items:center;gap:2px}
#editorDialog .level-field #levelStars button{height:44px;min-height:44px;line-height:1;padding:0 2px}
#detailsSection .tag-picker{border:0;padding-top:0;align-self:start}
#detailsSection .tag-label{min-height:23px;margin:0 0 7px;line-height:23px}
#detailsSection .tag-add{width:100%;height:44px;border:1px solid #cbd2bd;border-radius:8px;background:#fffef9}
#detailsSection .tag-chips{margin:8px 0 0}
.notation-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.notation-heading h3{display:flex;align-items:center;gap:9px;min-width:0;margin:0;line-height:1.5}
.notation-heading h3>[data-icon]{display:inline-flex}.notation-heading h3 svg{width:23px;height:23px}
#editorDialog .notation-meter{flex:0 0 120px;width:120px;margin:0;gap:0}
.note-entry>label{flex:1;min-width:120px}
.playback-mode-control .control-icon svg{width:28px!important;height:28px!important}
@media(max-width:650px){#editorDialog .notation-meter{width:108px;flex-basis:108px}.notation-heading{gap:10px}.notation-heading h3{font-size:14px}#editorDialog .level-field #levelStars{gap:1px}}
#editorDialog .learning-instrument-field .select-control{max-width:none}
#editorDialog .level-field legend{font-weight:600}

/* Breath marks share the timeline, without taking rhythmic space. */
.breath-mark{position:absolute;top:-30px;width:15px;height:25px;transform:translateX(-50%);color:#3d4738;z-index:6;pointer-events:none}
.breath-mark svg{display:block;width:100%;height:100%;overflow:visible}
.music-commands .breath-command{display:inline-flex;align-items:center;gap:7px}
.breath-command svg{width:11px;height:20px;fill:currentColor}
@media print{.tie-overlay path{stroke-width:3px}.breath-mark{print-color-adjust:exact}}

#editorDialog .backing-settings .editor-tempo{flex:0 0 164px;min-width:0}
.tempo-input{height:44px;display:flex;align-items:center;gap:8px;border:1px solid #cbd2bd;border-radius:8px;background:#fffef9;padding-right:12px}
#editorDialog .tempo-input input{width:100%;min-width:0;height:42px;border:0;background:transparent;border-radius:8px;padding:0 12px;box-shadow:none;font-variant-numeric:tabular-nums}
.tempo-input>span{font-size:11px;color:#657563}
.tempo-input:focus-within{outline:2px solid #82a79b;outline-offset:2px}
@media(max-width:650px){#editorDialog .backing-settings .editor-tempo{flex:1;min-width:140px}}

/* The writing, entry helper and live paper form a single work area. */
.chroma-editor-box{border:1px solid #cbd7d0;border-radius:14px;background:#f7faf8;padding:20px}
#musicSection .chroma-editor-box .notation-heading{margin-bottom:18px}
.pitch-entry-box{min-width:0;margin:0 0 20px;padding:12px 14px 14px;border:1px solid #d1dbd4;border-radius:10px;background:#fff}
.pitch-entry-box legend{display:inline-flex;align-items:center;gap:7px;padding:0 7px;font-size:12px;font-weight:650;color:#526c5f}
.pitch-entry-box legend [data-icon]{display:inline-flex}.pitch-entry-box legend svg{width:21px;height:21px}
.pitch-entry-box .note-entry{margin:0 0 12px}.pitch-entry-box .entry-keys{margin:0}
.chroma-editor-box>.editor-live-preview{margin-bottom:0}
.chroma-editor-box+.editor-backing{margin-top:24px}
[data-view="colors"] #score .tile-names{display:none}
[data-view="colors"] #score .rest .tile-names{display:flex}
.reading-colors{min-height:24px}
@media(max-width:650px){.chroma-editor-box{padding:13px}.pitch-entry-box{padding:10px}.chroma-editor-box .notation-heading h3{font-size:14px}}

/* ColorSym keeps the established palettes and adds a second recognition cue. */
.app-version{align-self:center;font-family:Playpen,sans-serif;font-size:10px;line-height:1;padding:5px 7px;border:1px solid #c8d4cd;border-radius:6px;color:#587064;background:#f0f6f2;letter-spacing:0;font-weight:600}
.colorsym-symbol{display:block;width:60px;height:60px;max-width:100%;flex:0 0 60px;overflow:visible}
.colorsym-ink{fill:#242e28;stroke:#fffef9;stroke-width:2;stroke-linejoin:round;paint-order:stroke fill}
.colorsym-accidental{font-family:Playpen,sans-serif;font-size:18px;font-weight:700;fill:#242e28;stroke:#fffef9;stroke-width:2;paint-order:stroke fill}
:is([data-view="colorsym"],[data-view="colorsym-names"]) #score .note-content{gap:1px;padding:5px 0}
[data-view="colorsym"] #score .tile-names{display:none}
:is([data-view="colorsym"],[data-view="colorsym-names"]) #score .symbol-octave{color:#26392d;-webkit-text-stroke:1px #fff;flex:0 0 16px}
:is([data-view="colorsym"],[data-view="colorsym-names"]) #score .poly-note{flex-direction:column;gap:0;padding:4px 0}
.colorsym-bar-symbol{pointer-events:none;overflow:visible}
.colorsym-bar-symbol .colorsym-ink{stroke-width:3;fill:#26322a}
.metallo-bar:not(.shown-note) .colorsym-bar-symbol,.metallo-bar.muted .colorsym-bar-symbol{opacity:.38}
.colorsym-credit{margin:12px 0 0;color:#677c6e;font-size:10px;line-height:1.7}
.colorsym-credit a{color:#466a55;text-underline-offset:2px}.colorsym-credit>span{display:block}
.reading-sample>.colorsym-symbol{width:26px;height:23px;flex:0 0 23px}
.reading-colorsym .colorsym-symbol{height:30px;flex-basis:30px;width:30px}
.print-colorsym-credit{display:none}
/* Larger notation symbols; their timing anchors and measures stay in place. */
[data-view="mixed"] #score .rhythm-unit{width:var(--rhythm-fit-width,46px);flex:0 0 var(--rhythm-fit-width,46px)}
[data-view="mixed"] #score .rhythm-glyph{width:var(--rhythm-fit-width,46px);max-width:46px;height:68px;flex:none}
:is([data-view="notation"],[data-view="plain"]) #score .rhythm-unit{width:var(--rhythm-fit-width,54px);flex:0 0 var(--rhythm-fit-width,54px)}
:is([data-view="notation"],[data-view="plain"]) #score .rhythm-glyph{width:var(--rhythm-fit-width,54px);max-width:54px;height:78px}
[data-view="symbols"] #score .rhythm-unit{width:var(--rhythm-fit-width,64px);flex:0 0 var(--rhythm-fit-width,64px)}
[data-view="symbols"] #score .rhythm-glyph{width:var(--rhythm-fit-width,64px);max-width:64px;height:90px}
[data-view="symbols"] #score .tile-names:has(.symbol-octave),[data-view="symbols"] #score .poly-note>.symbol-octave{top:calc(50% + 33px)}
[data-view="mixed"] #score .poly-note .rhythm-symbols{width:46px;flex:0 1 46px}
@media print{
 .app-version{font-size:8px}.colorsym-symbol{width:44px;height:44px;flex-basis:44px}
 .print-colorsym-credit:not([hidden]){display:block;font-size:6.5pt;color:#4f6154;margin:6px 12px}
 :is([data-view="notation"],[data-view="plain"],[data-view="symbols"]) #score .rhythm-unit{width:44px;flex-basis:44px}
 :is([data-view="notation"],[data-view="plain"],[data-view="symbols"]) #score .rhythm-glyph{width:44px;max-width:44px;height:62px}
}
@media(max-width:650px){.stage-brand{gap:6px}.app-version{font-size:8px;padding:4px}.colorsym-symbol{width:52px;height:52px;flex-basis:52px}}

/* Keep each header action in its own slot at every screen width. */
body .topbar{flex-wrap:nowrap;gap:12px}
.topbar .stage-brand{min-width:0;flex:0 1 auto;white-space:nowrap}
.topbar nav[aria-label="Εργαλεία παρτιτούρας"]{flex:0 0 auto;flex-wrap:nowrap;gap:10px}
.topbar nav[aria-label="Εργαλεία παρτιτούρας"]>button,
.topbar nav[aria-label="Εργαλεία παρτιτούρας"] #manageButton{
 width:auto;min-width:44px;height:44px;min-height:44px;flex:0 0 auto;
 padding:0 8px!important;gap:7px;font-size:11px!important;white-space:nowrap
}
.topbar nav[aria-label="Εργαλεία παρτιτούρας"]>button>span[data-icon],
.topbar nav[aria-label="Εργαλεία παρτιτούρας"] #manageButton>span[data-icon]:first-child{
 display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px
}
.topbar .management-menu{flex:0 0 auto}
@media(max-width:1080px){
 .topbar nav[aria-label="Εργαλεία παρτιτούρας"]{gap:6px}
 .topbar nav[aria-label="Εργαλεία παρτιτούρας"]>button,
 .topbar nav[aria-label="Εργαλεία παρτιτούρας"] #manageButton{
  width:44px;min-width:44px;padding:0!important;gap:0;font-size:0!important
 }
 .topbar nav[aria-label="Εργαλεία παρτιτούρας"]>button>span:not([data-icon]),
 .topbar nav[aria-label="Εργαλεία παρτιτούρας"] #manageButton>span:not([data-icon]),
 .topbar nav[aria-label="Εργαλεία παρτιτούρας"] #manageButton>.manage-chevron{display:none}
 .topbar .nav-separator{display:block;margin:0 2px}
}
@media(max-width:450px){
 body .topbar{gap:8px!important}
 .topbar nav[aria-label="Εργαλεία παρτιτούρας"]{gap:3px}
 .topbar .stage-brand{gap:5px}
}

/* Reading choices: a visual layout choice and short, independent menus. */
.reading-settings{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;margin:4px 0 22px;align-items:stretch}
.settings-panel .reading-card{min-width:0;margin:0;padding:14px;border:1px solid #c8d7cd;border-radius:14px 18px 14px 16px;background:#ffffffa6}
.reading-card legend{display:flex;align-items:center;gap:7px;padding:0 6px;color:#4d6958;font:600 13px Playpen,sans-serif}
.reading-card legend [data-icon]{display:inline-flex}.reading-card legend svg{width:19px;height:19px}
.reading-layout-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:100%;align-content:center}
.settings-panel .reading-layout-button{min-width:0;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 6px;border:1.5px solid #d1ddd2;border-radius:10px 13px 10px 12px;background:#fff;color:#617565;font:500 11px Playpen,sans-serif;line-height:1.6;text-align:center}
.reading-layout-button>svg{width:88px;max-width:100%;height:50px}.reading-layout-button text{font:700 9px Playpen,sans-serif;fill:#fff;stroke:#634d47;stroke-width:.6px;paint-order:stroke fill}
.settings-panel .reading-layout-button[aria-pressed="true"]{background:#eaf2e7;border-color:#6d927c;color:#355b47;box-shadow:inset 0 0 0 1px #6d927c;font-weight:650}
.settings-panel .reading-layout-button:hover{border-color:#91ac98}.settings-panel .reading-layout-button:focus-visible{outline:2px solid #7fa79c;outline-offset:3px}
.reading-details{display:flex;flex-direction:column;justify-content:center;gap:12px}
.settings-general{border-top:1px dashed #d1dfce;padding-top:18px}
[data-colorsym="true"]:is([data-view="mixed"],[data-view="notation"],[data-view="symbols"],[data-view="plain"]) #score .colorsym-symbol{width:38px;height:38px;flex:0 0 38px}
[data-colorsym="true"]:is([data-view="mixed"],[data-view="notation"],[data-view="symbols"],[data-view="plain"]) #score .poly-note{flex-direction:column;gap:1px}
[data-colorsym="true"]:is([data-view="mixed"],[data-view="notation"],[data-view="symbols"],[data-view="plain"]) #score .symbol-octave{position:static;transform:none;flex:0 0 16px;color:#26392d;-webkit-text-stroke:1px #fff}
@media(max-width:800px){.reading-settings{grid-template-columns:minmax(0,1fr)}.reading-layout-options{height:auto}.settings-panel .reading-layout-button{min-height:96px}}
@media(max-width:380px){.reading-details{gap:10px}.settings-panel .reading-card{padding:11px}.reading-layout-options{gap:8px}.settings-panel .reading-layout-button{font-size:10px}}
@media print{[data-colorsym="true"] #score .colorsym-symbol{width:32px;height:32px;flex-basis:32px}}

/* Short visual choices, with two matching switch boxes instead of menus. */
.reading-content-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.settings-panel .reading-content-button{min-width:0;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:7px 5px;border:1px solid #cfdbd1;border-radius:9px 12px 9px 11px;background:#fff;color:#647869;font:500 10px Playpen,sans-serif;line-height:1.5;text-align:center}
.settings-panel .reading-content-button[aria-pressed="true"]{border-color:#719781;background:#eaf2e7;color:#345944;box-shadow:inset 0 0 0 1px #719781;font-weight:650}
.settings-panel .reading-content-button:focus-visible{outline:2px solid #7fa79c;outline-offset:3px}
.reading-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.settings-panel .reading-toggle-box{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center;gap:9px!important;height:78px;min-height:78px;min-width:0;margin:0;padding:9px 7px;border:1px solid #cfdbd1;border-radius:9px 12px 9px 11px;background:#fff;color:#58745f;cursor:pointer;font:500 11px Playpen,sans-serif}
.toggle-caption{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.toggle-caption>[data-icon]{display:inline-flex}.reading-toggle-box .toggle-caption svg{width:18px;height:18px}
.reading-toggle-box input{position:absolute;opacity:0;width:1px;height:1px}.reading-toggle-box i{position:relative;display:block;flex:none;width:32px;height:20px;border:1px solid #a9bda9;border-radius:12px;background:#e5ebe3}
.reading-toggle-box i::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#9bb09b;transition:transform .16s,background .16s}
.reading-toggle-box input:checked+i{background:#d5e5ca;border-color:#93b084}.reading-toggle-box input:checked+i::after{transform:translateX(14px);background:#6e9259}
.reading-toggle-box:focus-within{outline:2px solid #8eac9c;outline-offset:3px}.reading-toggle-box:has(input:checked){border-color:#a9c2aa;background:#fbfdf9}
.language-toggle i{background:#dce9d5}
.info-dialog{max-width:520px}.info-dialog h2{display:flex;align-items:center;gap:9px}.info-dialog h2 svg{width:25px;height:25px}.info-dialog .info-version{font-size:12px;color:#687b6c;margin:4px 0 20px}.info-credits{border-top:1px dashed #cfdbd1;padding-top:16px;color:#627566;font-size:12px;line-height:1.9}.info-credits h3{font-size:14px;margin:0 0 7px}.info-credits p{margin:7px 0}.info-credits a{color:#416b54;text-underline-offset:3px}
@media(max-width:380px){.reading-content-options{gap:6px}.settings-panel .reading-content-button{font-size:9px;padding:6px 3px}.reading-toggles{gap:8px}.settings-panel .reading-toggle-box{font-size:10px}.toggle-caption{gap:4px}.reading-toggle-box .toggle-caption svg{width:16px;height:16px}}
@media(prefers-reduced-motion:reduce){.reading-toggle-box i::after{transition:none}}
.reading-content-button .reading-sample{height:40px;flex-shrink:0}.reading-content-button .reading-sample .rhythm-symbols{flex-shrink:0}

/* Display choices live in a compact modal; playback choices stay by Play. */
dialog.settings-dialog{width:min(660px,calc(100vw - 24px));max-width:660px;margin:auto;padding:0;border:1px solid #c6d3cc;border-radius:17px 20px 17px 19px;background:#f7faf7;box-shadow:0 18px 70px #263e3433;overflow:auto}
dialog.settings-dialog:not([open]){display:none!important}
.studio-dialog .dialog-top h2{display:flex;align-items:center;gap:10px}
.studio-dialog .dialog-top h2>[data-icon]{display:inline-flex;flex:none}
.studio-dialog .dialog-top h2 svg{width:26px;height:26px}
.settings-dialog .dialog-top{padding:17px 20px;border-bottom:1px solid #dbe3dc}
.settings-dialog .dialog-top h2{font-size:20px;margin:0}
.settings-body{padding:20px}
.settings-reading{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:stretch}
.reading-selects{display:flex;flex-direction:column;gap:15px;min-width:0}
.reading-quick{display:grid;grid-template-rows:1fr 1fr;gap:15px;align-items:end;min-width:0}
.settings-dialog .setting-field{margin:0;gap:7px;font-size:11px}
.settings-dialog .setting-label{display:flex;align-items:center;gap:7px;min-height:22px;line-height:1.45;color:#607665}
.settings-dialog .setting-label>[data-icon]{display:inline-flex;flex:none}
.settings-dialog .setting-label svg{width:21px;height:21px}
.settings-dialog .select-control{font-size:11px}
.settings-dialog .select-trigger{gap:8px;padding:0 10px!important}
.settings-dialog .reading-toggle-box{flex-direction:row!important;justify-content:space-between;gap:8px!important;height:44px;min-height:44px;padding:0 11px;font-size:11px!important;border-radius:10px 13px 10px 12px}
.settings-dialog .toggle-caption{justify-content:flex-start;gap:6px}
.settings-dialog .reading-toggle-box i{width:32px;height:20px;flex:0 0 32px;border-radius:12px}
.settings-dialog .reading-toggle-box i::after{width:14px;height:14px}
.settings-dialog .reading-toggle-box input:checked+i::after{transform:translateX(12px)}
.settings-dialog .language-toggle{gap:5px;font-size:11px}
.settings-display{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:21px;padding-top:18px;border-top:1px dashed #ccd9ce;align-items:end}
.settings-dialog .beat-switch{justify-content:space-between;height:44px;min-height:44px;border-radius:10px 13px 10px 12px;padding:0 11px}
.beat-digits{font-size:14px;font-weight:650;letter-spacing:3px;color:#68816d}
.settings-track{margin-top:18px!important;padding-top:15px;border-top:1px dashed #ccd9ce}
.settings-track[hidden]{display:none!important}
.score-paper::before{border:1px solid #69756c3d}

.playback-dock{max-width:1180px;padding:10px 12px;margin-top:20px}
.playback-dock .transport{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.playback-dock .transport-group{display:flex;align-items:center;gap:7px;flex:0 0 auto;width:auto;min-width:0}
.playback-dock .play-button,.playback-dock .transport-button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;flex:0 0 44px;border-radius:10px 13px 10px 12px}
.playback-dock .play-button svg,.playback-dock .transport-button svg{width:22px;height:22px}
.playback-dock .transport-divider{display:block;height:27px;margin:0 2px;flex:0 0 1px}
.playback-dock .tempo-control{display:flex;align-items:center;justify-content:space-between;width:146px;min-width:146px;max-width:146px;flex:0 0 146px;height:44px;padding:0 9px;gap:8px}
.playback-dock .tempo-control label{display:flex;flex:0 0 49px;gap:0;margin:0;font-size:11px}
.playback-dock .tempo-control label strong{gap:3px;font-size:12px}
.playback-dock .tempo-control label small{font-size:8px}
.playback-dock #tempo{flex:0 0 65px;width:65px;max-width:65px;margin:0}
.playback-dock .playback-mode-control{width:214px;min-width:0;flex:0 0 214px}
.playback-dock .transport-instrument{width:176px;flex:0 0 176px}
.playback-dock .select-trigger{font-size:11px;gap:7px;padding:0 9px!important}
.playback-dock .transport-transpose{height:44px;display:flex;align-items:center;gap:0;border:1px solid #c5d3ca;border-radius:10px 13px 10px 12px;background:#fff;flex:0 0 auto;overflow:hidden}
.playback-dock .transport-transpose button{height:42px;min-height:42px;width:32px;min-width:32px;display:grid;place-items:center;padding:0;border:0;box-shadow:none;background:transparent;color:#496957;font:600 21px Playpen,sans-serif}
.playback-dock .transport-transpose button:hover{background:#eaf2e8}
.playback-dock .transport-transpose button:focus-visible{outline:2px solid #789d87;outline-offset:-3px}
.playback-dock .transport-transpose>[data-icon]{display:flex;align-items:center;justify-content:center;width:24px;pointer-events:none}
.playback-dock .transport-transpose svg{width:21px;height:21px}

dialog.save-dialog{width:min(460px,calc(100vw - 24px));max-width:460px;padding:0}
.save-dialog .save-body{padding:20px 28px 8px}
.save-dialog .save-body>label{display:block;margin:0 0 9px;color:#617766;font-size:12px}
.filename-input{display:flex;align-items:center;height:44px;border:1px solid #bfcec3;border-radius:10px;background:#fff;overflow:hidden}
.filename-input input{flex:1;width:0;min-width:0;height:42px;padding:0 12px;border:0;outline:none;background:transparent;color:#425e52;font:500 13px Playpen,sans-serif}
.filename-input>span{padding:0 12px;color:#7c9081;font-size:11px}
.filename-input:focus-within{outline:2px solid #8eac9c;outline-offset:2px}
.save-location-note{font-size:10px;line-height:1.8;color:#788a7b;margin:13px 0 0}
.save-dialog .field-error:empty{display:none}
.save-dialog .dialog-bottom{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:18px 28px 24px}
.save-dialog .dialog-bottom button{height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px}
@media(max-width:1050px){.playback-dock .transport-divider{display:none}}
@media(max-width:650px){
 .playback-dock{width:calc(100% - 10px);padding:10px 7px}
 .playback-dock .transport{gap:8px}
 .playback-dock .transport-play,.playback-dock .transport-navigation,.playback-dock .transport-audio{flex:0 0 auto;width:auto}
 .playback-dock .transport-navigation .transport-button{flex:0 0 44px}
 .playback-dock .transport-play .play-button{width:44px}
 .settings-body{padding:17px}
 .settings-reading{grid-template-columns:minmax(0,1fr) 172px;gap:14px}
 .settings-dialog .reading-toggle-box{padding:0 9px}
 .settings-display{gap:10px}
}
@media(max-width:450px){
 dialog.settings-dialog{width:calc(100vw - 20px)!important}
 .settings-dialog .dialog-top{padding:13px 15px}
 .settings-dialog .dialog-top h2{font-size:18px}
 .settings-body{padding:15px}
 .settings-reading{grid-template-columns:minmax(0,1fr) 119px;gap:11px}
 .settings-dialog .reading-toggle-box{flex-direction:column!important;justify-content:center;gap:4px!important;height:73px;min-height:73px;padding:5px;font-size:10px!important}
 .settings-dialog .setting-label{font-size:10px;gap:4px;min-height:29px}
 .settings-dialog .setting-label svg{width:18px;height:18px}
 .settings-dialog .select-control,.settings-dialog .select-trigger{font-size:10px}
 .settings-dialog .settings-display .select-trigger{gap:4px;padding:0 6px!important}
 .settings-dialog .settings-display .control-icon svg{width:18px!important;height:18px!important}
 .settings-dialog .settings-display .selected-label{white-space:normal;line-height:1.3}
 .settings-display{gap:8px;margin-top:17px;padding-top:14px}
 .settings-display .control-chevron svg{width:11px!important}
 .settings-dialog .beat-switch{padding:0 7px;gap:4px!important}
 .beat-digits{font-size:12px;letter-spacing:1px}
 .save-dialog .save-body{padding:18px 18px 5px}
 .save-dialog .dialog-bottom{padding:18px;gap:8px}
 .save-dialog .dialog-bottom button{font-size:11px;padding:0 12px}
}
@media print{dialog.settings-dialog,dialog.save-dialog{display:none!important}}
dialog.settings-dialog[open]{display:block}
.settings-dialog>.dialog-top,.settings-dialog>.settings-body{width:100%;box-sizing:border-box}
@media(max-width:450px){
 .settings-dialog .select-trigger>.control-icon,.settings-dialog .select-trigger>.reading-sample{display:none}
 .settings-dialog .select-trigger .selected-label{white-space:normal;line-height:1.35}
 .settings-dialog .select-trigger{padding:0 7px!important;gap:5px}
}
.settings-dialog .reading-toggle-box i{flex:0 0 auto}
.playback-dock #restartButton{width:44px;min-width:44px;max-width:44px;flex:0 0 44px}
.playback-dock .transport-button>[data-icon]{display:inline-flex}
.playback-dock #metronomeButton>[data-icon]{display:inline-flex!important}
@media(max-width:380px){.settings-dialog .settings-display .select-trigger{padding:0 4px!important;gap:2px}.settings-dialog .settings-display .selected-label{font-size:9px}}
/* Dialog headers are handles; controls inside them keep their usual behavior. */
dialog .dialog-top{cursor:grab;touch-action:none;user-select:none}
dialog .dialog-top.dragging{cursor:grabbing}
dialog .dialog-top :is(button,a,input,select){touch-action:auto}
dialog.positioned-dialog{max-height:calc(100dvh - 16px)}
.playback-locked .chord-mark:disabled{cursor:default}
.playback-locked .note-block:disabled{cursor:default}
/* Two deliberate transport sections replace item-by-item wrapping. */
.playback-dock .transport{display:flex;flex-wrap:nowrap;gap:8px}
.playback-dock .transport-section{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;flex:0 0 auto}
.playback-dock .transport-divider{display:block!important;visibility:visible!important;background:#b9c4bd;min-width:1px;width:1px;flex:0 0 1px;height:27px;margin:0 3px}
@media(max-width:1050px){
 .playback-dock .transport{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 .playback-dock .transport-section{width:100%;min-width:0;justify-content:center}
 .playback-dock .transport-bank{max-width:600px;justify-self:center}
 .playback-dock .transport-bank .playback-mode-control{width:auto;flex:1.2 1 0;min-width:0}
 .playback-dock .transport-bank .transport-instrument{width:auto;flex:1 1 0;min-width:0}
}
@media(max-width:500px){
 .playback-dock{padding:10px 7px}
 .playback-dock .transport-section{gap:5px}
 .playback-dock .transport-divider{margin:0 2px}
 .playback-dock .tempo-control{width:122px;min-width:122px;max-width:122px;flex:0 0 122px;padding:0 7px;gap:5px}
 .playback-dock .tempo-control label{flex-basis:43px}
 .playback-dock #tempo{width:51px;max-width:51px;flex-basis:51px}
 .playback-dock .transport-bank .select-trigger{padding:0 6px!important;gap:4px;font-size:10px}
 .playback-dock .transport-bank .selected-label{white-space:normal;line-height:1.3}
 .playback-dock .transport-bank .control-icon svg{width:20px!important;height:20px!important}
 .playback-dock .transport-bank .control-chevron svg{width:11px!important}
 .playback-dock .transport-transpose button{width:25px;min-width:25px;font-size:19px}
 .playback-dock .transport-transpose>[data-icon]{width:20px}
}
@media(max-width:380px){
 .playback-dock .transport-section{gap:3px}
 .playback-dock .transport-divider{margin:0 1px}
 .playback-dock .play-button,.playback-dock .transport-button,.playback-dock #restartButton{width:36px;min-width:36px;max-width:36px;flex-basis:36px}
 .playback-dock .transport-group{gap:3px}
 .playback-dock .tempo-control{width:98px;min-width:98px;max-width:98px;flex-basis:98px;padding:0 6px;gap:4px}
 .playback-dock .tempo-control label{flex-basis:36px}
 .playback-dock .tempo-control label strong{font-size:10px;gap:1px}
 .playback-dock .tempo-control small{font-size:7px}
 .playback-dock #tempo{width:42px;max-width:42px;flex-basis:42px}
 .playback-dock .transport-bank .select-trigger{font-size:9px}
 .playback-dock .transport-bank .select-trigger>.control-icon{width:18px;min-width:18px}.playback-dock .transport-bank .selected-label{overflow-wrap:anywhere;text-overflow:clip;white-space:normal}
 .playback-dock .transport-transpose button{width:22px;min-width:22px}
}
.playback-locked .chord-mark:disabled,.playback-locked .note-block:disabled{opacity:1;cursor:default}
.playback-locked .note-block.played:disabled{opacity:.62}
.playback-locked .metallo-bar.in-score{opacity:1}

/* One shared paper edge, with restrained, fixed-size irregularities. */
.score-paper::before{display:none!important}
.paper-outline{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:visible}
.paper-outline path{fill:#c6c8c1;stroke:#899386;stroke-opacity:.64;stroke-width:1.2;vector-effect:non-scaling-stroke}
.artwork-wrap[hidden]{display:none!important}
.print-attribution{display:none}
.print-dialog input{font:inherit;background:#f4f8f5;border:1px solid #c3d1c8;border-radius:8px;padding:10px;width:100%}
.print-dialog .dialog-bottom>button{height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.print-dialog h2{display:flex;align-items:center;gap:10px}.print-dialog h2 svg{width:28px;height:28px}
@media print{
 .paper-outline path{fill:#e1e3dc;stroke:#929b8e;stroke-opacity:.55;stroke-width:.8}
 .print-attribution{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:14px 4px 0;padding:8px 0 0;border-top:.5px solid #c5ccc5;color:#4e5d53;font:9px Playpen,sans-serif;break-inside:avoid}
 .print-credit-person{display:flex;align-items:center;gap:7px;min-width:0}.print-credit-person>svg{width:24px;height:24px;flex-shrink:0}.print-credit-person>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;line-height:1.6}.print-credit-person a{color:inherit;display:block;flex-basis:100%;text-decoration:none}.print-app-name{white-space:nowrap;font-weight:600}
 .score-paper{background:none!important;box-shadow:none!important;border:0!important}.score-grid{grid-template-columns:repeat(var(--effective-columns),minmax(0,1fr))!important;--stage-columns:var(--effective-columns)!important}
}

@media print{.print-credit-person{flex:1}.print-credit-person>span{display:block}.print-credit-person a{margin-top:1px}}
@media(max-width:380px){
 .playback-dock .transport-bank .transport-instrument{width:54px!important;min-width:54px!important;flex:0 0 54px!important}
 .playback-dock .transport-instrument .selected-label{position:absolute!important;width:1px!important;height:1px;overflow:hidden;clip-path:inset(50%)}
 .playback-dock .transport-instrument .select-trigger>.control-icon{width:24px;min-width:24px}
 .playback-dock .playback-mode-control .select-trigger{gap:4px;padding:0 6px!important}
 .playback-dock .playback-mode-control .selected-label{white-space:normal;overflow-wrap:normal;line-height:1.15;font-size:10px}
}

/* A single preparation card keeps sample-loading feedback away from the transport. */
.audio-preparation-dialog{box-sizing:border-box;width:min(390px,calc(100vw - 36px));padding:30px 28px 24px;border:1.5px solid #a6b9aa;border-radius:22px 26px 22px 24px;background:#fffef9;box-shadow:0 18px 70px #294b3833;text-align:center;font-family:Playpen,sans-serif}
.audio-preparation-dialog::backdrop{background:#3c51494d;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.audio-preparation-dialog h2{display:flex;justify-content:center;align-items:center;gap:12px;font-size:23px;color:#405e50;margin:0 0 24px}
.audio-preparation-dialog h2 svg{width:36px;height:36px}.audio-preparation-dialog progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:12px;border:0;border-radius:20px;overflow:hidden;background:#e1e9e2}
.audio-preparation-dialog progress::-webkit-progress-bar{background:#e1e9e2;border-radius:20px}.audio-preparation-dialog progress::-webkit-progress-value{background:#729980;border-radius:20px}.audio-preparation-dialog progress::-moz-progress-bar{background:#729980;border-radius:20px}
.audio-preparation-dialog output{display:block;margin:12px 0 22px;font-size:18px;font-variant-numeric:tabular-nums;color:#527560}.audio-preparation-dialog button{min-height:42px;padding:8px 22px;border-radius:10px;font:inherit;font-size:13px}
@media print{.audio-preparation-dialog{display:none!important}.metallo-illustration .metallo-bar.striking{filter:none}.metallo-illustration .metallo-bar.striking .bar-face{stroke:#50594e;stroke-width:1.8px}}

/* Boxes mark time at their leading edge, even when a beat has two eighths. */
#score .chord-mark{transform:none;text-align:left;padding-left:0;padding-right:0;overflow:visible;transform-origin:left bottom}
#score .chord-mark:hover{transform:rotate(-5deg)}
#score .chord-mark:active{transform:rotate(3deg)}
#score .beat-row>span{text-align:left;padding-left:0}
/* Chords stay near the notes; small structure labels use free header space. */
#score .measure{padding-top:var(--form-headroom,0px)}
#score .chord-lane,#score .has-forms .chord-lane{margin-top:0;margin-bottom:0}
#score .chord-mark{bottom:8px}
#score .measure-label-lane{position:absolute;inset:0 0 auto;height:0;min-height:0;padding:0;pointer-events:none}
#score .measure-label-lane .form-mark{position:absolute;left:0;top:0;bottom:auto;transform:none;max-width:calc(100% - 12px);width:max-content;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.4}
#score .measure-label-lane .navigation-lane{display:contents}
#score .measure-label-lane .navigation-mark{position:absolute;left:0;top:0;bottom:auto;transform:none;max-width:calc(100% - 12px);white-space:normal;overflow-wrap:anywhere}
@media print{#score .chord-mark{bottom:4px}}

/* Leave a clear paper margin before the opening time signature and pickup. */
.score-paper,.class-view .score-paper{padding-left:88px}
@media(max-width:1100px){.score-paper,.class-view .score-paper{padding-left:80px}}
@media(max-width:650px){.score-paper,.class-view .score-paper{padding-left:64px}}
@media print{.score-paper,.class-view .score-paper{padding-left:68px}}

/* Teaching metadata shares the score editor and follows the written music. */
#musicalInfoSection{grid-column:1/-1;grid-row:2;margin:0;padding-top:22px}
#musicSection{grid-row:3}
.metadata-intro{margin:-5px 0 20px;color:#687d73;font-size:12px;line-height:1.8;max-width:800px}
.metadata-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px;align-items:start}
.metadata-fields>label{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}
.metadata-fields input{width:100%;min-width:0;height:44px}
.metadata-fields small,.metadata-pitch-summary small{display:block;color:#728177;font-size:11px;line-height:1.7;font-weight:400}
.metadata-fields .tag-picker{border:0;padding:0}
.metadata-fields .tag-label{min-height:23px;margin-bottom:7px}
.metadata-fields .tag-bank{grid-template-columns:1fr}
.metadata-fields .tag-options{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.metadata-melody{grid-column:1/-1}
.metadata-fields .tag-chips{margin:7px 0}
.metadata-fields .tempo-input{display:flex;width:100%;height:44px}
.metadata-pitch-summary{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,2fr);gap:22px;margin-top:24px;padding:18px 20px;background:#f1f6f0;border:1px solid #d3dfd2;border-radius:11px 15px 12px 13px}
.metadata-pitch-summary h4{font-size:12px;color:#476459;margin:0 0 10px;font-weight:650}
#editorRange{display:block;font-size:14px;color:#344e47;margin-bottom:6px;font-variant-numeric:tabular-nums}
#editorPitches{display:flex;flex-wrap:wrap;gap:7px}
.metadata-pitch{display:inline-flex;flex-direction:column;align-items:center;min-width:51px;padding:6px 9px;border:1px solid #c2d2c5;border-radius:8px;background:#fffef8;color:#39594c}
.metadata-pitch b{font-size:13px}.metadata-pitch small{font-size:10px}.metadata-empty{font-size:12px;color:#728177}
.library-musical-filters{width:100%;padding:12px 14px;border:1px solid #d1ddd3;border-radius:11px;background:#f6f9f3}
.library-musical-filters summary{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;color:#476356;min-height:24px}
.library-musical-filters summary::after{content:'+';margin-left:auto;font-size:18px}.library-musical-filters[open] summary::after{content:'−'}
.library-musical-filters summary svg{width:21px;height:21px}
.musical-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 11px;padding-top:18px}
.musical-filter-grid label{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:11px;color:#526d5f}
.library-toolbar .musical-filter-grid select,.musical-filter-grid .select-control{width:100%;min-width:0}
.musical-filter-grid .select-trigger{font-size:10px}
.library-musical-filters>.text-button{margin-top:15px;min-height:35px;font-size:11px}
.library-result-count{width:100%;margin:0;font-size:11px;color:#6c8073}
@media(max-width:850px){.metadata-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.musical-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.metadata-fields{grid-template-columns:1fr;gap:17px}.metadata-pitch-summary{grid-template-columns:1fr;padding:14px;gap:17px}.metadata-intro{font-size:11px}.musical-filter-grid{grid-template-columns:1fr}.metadata-melody{grid-column:auto}.metadata-pitch{min-width:45px}.library-dialog .library-grid{grid-template-columns:1fr}}
.card-music-info{display:block;margin:9px 0 5px;color:#4d6a5d;font-size:10px;line-height:1.8;font-weight:550}
/* A range lists every used pitch; keep the complete choice readable. */
.library-musical-filters .range-filter{grid-column:1/-1}
.piece-metadata{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.piece-metadata div{min-width:0}.piece-metadata dt{font-size:11px;color:#687d72}.piece-metadata dd{margin:4px 0 0;font-size:15px;overflow-wrap:anywhere}
@media(max-width:550px){.piece-metadata{grid-template-columns:1fr}}
.range-filter .select-trigger{height:auto;min-height:44px;padding-top:9px!important;padding-bottom:9px!important}
.range-filter .selected-label{white-space:normal;overflow-wrap:anywhere;text-overflow:clip;line-height:1.6}
.range-filter .select-menu button{line-height:1.6;min-height:44px;height:auto;white-space:normal}
@media(max-width:550px){.library-musical-filters .range-filter{grid-column:auto}}

/* Configuration and the shared display/sound preferences. */
.settings-configuration h3,.settings-perception h3{font-size:14px;color:#456253;margin:0 0 16px;font-weight:700}
.configuration-grid,.perception-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 13px;align-items:end}
.settings-dialog .configuration-grid .setting-field,.settings-dialog .perception-grid .setting-field{min-width:0;display:flex;flex-direction:column;gap:7px}
.settings-dialog .configuration-grid .selected-label,.settings-dialog .perception-grid .selected-label{white-space:normal;text-overflow:clip;line-height:1.35}
.configuration-hint{font-size:10px;line-height:1.7;color:#708375;margin:11px 0 0}.configuration-hint:empty{display:none}
.settings-perception{margin-top:22px;padding-top:20px;border-top:1px dashed #c6d6cb}
.settings-dialog .perception-grid .setting-switch{height:44px;min-height:44px;border:1px solid #c5d3ca;border-radius:10px 13px 10px 12px;padding:0 11px;background:#fff}
/* Stacked note previews share the switch's standard 44 px control height. */
.settings-note-art{position:absolute;pointer-events:none}
.settings-dialog .perception-grid .note-sample-switch{justify-content:space-between;gap:8px!important}
.note-sample-stack{display:grid;gap:1px;width:69px;min-width:0}
.note-sample-tile{display:grid;place-items:center}
.settings-dialog .setting-switch .note-sample{display:block;width:100%;height:20px}
.note-sample-switch:has(input:checked) .sample-when-unchecked,
.note-sample-switch:not(:has(input:checked)) .sample-when-checked{opacity:.72}
#settings:not(:has(#labelMode:checked)) .color-switch .note-sample-letters,
#settings:has(#labelMode:checked) .color-switch .note-sample-greek{display:none}
.settings-dialog .perception-grid .setting-switch>i{flex-shrink:0}
.settings-dialog .notation-profile-controls{margin-top:22px;padding-top:17px;border-top:1px dashed #c6d6cb}
#score .beat-row>span[data-strength="2"]{font-weight:850;color:#344f45;font-size:1.12em}
#score .beat-row>span[data-strength="1"]{font-weight:800;color:#405d50;font-size:1.08em}
#countInBeats>span[data-strength="2"],#countInBeats>span[data-strength="1"]{font-weight:850;border-width:2px}
@media(max-width:600px){.configuration-grid,.perception-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.settings-configuration h3,.settings-perception h3{font-size:13px}.settings-dialog .configuration-grid .setting-label{min-height:29px}}

/* The first bar of continuation pages keeps its number when it fits. */
#score .measure:first-child .measure-number.page-start-number{display:block}

/* Pickup width changes duration spacing, never the chord type size. */
#score .pickup-measure .chord-mark{font-size:var(--uniform-chord-font,39px)}

/* The complete instrument menu stays above later, isolated paper cards. */
.playback-dock{z-index:5}

/* Counting is a separate, calm visual lane; playback lights the sounding pulse. */
#score .beat-row{height:30px;line-height:30px}
#score .beat-row>span{top:3px;height:24px;line-height:24px}
#score .beat-count{display:inline-flex;box-sizing:border-box;width:24px;height:24px;align-items:center;justify-content:center;border:1px solid #a8b7a6;border-radius:50%;background:#edf1e8;color:#5b6e59;font:650 14px/1 Playpen,sans-serif;font-variant-numeric:tabular-nums;vertical-align:top;transition:background-color .08s,border-color .08s,box-shadow .08s,transform .08s}
#score .beat-row>span[data-strength="2"]>.beat-count{border-width:2px;border-color:#6b826c;font-weight:850;color:#344f45}
#score .beat-row>span[data-strength="1"]>.beat-count{border-width:1.5px;border-color:#81977b;font-weight:800;color:#405d50}
#score .beat-row>span.current>.beat-count{background:#f6d95e;border-color:#73885e;color:#304b3c;box-shadow:0 0 0 2px #eacb5845;transform:scale(1.06)}
#score .rest-label{display:block;font-family:inherit;font-size:var(--uniform-note-font,28px);font-weight:inherit;line-height:1.3;letter-spacing:inherit;white-space:nowrap}
@media print{#score .beat-row{height:26px;line-height:26px}#score .beat-count{width:20px;height:20px;font-size:11px;background:transparent!important;box-shadow:none!important;transform:none!important}#score .beat-row>span{height:20px;line-height:20px}#score .rest-label{font-size:var(--uniform-note-font,28px)}}

.settings-dialog .dynamics-switch{justify-content:space-between}
.dynamic-digits{font-style:italic;font-weight:700;color:#51321f;font-size:15px}

.dynamics-preference{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:13px;align-items:center}
.dynamics-preference .configuration-hint{margin:22px 0 0}
@media(max-width:600px){.dynamics-preference{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* Keep long libraries responsive without changing card size or search scope. */
.library-more{grid-column:1/-1;justify-self:center;min-height:44px;margin:8px 0;padding:10px 20px;border:1px solid #b7c6b7;border-radius:10px;background:#fffef8;color:#40594e;font:600 13px Playpen,sans-serif;cursor:pointer}
.library-more:focus-visible{outline:2px solid #8eac9c;outline-offset:3px}