/* ==========================================================================================
   REPO REPORT: a report design system for repositories, read as music
   Default tokens: obsidian ground, quicksilver chrome, the blue→aqua→violet spectrum (the first report's
   palette). A project's theme overrides any token on :root; everything else derives from them.
   Musical layer: staves, clefs, note heads, strings, grooves, tickets and liner notes.
   ========================================================================================== */
:root {
  /* Surface */
  --obsidian: #0d1117; --panel: #161b22; --raised: #21262d; --card-bg: #12171e; --hair: #30363d;
  --ink: #e6edf3; --ink-2: #a8b3bf; --ink-3: #848d97;
  /* Signal */
  --blue: #58a6ff; --aqua: #2dd4bf; --violet: #bc8cff; --green: #3fb950; --amber: #d29922; --red: #f85149; --rose: #ff7b72;
  /* Quicksilver chrome */
  --chrome-100: #f4f8fd; --chrome-300: #c3ccd6; --chrome-500: #8a97a6; --chrome-700: #5b6b7b; --chrome-900: #1b2430;
  /* Brass (native code, applause) */
  --brass: #e3b341; --brass-2: #f2cc60;
  /* Instrument families = code categories */
  --c-code: var(--blue); --c-styles: var(--aqua); --c-native: var(--brass); --c-data: var(--chrome-500); --c-docs: var(--violet);
  /* Signature gradients, derived from the tokens above so a theme only has to set colours */
  --grad-spectrum: linear-gradient(120deg, var(--blue) 0%, var(--aqua) 50%, var(--violet) 100%);
  --grad-chrome: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--chrome-100) 50%, var(--chrome-300)) 28%, var(--chrome-500) 56%, var(--ink) 76%, color-mix(in srgb, var(--chrome-300) 60%, var(--chrome-500)) 100%);
  --grad-card: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 97%, #fff) 0%, var(--card-bg) 100%);
  --grad-rim: linear-gradient(150deg, color-mix(in srgb, var(--chrome-300) 34%, transparent), color-mix(in srgb, var(--chrome-300) 6%, transparent) 36%, color-mix(in srgb, var(--blue) 18%, transparent) 70%, color-mix(in srgb, var(--violet) 26%, transparent));
  /* Type */
  --f-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --f-music: "Noto Music", "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", serif;
  /* Shape & motion */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;
  --gap: 22px; --maxw: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; color: var(--ink); background-color: var(--obsidian); overflow-x: clip;
  font: 400 15px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(70% 46% at 50% -6%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 62%),
    radial-gradient(36% 36% at 92% 10%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 62%),
    radial-gradient(30% 30% at 6% 30%, color-mix(in srgb, var(--aqua) 6%, transparent), transparent 62%),
    repeating-linear-gradient(180deg,
      rgba(195,204,214,.032) 0 1px, transparent 1px 9px, rgba(195,204,214,.032) 9px 10px, transparent 10px 18px,
      rgba(195,204,214,.032) 18px 19px, transparent 19px 27px, rgba(195,204,214,.032) 27px 28px, transparent 28px 36px,
      rgba(195,204,214,.032) 36px 37px, transparent 37px 168px);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--blue) 35%, transparent); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.music { font-family: var(--f-music); font-weight: 400; }
.mono { font-family: var(--f-mono); }
.serif { font-family: var(--f-serif); font-style: italic; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px;
  padding: 11px max(24px, calc((100vw - var(--maxw)) / 2 + 28px));
  background: color-mix(in srgb, var(--obsidian) 78%, transparent); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 65%, transparent);
}
.all-projects { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid var(--hair); color: var(--ink-2); font: 500 12px/1 var(--f-ui); white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.all-projects svg { width: 14px; height: 14px; flex: none; }
.all-projects:hover { color: var(--ink); text-decoration: none; border-color: color-mix(in srgb, var(--blue) 65%, transparent); background: color-mix(in srgb, var(--blue) 9%, transparent); }
.brand { display: flex; flex: none; align-items: center; gap: 10px; color: var(--ink); font: 600 15px/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand span { overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.brand small { font: 500 10px/1 var(--f-mono); color: var(--ink-3); letter-spacing: .16em; text-transform: uppercase; margin-left: 2px; }
.nav { display: flex; gap: 2px; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav a { color: var(--ink-2); font: 500 13px/1 var(--f-ui); padding: 8px 9px; border-radius: 999px; white-space: nowrap; }
.nav a b { font: 600 11px/1 var(--f-mono); color: var(--ink-3); margin-right: 6px; }
.nav a:hover, .nav a.on { color: var(--ink); background: color-mix(in srgb, var(--blue) 10%, transparent); text-decoration: none; }
.nav a.on b { color: var(--aqua); }
/* the product name never truncates on a wide screen; the label goes first, then the nav scrolls */
@media (max-width: 1231px) { .brand small { display: none; } }

/* ---------- Buttons ---------- */
.btn, .tool, .seg button {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--hair); background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--ink-2);
  font: 500 12px/1 var(--f-ui); height: 30px; padding: 0 11px; border-radius: 999px;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover, .tool:hover, .seg button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--blue) 65%, transparent); background: color-mix(in srgb, var(--blue) 9%, transparent); }
