/* ════════════════════════════════════════════════════════════════════════════
   explainer.css

   Dark, high contrast, a serif at a real reading size, one accent colour — and
   the accent is not chosen here. `--accent-h` is a hue that comes out of
   `composition.palette`, which is derived from musical facts and nothing else:
   how bright the mode is, where the tonic sits on the circle of fifths, how much
   energy the section has. So the page recolours when the music modulates, and
   that recolouring is the same fact the ear is hearing.

   No web fonts, no external anything: EXPLAINER.md forbids it and the page is
   better for it.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --accent-h: 186;
  --accent-s: 58%;

  --accent:       hsl(var(--accent-h) var(--accent-s) 68%);
  --accent-mid:   hsl(var(--accent-h) var(--accent-s) 58%);
  --accent-deep:  hsl(var(--accent-h) calc(var(--accent-s) - 10%) 34%);
  --accent-wash:  hsl(var(--accent-h) var(--accent-s) 60% / 0.13);
  --accent-line:  hsl(var(--accent-h) var(--accent-s) 60% / 0.34);

  --bg:        #090b10;
  --bg-panel:  #0e1219;
  --bg-inset:  #080a0f;
  --ink:       #e2e7f0;
  --ink-soft:  #b3bccd;
  --ink-dim:   #7f8a9e;
  --rule:      rgb(150 170 205 / 0.15);
  --rule-soft: rgb(150 170 205 / 0.08);

  --bad:  #ff7a6e;
  --bad-deep: #4a1712;
  --good: #7fe0b0;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia,
           'Times New Roman', Times, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* The reading measure. Deliberately a length and not `68ch`: `ch` resolves against the
   * element that uses it, so a shared `68ch` would make an h2 nearly twice as wide as the
   * paragraph under it and the left edge of the column would visibly step. 40rem is ~68
   * characters at the body size. */
  --measure: 40rem;
  --wide: 1080px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  padding: 0 0 6.5rem;
  background:
    radial-gradient(120ch 60ch at 50% -12ch, hsl(var(--accent-h) 40% 30% / 0.16), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.28vw, 1.1875rem);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: hsl(var(--accent-h) 70% 50% / 0.35); }

/* ────────────────────────────────────────────────────────────── skip link ── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent-deep); color: #fff; padding: .8rem 1.2rem;
  font-family: var(--sans); font-size: .9rem; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ─────────────────────────────────────────────────────────── typography ── */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.018em; }

h1 {
  font-size: clamp(2.4rem, 1.3rem + 5vw, 4.15rem);
  line-height: 0.99;
  margin: 0 0 1.4rem;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.65rem);
  line-height: 1.08;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

h3 {
  font-size: clamp(1.16rem, 1.05rem + .5vw, 1.42rem);
  line-height: 1.2;
  margin: 3.2rem 0 1rem;
  color: var(--ink);
}
h3::before {
  content: '';
  display: block;
  width: 2.2rem; height: 2px;
  background: var(--accent-line);
  margin-bottom: .85rem;
}

h4 { font-size: 1rem; margin: 0 0 .45rem; font-family: var(--mono); font-weight: 600;
     letter-spacing: 0; }

p { margin: 0 0 1.35rem; }
em { font-style: italic; }
strong { font-weight: 600; color: #f2f5fa; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: hsl(var(--accent-h) 80% 78%); }

code, .mono, kbd, samp {
  font-family: var(--mono);
  font-size: 0.855em;
  font-variant-ligatures: none;
}
p code, li code, dd code, dt code {
  background: rgb(150 170 205 / 0.10);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 0.08em 0.34em;
  color: hsl(var(--accent-h) 45% 84%);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────── layout ── */
main { display: block; }

.chapter {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad) 0;
  margin: 0 auto;
  max-width: calc(var(--wide) + 2 * var(--pad));
  position: relative;
}
.chapter + .chapter { border-top: 1px solid var(--rule-soft); margin-top: clamp(3rem, 7vw, 5.5rem); }

.chapter > p,
.chapter > h2,
.chapter > h3,
.chapter > ol,
.chapter > ul,
.chapter > .api,
.chapter > .roles,
.chapter > .hint,
.chapter > details {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.chapter > .hint { margin-bottom: 2rem; }

.chapter-no {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 auto .9rem;
  max-width: var(--measure);
  display: flex; align-items: center; gap: .8rem;
}
.chapter-no::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--accent-line), transparent);
}

