/* ===============================
   FONTS & VARIABLES
   =============================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Music&display=swap');

:root{
  /* Theme */
  --bg:#0b1020;
  --panel:#121a36;
  --ink:#e6ecff;
  --muted:#9fb0ff4a;
  --accent:#6ea8ff;
  --bar:#cfe2ff;

  /* Layout/grid */
  --system-gap:140px;
  --rowh:28px;                  /* matches JS ROW_STEP */
  --grid-color:rgba(0,0,0,.15); /* horiz grid line color (white mode) */

  /* Barlines */
  --bar-color:#000;
  --bar-thin:2px;       /* thin rule */
  --bar-thick:5px;      /* thick rule */
  --bar-gap:3px;        /* inset from edges */
  --bar-spacing:2px;    /* space between rules */
  --bar-dot-offset:6px; /* dot distance from bar */

  /* Jump glyph sizing */
  --coda-size-score: 36px;    /* size on SCORE */
  --coda-size-palette: 36px;  /* size in PALETTE */
}

/* One place to set music glyph fonts */
.jump .jump-glyph,
#jumpPalette .jump-glyph,
.jump-glyph,
.music-font{
  font-family: 'Noto Music', 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols2', sans-serif;
}

/* ===============================
   BASE LAYOUT / TYPOGRAPHY
   =============================== */
*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  overscroll-behavior:none;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-serif, Georgia, "Times New Roman", serif;
}

.app{ display:grid; grid-template-columns:300px 1fr; gap:12px; height:100%; }
.right{ display:grid; grid-template-rows:auto auto 1fr auto; }