.btn:active, .tool:active { transform: translateY(1px); }
.btn svg, .tool svg { width: 14px; height: 14px; flex: none; }
.btn.primary { color: #071018; background: var(--grad-spectrum); border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); color: #071018; }
.tool.icon { width: 30px; padding: 0; justify-content: center; }
.tool.on { color: var(--ink); border-color: color-mix(in srgb, var(--aqua) 65%, transparent); background: color-mix(in srgb, var(--aqua) 12%, transparent); }
/* zoom for wide figures on narrow screens: the figure keeps a readable scale and pans sideways */
.tool.zoom { display: none; }
@media (max-width: 760px) {
  .tool.zoom { display: inline-flex; }
  .tool:not(.play):not(.icon) > span { display: none; }
  .tool:not(.play):not(.icon) { width: 30px; padding: 0; justify-content: center; }
  .chart.zoomed { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 8px; }
  .chart.zoomed svg.viz.wide { width: var(--zw, 920px); max-width: none; }
  .chart.zoomed .cover-frame { width: 920px; }
  .chart.zoomed .cover-frame svg.viz.wide { width: 100%; }
  /* the edges fade on the side that has more to show, so the strip reads as one that pans */
  .chart.zoomed[data-pan="start"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .chart.zoomed[data-pan="mid"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  .chart.zoomed[data-pan="end"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
  .pan-hint { margin: 6px 0 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); text-wrap: balance; }
}
/* fingers need bigger targets than a mouse pointer */
@media (pointer: coarse) {
  .btn, .tool, .seg button { height: 40px; }
  .tool.icon { width: 40px; }
}
@media (pointer: coarse) and (max-width: 760px) { .tool:not(.play):not(.icon) { width: 40px; } }
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--hair); border-radius: 999px; background: color-mix(in srgb, var(--obsidian) 60%, transparent); }
.seg button { border: 0; height: 24px; background: transparent; }
.seg button.on { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--ink); }

/* ---------- Hero / Overture ---------- */
.hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 72px 28px 30px; }
.hero canvas { position: absolute; left: 0; right: 0; top: 0; height: 520px; width: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); }
.hero-inner { position: relative; z-index: 1; }
.kicker { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font: 500 11.5px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.kicker a { overflow-wrap: anywhere; }
.kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.kicker .live { color: var(--aqua); }
.kicker .sha { text-transform: none; letter-spacing: .08em; }
.wordmark { font: 600 clamp(54px, 11.5vw, 156px)/.88 var(--f-display); letter-spacing: -.045em; margin: 26px 0 16px; overflow-wrap: anywhere; }
.wordmark .m { background: var(--grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark .p { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { font: 400 italic clamp(22px, 2.7vw, 36px)/1.18 var(--f-serif); color: var(--chrome-300); max-width: 900px; margin: 0; text-wrap: balance; }
.tagline em { font-style: normal; font-family: var(--f-display); font-weight: 500; font-size: .8em; color: var(--ink); letter-spacing: -.01em; }
.lede { color: var(--ink-2); max-width: 760px; margin: 18px 0 0; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--chrome-300) 16%, transparent); background: color-mix(in srgb, var(--panel) 60%, transparent); color: var(--ink-2); font: 500 12px/1 var(--f-ui); }
.chip b { color: var(--ink); font-weight: 600; }
.chip i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px currentColor; }
.hero-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

/* ---------- Movements (sections) ---------- */
.movement { max-width: var(--maxw); margin: 0 auto; padding: 92px 28px 6px; }
.mv-head { display: grid; grid-template-columns: auto 1fr; gap: 2px 28px; align-items: end; margin-bottom: 26px; }
.mv-head > * { min-width: 0; }
.mv-num { grid-row: span 3; font: 200 124px/.78 var(--f-display); letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--chrome-300) 42%, transparent); }
.mv-tempo { font: italic 400 23px/1.1 var(--f-serif); color: var(--aqua); }
.mv-tempo span { color: var(--ink-3); font-size: 17px; }
.mv-title { font: 600 clamp(32px, 4vw, 46px)/1.04 var(--f-display); letter-spacing: -.025em; margin: 2px 0 0; }
.mv-lede { color: var(--ink-2); max-width: 780px; margin: 8px 0 0; }
.mv-staff { position: relative; height: 37px; margin: 0 0 30px;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--chrome-300) 20%, transparent) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.mv-staff::before { content: "𝄞"; position: absolute; left: 7%; top: -17px; font: 400 58px/1 var(--f-music); color: color-mix(in srgb, var(--chrome-300) 55%, transparent); }
.mv-staff::after { content: ""; position: absolute; right: 6%; top: 0; width: 9px; height: 37px;
  border-left: 1px solid color-mix(in srgb, var(--chrome-300) 45%, transparent); border-right: 4px solid color-mix(in srgb, var(--chrome-300) 45%, transparent); }
.mv-staff .notes { position: absolute; inset: 0; }

/* ---------- Grid & cards ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; }
.s5 { grid-column: span 5; } .s4 { grid-column: span 4; }
@media (max-width: 980px) { .s8, .s7, .s6, .s5, .s4 { grid-column: span 12; } }

.card {
  position: relative; border-radius: var(--r-lg); padding: 22px 24px 18px; min-width: 0;
  background: var(--grad-card) padding-box, var(--grad-rim) border-box; border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 28px 70px -36px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.card.in { opacity: 1; transform: none; }
.card.flash { animation: flash 2.2s var(--ease) 1; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aqua) 0%, transparent), 0 28px 70px -36px rgba(0,0,0,.85); }
  20% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 55%, transparent), 0 28px 70px -36px rgba(0,0,0,.85); } }
.card-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.card-head > div:first-child { min-width: 0; }
.eyebrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow .fig { color: var(--aqua); }
.eyebrow .tempo { font: italic 400 14px/1 var(--f-serif); letter-spacing: 0; text-transform: none; color: var(--chrome-500); }
.card h3 { font: 600 25px/1.12 var(--f-display); letter-spacing: -.015em; margin: 9px 0 5px; overflow-wrap: anywhere; text-wrap: balance; }
.card .sub { color: var(--ink-2); margin: 0; font-size: 14px; max-width: 800px; }
.tools { display: flex; gap: 6px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.chart { position: relative; margin-top: 16px; overflow-x: clip; }
.chart svg.viz { display: block; width: 100%; height: auto; overflow: visible; }
.reading { margin: 14px 0 0; padding-top: 11px; border-top: 1px dashed color-mix(in srgb, var(--ink-3) 35%, transparent); color: var(--ink-2); font-size: 13.5px; }
.reading:empty { display: none; }
.reading b { color: var(--ink); font-weight: 600; }
.reading .k, .credit-note .k { font-family: var(--f-music); color: var(--aqua); margin-right: 6px; }
.credit-note { margin: 14px 0 0; padding: 9px 12px; border-left: 2px solid var(--brass); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--brass) 7%, transparent); color: var(--ink-2); font-size: 12.8px; }
.credit-note .k { color: var(--brass); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; color: var(--ink-2); font-size: 12.5px; align-items: center; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .sw.ramp { width: 26px; }
.legend .gl { font-family: var(--f-music); font-size: 17px; margin-right: 5px; vertical-align: -2px; color: var(--ink); }
.stamp { display: none; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--hair) 80%, transparent); font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stamp b { color: var(--ink-2); font-weight: 600; }
.stamp .spec { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.card.exporting { opacity: 1 !important; transform: none !important; }
.card.exporting .stamp { display: flex; }
.card.exporting .tools { visibility: hidden; }
.card.exporting *, .card.exporting { animation: none !important; transition: none !important; }

/* ---------- Tacet: a movement with nothing to play ---------- */
.tacet { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; padding: 14px 0 4px; }
.chart .tacet svg.viz { width: 200px; max-width: 100%; flex: none; }
.tacet > div { flex: 1 1 260px; min-width: 0; }
.tacet-word { font: italic 400 28px/1 var(--f-serif); color: var(--chrome-300); }
.tacet p { margin: 6px 0 0; color: var(--ink-2); max-width: 620px; font-size: 14px; }

/* ---------- KPI liner notes ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--chrome-300) 10%, transparent); border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { position: relative; padding: 16px 16px 14px; border-right: 1px solid color-mix(in srgb, var(--chrome-300) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--chrome-300) 8%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); overflow: hidden; min-height: 150px; min-width: 0;
  display: flex; flex-direction: column; }
.kpi .wm { position: absolute; right: -6px; top: -12px; font: 400 82px/1 var(--f-music); color: color-mix(in srgb, var(--chrome-300) 5%, transparent); pointer-events: none; }
.kpi .lab { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); overflow-wrap: anywhere; }
.kpi .val { font: 600 clamp(30px, 3vw, 40px)/1 var(--f-display); letter-spacing: -.03em; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: .5em; color: var(--ink-3); font-weight: 500; letter-spacing: 0; margin-left: 3px; }
.kpi .meta { font-size: 12px; color: var(--ink-2); }
.kpi svg { display: block; width: 100%; height: 30px; margin-top: auto; padding-top: 10px; box-sizing: content-box; flex: none; }

/* ---------- Programme: product facts ---------- */
.programme { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.prog { min-width: 0; padding: 14px 16px 13px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--chrome-300) 11%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--aqua) 7%, transparent), transparent 55%), color-mix(in srgb, var(--obsidian) 35%, transparent); }
.prog .v { font: 600 36px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.prog .l { font: 500 15px/1.25 var(--f-display); color: var(--ink); margin-top: 7px; text-wrap: balance; }
.prog .det { margin: 7px 0 0; font-size: 12.8px; line-height: 1.5; color: var(--ink-2); }
.prog .src { margin-top: 9px; font: 500 10.5px/1.45 var(--f-mono); color: var(--ink-3); overflow-wrap: anywhere; }
.prog .src > span { letter-spacing: .12em; text-transform: uppercase; }
.prog .src code { color: var(--ink-2); }

/* ---------- Tickets (wow facts) ---------- */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 1060px) { .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tickets { grid-template-columns: minmax(0, 1fr); } }
.ticket { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); min-height: 208px; border-radius: 16px;
  background: linear-gradient(135deg, var(--tone-bg, color-mix(in srgb, var(--blue) 10%, transparent)), color-mix(in srgb, var(--card-bg) 20%, transparent) 46%), linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, #fff), var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--chrome-300) 13%, transparent); }
.ticket .stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 16px 0 14px;
  border-right: 2px dashed color-mix(in srgb, var(--chrome-300) 20%, transparent); }
.ticket .stub::before, .ticket .stub::after { content: ""; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--card-bg); }
.ticket .stub::before { top: -9px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--chrome-300) 13%, transparent); }
.ticket .stub::after { bottom: -9px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--chrome-300) 13%, transparent); }
/* the glyph keeps a fixed gap above "Admit one", so tall clefs never reach it */
.ticket .glyph { font: 400 34px/1 var(--f-music); margin: 6px 0 22px; color: var(--tone); text-shadow: 0 0 18px var(--tone-glow, transparent); }
.ticket .no { margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg); font: 500 9.5px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.ticket .tb { padding: 16px 18px 15px; min-width: 0; }
.ticket .val { font: 600 46px/1 var(--f-display); letter-spacing: -.035em; color: var(--tone); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ticket .lab { font: 500 16px/1.25 var(--f-display); color: var(--ink); margin-top: 7px; letter-spacing: -.005em; text-wrap: balance; }
.ticket .det { font-size: 12.8px; color: var(--ink-2); margin: 9px 0 0; line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- SVG vocabulary ---------- */
.viz text { font-family: var(--f-ui); }
.viz .t-lbl { fill: var(--ink-2); font: 500 11px var(--f-ui); }
.viz .t-mono { fill: var(--ink-3); font: 500 10px var(--f-mono); letter-spacing: .04em; }
.viz .t-num { fill: var(--ink); font: 600 13px var(--f-display); font-variant-numeric: tabular-nums; }
.viz .t-big { fill: var(--ink); font: 600 52px var(--f-display); letter-spacing: -.03em; }
.viz .t-serif { fill: var(--chrome-300); font: italic 400 16px var(--f-serif); }
.viz .t-music { font-family: var(--f-music); }
.viz .grid-line { stroke: color-mix(in srgb, var(--ink-3) 18%, transparent); stroke-width: 1; }
.viz .axis-line { stroke: color-mix(in srgb, var(--ink-3) 45%, transparent); stroke-width: 1; }
.viz .staff { stroke: color-mix(in srgb, var(--chrome-300) 26%, transparent); stroke-width: 1; }
.viz .ledger { stroke: color-mix(in srgb, var(--chrome-300) 45%, transparent); stroke-width: 1; }
.viz .barline { stroke: color-mix(in srgb, var(--chrome-300) 42%, transparent); stroke-width: 1; }
.viz .ink { stroke: color-mix(in srgb, var(--chrome-300) 78%, transparent); stroke-width: 1.1; fill: none; }
.viz .hit { fill: transparent; cursor: crosshair; }
.viz [data-tip] { cursor: pointer; }
.viz .note.playing ellipse, .viz .note.playing path.head { filter: url(#glow); stroke: #fff; stroke-width: 1.4; }
/* figure-specific SVG type */
.viz .readout { font: 600 10.5px var(--f-mono); letter-spacing: .02em; }
.viz .tape { font-family: var(--f-serif); font-style: italic; fill: #1b2430; }
.viz .grp { font: 600 10.5px var(--f-mono); letter-spacing: .22em; fill: var(--ink-3); }
.viz .tsig { font: 700 17.5px var(--f-display); fill: var(--ink); }
.viz .beam { fill: color-mix(in srgb, var(--chrome-300) 82%, transparent); }
.viz .msr { font: italic 400 12px var(--f-serif); fill: var(--ink-3); }
.viz .reh { font: 600 10px var(--f-mono); letter-spacing: .06em; fill: var(--ink); }
.viz .tagmark { font: italic 400 13px var(--f-serif); fill: var(--aqua); }
.viz .dyn { font: italic 700 19px var(--f-serif); fill: var(--chrome-300); }
.viz .fam-name { font: 600 11px var(--f-mono); letter-spacing: .16em; fill: var(--ink); }
.viz .fam-sub { font: italic 400 14px var(--f-serif); fill: var(--ink-3); }
.viz .key-lbl { font: 600 8px var(--f-mono); fill: #2b3542; }
.viz .vin-lbl { font: 600 11px var(--f-display); fill: rgba(5,6,8,.85); letter-spacing: .02em; pointer-events: none; }
.viz .vin-t1 { font: 600 12px var(--f-display); letter-spacing: .24em; fill: #071018; }
.viz .vin-t2 { font: 700 26px var(--f-display); letter-spacing: -.02em; fill: #071018; }
.viz .vin-t3 { font: 600 8.5px var(--f-mono); letter-spacing: .16em; fill: rgba(7,16,24,.8); }
.viz .pad-grp { font: 600 10.5px var(--f-mono); letter-spacing: .14em; fill: var(--ink-2); }
.viz .pad-name { font: 600 12.5px var(--f-display); fill: var(--ink); }
.viz .spin { transform-origin: 320px 320px; animation: spin 140s linear infinite; }
.chart:hover .viz .spin { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Orchestra legend, credits, lists ---------- */
.leg-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 45%, transparent); }
.leg-row .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.leg-row > span:nth-child(2) { overflow-wrap: anywhere; }
.credits { list-style: none; margin: 16px 0 0; padding: 0; }
.credits li { display: grid; grid-template-columns: minmax(0, max-content) minmax(24px, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--hair) 60%, transparent); }
.credits .cred { min-width: 0; }
.credits .who { font: 600 18px/1.2 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.credits .role { font: italic 400 15px/1.2 var(--f-serif); color: var(--chrome-500); margin-left: 4px; }
.credits .dots { border-bottom: 1px dotted color-mix(in srgb, var(--ink-3) 55%, transparent); transform: translateY(-4px); }
.credits .n { font: 500 13px/1.3 var(--f-mono); color: var(--ink); text-align: right; }
.credits .bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--hair) 60%, transparent); overflow: hidden; margin-top: 2px; }
.credits .bar i { display: block; height: 100%; background: var(--grad-spectrum); }
@media (max-width: 640px) {
  .credits li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .credits .dots { display: none; }
  .credits .n { text-align: left; font-size: 12px; }
  .credits .role { display: block; margin-left: 0; }
}
.fineprint { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.fineprint code { overflow-wrap: anywhere; }
.fineprint code, .notes code { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); background: color-mix(in srgb, var(--hair) 45%, transparent); padding: 1px .25em; border-radius: 4px; }
/* a code chip breaks at spaces and after slashes only (see codeHtml in app.js) */
.cs { white-space: nowrap; }
/* words that only make sense on the live page (a play button) stay out of the PNG export */
.exporting .live-only { display: none; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
@media (max-width: 640px) { .split { grid-template-columns: minmax(0, 1fr); } }
.case { min-width: 0; border: 1px solid color-mix(in srgb, var(--brass) 22%, transparent); border-radius: var(--r-md); padding: 14px 14px 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 7%, transparent), transparent 60%); }
.case h4 { margin: 0; font: 600 16px/1.2 var(--f-display); display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; align-items: baseline; }
.case h4 span { font: 500 11px/1 var(--f-mono); color: var(--brass); letter-spacing: .08em; }
.case .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 12.5px; padding: 5px 0 4px; border-bottom: 1px solid color-mix(in srgb, var(--hair) 45%, transparent); }
.case .row .nm { color: var(--ink-2); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.case .row .nm .fn { overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; white-space: nowrap; }
.case .row .ln { font: 500 11.5px/1.4 var(--f-mono); color: var(--ink); }
.case .row .bar { grid-column: 1 / -1; height: 3px; background: color-mix(in srgb, var(--hair) 50%, transparent); border-radius: 2px; }
.case .row .bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--brass), var(--brass-2)); }
.case .app { font: 500 9.5px/1.3 var(--f-mono); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; max-width: 100%; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

.big-ratio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; }
.big-ratio .n { font: 600 92px/.9 var(--f-display); letter-spacing: -.05em; background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-ratio .d { font: 500 22px/1 var(--f-display); color: var(--ink-3); }
.big-ratio .c { font: italic 400 19px/1.2 var(--f-serif); color: var(--chrome-300); max-width: 280px; }
.hbars { margin-top: 18px; display: grid; gap: 12px; }
.hbar .top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.hbar .top span { min-width: 0; overflow-wrap: anywhere; }
.hbar .top b { color: var(--ink); font: 600 12.5px/1 var(--f-mono); white-space: nowrap; }
.hbar .track { height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--hair) 45%, transparent); overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 999px; }

.metro { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 12px; }
@media (max-width: 520px) { .metro { grid-template-columns: minmax(0, 1fr); } .metro svg { max-width: 150px; } }
.metro svg { width: 100%; height: auto; }
.metro .arm { transform-origin: 85px 186px; animation: tick 2.14s ease-in-out infinite alternate; }
@keyframes tick { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.tempo-mark { font: 600 50px/1 var(--f-display); letter-spacing: -.03em; }
.tempo-mark .music { font-size: 46px; vertical-align: -4px; margin-right: 4px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 14px; }
.stat .v { font: 600 22px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

.chord { display: flex; height: 22px; border-radius: 999px; overflow: hidden; margin-top: 20px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--chrome-300) 12%, transparent); }
.chord > div { height: 100%; }
.chord-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.chord-legend .v { font: 600 32px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chord-legend .l { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.chord-legend .l i { font-family: var(--f-serif); color: var(--chrome-500); }
.chord-legend .l i b { font-style: normal; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { min-width: 0; border: 1px solid color-mix(in srgb, var(--chrome-300) 11%, transparent); border-radius: var(--r-md); padding: 12px 14px; background: color-mix(in srgb, var(--obsidian) 35%, transparent); }
.tile .v { font: 600 30px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile .v .music, .tile .v .gl { font-size: 24px; margin-right: 6px; vertical-align: 2px; }
.tile .l { font-size: 12px; color: var(--ink-2); margin-top: 6px; overflow-wrap: anywhere; }
.src-tile .l { margin-top: 0; font: 500 10.5px/1.45 var(--f-mono); color: var(--ink-3); }

.tracklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin-top: 14px; }
@media (max-width: 640px) { .tracklist { grid-template-columns: minmax(0, 1fr); } }
.side h5 { margin: 0 0 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .2em; color: var(--ink-3); text-transform: uppercase; }
.trk { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 6px 0 5px; border-bottom: 1px solid color-mix(in srgb, var(--hair) 55%, transparent); font-size: 13px; }
.trk .no { font: 500 11px/1 var(--f-mono); color: var(--ink-3); }
.trk .ext { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.trk .ext b { font: 600 13px/1.2 var(--f-mono); color: var(--ink); margin-right: 2px; overflow: hidden; text-overflow: ellipsis; }
.trk .ext em { font: 600 8.5px/1 var(--f-mono); font-style: normal; color: #071018; border-radius: 4px; padding: 2.5px 4px 2px; letter-spacing: .05em; }
.trk .ext em.lfs { background: var(--violet); }
.trk .ext em.bin { background: var(--chrome-500); }
.trk .cnt { font: 600 12px/1 var(--f-mono); color: var(--ink); text-align: right; }
.trk .bar { grid-column: 2; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--hair) 50%, transparent); }
.trk .bar i { display: block; height: 100%; border-radius: 2px; background: var(--grad-spectrum); }
.trk .sz { font: 500 11px/1 var(--f-mono); color: var(--ink-3); text-align: right; }
.lfs-badge { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 10%, transparent), transparent); }
.lfs-badge .v { font: 600 26px/1 var(--f-display); color: var(--violet); letter-spacing: -.02em; white-space: nowrap; }
.lfs-badge .t { flex: 1 1 240px; min-width: 0; font-size: 12.5px; color: var(--ink-2); }

.list { list-style: none; margin: 12px 0 0; padding: 0; }
.list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--hair) 50%, transparent); font-size: 12.8px; color: var(--ink-2); }
.list li code { font-family: var(--f-mono); font-size: 11.8px; color: var(--ink); display: block; min-width: 0; }
.list li > span { font: 500 11.5px/1.4 var(--f-mono); color: var(--ink); white-space: nowrap; }
.list em.vend { display: inline-block; white-space: nowrap; vertical-align: 1px; font: 600 8.5px/1 var(--f-mono); font-style: normal; color: #071018; background: var(--brass); border-radius: 4px; padding: 2px 4px; margin-left: 6px; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Audience ---------- */
.aud-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.aud-chip { min-width: 0; padding: 13px 15px 12px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--chrome-300) 11%, transparent); background: color-mix(in srgb, var(--obsidian) 35%, transparent); }
.aud-chip .v { font: 600 30px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.aud-chip .v small { font: 500 12px/1 var(--f-ui); color: var(--ink-3); letter-spacing: 0; }
.aud-chip .l { font: 500 14px/1.25 var(--f-display); color: var(--ink); margin-top: 6px; }
.aud-chip .det { margin: 5px 0 0; font-size: 12.3px; color: var(--ink-2); }
.aud-sources { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.aud-sources summary { cursor: pointer; color: var(--ink); font-weight: 600; width: fit-content; }
.aud-sources dl { display: grid; grid-template-columns: minmax(110px, 220px) minmax(0, 1fr); gap: 6px 14px; margin: 10px 0 0; }
.aud-sources dt { color: var(--ink); }
.aud-sources dd { margin: 0; font: 500 11.5px/1.5 var(--f-mono); color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 520px) { .aud-sources dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .aud-sources dd { margin-bottom: 8px; } }
.aud-breaks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin-top: 20px; }
@media (max-width: 760px) { .aud-breaks { grid-template-columns: minmax(0, 1fr); } }
.aud-break { min-width: 0; }
.aud-break svg.viz { margin-top: 10px; }

/* ---------- Programme notes & footer ---------- */
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .notes { grid-template-columns: minmax(0, 1fr); } }
.notes > div { min-width: 0; }
.notes h4 { margin: 0 0 10px; font: 600 17px/1.2 var(--f-display); }
.notes dl { margin: 0; display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 8px 14px; font-size: 13px; }
@media (max-width: 520px) { .notes dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .notes dd { margin-bottom: 8px; } }
.notes dt { color: var(--ink); font-weight: 600; }
.notes dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.notes ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.notes li { margin: 5px 0; overflow-wrap: anywhere; }
.notes code { overflow-wrap: anywhere; }
footer.coda { max-width: var(--maxw); margin: 70px auto 0; padding: 28px 28px 60px; display: grid; gap: 22px;
  border-top: 1px solid color-mix(in srgb, var(--hair) 70%, transparent); color: var(--ink-3); font-size: 12.5px; }
.coda-links { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; }
.coda-links:empty { display: none; }
.next-project { display: grid; gap: 6px; min-width: 0; max-width: 100%; padding: 16px 22px 17px; border-radius: var(--r-lg); color: var(--ink);
  background: var(--grad-card) padding-box, var(--grad-rim) border-box; border: 1px solid transparent; transition: transform .18s var(--ease); }
.next-project:hover { text-decoration: none; transform: translateY(-1px); }
.next-project small { font: 500 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.next-project b { font: 600 28px/1.05 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.next-project b::after { content: " →"; color: var(--aqua); font-weight: 500; }
.offline-copy { color: var(--ink-2); font-size: 12.5px; border-bottom: 1px dotted color-mix(in srgb, var(--ink-3) 70%, transparent); }
.offline-copy:hover { color: var(--ink); text-decoration: none; }
.coda-fine { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; overflow-wrap: anywhere; }
.dots { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dots > .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
footer.coda .fin { font: italic 400 22px/1 var(--f-serif); color: var(--chrome-300); }

/* ---------- Tooltip & toast ---------- */
.tip { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0; transform: translate(-999px, -999px);
  max-width: min(320px, calc(100vw - 20px)); padding: 9px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid color-mix(in srgb, var(--chrome-300) 20%, transparent); box-shadow: 0 18px 40px -12px rgba(0,0,0,.8); transition: opacity .12s; overflow-wrap: anywhere; }
.tip.on { opacity: 1; }
.tip b { font-weight: 600; }
.tip .tt { font: 600 13px/1.3 var(--f-display); margin-bottom: 3px; }
.tip .mono { font-size: 11px; color: var(--ink-2); }
.tip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 110; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 97%, transparent); border: 1px solid color-mix(in srgb, var(--aqua) 45%, transparent); color: var(--ink); font: 500 13px/1.3 var(--f-ui);
  box-shadow: 0 18px 50px -14px rgba(0,0,0,.9); transition: all .25s var(--ease); display: flex; gap: 9px; align-items: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast .music { color: var(--aqua); font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { opacity: 1; transform: none; transition: none; }
  .card.flash { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 55%, transparent), 0 28px 70px -36px rgba(0,0,0,.85); }
  .viz .spin, .metro .arm { animation: none; }
  .toast, .tip, .btn, .tool, .seg button, .next-project, .all-projects { transition: none; }
}
@media print {
  body { background: #fff; color: #000; }
  .topbar, .tools, .hero canvas, .hero-actions { display: none; }
  .card { break-inside: avoid; opacity: 1; transform: none; }
}

/* ---------- Hero hint, share card, fretboard type ---------- */
.hero-actions { align-items: center; }
.hero-actions .hint { margin-left: auto; font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); max-width: 420px; text-align: right;
  display: inline-flex; align-items: flex-start; gap: 6px; }
.hero-actions .hint .music { color: var(--aqua); font-size: 15px; line-height: 1; flex: none; }
@media (max-width: 760px) { .hero-actions .hint { margin-left: 0; text-align: left; } }
.cover-frame { margin-top: 6px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--chrome-300) 14%, transparent), 0 30px 80px -40px rgba(0,0,0,.9); }
.cover-frame svg.viz { display: block; width: 100%; height: auto; }
.viz .cv-kick { font: 600 15px var(--f-mono); letter-spacing: .2em; fill: var(--ink-3); }
.viz .cv-word { font: 600 104px var(--f-display); letter-spacing: -.045em; }
.viz .cv-tag { font: italic 400 34px var(--f-serif); fill: var(--chrome-300); }
.viz .cv-val { font: 600 50px var(--f-display); letter-spacing: -.03em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.viz .cv-lab { font: 600 12.5px var(--f-mono); letter-spacing: .18em; fill: var(--ink-3); }
.viz .cv-foot { font: 500 14px var(--f-mono); letter-spacing: .06em; fill: var(--ink-3); }
.viz .cv-l1 { font: 600 11px var(--f-mono); letter-spacing: .24em; fill: rgba(7,16,24,.85); }
.viz .cv-l2 { font: 700 25px var(--f-display); letter-spacing: -.02em; fill: #071018; }
.viz .fb-name { font: 600 14px var(--f-display); }
.viz .fb-n { font: 700 9.5px var(--f-mono); fill: #071018; pointer-events: none; }

/* ---------- Responsive refinements ---------- */
.card-head > div:first-child { flex: 1 1 auto; }
.stamp { flex-wrap: wrap; gap: 6px 18px; }
.split3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .card-head { flex-wrap: wrap; }
  .split3 { grid-template-columns: minmax(0, 1fr); }
  .tools { width: 100%; justify-content: flex-start; }
  .movement { padding: 64px 16px 4px; }
  .hero { padding: 48px 16px 24px; }
  .card { padding: 18px 16px 14px; border-radius: 18px; }
  .mv-num { font-size: 76px; }
  .mv-head { gap: 2px 16px; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .all-projects { padding: 0; width: 30px; justify-content: center; }
  .all-projects span { display: none; }
  footer.coda { padding: 24px 16px 48px; }
  .chord-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.three > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .aud-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .chord-legend .v { font-size: 24px; }
  .ticket .val { font-size: 38px; }
  .brand span { max-width: 34vw; }
  .big-ratio .n { font-size: 72px; }
}

/* ---------- Text setting ---------- */
/* Instrument Serif italic sets a narrow word space; the accents get a little more so words don't run together */
.serif, .tagline, .mv-tempo, .eyebrow .tempo, .tacet-word, .credits .role, .big-ratio .c, .chord-legend .l i, footer.coda .fin,
.viz .t-serif, .viz .tape, .viz .msr, .viz .tagmark, .viz .dyn, .viz .fam-sub, .viz .cv-tag { word-spacing: .1em; }
/* paragraphs avoid a lone last word */
.card .sub, .reading, .credit-note, .fineprint, .mv-lede, .ticket .det, .prog .det, .kpi .meta, .aud-chip .det { text-wrap: pretty; }
/* a label drawn over a busy chart keeps a ring of the card colour around it */
.viz .halo { paint-order: stroke; stroke: var(--card-bg); stroke-width: 3px; stroke-linejoin: round; }