.toolbar{display:flex!important;align-items:center;justify-content:center;gap:12px!important;overflow:visible!important}.symmetry-main-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px}.symmetry-main-tools .tool-btn{min-height:42px;padding:9px 16px;font-weight:700}.symmetry-main-tools .tool-btn.active{background:#2e638d!important;color:#fff!important;border-color:#9bcdf2!important}.symmetry-line-options{display:flex;align-items:center;gap:6px;font-size:13px}.symmetry-line-options[hidden]{display:none}.symmetry-line-options select,.symmetry-more select{background:var(--card-bg);color:var(--text-main);border:1px solid var(--border-color);border-radius:8px;padding:9px;font:inherit}.symmetry-more{position:relative}.symmetry-more summary{list-style:none;cursor:pointer;border:1px solid var(--border-color);background:var(--toolbar-muted-bg);color:var(--text-main);border-radius:9px;padding:11px 15px;font:700 13px system-ui;white-space:nowrap}.symmetry-more summary::after{content:' ▾'}.symmetry-more-content{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:310px;max-width:calc(100vw - 32px);max-height:65dvh;overflow:auto;z-index:500;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);box-shadow:0 10px 35px #0006}.symmetry-more-content [hidden]{display:none!important}.symmetry-more-content .preset-select,.symmetry-more-content .color-picker-wrapper{grid-column:1/-1;width:100%;box-sizing:border-box}.symmetry-more-content .tool-btn{font-size:12px;min-height:38px;white-space:normal}.symmetry-tool-hint{margin:8px auto 0;text-align:center;color:var(--text-muted);font:14px/1.5 system-ui}.instructions-toggle,.instructions{display:none!important}@media(max-width:650px){.toolbar{flex-wrap:wrap;padding:8px!important}.symmetry-main-tools{gap:5px}.symmetry-main-tools .tool-btn{padding:8px 10px;font-size:12px;min-height:40px}.symmetry-more-content{position:fixed;top:150px;left:16px;right:16px;width:auto;max-width:none}.symmetry-tool-hint{font-size:12px;padding:0 12px}}

/* Keep tool buttons and the menu anchored while line settings change. */
.toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start;max-width:900px;margin-inline:auto;direction:rtl}
.symmetry-main-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-width:0}
.symmetry-main-tools>.tool-btn{width:100%;white-space:nowrap;margin:0}
.symmetry-line-options,.symmetry-line-options[hidden]{grid-column:1/-1;display:flex!important;min-height:40px;justify-content:flex-start}
.symmetry-line-options[hidden]{visibility:hidden;pointer-events:none}
.symmetry-more{margin:0;align-self:start}
@media(max-width:650px){.toolbar{grid-template-columns:1fr}.symmetry-main-tools{gap:4px}.symmetry-main-tools>.tool-btn{font-size:11px;padding:8px 4px}.symmetry-more{justify-self:start}.symmetry-line-options,.symmetry-line-options[hidden]{min-height:36px}}

/* Reserve a real header row for fullscreen instead of floating over the tools. */
body>header .symmetry-fullscreen{position:static;display:block;width:max-content;max-width:calc(100% - 60px);margin:4px auto 10px 50px;min-height:38px}
body>header h1{margin:6px 0 12px;min-height:30px}
@media(max-width:700px){body>header .symmetry-fullscreen{font-size:11px;padding:7px 9px;margin-bottom:14px}body>header h1{margin:8px 0 12px}}

body>header{display:block!important}

/* Give the score more room and retain headroom for names above the highest notes. */
body>.board-container{padding-top:24px!important;padding-bottom:10px!important}
.staff-viewport{overflow:visible!important}
.symmetry-line-options,.symmetry-line-options[hidden]{min-height:32px}
body>header .symmetry-fullscreen{margin-bottom:3px}
body>header h1{margin-bottom:7px}
.note-label{white-space:nowrap}

