/* Keep floating navigation clear of the controls, including while scrolling. */
@font-face{font-family:CanonBravura;src:url("assets/Bravura.woff2") format("woff2");font-display:block}
.canon-studio .music-glyph{font-family:CanonBravura;font-size:40px;font-weight:normal;font-style:normal;direction:ltr}
body.canon-studio{padding-left:48px;padding-right:48px}
/* Slate is the initial palette; a saved choice is applied by the theme picker. */
:root,:root[data-theme="dark"]{
  --bg-color:#111827;--panel-bg:#1f2937;--control-bg:#1f2937;
  --control-border:#64748b;--storage-border:#64748b;
  --text-color:#f8fafc;--label-muted:#cbd5e1;--theme-accent:#93c5fd;
  color-scheme:dark;
}
.canon-studio #bpm,.canon-studio #zoom{direction:ltr}
.canon-studio .zoom-label{display:flex;align-items:center;gap:5px}
.canon-studio .zoom-label svg{width:15px;height:15px;flex:none;color:var(--theme-accent)}
/* Use the full paper width for the artwork, keeping the notation area quiet. */
.canon-studio .score-container{
  background-color:#faf8f2;
  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");
  background-position:center top;
  background-size:100% auto;
  background-repeat:repeat-y;
}
.canon-studio #score{flex-shrink:0}
.canon-studio .canon-title-word{color:#ffd27a;font-weight:900;font-size:1.25em;text-shadow:0 1px 5px #0008}
.canon-studio .canon-definition-button{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;background:transparent;color:#ffd27a;border:1px solid currentColor;border-radius:50%;width:23px;height:23px;min-height:23px;margin-inline:5px;padding:0;font-size:17px;cursor:pointer}
.canon-studio .canon-definition-button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.canon-studio .canon-explained-button{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.canon-studio .canon-explained-button small{font-size:10px;font-weight:normal;line-height:1.2}
.canon-studio .dashboard .voice-dux{--voice-color:#1769aa;--voice-light:#b9e0ff}
.canon-studio .dashboard .voice-comes{--voice-color:#a94412;--voice-light:#ffd4b5}
.canon-studio .dashboard button.voice-dux,.canon-studio .dashboard button.voice-comes{--mms-play-background:var(--voice-color)!important;background:var(--voice-color)!important;color:#fff;border:1px solid var(--voice-light)}
.canon-studio .dashboard .voice-dux label,.canon-studio .dashboard .voice-comes label{color:var(--voice-light);font-weight:700;font-size:13px}
.canon-studio .dashboard .voice-dux select,.canon-studio .dashboard .voice-comes select{background-color:var(--voice-color);border-color:var(--voice-light);color:#fff}
.canon-studio .voice-label{direction:ltr;text-anchor:start}
.canon-studio [data-third-voice][hidden]{display:none!important}
.canon-studio .dashboard .voice-third{--voice-color:#7b3fa0;--voice-light:#e7ccff}
.canon-studio .dashboard button.voice-third{--mms-play-background:var(--voice-color)!important;background:var(--voice-color)!important;color:#fff;border:1px solid var(--voice-light)}
.canon-studio .dashboard .voice-third label{color:var(--voice-light);font-weight:700}
.canon-studio .dashboard .voice-third select{background-color:var(--voice-color);border-color:var(--voice-light);color:#fff}
.canon-studio .active-third text,.canon-studio .active-third circle{fill:#7b3fa0!important}
.canon-studio .active-third line,.canon-studio .active-third path{stroke:#7b3fa0!important}
.canon-studio .canon-help-button{background:#334155;color:#fff;border:1px solid #94a3b8}
.canon-help{width:min(720px,calc(100vw - 40px));max-height:80dvh;box-sizing:border-box;overflow:auto;border:1px solid #94a3b8;border-radius:12px;padding:20px;background:#f8fafc;color:#172033;font:16px/1.7 system-ui}
.canon-help::backdrop{background:rgba(0,0,0,.65)}
.canon-help header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.canon-help h2{font-size:22px;margin:0}
.canon-help header button{background:#334155;color:white;border:0;border-radius:6px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.canon-help details{border-top:1px solid #cbd5e1;padding:12px 0}
.canon-help summary{cursor:pointer;font-weight:700;color:#1769aa}
.canon-help p{margin:8px 0 12px}
.canon-help a{display:block;margin-top:12px;color:#1769aa}
@media(max-width:768px){
  body.canon-studio{padding:60px 10px 16px}
  .canon-studio h1.main-title{padding:0 10px;margin:0 0 12px;font-size:20px;line-height:1.5}
  .canon-studio .dashboard{display:flex;flex-direction:column;align-items:stretch;padding:10px;gap:10px;margin-bottom:12px}
  .canon-mobile-example label{font-size:12px}
  .canon-studio select,.canon-studio input[type="number"]{font-size:16px;min-height:44px;box-sizing:border-box;max-width:100%}
  .canon-studio button{min-height:44px;touch-action:manipulation}
  .canon-mobile-transport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .canon-mobile-transport button{margin:0;padding:8px;font-size:14px;min-width:0}
  .canon-mobile-transport small{font-size:11px}
  .canon-mobile-settings{border:1px solid var(--control-border);border-radius:8px}
  .canon-mobile-settings summary{padding:12px;cursor:pointer;font-size:14px;font-weight:700}
  .canon-mobile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:10px}
  .canon-mobile-fields .control-group{min-width:0}
  .canon-mobile-fields .control-group label{font-size:12px}
  .canon-mobile-fields input[type="range"]{min-height:36px;width:100%}
  .canon-mobile-fields>div[style*="flex-grow"]{display:none}
  .canon-studio .storage-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;gap:8px}
  .canon-mobile-fields>.storage-panel{grid-column:1/-1}
  .canon-studio .storage-panel .control-group{grid-column:1/-1}
  .canon-studio .storage-panel>div[style*="flex-grow"]{display:none}
  .canon-studio .storage-panel button{padding:8px;font-size:13px;margin:0}
  .canon-studio .score-container{padding:8px;direction:ltr;justify-content:flex-start;max-height:none;overflow:auto;margin-bottom:12px}
  .canon-help{width:calc(100vw - 20px);max-height:88dvh;padding:14px}
  .canon-help h2{font-size:18px}
  .canon-help header button{min-height:44px}
  @media(orientation:landscape){
    body.canon-studio{padding-top:52px}
    .canon-mobile-transport{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
}
@media(min-width:769px){
  .canon-mobile-settings,.canon-mobile-transport{display:none}
  .canon-mobile-settings>summary{display:none}
}
@media(min-width:769px){
  body.canon-studio{height:100dvh;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;padding-top:8px;padding-bottom:6px;gap:8px}
  .canon-studio h1.main-title{margin:0;font-size:20px;flex:none}
  .canon-studio .dashboard{margin-bottom:0;padding:5px 8px;gap:4px 7px;flex:none}
  .canon-studio .dashboard .control-group{gap:2px}
  .canon-studio .dashboard label{font-size:11px}
  .canon-studio .dashboard select,.canon-studio .dashboard input[type="number"]{padding:3px 5px;font-size:12px}
  .canon-studio .dashboard button{padding:5px 8px;font-size:12px}
  .canon-studio .dashboard .canon-explained-button small{display:none}
  .canon-studio .dashboard input[type="range"]{width:105px}
  .canon-studio .dashboard>.control-group select{max-width:155px}
  .canon-studio .storage-panel{margin-top:2px;padding-top:5px;gap:7px}
  .canon-studio .score-container{flex:1;min-height:0;max-height:none;padding:6px;align-items:center;overflow:hidden}
  .canon-studio footer{margin:0!important;padding:4px 8px!important;flex:none}
}