@font-face{
    font-family:"Bravura Text";
    src: url("fonts/BravuraText.woff2") format("woff2");
    font-display: swap;
  }
  :root{
    --paper:#E9E6DA;
    --paper-2:#DFDBC9;
    --panel:#F1EFE5;
    --ink:#232720;
    --ink-soft:#5B5A4E;
    --line:#9E9782;
    --accent:#3568A6;
    --accent-soft:#5D89BE;
    --brass:#A3822E;
    --info:#3B6EA5;
    --success:#3E7A3F;
    --gold:#D9A62E;
    --border:rgba(35,39,32,0.14);
    --shadow:rgba(35,39,32,0.10);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#1C1B16;
      --paper-2:#26241D;
      --panel:#242219;
      --ink:#ECE7D8;
      --ink-soft:#B4AD98;
      --line:#8A8267;
      --accent:#7FAEE0;
      --accent-soft:#A6C7EA;
      --brass:#D8B75E;
      --info:#6FA3D8;
      --success:#6FBF73;
      --gold:#F0C651;
      --border:rgba(236,231,216,0.14);
      --shadow:rgba(0,0,0,0.4);
    }
  }
  :root[data-theme="dark"]{
    --paper:#1C1B16;
    --paper-2:#26241D;
    --panel:#242219;
    --ink:#ECE7D8;
    --ink-soft:#B4AD98;
    --line:#8A8267;
    --accent:#7FAEE0;
    --accent-soft:#A6C7EA;
    --brass:#D8B75E;
    --info:#6FA3D8;
    --success:#6FBF73;
    --gold:#F0C651;
    --border:rgba(236,231,216,0.14);
    --shadow:rgba(0,0,0,0.4);
  }

  /* The page's default accent is blue (the "regular user" color); acting as
     an admin with global (not toggled-into-user-mode) edit powers switches
     it back to the original red/brass accent, as a visual reminder that
     saves here land in the shared library, not a personal copy. */
  body.admin-mode-active{ --accent:#A23E33; --accent-soft:#C97569; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) body.admin-mode-active{ --accent:#DC8477; --accent-soft:#E9A99E; }
  }
  :root[data-theme="dark"] body.admin-mode-active{ --accent:#DC8477; --accent-soft:#E9A99E; }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    min-height:100vh;
  }
  ::selection{ background:var(--accent); color:var(--panel); }

  .wrap{
    width:90%;
    margin:0 auto;
    padding:36px 28px 56px;
  }

  header.top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:28px;
    border-bottom:1px solid var(--border);
    padding-bottom:18px;
  }
  h1{
    font-family:"Fraunces", Georgia, serif;
    font-style:italic;
    font-weight:600;
    font-size:2.4rem;
    letter-spacing:-0.01em;
    margin:0;
    text-wrap:balance;
  }
  .kicker{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 4px;
  }
  .tagline{
    font-size:0.92rem;
    color:var(--ink-soft);
    max-width:32ch;
    text-align:right;
    margin:0;
  }

  .panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 1px 2px var(--shadow);
  }

  .toolbar{
    padding:16px 18px;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:flex-end;
    margin-bottom:18px;
  }
  .toolbar[hidden]{ display:none; }

  /* Login / local-mode screen: a single centered card instead of a toolbar
     row, since this replaces the whole page rather than sitting alongside
     other controls. */
  .auth-screen{
    display:flex;
    justify-content:center;
    padding:28px 0 18px;
  }
  .auth-screen[hidden]{ display:none; }
  .auth-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 6px 24px var(--shadow);
    width:100%;
    max-width:380px;
    padding:34px 36px;
  }
  .auth-card-title{
    font-family:"Fraunces", Georgia, serif;
    font-style:italic;
    font-weight:600;
    font-size:1.5rem;
    margin:0 0 8px;
  }
  .auth-card-sub{
    font-size:0.86rem;
    color:var(--ink-soft);
    line-height:1.5;
    margin:0 0 24px;
  }
  .auth-field{ margin-bottom:16px; }
  .auth-label{
    display:block;
    font-size:0.66rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-family:"IBM Plex Mono", monospace;
    margin:0 0 6px;
  }
  .auth-field .text-input{
    width:100%;
    padding:10px 12px;
    font-size:0.95rem;
  }
  .auth-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
  }
  .auth-actions .btn{
    width:100%;
    padding:11px 14px;
    font-size:0.92rem;
  }
  .auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:26px 0 20px;
    color:var(--ink-soft);
    font-family:"IBM Plex Mono", monospace;
    font-size:0.66rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }
  .auth-divider::before, .auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
  }
  .auth-local-btn{ width:100%; padding:11px 14px; }
  .auth-local-hint{ margin:10px 0 0; text-align:center; }
  .field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .field[hidden]{ display:none; }
  .field-label{
    font-size:0.66rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-family:"IBM Plex Mono", monospace;
  }
  .seg{
    display:inline-flex;
    border:1px solid var(--border);
    border-radius:7px;
    overflow:hidden;
    background:var(--paper);
  }
  .seg button{
    border:none;
    background:transparent;
    color:var(--ink);
    font-family:"Work Sans", sans-serif;
    font-size:0.86rem;
    padding:7px 12px;
    cursor:pointer;
    border-right:1px solid var(--border);
    transition:background 0.12s ease, color 0.12s ease;
  }
  .seg button:last-child{ border-right:none; }
  .seg button:hover{ background:var(--paper-2); }
  #durSeg{ border:none; background:none; border-radius:0; overflow:visible; gap:6px; }
  .seg button.note-glyph{
    font-family:"Bravura Text","Work Sans",sans-serif;
    font-size:22px;
    line-height:1;
    padding:0 10px 2px;
    min-width:1.6em;
    width:2.4em;
    height:2.4em;
    border:1px solid var(--border);
    border-radius:9px;
    text-align:center;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .seg button.active{ background:var(--ink); color:var(--paper); }
  .seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
  .seg button:disabled{ opacity:0.4; cursor:not-allowed; }

  select.key-select{
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--paper);
    color:var(--ink);
    font-family:"Work Sans", sans-serif;
    font-size:0.86rem;
    padding:7px 10px;
    cursor:pointer;
  }
  select.key-select:focus-visible{ outline:2px solid var(--accent); }

  .text-input{
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--paper);
    color:var(--ink);
    font-family:"Work Sans", sans-serif;
    font-size:0.86rem;
    padding:7px 10px;
    width:100%;
  }
  .text-input:focus-visible{ outline:2px solid var(--accent); }

  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:500;
    padding:20px;
  }
  .modal-overlay[hidden]{ display:none; }
  .modal-box{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,0.3);
    width:min(680px, 100%);
    max-height:85vh;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px;
  }
  .modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:"Fraunces", serif;
    font-style:italic;
    font-size:1.1rem;
  }
  #xmlModalText{
    width:100%;
    height:280px;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.72rem;
    line-height:1.4;
    background:var(--paper);
    color:var(--ink);
    border:1px solid var(--border);
    border-radius:7px;
    padding:10px;
    resize:vertical;
  }
  .modal-footer{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .inspector-list{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:14px;
    row-gap:8px;
    margin:0;
    overflow-y:auto;
  }
  .inspector-list dt{ color:var(--ink-soft); font-family:"IBM Plex Mono", monospace; font-size:0.78rem; white-space:nowrap; }
  .inspector-list dd{ margin:0; font-family:"IBM Plex Mono", monospace; font-size:0.82rem; }

  .help-modal-body{
    overflow-y:auto;
    flex:1 1 auto;
    min-height:0;
    padding-right:6px;
    font-family:"Work Sans", sans-serif;
    font-size:0.86rem;
    line-height:1.5;
    color:var(--ink);
  }
  .help-modal-body h3{
    font-family:"Fraunces", serif;
    font-style:italic;
    font-size:1rem;
    margin:20px 0 8px;
  }
  .help-modal-body h3:first-child{ margin-top:0; }
  .help-modal-body p{ margin:0 0 10px; }
  .shortcut-list{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:14px;
    row-gap:6px;
    margin:0 0 10px;
  }
  .shortcut-list dt{
    color:var(--ink-soft);
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    white-space:nowrap;
    align-self:start;
  }
  .shortcut-list dd{ margin:0; }

  .btn{
    border:1px solid var(--border);
    background:var(--paper);
    color:var(--ink);
    font-family:"Work Sans", sans-serif;
    font-size:0.86rem;
    padding:8px 14px;
    border-radius:7px;
    cursor:pointer;
    transition:background 0.12s ease, transform 0.05s ease;
  }
  .btn:hover{ background:var(--paper-2); }
  .btn:active{ transform:translateY(1px); }
  .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--panel); font-weight:500; }
  .btn.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
  .btn.primary:hover{ background:var(--accent-soft); border-color:var(--accent-soft); }
  .btn.ghost{ background:transparent; }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .icon-toggle-fixed{
    position:fixed;
    left:16px;
    width:40px;
    height:40px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    background:var(--paper);
    color:var(--ink);
    border-radius:10px;
    font-size:1.2rem;
    line-height:1;
    cursor:pointer;
    z-index:50;
    transition:background 0.12s ease, transform 0.05s ease;
  }
  .icon-toggle-fixed:hover{ background:var(--paper-2); }
  .icon-toggle-fixed:active{ transform:translateY(1px); }
  .icon-toggle-fixed:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .icon-toggle-fixed[hidden]{ display:none; }
  .theme-toggle-fixed{ top:16px; }
  /* Each button is 40px tall with a 10px gap to the one above it. */
  .songs-toggle-fixed{ top:66px; }
  .mode-toggle-fixed{ top:116px; }
  .playback-toggle-fixed{ top:166px; }
  .playback-toggle-fixed.active{ background:var(--accent); border-color:var(--accent); color:var(--panel); }
  .playback-toggle-fixed.active:hover{ background:var(--accent-soft); border-color:var(--accent-soft); }
  /* Always visible (not gated behind login like the buttons above it) — the
     instructions are just as relevant to a logged-out, read-only visitor. */
  .help-toggle-fixed{ top:216px; font-family:"Fraunces", serif; font-weight:600; }
  .mode-toggle-fixed.active{ background:var(--accent); border-color:var(--accent); color:var(--panel); }
  .mode-toggle-fixed.active:hover{ background:var(--accent-soft); border-color:var(--accent-soft); }

  .menu-wrap{ position:relative; }
  .dropdown-menu{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    min-width:230px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 6px 18px var(--shadow);
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:2px;
    z-index:60;
  }
  .dropdown-menu[hidden]{ display:none; }
  .menu-item{
    background:none;
    border:none;
    text-align:left;
    padding:9px 10px;
    border-radius:7px;
    color:var(--ink);
    font-family:"Work Sans", sans-serif;
    font-size:0.86rem;
    cursor:pointer;
  }
  .menu-item:hover{ background:var(--paper-2); }
  .menu-item[hidden]{ display:none; }
  .menu-item.active{ background:var(--paper-2); font-weight:600; }
  .menu-item.active::before{ content:"✓ "; }

  .spacer{ flex:1 1 auto; }

  .tempo-row{ display:flex; align-items:center; gap:10px; }
  input[type="range"]{ accent-color:var(--accent); width:120px; }
  .bpm-readout{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.86rem;
    min-width:5.5ch;
  }

  .staff-shell{
    padding:22px 4px 10px;
    position:relative;
  }
  .staff-shell:fullscreen{
    width:100%;
    height:100%;
    background:var(--panel);
    display:flex;
    flex-direction:column;
    padding:22px 18px;
    border-radius:0;
  }
  .staff-shell:fullscreen .staff-scroll{ flex:1 1 auto; overflow-y:auto; }
  #fullscreenBtn.active{ background:var(--accent); border-color:var(--accent); color:var(--panel); }
  .staff-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
  }
  .staff-scroll::-webkit-scrollbar{ height:8px; }
  .staff-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

  .zoom-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:0 18px 14px;
  }
  .zoom-row .row-sep{
    width:1px;
    align-self:stretch;
    background:var(--border);
    margin:0 6px;
  }
  .zoom-btn{
    width:30px;
    height:30px;
    padding:0;
    font-family:"IBM Plex Mono", monospace;
    font-size:1rem;
    line-height:1;
  }
  #zoomReadout{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    color:var(--ink-soft);
    min-width:4ch;
    text-align:center;
  }
  /* Anchored at the staff's own left edge (STAFF_LEFT in script.js), not the
     wrap's bounding-box corner — otherwise the empty margin before the staff
     lines start gets scaled too, and the whole staff visibly slides right
     each time the zoom level goes up. */
  #staffZoomWrap{ transform-origin: 40px top; }

  /* Shown on screen too (not just print) whenever there's something to show
     — updatePrintHeader() in script.js sets the `hidden` attribute based on
     the title/number/credits checkboxes and whether the fields are filled. */
  #printHeader{ margin:0 0 10px; }
  #printHeader h2{ margin:0; font-family:"Fraunces", serif; color:var(--ink); font-size:1.3rem; }
  #printCredits{ margin:2px 0 0; font-size:0.82rem; color:var(--ink-soft); }
  #printCredits:empty{ display:none; }

  @media print{
    /* Hide everything on the page except the staff itself (no dark theme,
       no scroll clipping) so the printed page is just clean, readable
       notation on plain white paper — at whatever zoom level is currently
       set on screen, since #staffZoomWrap/#staffSizer keep their own
       zoom-driven inline transform/size here rather than being reset. */
    body *{ visibility:hidden; }
    #staffPanel, #staffPanel *{ visibility:visible; }
    #staffPanel{ position:absolute; top:0; left:0; width:100%; box-shadow:none; border:none; background:#fff; padding:0; }
    .zoom-row{ display:none; }
    #printHeader{ margin:0 0 12px; }
    #printHeader[hidden]{ display:none !important; }
    #printHeader h2{ color:#000; }
    #printCredits{ font-size:12px; color:#000; }
    .staff-scroll{ overflow:visible; padding:0; }
    /* Reproduce the current on-screen zoom width exactly (--print-width,
       kept in sync by applyZoom() in script.js) instead of the JS
       transform:scale() used on screen, which print can't reflow — but cap
       it with max-width so a wide/zoomed-in piece shrinks to fit the page
       instead of being clipped at the paper edge. */
    #staffZoomWrap{ transform:none !important; }
    #staffSizer{ width:auto !important; height:auto !important; }
    #staffSvg{ width:var(--print-width, auto); max-width:100%; height:auto; background:#fff; }
    .staffline, .barline, .ledger, .volta-line, .tuplet-line{ stroke:#000 !important; }
    .clef-glyph, .keysig-accidental, .timesig-glyph, .measure-num, .note-head, .note-stem, .note-flag,
    .rest-shape, .aug-dot, .accidental, .chord-label, .lyric-label, .tie-mark, .barline-dot, .volta-label, .tuplet-label{ fill:#000 !important; stroke:#000 !important; }
    .hit-target, .barline-handle, .note-tool, .tool-circle-guide, .hover-label, .inline-editor, .playhead{ display:none !important; }
    .note-group.in-range{ filter:none !important; }
    /* Hidden elements never print, regardless of the on-screen "show
       hidden" toggle — printing is the actual engraved output. */
    .reveal-hidden{ display:none !important; }
  }

  #staffSvg{ display:block; cursor:crosshair; }
  .staffline{ stroke:var(--line); stroke-width:1; }
  .barline{ stroke:var(--ink-soft); stroke-width:1; }
  .barline.final{ stroke-width:2.2; }
  .barline-dot{ fill:var(--ink-soft); }
  .volta-line{ stroke:var(--ink-soft); stroke-width:1.3; fill:none; }
  .volta-label{ font-family:"IBM Plex Mono", monospace; font-size:11px; fill:var(--ink-soft); }
  .tuplet-line{ stroke:var(--ink-soft); stroke-width:1; fill:none; }
  .tuplet-label{ font-family:"IBM Plex Mono", monospace; font-size:11px; font-style:italic; fill:var(--ink-soft); }
  .ledger{ stroke:var(--ink-soft); stroke-width:1; }
  .note-head{ fill:var(--ink); font-family:"Bravura Text","IBM Plex Mono",monospace; }
  .note-stem{ stroke:var(--ink); stroke-width:1.2; fill:none; }
  .note-flag{ fill:var(--ink); font-family:"Bravura Text","IBM Plex Mono",monospace; }
  .accidental{ fill:var(--brass); font-family:"Bravura Text","IBM Plex Mono",monospace; }
  .keysig-accidental{ fill:var(--brass); font-family:"Bravura Text","IBM Plex Mono",monospace; }
  .timesig-glyph{ fill:var(--ink); font-family:"Bravura Text","IBM Plex Mono",monospace; }
  .rest-shape{ fill:var(--ink-soft); font-family:"Bravura Text","IBM Plex Mono",monospace; }
  .aug-dot{ fill:var(--ink); font-family:"Bravura Text","IBM Plex Mono",monospace; }
  .tie-mark{ opacity:0.8; }
  .clef-glyph{ font-family:"Bravura Text","Fraunces",serif; fill:var(--ink); }
  /* --measure-num-size is set from JS (state.measureNumSize) on #staffSvg —
     the fallback here only matters before that first happens. */
  .measure-num{ font-family:"IBM Plex Mono", monospace; font-size:var(--measure-num-size, 9px); fill:var(--ink-soft); }
  /* --lyric-font-size is set from JS (state.lyricFontSize) on #staffSvg —
     the fallback here only matters before that first happens. Chords always
     render 2px larger than the lyric size, never set independently. */
  .chord-label{ font-family:"IBM Plex Mono", monospace; font-size:calc(var(--lyric-font-size, 11.5px) + 2px); font-weight:500; fill:var(--brass); text-anchor:middle; }
  .lyric-label{ font-family:var(--lyric-font-family, "Work Sans", sans-serif); font-size:var(--lyric-font-size, 11.5px); fill:var(--ink); text-anchor:middle; }
  .hit-target{ fill:transparent; }
  /* Range-selected notes/rests glow gold — drop-shadow (not a background
     tint or an outline) so it follows the exact shape of the notehead/stem/
     flag/dots inside the group, with nothing drawn behind them. */
  .note-group.in-range{ filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 7px var(--gold)); }
  /* A hidden note/rest/barline/time-signature, drawn anyway because "show
     hidden elements" is on — same gold glow as a range selection, so both
     read as "not part of the normal engraving, shown for editing only". */
  .reveal-hidden{ filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 7px var(--gold)); }
  .barline-handle{ fill:transparent; cursor:ew-resize; }
  .note-group{ cursor:default; }
  .note-tool{ opacity:0; pointer-events:none; transition:opacity 0.1s ease; cursor:pointer; transform-box: fill-box; transform-origin: 50% 50%; }
  .tool-circle-guide{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; opacity:0; pointer-events:none; }
  body.edit-mode .note-group.pinned .tool-circle-guide{ opacity:0.5; }
  @keyframes noteToolIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes noteToolOut{ from{ opacity:1; } to{ opacity:0; } }
  @keyframes guideIn{ from{ opacity:0; } to{ opacity:0.5; } }
  @keyframes guideOut{ from{ opacity:0.5; } to{ opacity:0; } }
  .note-tool-exit{ animation:noteToolOut 0.2s ease-in forwards; pointer-events:none; }
  .note-tool-enter{ animation:noteToolIn 0.18s ease-out; }
  .tool-circle-guide.note-tool-exit{ animation:guideOut 0.2s ease-in forwards; }
  .tool-circle-guide.note-tool-enter{ animation:guideIn 0.18s ease-out; }
  /* transform-box has no single cross-browser default for SVG elements
     (Chrome, Firefox and Safari have each shipped a different one at some
     point), so the same transform-origin — and thus the same rotate() pivot
     or scale() shrink point — can otherwise land in a different place from
     browser to browser. Pinning it explicitly makes these animations behave
     the same everywhere: the spin pivots on the circle's own center (an
     absolute point in the SVG's own coordinate system), and the icons/circle
     scale down around their own center as they fly toward it. */
  .tool-circle-spin{ transform-box: view-box; }
  @keyframes circleSpinInRight{ from{ transform:rotate(-150deg); } to{ transform:rotate(0deg); } }
  @keyframes circleSpinInLeft{ from{ transform:rotate(150deg); } to{ transform:rotate(0deg); } }
  .tool-circle-spin-enter-right{ animation:circleSpinInRight 0.32s ease-out; }
  .tool-circle-spin-enter-left{ animation:circleSpinInLeft 0.32s ease-out; }
  @keyframes flyToCenterOut{
    from{ transform:translate(var(--tx), var(--ty)) scale(1); opacity:1; }
    to{ transform:translate(var(--cx), var(--cy)) scale(0); opacity:0; }
  }
  .note-tool.note-tool-exit{ animation:flyToCenterOut 0.22s ease-in forwards; }
  body.edit-mode .note-group{ cursor:pointer; }
  body.edit-mode .note-group.pinned .note-tool{ opacity:1; pointer-events:auto; }
  body.edit-mode .note-group:hover .note-head, body.edit-mode .note-group.pinned .note-head{ fill:var(--accent); }
  body.edit-mode .note-group:hover .note-stem, body.edit-mode .note-group.pinned .note-stem{ stroke:var(--accent); }
  body.edit-mode .note-group:hover .note-flag, body.edit-mode .note-group.pinned .note-flag{ fill:var(--accent); }
  body.edit-mode .note-group:hover .rest-shape, body.edit-mode .note-group.pinned .rest-shape{ fill:var(--accent); }
  body.edit-mode .note-group:hover .aug-dot, body.edit-mode .note-group.pinned .aug-dot{ fill:var(--accent); }
  body.edit-mode .note-group.pinned .hit-target{ cursor:pointer; }
  body.edit-mode .note-group.tools-expanded .note-head, body.edit-mode .note-group.tools-expanded .rest-shape{ fill:var(--gold); transition:fill 0.15s ease; }
  body.edit-mode .note-group.tools-expanded .note-stem, body.edit-mode .note-group.tools-expanded .note-flag{ stroke:var(--gold); fill:var(--gold); }
  body.edit-mode .note-group.tools-expanded{ filter:drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 9px var(--gold)); }

  #toolbarDimOverlay{ position:fixed; inset:0; background:rgba(0,0,0,0); pointer-events:none; z-index:400; transition:background 0.25s ease; }
  body.toolbar-focus-active #toolbarDimOverlay{ background:rgba(0,0,0,0.55); pointer-events:auto; }
  body.toolbar-focus-active .staff-shell{ z-index:401; }
  .note-tool.tool-delete circle{ fill:var(--accent); }
  .note-tool.tool-chord circle{ fill:var(--brass); }
  .note-tool.tool-lyric circle{ fill:var(--ink-soft); }
  .note-tool.tool-acc circle{ fill:var(--ink); }
  .note-tool.tool-info circle{ fill:var(--info); }
  .note-tool.tool-edit circle{ fill:var(--success); }
  .note-tool.tool-lock circle{ fill:var(--ink-soft); }
  .note-tool.tool-lock-active circle{ fill:var(--gold); }
  .note-tool circle{ transition:filter 0.15s ease, transform 0.15s ease; transform-box: fill-box; transform-origin: 50% 50%; }
  .note-tool:hover circle{ filter:brightness(1.35); transform:scale(1.18); }
  /* The edit toggle (green "e") floats 10px further up while the toolbar
     ring is expanded, then eases back down to its resting spot on collapse.
     This can't be a plain `transition`: the whole SVG (this icon included)
     is torn down and rebuilt from scratch on every render, so there's never
     an existing element around for a transition to interpolate from — only
     a real @keyframes `animation` plays on a freshly-created element like
     that. `.tool-lift-up` alone is the steady end-state for renders where
     the toolbar isn't actively flipping (e.g. dragging the note itself). */
  .tool-lift.tool-lift-up{ transform:translateY(-10px); }
  .tool-lift.tool-lift-anim-up{ animation:toolLiftUp 0.18s ease forwards; }
  .tool-lift.tool-lift-anim-down{ animation:toolLiftDown 0.18s ease forwards; }
  @keyframes toolLiftUp{ from{ transform:translateY(0); } to{ transform:translateY(-10px); } }
  @keyframes toolLiftDown{ from{ transform:translateY(-10px); } to{ transform:translateY(0); } }
  .note-tool text{ fill:var(--panel); font-family:"IBM Plex Mono", monospace; font-size:10px; text-anchor:middle; }
  .note-tool.tool-acc text{ font-family:"Bravura Text","IBM Plex Mono",monospace; font-size:17px; }
  .playhead{ stroke:var(--accent); stroke-width:2; opacity:0; }
  .playhead.on{ opacity:1; }
  .hover-label{
    position:absolute;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.72rem;
    background:var(--ink);
    color:var(--paper);
    padding:2px 6px;
    border-radius:4px;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-130%);
    white-space:nowrap;
  }

  .inline-editor{
    position:absolute;
    display:none;
    transform:translate(-50%,-50%);
    width:110px;
    text-align:center;
    font-size:0.78rem;
    padding:3px 6px;
    border-radius:5px;
    border:1.5px solid var(--accent);
    background:var(--panel);
    color:var(--ink);
    z-index:5;
  }
  .inline-editor.chord{ font-family:"IBM Plex Mono", monospace; }
  .inline-editor.lyric{ font-family:"Work Sans", sans-serif; }

  .status-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:12px 18px 16px;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.72rem;
    color:var(--ink-soft);
    border-top:1px solid var(--border);
  }
  .status-row strong{ color:var(--ink); font-weight:500; }

  .hint{
    font-size:0.82rem;
    color:var(--ink-soft);
    margin:14px 2px 0;
    line-height:1.5;
  }
  .hint b{ color:var(--ink); font-weight:600; }

  @media (max-width: 620px){
    h1{ font-size:1.9rem; }
    .tagline{ text-align:left; }
    header.top{ flex-direction:column; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }