/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org)
 *
 * tools.css — the shared "deck" surface for /tools/.
 *
 * One rack unit per page. The deck IS the drop zone; when a file lands it
 * transforms in place rather than navigating, so nothing ever sits between the
 * user and the one input that matters.
 *
 * Everything is scoped to .vt-page so nothing here leaks into main.css.
 */

/* ───────────────────────────────────────────────────────────────
   TWO GLOBAL RULES IN main.css BREAK THIS PAGE. Both are overridden here.
   1. main.css:563  `canvas { position: fixed; width:100%; height:100% }`
      — meant for the homepage particle canvas. Without this override it rips
      the waveform out of the deck and paints it over the whole viewport.
   2. main.css:611  `section { opacity: 0; transform: translateY(50px) }`
      — revealed only by an IntersectionObserver. We never wrap the deck in a
      <section>, and we pin .vt-page visible as belt and braces.
   ─────────────────────────────────────────────────────────────── */
.vt-page canvas {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  background: transparent;
}
.vt-page {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Tokens ─────────────────────────────────────────────────── */
.vt-page {
  --vt-gutter: 16px;
  --vt-radius: 16px;
  --vt-radius-sm: 12px;
  --vt-rail: 4px;
  --vt-accent: #ff6ec7;
  /* A pink focus ring on a pink button is invisible; use the site's blue. */
  --vt-focus: #3a86ff;
  --vt-deck-bg: #fff;
  --vt-stage-bg: var(--bg-tertiary);
  --vt-ink: var(--text-primary);
  --vt-ink-2: var(--text-secondary);
  --vt-ink-3: var(--text-tertiary);
  --vt-line: var(--border-color);
  --vt-ctl-line: rgba(0, 0, 0, .3);
  --vt-shadow: 0 20px 50px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
  --vt-tap: 48px;
  --vt-danger: #e8102e;

  max-width: 1180px;
  margin: 0 auto;
  padding-block: 7rem 3rem;
  padding-inline: max(var(--vt-gutter), env(safe-area-inset-left)) max(var(--vt-gutter), env(safe-area-inset-right));
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}
[data-theme="dark"] .vt-page {
  --vt-focus: #7bb1ff;
  --vt-ctl-line: rgba(255, 255, 255, .36);
  --vt-deck-bg: #16171d;
  --vt-line: rgba(255, 255, 255, .16);
  --vt-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .6);
  --vt-danger: #ff6b81;
}
@media (max-width: 599px) { .vt-page { padding-top: 5.75rem; } }
@media (min-width: 600px) { .vt-page { --vt-gutter: 24px; --vt-radius: 20px; } }
@media (min-width: 900px) { .vt-page { --vt-gutter: 32px; } }

/* The ONLY visual difference between the two tools.
   Both gradients are lifted from the site's own learn.css palette. */
.vt-page--audio { --vt-rail-fill: linear-gradient(135deg, #ff8a00 0%, #e8102e 55%, #ff6ec7 100%); }
.vt-page--score { --vt-rail-fill: linear-gradient(135deg, #0e8c9c 0%, #1b84c4 50%, #8b5cf6 100%); }
/* Buttons carry white text, so they get darker stops than the rail (white on #ff8a00 is 2.4:1). */
.vt-page--audio { --vt-btn-fill: linear-gradient(135deg, #b84e00 0%, #c80d27 55%, #c2338f 100%); --vt-btn-glow: rgba(200, 13, 39, .45); }
.vt-page--score { --vt-btn-fill: linear-gradient(135deg, #0b7280 0%, #1668a3 50%, #7040d8 100%); --vt-btn-glow: rgba(22, 104, 163, .45); }

/* ── Header ─────────────────────────────────────────────────── */
/* main.css:495 styles the bare `header` tag as the HOMEPAGE HERO:
   min-height:92vh, flex, centred, margin-top:70px. Our <header class="vt-head">
   inherits all of it, which pushed the deck 1,026px down the page and put the
   drop zone below the fold on every viewport. Every one of those properties has
   to be unset explicitly — a class selector only wins for what it declares. */
.vt-head {
  position: static;
  min-height: 0;
  overflow: visible;
  text-align: left;
  margin-top: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.vt-head, .vt-tail, .vt-xlink { max-width: 1080px; margin-inline: auto; }
@media (min-width: 720px) {
  .vt-head { grid-template-columns: 1fr auto; align-items: center; column-gap: 2rem; }
  .vt-head h1, .vt-head p { grid-column: 1; }
  .vt-pledge { grid-column: 2; grid-row: 1 / span 2; }
}
.vt-head h1 {
  /* Deliberately NOT the site's gradient-clipped headline: gradient type is for
     marketing surfaces. A utility's title should read as a label on a device. */
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
}
.vt-head p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 46ch;
}
.vt-pledge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, .1);
  color: var(--success-color, #10b981);
  border: 1px solid rgba(16, 185, 129, .3);
  white-space: nowrap;
  justify-self: start;
}
.vt-pledge i { font-size: .7rem; }

/* ── The deck ───────────────────────────────────────────────── */
.vt-deck {
  position: relative;
  background: var(--vt-deck-bg);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius);
  box-shadow: var(--vt-shadow);
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (min-width: 900px) {
  .vt-deck { max-width: 1080px; margin-inline: auto; }
}
.vt-deck:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 3px; }

/* The rail: the one piece of colour that identifies which tool you are on. */
.vt-deck::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--vt-rail);
  background: var(--vt-rail-fill);
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 2;
}
.vt-page[data-state="over"] .vt-deck::before,
.vt-page[data-state="reject"] .vt-deck::before { height: 6px; }


/* ── Drop zone (idle / over / reject) ───────────────────────── */
.vt-dz {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  margin: calc(var(--vt-gutter) + var(--vt-rail)) var(--vt-gutter) var(--vt-gutter);
  min-height: 360px;
  padding: 2.5rem 1.25rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--vt-line);
  border-radius: var(--vt-radius-sm);
  transition: border-color .2s ease, background-color .2s ease;
}
@media (max-width: 599px) { .vt-dz { min-height: 300px; } }
.vt-dz:hover { border-color: rgba(255, 110, 199, .55); background-color: rgba(255, 110, 199, .03); }
.vt-page[data-state="over"] .vt-dz { border-style: solid; border-color: var(--vt-accent); background-color: rgba(255, 110, 199, .08); }
.vt-page[data-state="reject"] .vt-dz { border-style: solid; border-color: var(--vt-danger); background-color: rgba(232, 16, 46, .05); }
.vt-page[data-state="reject"] .vt-dz__formats { color: var(--vt-danger); font-weight: 600; }
@media (hover: none) and (pointer: coarse) { .vt-dz__or { display: none; } }
.vt-page[data-state="reading"] .vt-dz,
.vt-page[data-state="working"] .vt-dz,
.vt-page[data-state="ready"] .vt-dz,
.vt-page[data-state="error"] .vt-dz { display: none; }

.vt-dz__glyph {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(255, 110, 199, .10);
  color: var(--vt-accent);
  font-size: 28px;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s ease;
}
@media (max-width: 599px) { .vt-dz__glyph { width: 64px; height: 64px; font-size: 22px; } }
.vt-page[data-state="over"] .vt-dz__glyph { transform: scale(1.08); background: rgba(255, 110, 199, .18); }
.vt-page[data-state="reject"] .vt-dz__glyph { background: rgba(232, 16, 46, .14); color: var(--vt-danger); }

.vt-dz__title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.25; }
@media (max-width: 599px) { .vt-dz__title { font-size: 1.2rem; } }
.vt-page[data-state="reject"] .vt-dz__title { color: var(--vt-danger); }
.vt-dz__or { font-size: .8rem; color: var(--vt-ink-3); margin: -.35rem 0; }
.vt-dz__formats { font-size: .78rem; color: var(--vt-ink-3); margin: 0; line-height: 1.6; }

/* Flat baseline on the deck floor: the machine is on, there is no signal yet. */
.vt-deck__floor {
  display: none !important;
  position: absolute;
  inset-inline: 8%;
  inset-block-end: 26px;
  height: 1px;
  background: currentColor;
  color: var(--vt-ink);
  opacity: .1;
  pointer-events: none;
}
.vt-page[data-state="over"] .vt-deck__floor { opacity: .22; animation: vt-idle-wave 2s linear infinite; }
@keyframes vt-idle-wave {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.vt-page[data-state="reading"] .vt-deck__floor,
.vt-page[data-state="working"] .vt-deck__floor,
.vt-page[data-state="ready"] .vt-deck__floor,
.vt-page[data-state="error"] .vt-deck__floor { display: none; }

/* ── Buttons ────────────────────────────────────────────────── */
.vt-btn {
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  border-radius: var(--vt-radius-sm);
  border: 1px solid var(--vt-line);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0 1.1rem;
  min-height: var(--vt-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.vt-btn:hover { background: var(--bg-card-hover, var(--bg-secondary)); border-color: rgba(255, 110, 199, .4); }
.vt-btn:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 2px; }
.vt-btn:active { transform: translateY(1px); }
.vt-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.vt-btn[disabled]:hover { background: var(--bg-secondary); border-color: var(--vt-line); }

/* Later than .vt-btn:hover on purpose: the modifier must win every state. */
.vt-btn--primary,
.vt-btn--primary:hover,
.vt-btn--primary[disabled]:hover {
  min-height: 52px;
  padding: 0 1.6rem;
  border: none;
  color: #fff;
  background: var(--vt-btn-fill, var(--vt-rail-fill));
  box-shadow: 0 10px 24px -12px var(--vt-btn-glow, rgba(255, 110, 199, .8));
}
.vt-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 30px -14px var(--vt-btn-glow, rgba(255, 110, 199, .9)); }
.vt-btn--primary:active { transform: translateY(0); filter: brightness(.96); box-shadow: 0 6px 14px -10px var(--vt-btn-glow, rgba(255, 110, 199, .8)); }
.vt-btn--primary[disabled], .vt-btn--primary[disabled]:hover { transform: none; filter: none; }
.vt-btn--ghost, .vt-btn--ghost:hover { background: transparent; }
.vt-btn--ghost:hover { background: var(--hover-bg, rgba(127, 127, 127, .08)); }
.vt-btn--sm { min-height: 38px; font-size: .82rem; padding: 0 .8rem; }
@media (pointer: coarse) { .vt-btn--sm { min-height: 44px; } }

/* ── Slug: filename + facts, appears instantly ──────────────── */
.vt-slug {
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .85rem var(--vt-gutter);
  border-bottom: 1px solid var(--vt-line);
  min-height: 56px;
}
.vt-page[data-state="reading"] .vt-slug,
.vt-page[data-state="working"] .vt-slug,
.vt-page[data-state="ready"] .vt-slug { display: flex; }
.vt-slug__icon { color: var(--vt-accent); font-size: 1rem; flex: none; }
.vt-slug__text { min-width: 0; flex: 1; }
/* min-width:0 is mandatory on a flex child or a long filename blows out the deck. */
.vt-slug__name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vt-slug__meta {
  font-size: .76rem;
  color: var(--vt-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Stage: the waveform or the sheet ───────────────────────── */
.vt-stage { display: none; padding: var(--vt-gutter); }
.vt-page[data-state="reading"] .vt-stage,
.vt-page[data-state="working"] .vt-stage,
.vt-page[data-state="ready"] .vt-stage { display: block; }

.vt-wave {
  position: relative;
  width: 100%;
  height: 150px;
  background: var(--vt-stage-bg);
  border-radius: var(--vt-radius-sm);
  overflow: hidden;
}
@media (min-width: 1200px) { .vt-wave { height: 180px; } }
@media (max-width: 599px) { .vt-wave { height: 112px; } }
.vt-wave canvas { display: block; }

/* Honest scan line while decoding: decodeAudioData reports no progress, and
   inventing a percentage would be a lie on a page selling honesty. */
.vt-scan {
  position: absolute;
  inset-block: 0;
  width: 42px;
  display: none;
  background: linear-gradient(90deg, transparent, rgba(255, 110, 199, .35), var(--vt-accent));
  animation: vt-scan 900ms linear infinite;
}
.vt-page[data-state="reading"] .vt-scan { display: block; }
@keyframes vt-scan { from { transform: translateX(-42px); } to { transform: translateX(calc(100vw)); } }

.vt-caption {
  font-size: .82rem;
  color: var(--vt-ink-3);
  margin: .7rem 0 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ── Rack: the controls ─────────────────────────────────────── */
.vt-rack { display: none; padding: 0 var(--vt-gutter) var(--vt-gutter); gap: 1.25rem; }
.vt-page[data-state="ready"] .vt-rack,
.vt-page[data-state="working"] .vt-rack { display: grid; }
@media (min-width: 900px) { .vt-rack { grid-template-columns: 1fr 1fr; } }

.vt-group { display: grid; gap: .6rem; align-content: start; }
.vt-group__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vt-ink-3);
}
.vt-field { display: grid; gap: .3rem; }
.vt-field > label { font-size: .8rem; color: var(--vt-ink-2); font-weight: 500; }
.vt-field select,
.vt-field input[type="number"] {
  font-family: inherit;
  font-size: .9rem;
  min-height: var(--vt-tap);
  padding: 0 .7rem;
  border-radius: var(--vt-radius-sm);
  border: 1px solid var(--input-border, var(--vt-ctl-line, var(--vt-line)));
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-primary);
  width: 100%;
}
.vt-field select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  text-overflow: ellipsis;
  padding: 0 2.2rem 0 .8rem;
  font-weight: 500;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  transition: border-color .15s ease;
}
[data-theme="dark"] .vt-field select { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); }
[data-theme="dark"] .vt-field select option { background: #16171d; }
.vt-field select:hover { border-color: rgba(255, 110, 199, .55); }
.vt-field select:focus-visible,
.vt-field input:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 1px; }
.vt-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.vt-check { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--vt-ink-2); cursor: pointer; min-height: var(--vt-tap); }
.vt-check input { width: 18px; height: 18px; accent-color: var(--vt-accent); flex: none; }

/* Stepper for transpose */
.vt-stepper { display: flex; align-items: center; gap: .5rem; }
.vt-stepper output {
  min-width: 4.5rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ── Dock: the result and the download ──────────────────────── */
.vt-dock {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: var(--vt-gutter);
  border-top: 1px solid var(--vt-line);
  background: var(--bg-tertiary);
}
.vt-page[data-state="ready"] .vt-dock,
.vt-page[data-state="working"] .vt-dock { display: flex; }
.vt-dock__info { font-size: .85rem; color: var(--vt-ink-2); font-variant-numeric: tabular-nums; }
.vt-dock__info strong { color: var(--text-primary); }

.vt-progress {
  flex: 1 1 160px;
  height: 8px;
  border-radius: 999px;
  background: var(--vt-line);
  overflow: hidden;
  display: none;
}
.vt-page[data-state="working"] .vt-progress { display: block; }
.vt-progress > i { display: block; height: 100%; width: 0%; background: var(--vt-rail-fill); transition: width .2s linear; }

/* ── Error ──────────────────────────────────────────────────── */
.vt-error { display: none; place-content: center; justify-items: center; min-height: 360px; padding: 2.5rem var(--vt-gutter); text-align: center; }
.vt-page[data-state="error"] .vt-error { display: grid; }
.vt-error__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(232, 16, 46, .1); font-size: 1.5rem; color: var(--vt-danger); margin-bottom: 1rem; }
.vt-error__msg { font-size: .98rem; color: var(--text-primary); max-width: 52ch; margin: 0 auto 1.25rem; line-height: 1.6; }

/* ── Tail: prose for humans and crawlers ────────────────────── */
.vt-tail {
  margin-top: 2.5rem;
  display: grid;
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius);
  background: var(--vt-deck-bg);
  overflow: hidden;
}
.vt-tail details { padding: 0; }
.vt-tail details + details { border-top: 1px solid var(--vt-line); }
.vt-tail summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  transition: background-color .15s ease;
  /* Chrome renders the disclosure triangle via ::marker now, so the old
     -webkit-details-marker rule alone left BOTH the native triangle and our
     chevron showing. list-style:none is the part that actually removes it. */
  list-style: none;
}
.vt-tail summary::-webkit-details-marker { display: none; }
.vt-tail summary::marker { content: ''; }
.vt-tail summary:hover { background-color: var(--hover-bg, rgba(127, 127, 127, .06)); }
.vt-tail summary:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: -3px; border-radius: var(--vt-radius-sm); }
.vt-tail summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--vt-ink-3);
  border-bottom: 2px solid var(--vt-ink-3);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.vt-tail details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.vt-tail p { margin: 0; padding: 0 1.25rem 1.1rem; max-width: 72ch; font-size: .9rem; line-height: 1.7; color: var(--text-secondary); }

.vt-xlink {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  font-size: .88rem;
}
.vt-xlink a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid transparent; }
.vt-xlink a:hover { color: #b0247c; border-bottom-color: currentColor; }
[data-theme="dark"] .vt-xlink a:hover { color: var(--vt-accent); }

/* ── Score stage: a real sheet of paper ─────────────────────── */
.vt-sheet {
  background: #fdfdfa;
  border-radius: var(--vt-radius-sm);
  border: 1px solid var(--vt-line);
  padding: 10px;
  max-height: 52vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* Stays warm-white in dark mode, like a lit window in the device. */
[data-theme="dark"] .vt-sheet { background: #f7f6f1; }
.vt-sheet svg { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .vt-page *, .vt-page *::before { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   AUDIO EDITOR (v2) — playback, drag trim, fades, zoom, menu
   One framed editor, one toolbar row, one export bar.
   ═══════════════════════════════════════════════════════════════════ */
.vt-page--audio {
  --vt-toast-accent: #ff8fd3;
  /* Coral waveform vs magenta handles: they separate by hue, not just by weight. */
  --vt-ed-handle: #c42a86;
  --vt-ed-tint: 255, 110, 199;
  --vt-ed-wave: #ee4b3b;
  --vt-ed-wave-hi: #ff8a4c;
  --vt-ed-dim: rgba(14, 15, 23, .06);
  --vt-ed-ghost: rgba(90, 90, 110, .38);
  --vt-hover: rgba(127, 127, 127, .12);
}
[data-theme="dark"] .vt-page--audio {
  --vt-ed-handle: #ff6ec7;
  --vt-ed-tint: 255, 110, 199;
  --vt-ed-wave: #ff5a4a;
  --vt-ed-wave-hi: #ffa06a;
  --vt-ed-dim: rgba(0, 0, 0, .5);
  --vt-ed-ghost: rgba(200, 200, 215, .45);
  --vt-hover: rgba(255, 255, 255, .08);
}

.vt-page [hidden], .vt-toast[hidden] { display: none !important; }

/* ── top line: hint on the left, exact times on the right ──────── */
.vt-page--editor .vt-edtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 10px;
}
.vt-page--editor .vt-edtop .vt-caption { margin: 0; text-align: left; flex: 1 1 260px; min-width: 0; font-size: .8rem; line-height: 1.45; }
.vt-page--editor .vt-readouts { display: flex; gap: 6px; }
.vt-page--editor[data-state="reading"] .vt-readouts,
.vt-page--editor[data-state="reading"] .vt-transport,
.vt-page--editor[data-state="reading"] .vt-mini,
.vt-page--editor[data-state="reading"] .vt-h,
.vt-page--editor[data-state="reading"] .vt-fh { visibility: hidden; }

.vt-time {
  font-family: inherit;
  min-height: 36px;
  padding: 0 .7rem;
  border-radius: 9px;
  border: 1px solid var(--vt-line);
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .45rem;
  cursor: text;
  font-variant-numeric: tabular-nums;
  position: relative;
  transition: border-color .15s ease, background-color .15s ease;
  align-content: center;
  line-height: 34px;
}
.vt-time:hover { border-color: rgba(var(--vt-ed-tint), .55); background: var(--vt-hover); }
.vt-time:focus-visible, .vt-time:focus-within { outline: 3px solid var(--vt-focus); outline-offset: 2px; }
.vt-time span { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-ink-3); }
.vt-time b { font-size: .92rem; font-weight: 600; }
.vt-time__input {
  font: 600 16px/1.2 Poppins, system-ui, sans-serif;
  width: 6.5em;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.vt-time__input[aria-invalid="true"] { color: var(--vt-danger); }
.vt-shake { animation: vt-shake .2s linear; }
@keyframes vt-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ── the editor: one framed unit ─────────────────────────────── */
.vt-ed {
  --ed-ruler: 20px; --ed-wave: 200px; --ed-lane: 28px;
  position: relative;
  padding-bottom: var(--ed-lane);
  border-radius: var(--vt-radius-sm);
  background: var(--vt-stage-bg);
  box-shadow: inset 0 0 0 1px var(--vt-line);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: box-shadow .15s ease;
}
@media (min-width: 1200px) { .vt-ed { --ed-wave: 230px; } }
@media (max-width: 599px) { .vt-ed { --ed-wave: 150px; } }
@media (pointer: coarse) { .vt-ed { --ed-ruler: 24px; --ed-lane: 44px; } }
@media (orientation: landscape) and (max-height: 500px) { .vt-ed { --ed-wave: 110px; } }
.vt-ed::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: var(--ed-lane);
  border-top: 1px solid var(--vt-line);
  pointer-events: none;
}
.vt-page--audio .vt-wave {
  height: calc(var(--ed-ruler) + var(--ed-wave));
  background: transparent;
  border-radius: var(--vt-radius-sm) var(--vt-radius-sm) 0 0;
  cursor: text;
}
.vt-page--audio .vt-wave:focus-visible { outline: none; }
.vt-page--audio .vt-ed:has(.vt-wave:focus-visible) { box-shadow: inset 0 0 0 1px var(--vt-line), 0 0 0 3px var(--vt-focus); }
.vt-page--audio[data-quiet-focus] .vt-ed:has(.vt-wave:focus-visible) { box-shadow: inset 0 0 0 1px var(--vt-line); }

.vt-playhead {
  position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  margin-left: -1px; background: var(--vt-ink); pointer-events: none; will-change: transform;
}
.vt-playhead::before {
  content: ""; position: absolute; top: 0; left: -4px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--vt-ink);
}

/* trim handles: a bar through the wave, a grip in the lane below */
.vt-h {
  position: absolute; top: 0; left: 0; width: 0;
  height: calc(var(--ed-ruler) + var(--ed-wave) + var(--ed-lane));
  will-change: transform; z-index: 3; outline: none;
}
.vt-h::before, .vt-h::after { content: ""; position: absolute; touch-action: none; cursor: ew-resize; }
.vt-h::before { top: var(--ed-ruler); bottom: 0; left: -8px; width: 16px; }
@media (pointer: coarse) {
  /* Wide in the lane, narrow over the wave, so taps near an edge still seek. */
  .vt-h::before { top: calc(var(--ed-ruler) + var(--ed-wave)); left: -22px; width: 44px; }
  .vt-h::after { top: var(--ed-ruler); height: var(--ed-wave); left: -12px; width: 24px; }
}
.vt-h__bar {
  position: absolute; left: -1px; top: var(--ed-ruler); width: 2px; height: var(--ed-wave);
  background: var(--vt-ed-handle); pointer-events: none;
}
.vt-h__grip {
  position: absolute; left: -6px; bottom: calc((var(--ed-lane) - 22px) / 2); width: 12px; height: 22px; border-radius: 6px;
  background-color: var(--vt-ed-handle); pointer-events: none;
  box-shadow: 0 2px 6px rgba(196, 42, 134, .35);
  transition: transform .12s ease;
}
.vt-h__grip::before, .vt-h__grip::after {
  content: ""; position: absolute; top: 30%; bottom: 30%; width: 1px; background: rgba(255, 255, 255, .85);
}
.vt-h__grip::before { left: 4px; }
.vt-h__grip::after { right: 4px; }
@media (pointer: coarse) {
  .vt-h__grip { left: -10px; width: 20px; height: 34px; bottom: calc((var(--ed-lane) - 34px) / 2); border-radius: 8px; }
  .vt-h__grip::before { left: 7px; } .vt-h__grip::after { right: 7px; }
}
.vt-h:hover .vt-h__grip { transform: scaleY(1.1); }
.vt-h:focus-visible .vt-h__grip { outline: 3px solid var(--vt-focus); outline-offset: 2px; }
.vt-h--off .vt-h__grip { opacity: .45; }
.vt-h--off .vt-h__bar { opacity: 0; }
.vt-h--off::before, .vt-h--off::after { pointer-events: none; }

/* fade handles — centred on the end of their curve (ruler + 17px) */
.vt-fh {
  position: absolute; left: -7px; top: calc(var(--ed-ruler) + 10px); width: 14px; height: 14px;
  border-radius: 50%; background: var(--vt-deck-bg); border: 2px solid var(--vt-ed-handle);
  z-index: 4; will-change: transform; outline: none; cursor: grab; box-sizing: border-box;
  transition: background-color .12s ease;
}
.vt-fh::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; touch-action: none; }
@media (pointer: coarse) {
  .vt-fh { width: 20px; height: 20px; left: -10px; top: calc(var(--ed-ruler) + 7px); }
  .vt-fh::before { inset: -12px; }
}
.vt-fh:hover { background: var(--vt-ed-handle); }
.vt-fh:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 2px; }

.vt-edchip {
  position: absolute; top: calc(var(--ed-ruler) + 32px); left: 0; z-index: 5;
  margin-left: -60px; min-width: 120px; text-align: center; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: #1f2027; color: #fff; pointer-events: none;
  font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

/* minimap: only there when there is something to navigate */
.vt-mini {
  position: relative; height: 24px; margin-top: 8px; border-radius: 6px;
  background: var(--vt-stage-bg); overflow: hidden; touch-action: none; cursor: grab;
  transition: height .2s ease, margin .2s ease, opacity .2s ease;
}
.vt-mini[data-fitted="true"] { height: 0; margin-top: 0; opacity: 0; pointer-events: none; }
.vt-mini canvas { display: block; }
.vt-mini__win {
  position: absolute; top: 0; left: 0; height: 100%;
  border: 1.5px solid var(--vt-ed-handle); border-radius: 6px;
  background: rgba(var(--vt-ed-tint), .10); pointer-events: none; box-sizing: border-box;
}

/* ── toolbar: grouped segments, one button language ─────────── */
.vt-transport { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .75rem; }
.vt-transport__play { display: flex; align-items: center; gap: .35rem; }
.vt-transport__sp { flex: 1; }
.vt-play {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--vt-btn-fill); color: #fff; font-size: 1rem;
  box-shadow: 0 6px 16px -4px var(--vt-btn-glow); display: grid; place-items: center;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;

}
.vt-play .fa-play { margin-left: 3px; }
.vt-play:hover { transform: scale(1.05); filter: brightness(1.08); }
.vt-play:active { transform: scale(.96); }
.vt-play:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 3px; }

.vt-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 12px; background: var(--vt-stage-bg);
}
.vt-tbtn {
  font-family: inherit; min-height: 38px; min-width: 38px; padding: 0 .6rem;
  border: 0; border-radius: 9px; background: transparent; color: var(--vt-ink-2);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-size: .85rem; font-weight: 500; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vt-tbtn--icon { padding: 0; }
.vt-tbtn i { font-size: .88rem; }
/* Buttons that stand alone get an outline so they read as buttons, not text. */
.vt-transport__play > .vt-tbtn, .vt-transport > .vt-tbtn { box-shadow: inset 0 0 0 1px var(--vt-line); }
.vt-tbtn:hover { background: var(--vt-hover); color: var(--text-primary); }
.vt-tbtn:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 2px; }
.vt-tbtn[aria-pressed="true"], .vt-tbtn[aria-checked="true"] {
  background: var(--vt-deck-bg); color: var(--vt-ed-handle); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(var(--vt-ed-tint), .45);
}
.vt-tbtn[aria-pressed="true"]:hover, .vt-tbtn[aria-checked="true"]:hover { background: rgba(var(--vt-ed-tint), .14); color: var(--vt-ed-handle); }
.vt-tbtn[disabled] { opacity: .4; cursor: default; }
.vt-tbtn[disabled]:hover { background: transparent; color: var(--vt-ink-2); }
.vt-chip2 b {
  font-size: .74rem; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  background: rgba(var(--vt-ed-tint), .16); color: inherit; font-variant-numeric: tabular-nums;
}
.vt-clock { font-size: .85rem; color: var(--text-primary); font-variant-numeric: tabular-nums; padding: 0 .15rem; white-space: nowrap; }
.vt-clock__tot { color: var(--vt-ink-3); }
@media (pointer: coarse) { .vt-tbtn { min-height: 44px; min-width: 44px; } }

@media (max-width: 599px) {
  .vt-transport { gap: 6px; }
  /* Audio keeps its DOM order and reorders visually; the score reorders its
     DOM instead, so tab order follows what you see (WCAG 2.4.3). */
  .vt-page--audio .vt-transport__play { order: 1; }
  .vt-page--audio .vt-seg--hist { order: 2; }
  .vt-page--audio .vt-tbtn--edit { order: 3; }
  .vt-page--audio .vt-seg--fx { order: 4; }
  .vt-seg--hist { margin-left: auto; }
  .vt-seg--fx { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .vt-seg--fx::-webkit-scrollbar { display: none; }
  .vt-seg--fx .vt-tbtn { flex: 1 0 auto; }
  .vt-seg--fx .vt-tbtn i, #edToStart, .vt-zoom, .vt-transport__sp, .vt-clock__tot, .vt-tbtn__txt { display: none; }
  .vt-tbtn--edit { padding: 0; }
}
@media (max-width: 380px) { .vt-clock { display: none; } }

/* ── export: settings, then the one button ───────────────────── */
.vt-page--editor .vt-export { display: none; padding: 0 var(--vt-gutter); }
.vt-page--editor[data-state="ready"] .vt-export,
.vt-page--editor[data-state="working"] .vt-export { display: block; }
.vt-export__title {
  font-size: .95rem; font-weight: 600; color: var(--text-primary);
  margin: 0 0 .7rem; padding-top: var(--vt-gutter); border-top: 1px solid var(--vt-line);
}
.vt-outrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
@media (max-width: 599px) { .vt-outrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-page--editor .vt-field select { min-height: 44px; border-radius: 10px; }

.vt-page--editor .vt-dock {
  background: transparent; border-top: 0; flex-wrap: nowrap;
  gap: .75rem 1rem; padding: 1rem var(--vt-gutter) var(--vt-gutter);
}
.vt-page--editor .vt-dock__info { flex: 1 1 0; min-width: 0; }
.vt-barmsg { font-size: .85rem; color: var(--vt-ink-2); flex: 0 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.vt-barmsg:empty { display: none; }
.vt-barmsg--ok { color: #047857; font-weight: 600; }
[data-theme="dark"] .vt-barmsg--ok { color: #34d399; }
.vt-barmsg--err { color: var(--vt-danger); font-weight: 600; }
.vt-page--editor[data-state="working"] #go,
.vt-page--editor[data-state="working"] .vt-dock__info { display: none; }
.vt-page--editor[data-state="working"] .vt-progress { flex: 1 1 auto; max-width: 420px; height: 6px; }
.vt-page--editor[data-state="working"] .vt-dock { justify-content: flex-start; }
.vt-page--editor[data-state="working"] #cancel { margin-left: auto; }
.vt-page--editor[data-state="working"] .vt-ed,
.vt-page--editor[data-state="working"] .vt-transport { opacity: .6; }

/* Phones: the download is always one thumb away. */
@media (max-width: 899px) {
  .vt-page--score .vt-transport {
    position: sticky; bottom: var(--vt-dock-h, 68px); z-index: 5; margin-top: 0;
    padding: 8px var(--vt-gutter); margin-inline: calc(-1 * var(--vt-gutter));
    background: var(--vt-deck-bg); border-top: 1px solid var(--vt-line);
  }
  .vt-page--editor .vt-dock {
    position: sticky; bottom: 0; z-index: 6;
    background: var(--vt-deck-bg); border-top: 1px solid var(--vt-line);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .08);
    padding: 10px var(--vt-gutter) calc(10px + env(safe-area-inset-bottom));
  }
  .vt-page--editor .vt-dock__info { font-size: .78rem; line-height: 1.35; }
  .vt-page--editor .vt-dock:has(.vt-barmsg:not(:empty)) .vt-dock__info { display: none; }
  .vt-page--editor .vt-barmsg { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
  .vt-page--editor #go { flex: none; min-height: 48px; padding: 0 1.1rem; }
  body:has(.vt-page--editor:is([data-state="ready"], [data-state="working"])) .theme-toggle {
    bottom: calc(84px + env(safe-area-inset-bottom)); right: 12px; width: 44px; height: 44px;
  }
  body:has(.vt-page--score:is([data-state="ready"], [data-state="working"])) .theme-toggle {
    bottom: calc(var(--vt-dock-h, 68px) + var(--vt-bar-h, 124px) + 10px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 600px) {
  /* Desktop keeps Key/Tempo/Parts beside the transport. */
  .vt-page--score .vt-transport__play { order: 1; }
  .vt-page--score .vt-seg--fx { order: 2; }
  .vt-page--score .vt-transport__sp { order: 3; }
  .vt-page--score .vt-seg--hist { order: 4; }
  .vt-page--score .vt-zoom { order: 5; }
  .vt-page--score .vt-tbtn--edit { order: 6; }
}
@media (max-width: 599px) {
  .vt-page--editor:is([data-state="ready"], [data-state="working"], [data-state="reading"]) .vt-head p { display: none; }
  .vt-page--editor .vt-edtop { flex-direction: column-reverse; align-items: stretch; }
  .vt-page--editor .vt-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-page--editor .vt-time { display: grid; justify-items: center; gap: 0; min-height: 46px; line-height: 1.2; padding: 4px 2px; }
  .vt-page--editor .vt-time__input { width: 100%; text-align: center; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .vt-page--editor:not([data-state="idle"]) .vt-head { display: none; }
}

/* ── edit menu ───────────────────────────────────────────────── */
.vt-menu {
  padding: 6px; margin: 0; position: fixed; min-width: 260px;
  max-width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 24px); overflow: auto;
  border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm);
  background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
  font-family: Poppins, system-ui, sans-serif;
}
[data-theme="dark"] .vt-menu { background: #1d1e25; border-color: rgba(255, 255, 255, .14); }
.vt-menu::backdrop { background: transparent; }
.vt-menu__head { margin: 4px 10px 6px; font-size: .76rem; font-weight: 600; color: var(--vt-ink-3); font-variant-numeric: tabular-nums; }
.vt-menu__item {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; text-align: left;
  font: 500 .88rem Poppins, system-ui, sans-serif; outline: none;
}
@media (pointer: coarse) { .vt-menu__item { min-height: 48px; } }
.vt-menu__item i { width: 18px; text-align: center; color: var(--vt-ink-3); }
.vt-menu__item:focus-visible { background: var(--vt-hover, rgba(127, 127, 127, .12)); box-shadow: inset 0 0 0 2px var(--vt-focus); }
.vt-menu__item:focus-visible i { color: var(--vt-ed-handle); }
@media (hover: hover) {
  .vt-menu__item:hover { background: rgba(var(--vt-ed-tint), .12); }
  .vt-menu__item:hover i { color: var(--vt-ed-handle); }
}
.vt-menu__item[aria-disabled="true"] { opacity: .45; cursor: default; }
.vt-menu__item[aria-disabled="true"]:hover { background: transparent; }
.vt-menu__label { flex: 1; }
.vt-menu__check { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--vt-line); color: var(--text-secondary); }
.vt-menu__item[aria-checked="true"] .vt-menu__check { color: #fff; background: var(--vt-ed-handle, #b0247c); border-color: var(--vt-ed-handle, #b0247c); }
[data-theme="dark"] .vt-menu__item[aria-checked="true"] .vt-menu__check { color: #12131a; }
.vt-menu__kbd { min-width: 3.25rem; text-align: right; font: 500 .72rem Poppins, system-ui, sans-serif; color: var(--text-secondary); background: none; border: 0; padding: 0; }
@media (hover: none) { .vt-menu__kbd { display: none; } }
.vt-menu__sep { height: 1px; background: var(--vt-line); margin: 4px 0; }
.vt-menu--sheet {
  left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-width: 100%;
  border-radius: 20px 20px 0 0; max-height: 88dvh;
  padding: 0 max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.vt-menu--sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--vt-ink-3); opacity: .5; margin: 8px auto 6px; }
.vt-menu--sheet::backdrop { background: rgba(0, 0, 0, .4); }
.vt-menu--sheet .vt-menu__item { min-height: 50px; }
@media (orientation: landscape) and (max-height: 500px) {
  .vt-menu--sheet { max-height: 94dvh; max-width: 760px; left: 50% !important; transform: translateX(-50%); }
  .vt-menu--sheet #edMenuList { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .vt-menu--sheet .vt-menu__sep { grid-column: 1 / -1; }
  .vt-menu--sheet .vt-menu__item { min-height: 44px; }
}

/* ── toast: one dark surface in both themes ──────────────────── */
.vt-toast {
  position: fixed; left: 16px; right: 16px; width: max-content; margin-inline: auto;
  bottom: calc(20px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); z-index: 10300; display: flex; align-items: center; gap: 12px;
  background: #1f2027; color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 8px 8px 8px 16px;
  font: 500 .88rem Poppins, system-ui, sans-serif; box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
.vt-toast .vt-btn, .vt-toast .vt-btn:hover { color: var(--vt-toast-accent, #ff8fd3); border-color: transparent; background: transparent; border-radius: 999px; }
.vt-toast .vt-btn:hover { background: rgba(var(--vt-ed-tint), .16); }
.vt-toast .vt-btn:focus-visible { outline-color: currentColor; }
@media (max-width: 899px) { .vt-toast { bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* ── shortcuts dialog ────────────────────────────────────────── */
/* main.css resets `* { margin: 0 }`, which un-centres every modal dialog. */
.vt-keys {
  margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--vt-line); border-radius: 20px;
  background: var(--bg-secondary); color: var(--text-primary);
  width: min(820px, calc(100vw - 32px)); max-height: min(660px, calc(100dvh - 48px));
  font-family: Poppins, system-ui, sans-serif;
}
[data-theme="dark"] .vt-keys { background: #1d1e25; }
.vt-keys[open] { display: flex; flex-direction: column; }
.vt-keys::backdrop { background: rgba(0, 0, 0, .45); }
.vt-keys__in { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.vt-keys h2 { margin: 0; padding: 1.1rem 1.5rem; font-size: 1.1rem; border-bottom: 1px solid var(--vt-line); outline: none; }
.vt-keys__grid { overflow: auto; overscroll-behavior: contain; padding: 1rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
@media (max-width: 700px) { .vt-keys__grid { grid-template-columns: 1fr; } }
.vt-keys h3 { margin: .25rem 0 .6rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.vt-keys__col + .vt-keys__col h3 { margin-top: .25rem; }
@media (max-width: 700px) { .vt-keys__col + .vt-keys__col h3 { margin-top: 1.25rem; } }
.vt-keys dl { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem 1rem; margin: 0; font-size: .86rem; align-items: baseline; }
@media (max-width: 420px) { .vt-keys dl { grid-template-columns: 1fr; gap: 0; } .vt-keys dd { margin-bottom: .6rem; } }
.vt-keys dt, .vt-keys dd { margin: 0; }
.vt-keys dd { color: var(--text-secondary); }
.vt-keys kbd {
  font: 600 .76rem Poppins, system-ui, sans-serif; padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--vt-line); border-bottom-width: 2px; background: var(--bg-tertiary); white-space: nowrap;
}
.vt-gest { font-weight: 600; font-size: .84rem; }
.vt-keys form { margin: 0; padding: .75rem 1.5rem; border-top: 1px solid var(--vt-line); text-align: right; }

/* main.css puts overflow-x:hidden on html AND body, which turns body into a
   scroll container that never scrolls, so position:sticky pins to nothing.
   clip keeps the no-sideways-scroll guarantee without creating a scrollport. */
html:has(.vt-page--editor), body:has(.vt-page--editor) { overflow-x: clip; }
@media (max-width: 599px) { .vt-page--editor .vt-edtop .vt-caption { flex: none; } }
@media (max-width: 599px) { .vt-dock__more { display: none; } }
.vt-keys dl { grid-template-columns: 7rem 1fr; }
.vt-keys__col:has(.vt-gest) dl { grid-template-columns: 11rem 1fr; }
@media (max-width: 420px) { .vt-keys dl, .vt-keys__col:has(.vt-gest) dl { grid-template-columns: 1fr; } }
.vt-clock > span:first-child { display: inline-block; text-align: right; }


/* ═══════════════════════════════════════════════════════════════════
   SCORE EDITOR — pages, bar selection, key / tempo / parts popovers
   ═══════════════════════════════════════════════════════════════════ */
.vt-page--score {
  --vt-toast-accent: #8cc8ff;
  --vt-ed-handle: #1668a3;
  --vt-ed-tint: 22, 104, 163;
  --vt-hover: rgba(127, 127, 127, .12);
}
[data-theme="dark"] .vt-page--score {
  --vt-ed-handle: #6fb6ff;
  --vt-ed-tint: 111, 182, 255;
  --vt-hover: rgba(255, 255, 255, .08);
}

.vt-keyread {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; max-width: 100%;
  padding: 0 .8rem; border-radius: 9px; border: 1px solid var(--vt-ctl-line, var(--vt-line)); background: transparent;
  color: var(--text-primary); font: 600 .86rem/1.3 Poppins, system-ui, sans-serif; cursor: pointer; text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
.vt-keyread i { color: var(--vt-ed-handle); font-size: .78rem; flex: none; }
.vt-keyread span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-keyread:hover { border-color: rgba(var(--vt-ed-tint), .55); background: var(--vt-hover); }
.vt-keyread:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 2px; }
.vt-page--score[data-state="reading"] .vt-keyread { visibility: hidden; }
@media (max-width: 599px) {
  .vt-page--score .vt-edtop { flex-direction: column; align-items: stretch; }
  .vt-page--score .vt-keyread { order: -1; min-height: 44px; }
}

/* the stage: a desk the pages sit on */
.vt-scorewrap {
  position: relative; border-radius: var(--vt-radius-sm); overflow: hidden;
  background: var(--vt-stage-bg); box-shadow: inset 0 0 0 1px var(--vt-line);
}
.vt-page--score #deck { scroll-margin-top: 16px; }
.vt-score {
  height: clamp(380px, calc(100dvh - 330px), 820px); overflow: auto; overscroll-behavior: contain;
  outline: none; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
@media (max-width: 899px) {
  /* Sticky toolbar + dock sit on top of the stage: subtract their real height. */
  .vt-page--score .vt-score {
    height: clamp(200px, calc(100dvh - var(--vt-score-top, 180px) - var(--vt-bar-h, 124px) - var(--vt-dock-h, 68px)), 620px);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 390px tall: nav + file row + toolbar + dock left no music on screen. */
  .vt-page--score:not([data-state="idle"]) .vt-slug,
  .vt-page--score .vt-zoom,
  .vt-page--score .vt-tbtn__txt { display: none; }
  .vt-page--score .vt-transport { padding: 4px var(--vt-gutter); }
  .vt-page--score .vt-edtop { margin-bottom: 4px; }
  .vt-page--score .vt-score { height: clamp(150px, calc(100dvh - var(--vt-score-top, 120px) - var(--vt-bar-h, 60px) - var(--vt-dock-h, 68px)), 460px); }
}
.vt-score.is-overbar { cursor: pointer; }
.vt-scorewrap:has(.vt-score:focus-visible) { box-shadow: inset 0 0 0 1px var(--vt-line), 0 0 0 3px var(--vt-focus); }
.vt-page--score[data-quiet-focus] .vt-scorewrap:has(.vt-score:focus-visible) { box-shadow: inset 0 0 0 1px var(--vt-line); }
.vt-score__canvas { position: relative; margin: 26px auto; }
.vt-score__host { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.vt-score__host svg {
  display: block; background: #fff; margin: 0 0 26px; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .08);
}
[data-theme="dark"] .vt-score__host svg { filter: brightness(.94); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .6); }
/* OSMD's cursor is measured, not shown: .vt-playline mirrors it above the
   selection box, in a colour that cannot be mistaken for it. */
.vt-score__host img[id^="cursorImg"] { opacity: 0; pointer-events: none; }
.vt-playline {
  position: absolute; top: 0; left: 0; width: 3px; border-radius: 2px; z-index: 4;
  background: #e8467c; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95);
  will-change: transform;
}
.vt-page--score[data-transport="playing"] .vt-playline { transition: transform .08s linear; }
.vt-page--score[data-busy] .vt-score__canvas { opacity: .55; transition: opacity .15s ease; }
.vt-score__ov { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* Always on white paper, so one colour for both themes. */
.vt-selbox {
  position: absolute; border-radius: 6px;
  background: rgba(22, 104, 163, .10); box-shadow: inset 0 0 0 1.5px rgba(22, 104, 163, .75);
}
.vt-score__pill {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: #1f2027; color: #fff; font: 600 .74rem Poppins, system-ui, sans-serif; opacity: .88;
  pointer-events: none; font-variant-numeric: tabular-nums;
}
.vt-score__pill:empty { display: none; }
.vt-score__follow {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4;
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--vt-ed-handle); color: #fff; font: 600 .8rem Poppins, system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); display: inline-flex; align-items: center; gap: .4rem;
}
[data-theme="dark"] .vt-score__follow { color: #0b1a2a; }
.vt-page--score .vt-clock > span:first-child { display: inline-block; min-width: 3.9em; }
.vt-zoomval { min-width: 3.8rem; padding: 0 .35rem; font-variant-numeric: tabular-nums; font-size: .8rem; }
.vt-page--score[data-sound="loading"] .vt-play { animation: vt-pulse 1s ease-in-out infinite; }
@keyframes vt-pulse { 50% { box-shadow: 0 0 0 8px rgba(var(--vt-ed-tint), .25); } }

/* popovers share the menu surface */
.vt-pop { min-width: 320px; width: 440px; max-width: min(470px, calc(100vw - 16px)); }
.vt-menu--sheet.vt-pop { width: 100%; max-width: 100%; }
.vt-pop__head { font-size: .95rem; font-weight: 600; color: var(--text-primary); margin: 10px 12px 2px; }
.vt-pop__result:empty { display: none; }
.vt-pop__body { padding: 4px 10px 10px; display: grid; gap: .8rem; min-height: 0; overflow: auto; }
.vt-menu--sheet .vt-pop__foot { position: sticky; bottom: 0; background: inherit; padding-block: 8px; }
.vt-pop__from { margin: 0; font-size: .86rem; color: var(--text-secondary); }
.vt-pop__from b { color: var(--text-primary); }
.vt-pop__label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-ink-3); margin-bottom: -.4rem; }
.vt-keygrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 599px) { .vt-keygrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vt-keybtn {
  display: grid; justify-items: center; align-content: center; gap: 0; min-height: 50px; padding: 4px 2px;
  border-radius: 9px; border: 1px solid var(--vt-ctl-line, var(--vt-line)); background: transparent; color: var(--text-primary);
  cursor: pointer; font-family: inherit; transition: border-color .12s ease, background-color .12s ease;
}
.vt-keybtn b { font-size: .95rem; font-weight: 600; line-height: 1.2; }
.vt-keybtn--tri b { font-size: .8rem; color: var(--vt-ink-3); }
.vt-keybtn--tri b .on { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.vt-keybtn[aria-checked="true"] b, .vt-keybtn[aria-checked="true"] b .on { color: inherit; }
.vt-keybtn small { font-size: .66rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.vt-keybtn:hover { border-color: rgba(var(--vt-ed-tint), .6); background: var(--vt-hover); }
.vt-keybtn:focus-visible { outline: 3px solid var(--vt-focus); outline-offset: 1px; }
.vt-keybtn.is-orig { border-style: dashed; }
.vt-keybtn[aria-checked="true"] { background: var(--vt-ed-handle); border-color: var(--vt-ed-handle); border-style: solid; color: #fff; }
.vt-keybtn[aria-checked="true"] small { color: rgba(255, 255, 255, .88); }
[data-theme="dark"] .vt-keybtn[aria-checked="true"], [data-theme="dark"] .vt-keybtn[aria-checked="true"] small { color: #0b1a2a; }
.vt-pop__row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vt-pop__row sup { font-size: .6em; }
.vt-pop__result {
  margin: 0; font-size: .85rem; line-height: 1.5; padding: .6rem .75rem; border-radius: 9px;
  background: rgba(var(--vt-ed-tint), .08); color: var(--text-primary);
}
.vt-pop__foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.vt-pop__foot form { margin: 0; }
.vt-pop__big { margin: 0; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-pop input[type="range"] { width: 100%; accent-color: var(--vt-ed-handle); min-height: 44px; }
.vt-pop .vt-field select { min-height: 44px; }
.vt-parts { display: grid; max-height: 50vh; overflow: auto; }
.vt-parts__hd {
  display: flex; justify-content: space-between; padding: 0 2px 4px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-ink-3);
}
.vt-part__only { box-shadow: none; border-color: transparent; color: var(--vt-ed-handle); font-weight: 500; }
.vt-part__only:hover { border-color: rgba(var(--vt-ed-tint), .5); }
#partsAll[disabled] { opacity: .45; }
.vt-part { display: flex; align-items: center; gap: .5rem; padding: 6px 2px; border-bottom: 1px solid var(--vt-line); }
.vt-part:last-child { border-bottom: 0; }
.vt-part__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; font-size: .88rem; cursor: pointer; min-height: 40px; }
.vt-part__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-part__name input { width: 18px; height: 18px; accent-color: var(--vt-ed-handle); flex: none; }
.vt-part .vt-seg .vt-tbtn { font-weight: 700; min-width: 34px; min-height: 34px; }
@media (pointer: coarse) { .vt-part .vt-seg .vt-tbtn { min-width: 44px; min-height: 44px; } }

@media (max-width: 599px) {
  .vt-page--score .vt-slug__text { min-width: 0; flex: 1; }
  .vt-page--score .vt-slug__meta { display: block; max-width: 100%; }
}
/* Later than the base rule above, so small screens keep the pairs apart. */
@media (max-width: 420px) { .vt-keys dl dd { margin-bottom: .7rem; } }

@media (prefers-reduced-motion: reduce) { html:has(.vt-page--editor) { scroll-behavior: auto; } }