h1{
  color:#ff0;
  font-family:'Roboto', serif;
  font-size:24px;
  font-weight:900;
  margin:6px 0;
  padding-top:20px;
  text-align:center;
  text-shadow:
    -1px 1px 0 #ddd,
    -2px 2px 0 #c8c8c8,
    -3px 3px 0 #ccc,
    -4px 4px 0 #bbb,
    0 1px 1px rgba(0,0,0,.4),
    0 2px 2px rgba(0,0,0,.3),
    -1px 3px 3px rgba(0,0,0,.2),
    -1px 5px 5px rgba(0,0,0,.1),
    -2px 8px 8px rgba(0,0,0,.1),
    -2px 13px 13px rgba(0,0,0,.1);
}
.sub{ font-size:12px; color:#cbd5ff99; }

/* ===============================
   LEFT RAIL / PALETTES
   =============================== */
.left{
  background:var(--panel);
  padding:12px;
  border-right:1px solid #1f2a55;
  overflow:auto;
  color:#fff;
}
.left .sect>summary, .left .tile{ color:#fff; }

.sect{
  border:1px solid #1f2a55;
  border-radius:10px;
  margin:10px 0;
  background:#0d1738;
}
.sect>summary{
  cursor:pointer; padding:8px 12px; list-style:none; font-weight:600;
}
.sect[open]>summary{ border-bottom:1px solid #1f2a55; }

.tilegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px; }
.notegrid{ grid-template-columns:repeat(7,1fr); }

.tile{
  display:flex; align-items:center; justify-content:center;
  height:54px; border:1px solid #2b3a75; border-radius:10px; background:#0f1631; cursor:grab;
}
.tile.selected{ outline:2px solid var(--accent); }

/* Barline miniature icons (palette) */
.bar-icon{ position:relative; width:80%; height:26px; }
.bar-icon .v{ position:absolute; top:3px; bottom:3px; width:2px; background:#cfe2ff88; }
.bar-icon .v.thick{ width:4px; background:#cfe2ffcc; }
.bar-icon .dot{ position:absolute; width:4px; height:4px; border-radius:50%; background:#cfe2ffdd; }

/* Smaller tiles for rests/notes */
#restPalette .tile{ height:36px; font-size:14px; padding:2px 4px; min-width:36px; width:auto; }
#notePalette .tile{ height:40px; font-size:16px; padding:4px 6px; }

/* Inputs in left rail */
.left select,
.left input[type="text"],
.left input[type="number"]{
  width:100%; max-width:200px;
  background:#0f1631; color:#e6ecff; border:1px solid #2b3a75; border-radius:8px;
  padding:6px 10px; margin-top:6px;
}
.left select:focus,
.left input[type="text"]:focus,
.left input[type="number"]:focus{
  outline:2px solid var(--accent); border-color:transparent;
}
.left select option{ background:#0f1631; color:#e6ecff; }
.left input::placeholder{ color:#cfe2ff99; }
.left .sub{ color:#cfe2ff; font-weight:600; }

/* ===============================
   TOOLBAR
   =============================== */
.toolbar{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:10px; background:#0b122b; border-bottom:1px solid #1f2a55;
}
.toolbar button:not(.btn),
.toolbar select,
.toolbar input{
  background:#0a122b; color:#e9f0ff; border:1px solid #2b3a75; border-radius:8px; padding:6px 10px;
}
.toolbar button{ cursor:pointer; }
.toolbar .sub, .toolbar label.sub{ color:#fff !important; }

/* Compact tempo input */
#tempo{ width:2.5ch; padding:2px 6px; min-width:0; }
#tempo::-webkit-outer-spin-button,
#tempo::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#tempo[type="number"]{ -moz-appearance:textfield; }

/* ===============================
   SCORE AREA
   =============================== */
.score-wrap{ position:relative; overflow:auto; overscroll-behavior:contain; background:#0c132d; border-top:1px solid #1f2a55; }
.score{ position:relative; min-height:520px; z-index:0; }

/* Vertical grid (toggle via .grid-on) */
.score.grid-on::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(
    to right,
    rgba(227,235,255,.16) 0px,
    rgba(227,235,255,.16) 1px,
    transparent 1px,
    transparent var(--colw)
  );
  background-size:var(--colw) 100%;
}

/* Horizontal grid aligned to rows (toggle via .hgrid) */
.score.hgrid::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--grid-color) 0,
    var(--grid-color) 1px,
    transparent 1px,
    transparent var(--rowh)
  );
  top:20px !important;
}

/* ===============================
   SCORE HEADER
   =============================== */
.score-info{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 10px; border-bottom:1px solid #1f2a55;
}
.score-info .titleblock{ text-align:center; }
.score-info .title{
  font-family:'Roboto', serif; font-weight:900; font-size:26px;
  letter-spacing:.5px; text-transform:uppercase; margin:4px 0 2px;
}
.score-info .author{ font-style:italic; font-size:14px; opacity:.8; margin-bottom:4px; }
.score-info .meta{ width:100%; display:flex; align-items:center; gap:14px; font-size:14px; opacity:.95; }

.score-info [contenteditable][data-placeholder]:empty:before{
  content:attr(data-placeholder); color:#cbd5ff99;
}

/* Key-signature tag */
.keysig-tag{
  position:absolute; top:-16px; left:-10px; padding:0 4px; font-size:11px;
  color:#cfe2ff; background:#0c132d; border-radius:4px; opacity:.95; pointer-events:none; white-space:nowrap;
}
/* make sure keysigs are visible and positioned */
#score .keysig{
  position:absolute;
  pointer-events:auto;
  font-size:12px;
  opacity:0.95;
}

/* ===============================
   BARLINES (DIVIDERS)
   =============================== */
.measure-divider{
  position:absolute; z-index:2; opacity:.95; background:transparent; cursor:pointer;
}
.measure-divider.selected{ cursor:pointer; }
.measure-divider.dragging{ cursor:ew-resize !important; }

/* Single line */
.measure-divider.single{ width:var(--bar-thin); background:var(--bar-color); }

/* Shared pseudo-elements */
.measure-divider.double,
.measure-divider.final,
.measure-divider.rep-start,
.measure-divider.rep-end{ position:absolute; }
.measure-divider.double::before,
.measure-divider.double::after,
.measure-divider.final::before,
.measure-divider.final::after,
.measure-divider.rep-start::before,
.measure-divider.rep-start::after,
.measure-divider.rep-end::before,
.measure-divider.rep-end::after{
  content:""; position:absolute; top:0; bottom:0; background:var(--bar-color);
}

/* Double (thin ... thin) */
.measure-divider.double{
  width:calc(var(--bar-gap)*2 + var(--bar-thin)*2 + var(--bar-spacing));
}
.measure-divider.double::before{ left:var(--bar-gap);  width:var(--bar-thin); }
.measure-divider.double::after { right:var(--bar-gap); width:var(--bar-thin); }

/* Final (thin ... THICK) */
.measure-divider.final{
  width:calc(var(--bar-gap)*2 + var(--bar-thin) + var(--bar-spacing) + var(--bar-thick));
}
.measure-divider.final::before{ left:var(--bar-gap);  width:var(--bar-thin); }
.measure-divider.final::after { right:var(--bar-gap); width:var(--bar-thick); }

/* Repeat start (THICK ... thin) */
.measure-divider.rep-start{
  width:calc(var(--bar-gap)*2 + var(--bar-thick) + var(--bar-spacing) + var(--bar-thin));
}
.measure-divider.rep-start::before{ left:var(--bar-gap);  width:var(--bar-thick); }
.measure-divider.rep-start::after { right:var(--bar-gap); width:var(--bar-thin); }

/* Repeat end (thin ... THICK) */
.measure-divider.rep-end{
  width:calc(var(--bar-gap)*2 + var(--bar-thin) + var(--bar-spacing) + var(--bar-thick));
}
.measure-divider.rep-end::before{ left:var(--bar-gap);  width:var(--bar-thin); }
.measure-divider.rep-end::after { right:var(--bar-gap); width:var(--bar-thick); }

/* Repeat both (thin — thick — thin, dots both sides) */
.measure-divider.rep-both{
  position:absolute;
  width:calc(
    var(--bar-gap)*2 +
    var(--bar-thin) + var(--bar-spacing) +
    var(--bar-thick) + var(--bar-spacing) +
    var(--bar-thin)
  );
}
.measure-divider.rep-both::before,
.measure-divider.rep-both::after{
  content:""; position:absolute; top:0; bottom:0; background:var(--bar-color);
}
.measure-divider.rep-both::before{ left:var(--bar-gap); width:var(--bar-thin); }
.measure-divider.rep-both::after { right:var(--bar-gap); width:var(--bar-thin); }
.measure-divider.rep-both .mid-thick{
  position:absolute; top:0; bottom:0;
  left:calc(var(--bar-gap) + var(--bar-thin) + var(--bar-spacing));
  width:var(--bar-thick); background:var(--bar-color);
}

/* Repeat dots */
.measure-divider .dots-left,
.measure-divider .dots-right{
  position:absolute; width:4px; height:12px; top:calc(42% - 2px);
  background:transparent;
}
.measure-divider .dots-left { left: calc(-1 * var(--bar-dot-offset)); }
.measure-divider .dots-right{ right:calc(-1 * var(--bar-dot-offset)); }
.measure-divider .dots-left::before,
.measure-divider .dots-left::after,
.measure-divider .dots-right::before,
.measure-divider .dots-right::after{
  content:""; position:absolute; left:0; width:4px; height:4px; border-radius:50%; background:var(--bar-color);
}
.measure-divider .dots-left::after,
.measure-divider .dots-right::after{ top:8px; }

/* Export: keep mid/dots black */
#scoreCapture .measure-divider.rep-both .mid-thick{ background:#000 !important; }
#scoreCapture .measure-divider .dots-left::before,
#scoreCapture .measure-divider .dots-left::after,
#scoreCapture .measure-divider .dots-right::before,
#scoreCapture .measure-divider .dots-right::after{ background:#000 !important; }

/* ===============================
   EVENTS (notes & rests)
   =============================== */
input[type="text"]{ font-weight:bold; text-align:center; color:blue; }

.event{
  position:absolute; display:inline-block; padding:0; font-size:22px; line-height:1;
  color:#e6ecff; background:transparent; cursor:grab; user-select:none; z-index:3;
}
.event .letter{ text-transform:uppercase; font-style:normal; font-size:.52em; letter-spacing:.04em; }
.event .stack{ position:relative; top:-.03em; display:inline-grid; line-height:1; }
.event .stack sup{ font-size:.40em; transform:translateY(-.02em); color:#9dd0ff; cursor:pointer; }
.event .stack sub{ font-size:.50em; transform:translateX(.1em); color:#ffd28b; cursor:pointer; } /* bigger duration */
.event .rest-label{ font-size:.72em; }

#scoreCapture .event,
#scoreCapture .event .stack sup.oct,
#scoreCapture .event .stack sub.dur,
#scoreCapture .event .rest-label{ color:#000 !important; }

/* Accidentals (shown on each note) */
.event .acc{
  display:inline-block;
  line-height:1;
  margin-right:2px;
  text-transform:none !important;      /* keep natural 'o' lowercase */
  font-variant-caps:normal !important;
}
.event .acc.nat{                      /* natural 'o' smaller & slightly raised */
  font-size:0.70em;
  transform:translateY(-0.12em);
  transform-origin:left bottom;
}

/* Selected / playing */
.event.selected{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.event.playing{ box-shadow:0 0 0 2px var(--accent), 0 0 10px var(--accent); border-radius:6px; }

/* ===============================
   LINES (slur, hairpins, volta, etc.)
   =============================== */
.line{ position:absolute; height:22px; pointer-events:auto; z-index:2; }
.line svg{ position:absolute; inset:0; display:block; overflow: visible; }
.line .hit{ position:absolute; inset:0; cursor:move; }
.line .resize{ position:absolute; right:-6px; top:0; bottom:0; width:12px; cursor:ew-resize; }
.line .label{ font-size:12px; fill:#cfe2ff; }
.line .stroke{ stroke:#cfe2ff; stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke; }
.line .dash{ stroke-dasharray:4 4; }
.line .label-html{ position:absolute; left:6px; top:-1px; font-size:12px; line-height:1; color:#cfe2ff; pointer-events:none; }
.line.selected{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* Export: lines go black */
#scoreCapture .line .label{ fill:#000 !important; }
#scoreCapture .line .stroke{ stroke:#000 !important; }
#scoreCapture .line .label-html{ color:#000 !important; }

/* ===============================
   LYRICS
   =============================== */
.lyric{
  position:absolute; font-size:16px; line-height:1;
  color:#1957bd; background:transparent; cursor:text; user-select:text; white-space:nowrap;
}
#scoreCapture .lyric{ color:#1957bd !important; }

/* ===============================
   JUMP MARKERS (Segno, Coda, etc.)
   =============================== */
.jump{
  position:absolute; z-index:4; font-size:14px; line-height:1; color:#cfe2ff;
  background:#0d1533; border:1px solid #2a3a7a; border-radius:6px; padding:2px 6px; white-space:nowrap;
}
.jump .sym{ font-family:"Times New Roman", serif; font-style:italic; }
.jump.selected{ outline:2px solid var(--accent); outline-offset:2px; }

/* SCORE sizes */
.jump .jump-glyph.segno { font-size:26px; }
.jump .jump-glyph.coda  { font-size:var(--coda-size-score); line-height:1; }

/* PALETTE sizing */
#jumpPalette .tile{ height:72px; display:flex; align-items:center; justify-content:center; }
#jumpPalette .tile svg{ display:block; }
#jumpPalette .jump-glyph{ display:block; line-height:1; font-weight:400; }
#jumpPalette .jump-glyph.segno{ font-size:24px; }
#jumpPalette .jump-glyph.coda { font-size:var(--coda-size-palette); line-height:1; }
/* Reduce first Segno tile size in palette (icon SVG) */
#jumpPalette .tile:first-child svg{ width:20px; height:20px; }
#jumpPalette .tile:first-child .jump-glyph{ font-size:30px; }

/* Export: jump style */
#scoreCapture .jump{ color:#000 !important; background:#fff !important; border-color:#ddd !important; }

/* ===============================
   LAYERING ORDER
   =============================== */
.score.grid-on::before,
.score.hgrid::after{ z-index:0; }  /* grids at the very back */
.measure-divider{ z-index:2; }     /* barlines above grids */
.line{ z-index:2; }                /* lines above grids */
.event{ z-index:3; }               /* notes on top */
.jump{ z-index:4; }                /* jumps above notes */

/* ===============================
   FOOTER & PICKER
   =============================== */
.footer{
  padding:8px 12px; border-top:1px solid #1f2a55; background:#0c132d;
  display:flex; gap:12px; align-items:center;
}
.status{ font-size:12px; color:#c7d5ff88; }
/*
.picker{
  position:absolute; z-index:9999; background:#0d1533; border:1px solid #2a3a7a; border-radius:10px;
  padding:6px; display:flex; gap:6px; flex-wrap:wrap;
}
.picker button{
  background:#14204a; color:#e9f0ff; border:1px solid #2a3a7a; border-radius:8px; padding:6px 8px; cursor:pointer;
}            */
.picker{
    position: absolute;
    z-index: 9999;
    display: flex;          /* lay items in a row */
    flex-wrap: wrap;        /* wrap to a new line if needed */
    gap: 6px;
    padding: 6px;
    background: var(--panel, #0f1833);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    width: auto;            /* never stretch */
    min-width: 0;
    max-width: clamp(160px, 40vw, 360px); /* keep it compact */
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .picker button{
    display: inline-block;  /* stop full-width buttons */
    flex: 0 0 auto;         /* size to content */
    padding: 4px 8px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;    /* keep 5/2, 1/3 on one line */
    background: #0e2046;
     color:#e9f0ff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
  }
  .picker button:hover{
    background: #14306e;
  }
  /* Optional: slightly tighter on phones */
  @media (max-width: 640px){
    .picker{ max-width: 80vw; gap: 4px; }
    .picker button{ padding: 3px 6px; font-size: 13px; }
  }
/* ===============================
   WHITE SCORE CAPTURE (export)
   =============================== */
#scoreCapture,
#scoreCapture .score-info,
#scoreCapture .score-wrap{
  background:#fff !important; color:#000 !important;
}
#scoreCapture .score-info{ border-bottom:1px solid #ddd !important; }
#scoreCapture .score-info .title,
#scoreCapture .score-info .author,
#scoreCapture .score-info .meta,
#scoreCapture .score-info .meta .val{ opacity:1 !important; }
#scoreCapture .score-info [contenteditable]:empty:before{ color:#666 !important; }

/* Vertical grid on white */
#scoreCapture .score.grid-on::before{
  background-image:repeating-linear-gradient(
    to right,
    rgba(0,0,0,.25) 0,
    rgba(0,0,0,.25) 2px,
    transparent 2px,
    transparent var(--colw)
  ) !important;
}
.measure-divider { position: absolute; }
.measure-divider .ks-tag{
  position:absolute; 
  left:6px;               /* a bit to the right of the bar */
  top:-16px;              /* above the staff; tweak if you like */
  white-space:nowrap;
  pointer-events:none;    /* don’t steal clicks from the barline */
  opacity:.9;
}
/* keep KS sits above staff lines, below notes; DOES NOT move vertically on drag */
#score .keysig-layer{
  position:absolute; inset:0; pointer-events:none; z-index:2;
}
#score .keysig{
  position:absolute; pointer-events:auto; /* you can still click it */
  font-size: 16px; line-height: 1;       /* tweak as you wish */
  transform: translateY(-50%);           /* center on staff middle line */
}
#score { position: relative; }
.score-info, .titleblock{
  position: sticky;   /* or relative */
  z-index: 10;        /* anything << 9999 */
}
/* grand-staff brace and barline cosmetics (only visible in Piano mode) */
#score .grand-brace{
  position:absolute;
  width: 10px;
  border-left: 2px solid var(--fg, #cfe2ff);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  opacity:.9;
  pointer-events:none;
}

#score .measure-divider.dragging{ cursor: ew-resize; }
.event .acc,
.event sup.acc,
.event sub.acc{
  text-transform:none !important;
  font-variant-caps:normal !important;
}
/* --- Chord alignment: accidentals hang left, don't shift the head --- */
/* Keep the note head as the alignment anchor */
.event{
  position: absolute;
  display: inline-flex;         /* baseline-align the letter/stack reliably */
  align-items: baseline;
}

/* Accidental no longer shifts the letter horizontally */
.event .acc{
  position: absolute;
  right: calc(100% + 2px);      /* sits just left of the letter */
  top: 0;                       /* anchor to the letter’s top */
  transform: translateY(-0.18em);
  line-height: 1;
  margin: 0 !important;

  /* never force caps on accidentals */
  text-transform: none !important;
  font-variant-caps: normal !important;
  pointer-events: none;
}

/* Natural = small lowercase "o" and a touch higher */
.event .acc.nat{
  font-size: 0.80em;
  transform: translateY(-0.26em);
}

/* Export path keeps the same geometry */
#scoreCapture .event .acc{
   vertical-align: 0.18em; 
  position: absolute;
  right: calc(100% + 2px);
  top: 0;
  transform: translateY(0.18em);
}
#scoreCapture .event .acc.nat{
  font-size: 0.80em;
  transform: translateY(-0.26em);
}

/* === final accidental geometry (normal + export) ================= */
#score .event .acc{
  position: absolute !important;
  right: calc(100% + 3px) !important;
  top: 0 !important;

  /* size & vertical alignment for + / - */
  font-size: 0.62em !important;
  line-height: 1 !important;
  transform: translateY(-0.10em) !important;

  margin: 0 !important;
  pointer-events: none !important;

  /* never let casing/small-caps affect symbols */
  text-transform: none !important;
  font-variant-caps: normal !important;
  font-feature-settings: "smcp" 0, "c2sc" 0, "case" 0 !important;
}

/* smaller + a touch higher for the natural 'o' */
#score .event .acc.nat{
  font-size: 0.62em !important;
  transform: translateY(-0.10em) !important;
}

/* keep export geometry identical */
#scoreCapture .event .acc{
  position: absolute !important;
  right: calc(100% + 3px) !important;
  top: 0 !important;
  font-size: 0.62em !important;
  transform: translateY(-0.20em) !important;
}
#scoreCapture .event .acc.nat{
  font-size: 0.62em !important;
  transform: translateY(-0.10em) !important;
}
  /* full-height app and prevent the whole page from scrolling */
  html, body { height: 100%; overflow: hidden; }

  /* two-pane layout fills the viewport */
  .app {
    display: flex;
    height: 100vh;
    overflow: hidden;      /* no outer scroll */
  }

  /* left palette: fixed/sticky, its own scroll */
  .left {
    width: 300px;          /* adjust to taste */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;        /* scroll just the palette if it’s long */
  }

  /* right side: vertical flex column */
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-width: 0;          /* allows children to shrink properly */
    overflow: hidden;      /* contain scrolling inside children */
  }

  /* toolbar stays visible at the top */
  .toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    /* keep the look consistent; set a solid bg so content under it doesn’t show */
    background: #0b1a2b;   /* or whatever your theme uses */
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* make ONLY the score area scroll vertically */
  #scoreCapture {
    flex: 1;               /* take remaining height under the toolbar */
    min-height: 0;         /* critical for flex children to become scrollable */
    overflow: auto;        /* vertical scrolling happens here */
    padding-bottom: 8px;   /* room for the footer’s shadow if any */
  }

  /* footer can stick to bottom (optional) */
  .footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #0b1a2b;   /* match your theme */
  }

  /* if your score canvas can get wider than the panel, let it scroll horizontally inside */
  #scoreCapture .score-wrap {
    overflow: auto;        /* enables horizontal scroll if needed */
  }
/* hairpins placed in score */
.hairpin {
  position: absolute;
  pointer-events: none;           /* lines don’t capture clicks */
  color: var(--ink, #000);
}
.hairpin svg { display:block }
#score .line .stroke {
  vector-effect: non-scaling-stroke; /* keeps stroke width constant for lines */
}