.pull {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.72rem);
  line-height: 1.32;
  font-style: italic;
  color: #f4f7fb;
  border-left: 2px solid var(--accent-mid);
  padding: .2rem 0 .2rem 1.3rem;
  margin: 2.4rem auto 2.4rem;
  max-width: 46ch;
}

.hint {
  font-family: var(--sans);
  font-size: .845rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: .7rem 0 0;
}

.label { font-family: var(--sans); font-size: .78rem; letter-spacing: .1em;
         text-transform: uppercase; color: var(--ink-dim); }

.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; }

/* ───────────────────────────────────────────────────────────────── hero ── */
.hero {
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad) clamp(2rem, 5vw, 3.5rem);
  max-width: calc(var(--wide) + 2 * var(--pad));
  margin: 0 auto;
}
.hero-inner { max-width: var(--wide); }

.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--accent);
  margin: 0 0 1.15rem;
}

.lede {
  font-size: clamp(1.14rem, 1rem + .55vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 2.1rem;
}
.lede em { color: #eef2f8; font-style: italic; }

.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, var(--bg-panel), #0a0d13);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.hero-wheel { display: grid; place-items: center; }
.hero-controls { min-width: 0; }

.hero-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.2rem; }

.pill {
  font-family: var(--sans);
  font-size: .875rem;
  padding: .5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
}
.pill:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-wash); }

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: .1rem 1.4rem;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1rem;
}
.readout > div { min-width: 0; }
.readout dt {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.readout dd {
  margin: .15rem 0 0; font-family: var(--mono); font-size: .95rem;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.readout dd.is-key { color: var(--accent); }

/* ──────────────────────────────────────────────────────────────── buttons ── */
.btn {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  background: rgb(150 170 205 / 0.07);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .62rem 1.05rem;
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .1s;
  display: inline-flex; align-items: center; gap: .55rem;
  text-align: left;
}
.btn:hover { background: rgb(150 170 205 / 0.13); border-color: var(--accent-line); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[aria-pressed="true"], .btn.is-on {
  background: var(--accent-wash);
  border-color: var(--accent-mid);
  color: hsl(var(--accent-h) 70% 84%);
}
.btn-accent { border-color: var(--accent-line); color: hsl(var(--accent-h) 60% 82%); }
.btn-danger { border-color: rgb(255 122 110 / .4); color: var(--bad); }
.btn-danger:hover { background: rgb(255 122 110 / .1); border-color: var(--bad); }
.btn-stop { color: var(--ink-dim); }
.btn-stop::before {
  content: ''; width: .62rem; height: .62rem; background: currentColor; border-radius: 1px;
}
.btn-stop:hover { color: var(--ink); }

.btn-big {
  font-size: 1.06rem;
  padding: .95rem 1.5rem;
  border-color: var(--accent-mid);
  background: linear-gradient(150deg, var(--accent-wash), transparent);
  color: hsl(var(--accent-h) 65% 86%);
}
.btn-big .btn-icon {
  width: 0; height: 0;
  border-left: .68rem solid currentColor;
  border-top: .42rem solid transparent;
  border-bottom: .42rem solid transparent;
}
.btn-big[aria-pressed="true"] .btn-icon {
  border: none; width: .62rem; height: .62rem; background: currentColor; border-radius: 1px;
}

/* ───────────────────────────────────────────────────────────────── demos ── */
.demo {
  max-width: var(--wide);
  margin: 2.2rem auto 2.6rem;
  padding: clamp(1rem, 2.6vw, 1.6rem);
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.demo .controls {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end;
}
.field { display: inline-flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field > span {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.field-wide { flex: 1 1 12rem; }
select, input[type="text"], input[type="number"] {
  font-family: var(--mono); font-size: .92rem;
  color: var(--ink); background: var(--bg-inset);
  border: 1px solid var(--rule); border-radius: 7px;
  padding: .55rem .7rem; width: 100%;
}
select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="range"] { accent-color: var(--accent-mid); width: 100%; padding: .4rem 0; }

.radio { display: inline-flex; align-items: center; gap: .4rem;
         font-family: var(--sans); font-size: .875rem; color: var(--ink-soft); cursor: pointer; }
.radio input { accent-color: var(--accent-mid); }

.console {
  display: block;
  font-family: var(--mono); font-size: .84rem; line-height: 1.55;
  background: var(--bg-inset); border: 1px solid var(--rule-soft);
  border-radius: 8px; padding: .8rem .9rem; margin-top: .9rem;
  color: var(--ink-soft); white-space: pre-wrap; overflow-x: auto;
  min-height: 3.2rem;
}
.console-tall { min-height: 7.5rem; max-height: 22rem; overflow-y: auto; }
.console .ok { color: var(--good); }
.console .no { color: var(--bad); }
.console .dimmed { color: var(--ink-dim); }
.console .acc { color: var(--accent); }

/* ───────────────────────────────────────────────────────── A/B (section 1) ── */
.ab-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-ab {
  flex: 1 1 13rem;
  flex-direction: column; align-items: flex-start; gap: .18rem;
  padding: .85rem 1.1rem;
}
.btn-ab .ab-title { font-size: 1.02rem; font-weight: 600; }
.btn-ab .ab-sub { font-size: .78rem; color: var(--ink-dim); }
.btn-ab.is-good[aria-pressed="true"] { border-color: var(--good); background: rgb(127 224 176 / .1); color: var(--good); }
.btn-ab.is-good[aria-pressed="true"] .ab-sub { color: rgb(127 224 176 / .75); }
.btn-ab.is-bad[aria-pressed="true"] { border-color: var(--bad); background: rgb(255 122 110 / .1); color: var(--bad); }
.btn-ab.is-bad[aria-pressed="true"] .ab-sub { color: rgb(255 122 110 / .75); }

.ab-mode { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; margin-top: .9rem; }

.ab-verdict {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .9rem; color: var(--ink-soft);
  margin-top: .9rem; min-height: 1.5rem;
}
.ab-verdict .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink-dim); flex: none; }
.ab-verdict.is-good .dot { background: var(--good); box-shadow: 0 0 10px rgb(127 224 176 / .6); }
.ab-verdict.is-good .verdict-text { color: var(--good); }
.ab-verdict.is-bad .dot { background: var(--bad); box-shadow: 0 0 10px rgb(255 122 110 / .6); }
.ab-verdict.is-bad .verdict-text { color: var(--bad); }

/* ──────────────────────────────────────────────────────────── piano roll ── */
.roll-figure { margin: 1.1rem 0 0; }
canvas.roll, canvas.level-view {
  display: block; width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
}
canvas.roll { height: 330px; }
#ab-roll { height: 452px; }
figcaption {
  font-family: var(--sans); font-size: .82rem; line-height: 1.55;
  color: var(--ink-dim); margin-top: .6rem;
}

/* The roll's own key. The chord-tone swatch takes the accent, so it recolours with the music
 * exactly as the notes do — and the scale-tone swatch is hollow for the same reason the notes
 * are: hue is already spoken for by the key. */
.roll-legend {
  list-style: none; margin: .65rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  font-family: var(--sans); font-size: .78rem; color: var(--ink-soft);
}
.roll-legend li { display: flex; align-items: center; gap: .45rem; }
.rl { width: .8rem; height: .55rem; border-radius: 2px; flex: none; }
.rl-chord    { background: var(--accent); }
.rl-scale    { background: #06080d; border: 1.25px solid var(--accent); }
.rl-tension  { background: hsl(45 74% 66%); }
.rl-approach { background: hsl(305 74% 66%); }
.rl-bad      { background: hsl(4 92% 62%); }
.stack { display: grid; gap: 6px; margin: 1.1rem 0 .9rem; }
.level-view { height: 132px; }
#seed-roll { height: 300px; }
.scrub { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.scrub .field { flex: 3 1 16rem; }
#seed-pos { font-size: .85rem; color: var(--ink-soft); padding-bottom: .55rem;
            white-space: nowrap; flex: 0 1 auto; }

/* ─────────────────────────────────────────────────────────── the wheel ── */
.wheel { width: 100%; height: auto; display: block; overflow: visible; }
.wheel-lg { max-width: 430px; }
.wheel-sm { max-width: 170px; }
.hero-wheel .wheel { max-width: 290px; }

.wheel-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.wheel-rotor { transition: transform .8s cubic-bezier(.4,0,.15,1); }
.wheel-node { cursor: pointer; }
.wheel-node:focus { outline: none; }
.wheel-node:focus-visible .wheel-disc { stroke: var(--accent); stroke-width: 2.5; }
.wheel-disc {
  fill: #0d1017; stroke: rgb(150 170 205 / .22); stroke-width: 1;
  transition: fill .3s, stroke .3s;
}
.wheel-name {
  font-family: var(--mono); font-size: 9.5px; text-anchor: middle;
  fill: var(--ink-dim); transition: fill .3s; pointer-events: none;
}
.wheel-halo { fill: hsl(var(--wheel-accent, 186) 80% 70%); opacity: 0; pointer-events: none; }
.wheel-tether { stroke: hsl(305 60% 66% / .34); stroke-width: 1; stroke-dasharray: 2 3; }

.wheel-node[data-role="chordTone"] .wheel-disc {
  fill: hsl(var(--wheel-accent, 186) 62% 56%); stroke: hsl(var(--wheel-accent, 186) 70% 74%);
}
.wheel-node[data-role="chordTone"] .wheel-name { fill: #05070a; font-weight: 700; }
.wheel-node[data-role="tension"] .wheel-disc {
  fill: #0d1017; stroke: hsl(45 80% 66%); stroke-width: 2;
}
.wheel-node[data-role="tension"] .wheel-name { fill: hsl(45 70% 78%); }
.wheel-node[data-role="scaleTone"] .wheel-disc {
  fill: hsl(var(--wheel-accent, 186) 30% 24%); stroke: hsl(var(--wheel-accent, 186) 40% 46%);
}
.wheel-node[data-role="scaleTone"] .wheel-name { fill: hsl(var(--wheel-accent, 186) 30% 82%); }
.wheel-node[data-role="chromatic"] .wheel-disc { fill: #0a0c11; stroke: rgb(150 170 205 / .14); }
.wheel-node[data-role="chromatic"] .wheel-name { fill: rgb(150 170 205 / .38); }
/* A chord tone that the key does not contain — a borrowed or applied chord's own note. */
.wheel-node[data-outside="true"] .wheel-disc {
  stroke: #fff; stroke-width: 2.4; stroke-dasharray: 3.2 2.6;
}
.wheel-node:hover .wheel-disc { stroke: var(--accent); }
.wheel-tonic-marker { fill: var(--accent); }

.wheel-demo { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
              gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; }
.wheel-stage { display: grid; place-items: center; }
.wheel-side { min-width: 0; }
.wheel-legend p { display: flex; align-items: center; gap: .6rem; margin: 0 0 .45rem;
                  font-family: var(--sans); font-size: .84rem; color: var(--ink-soft); }
.swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sw-chord { background: hsl(var(--accent-h) 62% 56%); }
.sw-tension { background: #0d1017; border: 2px solid hsl(45 80% 66%); }
.sw-scale { background: hsl(var(--accent-h) 30% 26%); border: 1px solid hsl(var(--accent-h) 40% 46%); }
.sw-chromatic { background: #0a0c11; border: 1px solid rgb(150 170 205 / .2); }
.wheel-explain {
  font-family: var(--sans); font-size: .93rem; line-height: 1.5;
  min-height: 4.2rem; margin: 1.2rem 0 1rem; color: var(--ink);
  border-left: 2px solid var(--accent-line); padding-left: .9rem;
}

/* ─────────────────────────────────────────────────────────────── the code ── */
.code-figure { max-width: var(--wide); margin: 1.8rem auto 2.2rem; position: relative; }
.code-head {
  display: flex; gap: .8rem; align-items: baseline;
  font-family: var(--mono); font-size: .78rem; color: var(--ink-dim);
  padding: 0 0 .55rem; margin: 0;
}
.code-head .fn { color: var(--accent); }
.code-head .clip-note { margin-left: auto; color: var(--ink-dim); opacity: .8; }
.code-wrap {
  background: var(--bg-inset); border: 1px solid var(--rule);
  border-radius: 10px; overflow: auto; max-height: 40rem;
}
/* The fade only appears when the listing really is taller than the box, so it is a fact about
 * this listing rather than a decoration applied to all of them. */
.code-figure.is-clipped::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 4rem;
  border-radius: 0 0 9px 9px; pointer-events: none;
  background: linear-gradient(to top, var(--bg-inset) 18%, rgb(8 10 15 / 0) 100%);
}
pre.code { margin: 0; padding: 1.1rem 1.25rem; }
pre.code code {
  font-family: var(--mono); font-size: .79rem; line-height: 1.62;
  color: #c9d3e4; white-space: pre; display: block;
}
.tk-cm { color: #6b7a91; font-style: italic; }
.tk-st { color: #9fd8a8; }
.tk-nu { color: #e4b978; }
.tk-kw { color: hsl(var(--accent-h) 60% 72%); }
.tk-li { color: #e4b978; }
.tk-fn { color: #f0dca0; }
.tk-pr { color: #b9c6dd; }
.tk-cl { color: #8fd0e8; }
.tk-id { color: #c9d3e4; }

/* ────────────────────────────────────────────────────────────── the roles ── */
.roles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .9rem; margin: 1.6rem auto 2rem;
}
.role {
  padding: 1rem 1.05rem; border-radius: 10px;
  background: var(--bg-panel); border: 1px solid var(--rule);
  border-top-width: 2px;
}
.role p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.role-chord  { border-top-color: hsl(var(--accent-h) 62% 58%); }
.role-chord h4 { color: hsl(var(--accent-h) 62% 74%); }
.role-scale  { border-top-color: hsl(200 68% 58%); }
.role-scale h4 { color: hsl(200 68% 74%); }
.role-tension { border-top-color: hsl(45 80% 60%); }
.role-tension h4 { color: hsl(45 80% 72%); }
.role-approach { border-top-color: hsl(305 62% 62%); }
.role-approach h4 { color: hsl(305 62% 76%); }

/* ───────────────────────────────────────────────────── borrowed-chord demo ── */
.borrow {
  max-width: 58rem; margin: 1.8rem auto 2.2rem; padding: clamp(1rem, 2.6vw, 1.5rem);
  background: var(--bg-panel); border: 1px solid var(--rule); border-radius: 12px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,220px); gap: 1.6rem;
  align-items: center;
}
.borrow-line { font-size: 1.06rem; margin: 0 0 .7rem; }
.borrow-why { font-size: .95rem; color: var(--ink-soft); margin: 0 0 1rem; }
.borrow-controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.borrow-wheels { text-align: center; }
.borrow-wheels .wheel { margin: 0 auto; }
.cap { font-family: var(--mono); font-size: .76rem; color: var(--ink-dim); margin: .6rem 0 0; }

/* ────────────────────────────────────────────────────────────────── clips ── */
.clip-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .9rem; }
.clip { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
        gap: 1.2rem; align-items: start; }
.clip p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.btn-clip { width: 100%; padding: .85rem 1rem; font-size: 1rem; }
.btn-clip .n {
  font-family: var(--mono); font-size: .8rem; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 5px;
  width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; flex: none;
}

/* ─────────────────────────────────────────────────────────── modulation ── */
.mod-head { margin-bottom: 1.2rem; }
.mod-keys { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
            font-family: var(--mono); font-size: 1.1rem; margin-bottom: .6rem; }
.mod-keys .k { padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--rule); }
.mod-keys .from { color: var(--ink-soft); }
.mod-keys .to { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }
.mod-keys .arrow { color: var(--ink-dim); }
.mod-sentence { font-size: 1rem; color: var(--ink-soft); margin: 0; max-width: 62ch; }

.mod-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
            gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.mod-voices { margin: 0; }
.mod-voices svg { width: 100%; height: auto; background: var(--bg-inset);
                  border: 1px solid var(--rule-soft); border-radius: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.mod-stats { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem;
             margin: 1.2rem 0 0; font-family: var(--mono); font-size: .82rem; }
.mod-stats dt { color: var(--ink-dim); }
.mod-stats dd { margin: 0; color: var(--ink); }

.vl-line { stroke-width: 1.5; fill: none; }
.vl-dot { stroke-width: 1.5; }
.vl-label { font-family: var(--mono); font-size: 11px; fill: var(--ink-dim); }
.vl-axis { stroke: var(--rule-soft); stroke-width: 1; }
.vl-head { font-family: var(--mono); font-size: 11px; fill: var(--ink-soft); }
.vl-held { font-family: var(--mono); font-size: 10px; fill: var(--good); }

/* ─────────────────────────────────────────────────────────────── the seed ── */
.seed-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .2rem 1.4rem; margin: 1.1rem 0 0;
  border-top: 1px solid var(--rule-soft); padding-top: .9rem;
}
.seed-facts > div { min-width: 0; }
.seed-facts dt { font-family: var(--sans); font-size: .66rem; letter-spacing: .13em;
                 text-transform: uppercase; color: var(--ink-dim); }
.seed-facts dd { margin: .1rem 0 0; font-family: var(--mono); font-size: .9rem;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ────────────────────────────────────────────────────────────── the proof ── */
.proof-grid, .counter-grid {
  display: grid; gap: .8rem; margin: 2rem auto 1rem; max-width: var(--wide);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat {
  padding: 1.2rem 1.15rem; border-radius: 10px;
  background: var(--bg-panel); border: 1px solid var(--rule);
}
.stat-n {
  display: block; font-family: var(--mono); font-size: clamp(1.5rem, 1rem + 2vw, 2.3rem);
  line-height: 1.05; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.stat-l { display: block; font-family: var(--sans); font-size: .8rem; line-height: 1.4;
          color: var(--ink-dim); margin-top: .45rem; }
/* The zero is the whole page in one character, so it is allowed to be the loudest thing on
 * the screen. It is also the one number that would be a lie if the file said otherwise —
 * `paintVerification()` strips this class and paints it red if violations are ever non-zero. */
.stat-hero {
  border-color: var(--accent-mid);
  background: linear-gradient(150deg, var(--accent-wash), var(--bg-panel));
  box-shadow: 0 0 0 1px hsl(var(--accent-h) var(--accent-s) 60% / 0.18),
              0 14px 40px -22px hsl(var(--accent-h) var(--accent-s) 55% / 0.6);
}
.stat-hero .stat-n {
  color: var(--accent);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
  text-shadow: 0 0 26px hsl(var(--accent-h) var(--accent-s) 60% / 0.35);
}
.stat-hero .stat-l { color: var(--ink-soft); }
.stat-bad { border-color: rgb(255 122 110 / .3); }
.stat-bad .stat-n { color: var(--bad); }

.proof-meta { font-family: var(--mono); font-size: .78rem; line-height: 1.6;
              color: var(--ink-dim); max-width: var(--wide); margin: 0 auto 1rem; }
.proof-meta.is-bad { color: var(--bad); }

.rules { counter-reset: r; list-style: none; padding: 0; }
.rules li {
  counter-increment: r; position: relative; padding-left: 2.6rem; margin-bottom: 1.1rem;
  font-size: .98rem; line-height: 1.55; color: var(--ink-soft);
}
.rules li::before {
  content: counter(r); position: absolute; left: 0; top: .05rem;
  font-family: var(--mono); font-size: .78rem; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 5px;
  width: 1.65rem; height: 1.65rem; display: grid; place-items: center;
}

.progress { margin-top: 1rem; }
.progress .bar {
  height: 7px; background: var(--bg-inset); border: 1px solid var(--rule-soft);
  border-radius: 4px; overflow: hidden;
}
.progress .fill {
  height: 100%; width: 0%; background: var(--accent-mid);
  transition: width .12s linear;
}
.progress.is-bad .fill { background: var(--bad); }
.progress p { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-dim); }

.detail { margin: 2rem auto; }
.detail summary {
  cursor: pointer; font-family: var(--sans); font-size: .9rem; color: var(--accent);
  padding: .5rem 0;
}
.detail summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.proof-table { display: grid; gap: .2rem; margin-top: .8rem; }
.proof-row {
  display: grid; grid-template-columns: 1.5rem minmax(0, 12rem) minmax(0, 1fr) auto;
  gap: .8rem; align-items: baseline;
  font-family: var(--mono); font-size: .8rem; padding: .45rem .2rem;
  border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft);
}
.proof-row .tick { color: var(--good); }
.proof-row .cross { color: var(--bad); }
.proof-row .desc { color: var(--ink-dim); }
.proof-row .ms { color: var(--ink-dim); text-align: right; }

/* ──────────────────────────────────────────────── the development plan (§4) ── */
.devplan {
  display: grid; gap: .55rem; margin: 1.3rem 0 .9rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.devcell {
  border: 1px solid var(--rule); border-radius: 9px;
  background: var(--bg-panel);
  padding: .7rem .85rem .8rem;
  border-left: 3px solid var(--rule);
  transition: border-color .18s ease, background .18s ease;
}
.devcell .bars {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim);
}
.devcell .kind {
  display: block; font-family: var(--mono); font-size: .95rem;
  color: var(--accent); margin: .28rem 0 .18rem;
}
.devcell .gloss {
  display: block; font-family: var(--sans); font-size: .82rem; line-height: 1.45;
  color: var(--ink-soft);
}
.devcell.is-live {
  border-color: var(--accent-line); border-left-color: var(--accent);
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--bg-panel);
}
#dev-cadence { margin-top: 0; }

/* ────────────────────────────────────────────────────────────────── the API ── */
.api dl { margin: 1.4rem 0 2rem; display: grid; gap: 1.1rem; }
.api dt { font-family: var(--mono); font-size: .85rem; color: var(--accent); margin-bottom: .3rem; }
.api dt code { background: none; border: none; padding: 0; color: inherit; white-space: normal; }
.api dd { margin: 0; font-size: .96rem; line-height: 1.55; color: var(--ink-soft);
          padding-left: 1rem; border-left: 1px solid var(--rule); }

.closing {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.32rem); line-height: 1.5;
  color: #eef2f8; margin-top: 2.6rem; padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

/* ─────────────────────────────────────────────────────────── sticky player ── */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgb(9 11 16 / 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--accent-line);
}
.player[hidden] { display: none; }
.player-inner {
  max-width: calc(var(--wide) + 2 * var(--pad));
  margin: 0 auto; padding: .7rem var(--pad);
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--sans); font-size: .875rem;
}
.player-dot {
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent);
  flex: none; box-shadow: 0 0 12px var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.player-what { color: var(--ink); font-weight: 500; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.player-sep { color: var(--ink-dim); }
.player-key { color: var(--accent); white-space: nowrap; }
.player-chord { color: var(--ink-soft); white-space: nowrap; }
.btn-stop-lg { margin-left: auto; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.foot {
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin: clamp(3rem, 8vw, 6rem) auto 0; padding: 2rem var(--pad) 0;
  border-top: 1px solid var(--rule-soft);
}
.foot p { font-family: var(--sans); font-size: .84rem; line-height: 1.6; color: var(--ink-dim); }

/* ──────────────────────────────────────────────────────────────── narrow ── */
@media (max-width: 860px) {
  .hero-stage { grid-template-columns: 1fr; }
  .hero-wheel .wheel { max-width: 200px; }
  .wheel-demo { grid-template-columns: 1fr; }
  .mod-body { grid-template-columns: 1fr; }
  .clip { grid-template-columns: 1fr; gap: .55rem; }
  .borrow { grid-template-columns: 1fr; }
  .borrow-wheels { order: -1; }
}
@media (max-width: 620px) {
  :root { --measure: 100%; }
  body { font-size: 1.06rem; line-height: 1.6; }
  canvas.roll { height: 250px; }
  #ab-roll { height: 340px; }
  #seed-roll { height: 230px; }
  .level-view { height: 104px; }
  /* Inline code is `nowrap` everywhere else because a broken identifier is harder to read
   * than a long line. On a phone that trade flips: a 40-character signature that cannot
   * wrap is what pushes a page sideways, and a page you have to scroll horizontally to
   * read is worse than a wrapped function name. */
  p code, li code, dd code, dt code { white-space: normal; overflow-wrap: anywhere; }
  .api dt, .api dd, .api dl > div { min-width: 0; }
  .demo .controls { gap: .55rem; }
  .field { flex: 1 1 8rem; }
  .btn { font-size: .875rem; padding: .58rem .85rem; }
  .player-inner { flex-wrap: wrap; gap: .5rem .7rem; }
  .btn-stop-lg { width: 100%; justify-content: center; margin-left: 0; }
  .proof-row { grid-template-columns: 1.2rem 1fr auto; }
  .proof-row .desc { display: none; }
  .btn-ab { flex: 1 1 100%; }
  .ab-buttons .btn-stop { flex: 1 1 100%; justify-content: center; }
  .mod-keys { font-size: .95rem; }
  .clip-head { width: 100%; }
}

/* ─────────────────────────────────────────────────────── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wheel-rotor { transition: none; }
  .player-dot { animation: none; }
}