body{padding-inline:8px!important;gap:5px!important}
body>.board-container{width:100%;max-width:none;margin:0;flex:1;padding-inline:6px!important;padding-top:26px!important}
.note-label{pointer-events:auto!important;cursor:grab;touch-action:none;user-select:none}
.note-label:active{cursor:grabbing;box-shadow:0 0 0 2px #7dc8f7}
body>header h1{font-size:20px;margin-block:3px 5px;min-height:25px}
.symmetry-tool-hint{margin-top:3px;font-size:12px}

body>.board-container{padding-top:8px!important}
.staff-viewport{background:var(--staff-paper)!important;overflow:hidden!important}

.grand-staff[data-tool="move"]{cursor:default!important}
.grand-staff[data-tool="move"] .note-head{cursor:pointer!important}
.grand-staff[data-tool="move"] .note-head:active{cursor:grabbing!important}

/* Share the musical paper artwork used by Canon Studio. */
.staff-viewport{background-color:#faf8f2!important;background-image:linear-gradient(to right,rgba(250,248,242,.25),rgba(250,248,242,.5) 25%,rgba(250,248,242,.5) 75%,rgba(250,248,242,.25)),url("assets/canon-musical-background.webp")!important;background-position:center top!important;background-size:100% auto!important;background-repeat:repeat-y!important}
.grand-staff{background:transparent!important}

@font-face{font-family:SymmetryBravura;src:url("assets/Bravura.woff2") format("woff2");font-display:block}
.symmetry-clef-glyph{font-family:SymmetryBravura;fill:var(--staff-ink);text-anchor:middle;font-weight:400}
svg.clefs-svg path.symmetry-bass-extension{fill:none;stroke:#526779;stroke-width:3.5;stroke-dasharray:7 5;stroke-linecap:round}

.grand-staff:not([data-tool="move"]) .note-label{pointer-events:none!important;cursor:inherit}

.symmetry-menus{display:flex;gap:7px;align-items:flex-start}.symmetry-storage .symmetry-more-content{grid-template-columns:1fr}.symmetry-storage .symmetry-more-content .tool-btn{width:100%}@media(max-width:650px){.symmetry-menus{justify-self:start}}

.symmetry-main-tools{grid-template-columns:repeat(5,minmax(0,1fr))}.symmetry-undo:disabled{opacity:.4;cursor:default}@media(max-width:650px){.symmetry-main-tools>.tool-btn{font-size:10px;padding-inline:3px}}

body>header h1.symmetry-title{display:flex;align-items:center;justify-content:center;gap:9px;font-size:24px;line-height:1.2;margin:2px 0 8px}.symmetry-title img{width:48px;height:48px;flex:none}@media(max-width:650px){body>header h1.symmetry-title{font-size:21px}.symmetry-title img{width:40px;height:40px}}

body>header h1.symmetry-title{gap:6px;align-items:center}.symmetry-title img{width:42px;height:46px;object-fit:contain;transform:translateY(-3px)}

.staff-group{z-index:6;pointer-events:none}.staff-group .staff-line{pointer-events:none}.ledger-line{z-index:6!important;pointer-events:none!important}.note-label{z-index:8!important}

.staff-line{height:1.1px!important;margin-top:-.55px!important}.ledger-line{height:1.1px!important;margin-top:-.55px!important}

.staff-line{height:2.5px!important;margin-top:-1.25px!important}.ledger-line{height:2.5px!important;margin-top:-1.25px!important}

/* All guide coordinates describe their center, exactly like notes and ledger lines. */
.faint-guide{height:0!important;border-bottom:0!important;border-top:2.5px dashed var(--guide-ledger)!important;transform:translateY(-50%);margin:0!important;filter:none!important}
.left-side-guide,.guide-right-treble-bot1,.guide-right-bass-top3{border-top:3px dashed var(--guide-middle-c)!important}
.ledger-line{height:2.5px!important;margin-top:-1.25px!important}

.ledger-line{height:3.5px!important;margin-top:-1.75px!important;background:var(--staff-ink)!important;opacity:1!important;z-index:7!important}

.ledger-line{height:2.5px!important;margin-top:-1.25px!important}

.note-head,.note-head:hover{box-shadow:none!important;filter:none!important;border:0!important}.ledger-line{box-shadow:none!important;filter:none!important}.faint-guide{box-shadow:none!important;filter:none!important}

/* Identical dash geometry for every guide; color is the only difference. */
.faint-guide,.left-side-guide,.guide-right-treble-bot1,.guide-right-bass-top3{height:2.5px!important;border:0!important;margin:0!important;transform:translateY(-50%);color:var(--guide-ledger);background-image:repeating-linear-gradient(to right,currentColor 0px,currentColor 8px,transparent 8px,transparent 12px)!important;background-size:12px 100%;background-repeat:repeat-x;filter:none!important}
.left-side-guide,.guide-right-treble-bot1,.guide-right-bass-top3{color:var(--guide-middle-c)}

.symmetry-pitch-ruler{position:absolute;right:1px;top:0;width:29px;height:100%;pointer-events:none;z-index:9;background:#fffaf0cc;border-left:1px solid #c4ced7}
.symmetry-pitch-ruler span{position:absolute;right:2px;transform:translateY(-50%);font:700 6px/1 Arial;color:#4b6074;white-space:nowrap}
.symmetry-pitch-ruler span::after{content:'';display:inline-block;width:5px;height:1px;background:#6c8296;margin-left:2px;vertical-align:middle}
.symmetry-pitch-guide{position:absolute;left:110px;right:32px;height:0;border-top:1px dashed #9d3f9d;z-index:10;pointer-events:none}
.symmetry-pitch-guide[hidden]{display:none}.symmetry-pitch-guide span{position:absolute;right:0;top:-15px;background:#74366f;color:#fff;padding:2px 4px;border-radius:3px;font:700 8px Arial}

.symmetry-main-tools{grid-template-columns:repeat(6,minmax(0,1fr))}
.symmetry-main-color{display:flex;align-items:center;justify-content:center;gap:5px;min-height:42px;box-sizing:border-box;margin:0;padding:4px 8px;border:1px solid var(--border-color);border-radius:8px;background:var(--toolbar-muted-bg);font-size:12px}
.symmetry-main-color input[type=color]{width:38px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}
@media(max-width:650px){.symmetry-main-tools{grid-template-columns:repeat(3,minmax(0,1fr))}}

.symmetry-menus>details[hidden]{display:none!important}
.symmetry-view-tools{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;padding-top:6px;border-top:1px solid var(--border-color)}
.symmetry-view-tools>[hidden]{display:none!important}.symmetry-view-tools .tool-btn{min-height:38px;padding:7px 12px;font-size:12px}.symmetry-menus{align-self:start}

@media(min-width:850px), (min-width:650px) and (orientation:landscape){
 html body{display:grid!important;grid-template-columns:215px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;direction:rtl;column-gap:8px!important;overflow:hidden}
 body>header{grid-column:1/-1;grid-row:1;position:relative;min-height:55px}
 body>header h1.symmetry-title{margin:3px 230px;min-height:42px;font-size:22px}.symmetry-title img{width:36px;height:40px}
 body>header .symmetry-fullscreen{position:absolute;left:50px;top:4px;margin:0}
 .symmetry-sidebar{grid-column:1;grid-row:2;min-height:0;align-self:start}
 body>.board-container{grid-column:2;grid-row:2;min-height:0;height:100%;box-sizing:border-box}
 body>footer{grid-column:1/-1;grid-row:3}
 .symmetry-sidebar .toolbar{display:flex!important;flex-direction:column;gap:9px!important;width:100%;max-width:none;padding:10px!important;box-sizing:border-box}
 .symmetry-main-tools{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:6px}
 .symmetry-main-tools>.tool-btn{font-size:12px;min-height:36px;padding:7px 5px;white-space:normal}
 .symmetry-main-color{min-height:36px;padding:3px;font-size:11px}.symmetry-main-color input[type=color]{width:30px;height:26px}
 .symmetry-line-options[hidden]{display:none!important}.symmetry-line-options{grid-column:1/-1;min-height:32px;font-size:11px}
 .symmetry-menus{width:100%;display:block}.symmetry-storage{width:100%}.symmetry-storage summary{text-align:center;padding:9px}
 .symmetry-more-content{position:fixed;top:120px;right:235px;left:auto}
 .symmetry-view-tools{display:flex;width:100%;flex-direction:column;gap:6px;padding-top:9px}.symmetry-view-tools>.tool-btn{width:100%;font-size:11px;min-height:34px;padding:6px}
 .symmetry-sidebar .symmetry-tool-hint{font-size:12px;line-height:1.6;padding:6px;margin:3px 0}
}
@media(max-width:849px){.symmetry-sidebar{width:100%}.symmetry-line-options[hidden]{display:none!important}.toolbar{padding:6px!important}.symmetry-view-tools{padding-top:4px}.symmetry-tool-hint{font-size:11px}}

/* Keep the illustration at the margins and the notation area quiet. */
.staff-viewport{background-image:linear-gradient(to right,rgba(250,248,242,.15),rgba(250,248,242,.92) 16%,rgba(250,248,242,.96) 84%,rgba(250,248,242,.15)),url("assets/canon-musical-background.webp")!important}
@media(min-width:850px), (min-width:650px) and (orientation:landscape){body>.board-container{padding-inline:32px!important}}

.staff-viewport{background-image:linear-gradient(to right,rgba(250,248,242,.1),rgba(250,248,242,.98) 22%,rgba(250,248,242,.98) 78%,rgba(250,248,242,.1)),url("assets/canon-musical-background.webp")!important}
@media(min-width:850px), (min-width:650px) and (orientation:landscape){body>.board-container{padding-inline:50px!important}}

@media(min-width:850px), (min-width:650px) and (orientation:landscape){html body{grid-template-columns:190px minmax(0,1fr);padding-inline:4px!important;column-gap:5px!important}body>.board-container{padding-inline:6px!important}.staff-viewport{box-sizing:border-box}.symmetry-sidebar .toolbar{padding:8px!important}}

.staff-viewport{background-image:linear-gradient(to right,rgba(250,248,242,.72),rgba(250,248,242,.99) 22%,rgba(250,248,242,.99) 78%,rgba(250,248,242,.72)),url("assets/canon-musical-background.webp")!important}

.staff-viewport{background-image:linear-gradient(to right,rgba(250,248,242,.65),rgba(250,248,242,.98) 18%,rgba(250,248,242,.98) 75%,rgba(250,248,242,.4)),url("assets/canon-musical-background.webp")!important}

.symmetry-pitch-ruler{width:38px;background:#fffdf5f5;border-left:1px solid #70879b;box-shadow:-2px 0 5px #23394b12}
.symmetry-pitch-ruler span{right:3px;font:800 8px/1 Arial,system-ui,sans-serif;color:#173b56;letter-spacing:.1px}
.symmetry-pitch-ruler span::after{width:7px;height:1.5px;background:#315d7c;margin-left:3px}
.symmetry-pitch-guide{right:40px}

.symmetry-title-do{color:#f87171}

.symmetry-color-presets{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:7px 2px}
.symmetry-color-presets button{width:100%;aspect-ratio:1;min-height:24px;padding:0;border:2px solid transparent;border-radius:7px;cursor:pointer;box-shadow:inset 0 0 0 1px #0002}
.symmetry-color-presets button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #7bbce7,inset 0 0 0 1px #0004}
.symmetry-color-presets button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:849px){.symmetry-color-presets{grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}}

.symmetry-vav-holam{position:relative;display:inline-block}.symmetry-vav-holam::before{content:"";position:absolute;top:.10em;left:50%;transform:translateX(-50%);width:.14em;height:.14em;border-radius:50%;background:#f87171}

/* Fullscreen dedicates the workspace to the score. */
@media(min-width:850px), (min-width:650px) and (orientation:landscape){
 html:fullscreen body{grid-template-columns:170px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);padding:2px!important;gap:3px!important}
 html:fullscreen body>footer{display:none!important}
 html:fullscreen body>header{min-height:44px}
 html:fullscreen body>header h1.symmetry-title{font-size:20px;min-height:36px;margin:0 230px}
 html:fullscreen .symmetry-title img{height:35px;width:32px}
 html:fullscreen body>.board-container{padding:4px!important;border-radius:7px}
 html:fullscreen .symmetry-sidebar .toolbar{padding:6px!important;gap:6px!important}
 html:fullscreen .symmetry-main-tools>.tool-btn{min-height:33px;padding:5px 3px;font-size:11px}
 html:fullscreen .symmetry-color-presets{gap:5px;padding-block:4px}
 html:fullscreen .symmetry-tool-hint{font-size:11px}
}

.staff-viewport{background-image:linear-gradient(to right,rgba(250,248,242,.65),rgba(250,248,242,.98) 18%,rgba(250,248,242,.98) 75%,rgba(250,248,242,.62)),url("assets/canon-musical-background.webp")!important}

html body>header .symmetry-fullscreen{position:fixed!important;top:14px!important;left:72px!important;margin:0!important;height:42px;min-height:42px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
html body #spec-btn{top:14px!important;left:18px!important;width:46px!important;height:42px!important;box-sizing:border-box;display:flex;align-items:center;justify-content:center}

@media(max-width:649px){
 .toolbar{gap:6px!important}.symmetry-main-tools{gap:4px}.symmetry-main-tools>.tool-btn{min-height:32px!important;padding:5px 3px!important;font-size:11px}
 .symmetry-main-color{min-height:32px;padding:2px;font-size:10px}.symmetry-main-color input[type=color]{height:24px}
 .symmetry-color-presets{gap:4px;padding:4px 0}.symmetry-color-presets button{min-height:20px;border-radius:5px}
 .symmetry-view-tools{flex-direction:row;gap:4px;padding-top:5px}.symmetry-view-tools .tool-btn{min-height:30px;font-size:10px;padding:5px 6px}
 .symmetry-storage summary{padding:8px 12px;font-size:11px}.symmetry-tool-hint{padding:0 6px;line-height:1.4}
 body>header h1.symmetry-title{font-size:20px;margin-block:0 5px}.symmetry-title img{height:34px;width:32px}
}
@media(min-width:650px) and (orientation:landscape) and (max-height:600px){
 html body{grid-template-columns:170px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);padding:3px!important;gap:4px!important}
 body>footer{display:none!important}body>header{min-height:44px}body>header h1.symmetry-title{font-size:17px;min-height:32px;margin:0 210px 0 170px}.symmetry-title img{height:32px;width:30px}
 .symmetry-studio-brand{font-size:12px;gap:4px;top:8px;right:48px}.symmetry-studio-brand img{width:22px;height:22px}
 html body>header .symmetry-fullscreen{top:6px!important;left:56px!important;height:32px;min-height:32px;font-size:10px;padding:5px 7px}html body #spec-btn{top:6px!important;left:12px!important;width:36px!important;height:32px!important}
 .symmetry-sidebar .toolbar{padding:5px!important;gap:5px!important}.symmetry-main-tools>.tool-btn{min-height:29px;padding:4px 3px;font-size:10px}.symmetry-main-color{min-height:29px;font-size:10px}
 .symmetry-color-presets{gap:5px;padding:3px 0}.symmetry-color-presets button{min-height:17px;aspect-ratio:auto;height:19px}.symmetry-view-tools{padding-top:5px;gap:4px}.symmetry-view-tools>.tool-btn{min-height:27px;font-size:10px;padding:4px}.symmetry-storage summary{padding:6px;font-size:10px}.symmetry-tool-hint{display:none}
 .symmetry-more-content{top:45px;right:180px;left:auto;width:280px;max-height:80dvh}
}
html[lang=en] .symmetry-main-tools,html[lang=en] .toolbar{direction:ltr}

.symmetry-sidebar .toolbar{flex-wrap:nowrap!important;height:auto!important;max-height:none!important}.symmetry-sidebar .symmetry-view-tools{flex-shrink:0}

@media(min-width:650px) and (orientation:landscape) and (max-height:600px){.symmetry-color-presets{grid-template-columns:repeat(6,minmax(0,1fr))}.symmetry-studio-brand{right:65px}}

.note-label{box-sizing:border-box;width:38px;height:22px;display:flex;align-items:center;justify-content:center;padding:0!important;line-height:1!important;text-align:center}

.symmetry-explanation{box-sizing:border-box;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border:1px solid var(--border-color);border-radius:14px;background:var(--card-bg);color:var(--text-main);font:inherit;line-height:1.6;text-align:start}.symmetry-explanation::backdrop{background:rgba(0,0,0,.6)}.symmetry-explanation h2{margin:0 0 12px;font-size:22px}.symmetry-explanation p{margin:12px 0}.symmetry-explanation strong{color:var(--heading-color)}