/* Page layout: sticky theme rail, one live 3D plate, then the kit in labelled bands. */
* { box-sizing: border-box; }
html { background: var(--vg-void); scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; min-height: 100%; background-image: var(--vg-dots); background-size: 24px 24px; }
h1, h2, h3, p { margin: 0; }
a { color: var(--vg-wire); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

.rail { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--vg-void) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--vg-frame); }
.rail .wrap { display: flex; align-items: center; gap: var(--vg-s5); min-height: 60px; }
.brand { display: flex; flex: none; }
.brand b { font: 700 14px/1.2 var(--vg-font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--vg-ink); }
.themes-nav { display: flex; gap: 6px; overflow-x: auto; margin-left: auto; padding: 8px 2px; scrollbar-width: none; }
.themes-nav::-webkit-scrollbar { display: none; }
.themes-nav button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; cursor: pointer;
  background: none; color: var(--vg-ink-dim); border: 1px solid transparent; border-radius: 999px;
  font: 500 12px/1 var(--vg-font-body); letter-spacing: .04em;
}
.themes-nav button:hover { color: var(--vg-ink); border-color: var(--vg-frame-hi); }
.themes-nav button[aria-pressed="true"] { color: var(--vg-ink); border-color: var(--vg-ink-dim); background: var(--vg-panel); }
.themes-nav button:focus-visible { outline: 2px solid var(--vg-ink); outline-offset: 2px; }
.themes-nav .dots { display: inline-flex; }
.themes-nav .dots i { width: 9px; height: 9px; border-radius: 50%; margin-left: -3px; border: 1.5px solid var(--bg); }
.themes-nav .dots i:first-child { margin-left: 0; }
@media (max-width: 720px) {
  html { scroll-padding-top: 96px; }
  .rail .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vg-s1); padding-top: var(--vg-s3); }
  .brand b { font-size: clamp(11px, 3.5vw, 13px); letter-spacing: .11em; }
  .themes-nav { margin-left: 0; }
}

/* Plate */
.plate {
  --vg-clip: none;
  --vg-radius-panel: 0px;
  --vg-radius: 0px;
  --vg-skew: 0deg;
  --vg-stroke: 1px;
  margin-top: var(--vg-s5);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  padding: 0;
}
.plate__text {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--vg-s5);
  padding: clamp(24px, 4vw, 48px);
}
.plate__details { display: grid; grid-template-columns: minmax(0, 1fr); }
/* The copies share a grid cell sized by the tallest one, including after font loading. */
.plate__copy {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: var(--vg-s5);
  background: none;
}
.plate__copy[inert] { visibility: hidden; }
.plate__text h1 { font-size: calc(clamp(40px, 6.2vw, 88px) * var(--vg-display-scale)); color: var(--vg-ink); text-shadow: 0 0 calc(var(--vg-glow) * 18px) color-mix(in srgb, var(--vg-wire) 45%, transparent); overflow-wrap: anywhere; }
.plate__text p { max-width: 46ch; color: var(--vg-ink-dim); font-size: 16px; }
.plate__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 13px; margin: 0; }
.plate__meta dt { margin: 0; align-self: center; }
.plate__meta dd { margin: 0; color: var(--vg-ink); overflow-wrap: anywhere; }
.plate__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  grid-auto-rows: 1fr;
  gap: var(--vg-s3);
  max-width: 22rem;
}
.plate__actions .vg-btn {
  min-height: 44px;
  padding: 6px 12px;
  font: 700 .75rem/1.25 "Archivo", "Helvetica Neue", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: normal;
}
.plate__actions .t::before { content: none; }
.stage { position: relative; min-height: 520px; margin: 1px; background: var(--vg-void); overflow: hidden; touch-action: pan-y; cursor: grab; }
.stage:active { cursor: grabbing; }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.stage .fallback { position: absolute; inset: 12%; display: grid; place-items: center; }
.stage .fallback svg { width: min(100%, 360px); height: auto; }
.hud { position: absolute; inset: 14px; pointer-events: none; }
.hud span { position: absolute; }
.hud .tl { top: 10px; left: 12px; } .hud .tr { top: 10px; right: 12px; text-align: right; }
.hud .bl { bottom: 10px; left: 12px; } .hud .br { bottom: 10px; right: 12px; text-align: right; }
@media (max-width: 860px) { .plate { grid-template-columns: 1fr; } .stage { min-height: 380px; } }

/* Bands */
.band { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--vg-s6); padding: var(--vg-s8) 0 0; }
.band__head { display: grid; gap: var(--vg-s3); align-content: start; position: sticky; top: 84px; align-self: start; }
.band__head h2 { font-size: calc(30px * var(--vg-display-scale)); color: var(--vg-ink); }
.band__head p { color: var(--vg-ink-dim); font-size: 14px; }
.band__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vg-s5); min-width: 0; }
@media (max-width: 860px) { .band { grid-template-columns: 1fr; gap: var(--vg-s4); padding-top: var(--vg-s7); } .band__head { position: static; } }
.grid { display: grid; gap: var(--vg-s5); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: var(--vg-s3); align-items: center; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vg-s4); align-content: start; }
.sub { margin-bottom: var(--vg-s4); display: block; }

