@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:#A23E33;
    --accent-soft:#C97569;
    --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:#DC8477;
      --accent-soft:#E9A99E;
      --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:#DC8477;
    --accent-soft:#E9A99E;
    --brass:#D8B75E;
    --info:#6FA3D8;
    --success:#6FBF73;
    --gold:#F0C651;
    --border:rgba(236,231,216,0.14);
    --shadow:rgba(0,0,0,0.4);
  }

  *{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; }
  .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; }

  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; }

  .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; }

  .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-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;
  }
  #staffZoomWrap{ transform-origin: top left; }

  #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.invisible{ stroke:transparent; }
  .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{ font-family:"IBM Plex Mono", monospace; font-size:9px; fill:var(--ink-soft); }
  .chord-label{ font-family:"IBM Plex Mono", monospace; font-size:12px; font-weight:500; fill:var(--brass); text-anchor:middle; }
  .lyric-label{ font-family:"Work Sans", sans-serif; font-size:11.5px; fill:var(--ink); text-anchor:middle; }
  .hit-target{ fill:transparent; }
  .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; }
  .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; }
  @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; }
  .note-tool:hover circle{ filter:brightness(1.35); transform:scale(1.18); }
  .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; }
  }