/* Theme cards */
#themeCards { grid-auto-rows: 1fr; }
.tcard { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--vg-s4); cursor: pointer; text-align: left; border: 0; font: inherit; color: inherit; background: none; }
.tcard[data-vg] { background: none; }
.tcard::after { background: var(--vg-void); }
.tcard[aria-pressed="true"]::before { background: var(--vg-signal); }
.tcard:focus-visible { outline: 2px solid var(--vg-ink); outline-offset: 3px; }
.tcard__top { display: flex; justify-content: space-between; align-items: start; gap: var(--vg-s3); }
.tcard__top svg { width: 64px; height: 64px; flex: none; }
.tcard h3 { font-size: calc(26px * var(--vg-display-scale)); text-shadow: 0 0 calc(var(--vg-glow) * 12px) color-mix(in srgb, var(--vg-wire) 50%, transparent); }
.tcard p { font-size: 13px; color: var(--vg-ink-dim); }
.strip { display: flex; height: 10px; }
.strip i { flex: 1; }

/* Swatches */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--vg-s3); }
.sw { display: grid; gap: 6px; min-width: 0; align-content: start; }
.sw i { display: block; height: 52px; border: 1px solid var(--vg-frame-hi); border-radius: min(var(--vg-radius-panel), 8px); }
.sw b { font: 500 12px/1.2 var(--vg-font-body); color: var(--vg-ink); }
.sw code, .sw small { font: 400 11px/1.3 var(--vg-font-data); color: var(--vg-ink-dim); overflow-wrap: anywhere; }
.rampbar { height: 36px; background: linear-gradient(90deg, var(--vg-ramp)); border-radius: min(var(--vg-radius-panel), 8px); }
.rampstops { display: grid; grid-template-columns: repeat(5, 1fr); font: 400 11px/1.3 var(--vg-font-data); color: var(--vg-ink-dim); margin-top: 6px; }
.rampstops span:last-child { text-align: right; } .rampstops span:nth-child(2), .rampstops span:nth-child(3), .rampstops span:nth-child(4) { text-align: center; }

/* Type */
.spec { display: grid; gap: var(--vg-s2); padding-bottom: var(--vg-s5); border-bottom: 1px solid var(--vg-frame); }
.spec:last-child { border-bottom: 0; padding-bottom: 0; }
.spec .big { font-size: calc(clamp(30px, 5vw, 56px) * var(--vg-display-scale)); overflow-wrap: anywhere; }
.spec .body { max-width: 65ch; }
.spec .mono { font-size: 22px; color: var(--vg-wire); }
.faces td:first-child { color: var(--vg-ink-dim); }
.faces td { white-space: normal; font-family: var(--vg-font-body); }
.scale { display: grid; gap: 4px; }
.scale div { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: var(--vg-s3); }
.tablewrap { overflow-x: auto; }

/* Charts */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--vg-frame); stroke-width: 1; }
.chart .axis { fill: var(--vg-ink-dim); font: 400 11px var(--vg-font-data); }
.chart .curve { fill: none; stroke: var(--vg-signal); stroke-width: 1.6; filter: drop-shadow(0 0 calc(var(--vg-glow) * 4px) var(--vg-signal)); }
.chart .area { fill: color-mix(in srgb, var(--vg-signal) 10%, transparent); stroke: none; }
.chart .peak { fill: var(--vg-void); stroke: var(--vg-wire); stroke-width: 1.4; }
/* labels sit above their peak */
.chart .peaklabel { fill: var(--vg-wire); font: 400 11px var(--vg-font-data); text-anchor: middle; }

/* Graphics */
.gfxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--vg-s3); }
.gfxcell { display: grid; gap: 8px; justify-items: center; padding: var(--vg-s4) var(--vg-s2) var(--vg-s3); border: 1px solid var(--vg-frame); background: var(--vg-void); border-radius: min(var(--vg-radius-panel), 10px); }
.gfxcell svg { width: 88px; height: 88px; }
.icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--vg-s4) var(--vg-s2); }
.icongrid div { display: grid; gap: 8px; justify-items: center; }

/* Code */
.code { position: relative; }
.code pre { margin: 0; padding: var(--vg-s4); max-height: 380px; overflow: auto; background: var(--vg-inset); border: 1px solid var(--vg-frame); font: 400 12px/1.6 "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace; color: var(--vg-ink-dim); tab-size: 2; border-radius: min(var(--vg-radius-panel), 10px); }
.code .copy { position: absolute; top: 10px; right: 18px; }
.shape { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--vg-s3); }
.shape div { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--vg-frame); }
.shape code { font: 400 12px var(--vg-font-data); color: var(--vg-wire); }

/* Names */
.names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 var(--vg-s5); counter-reset: n; line-height: 1.25; }
.names li { counter-increment: n; display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--vg-frame); font-size: calc(17px * var(--vg-display-scale)); }
.names li::before { content: counter(n, decimal-leading-zero); font: 400 11px var(--vg-font-data); color: var(--vg-ink-faint); }
.names li.pick { color: var(--vg-signal); text-shadow: var(--vg-glow-signal); }
.names li.alt { color: var(--vg-wire); }
.names small { font: 400 11px var(--vg-font-body); letter-spacing: 0; text-transform: none; color: var(--vg-ink-dim); text-shadow: none; margin-left: auto; white-space: nowrap; }

footer { margin: var(--vg-s8) 0 var(--vg-s7); padding-top: var(--vg-s5); border-top: 1px solid var(--vg-frame); color: var(--vg-ink-dim); font-size: 13px; display: grid; gap: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }