/* ───────────────────────────────────────────────────────────
   TS-DSPy — monochrome, type-led.
   The page carries exactly one chromatic colour, and it is
   spent on a validation failure. Everything else is ink on
   paper, so the failure is the thing the eye finds.
   ─────────────────────────────────────────────────────────── */

:root {
  --paper:  #ffffff;
  --panel:  #f5f5f4;
  --ink:    #0a0a0a;
  --muted:  #6e6e6b;
  --rule:   #dededc;
  --fail:   #d6301f;

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --band: clamp(72px, 10vw, 140px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0a0a;
    --panel: #141413;
    --ink:   #f5f5f4;
    --muted: #8f8f89;
    --rule:  #2a2a28;
    --fail:  #ff5c47;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 100;
  font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── nav ─────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 64px;
}
.mark {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none;
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}
.mark-glyph { font-family: var(--mono); font-size: 19px; }
.nav-links { display: flex; gap: clamp(16px, 3vw, 34px); }
.nav-links a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em;
  text-decoration: none; color: var(--muted);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 620px) { .nav-links a:not(:last-child) { display: none; } }

/* ── shared type ─────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
}

.display {
  font-size: clamp(34px, 5.4vw, 66px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.0;
  margin: 0 0 24px;
  /* No ch cap: the <br> in the markup sets the breaks, and a cap here fights
     it into an extra wrap. Balance keeps the two lines even if it does wrap. */
  text-wrap: balance;
}
.quoted { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; }

.h2 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.05;
  margin: 0 0 20px; max-width: 20ch;
}

.lede {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5; color: var(--muted);
  max-width: 54ch; margin: 0 0 40px;
}
.body { color: var(--muted); margin: 0 0 8px; }
.body-wide { max-width: 62ch; margin-bottom: 44px; }

/* ── hero ────────────────────────────────────────────────── */

.hero { padding-block: clamp(40px, 6vw, 72px) var(--band); }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  text-decoration: none;
  padding: 13px 24px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  transition: opacity .18s ease;
}
.btn:hover { opacity: .82; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); opacity: 1; }

/* ── the rig ─────────────────────────────────────────────────
   Three columns tell the whole story left to right: what you
   declared, what the model actually said, and what you end up
   holding. The last column is the point of the library, so it
   is the one that resolves last. */

.rig { margin: 0; border: 1px solid var(--ink); background: var(--panel); display: grid; }

.rig-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px;
}
.rig-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); opacity: .3; }
.rig.live .rig-dot { opacity: 1; animation: pulse 1.15s ease-in-out infinite; }
.rig.ok   .rig-dot { opacity: 1; background: var(--paper); animation: none; }
.rig.bad  .rig-dot { opacity: 1; background: var(--fail); animation: none; }
@keyframes pulse { 0%,100% { opacity: .28; } 50% { opacity: 1; } }
.rig-route { font-weight: 500; }
.rig-state {
  margin-left: auto; opacity: .62; letter-spacing: .09em;
  text-transform: uppercase; font-size: 11px;
}

.rig-head, .rrow {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.05fr) minmax(0, .95fr) 34px;
  gap: 16px;
}
.rig-head {
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}

.rig-rows { position: relative; padding: 4px 0; }

.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--ink); opacity: 0; pointer-events: none;
}
.scan.sweep { animation: sweep 1.45s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sweep {
  0% { opacity: 0; transform: translateY(0); }
  9% { opacity: .85; }
  91% { opacity: .85; }
  100% { opacity: 0; transform: translateY(var(--sweep-to, 160px)); }
}

.rrow { align-items: center; padding: 14px 18px; }
.rrow + .rrow { border-top: 1px solid var(--rule); }

.rsig, .rout, .rval {
  font-family: var(--mono); font-size: clamp(11.5px, 1.28vw, 13.5px);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsig { display: flex; align-items: baseline; gap: 9px; }
.rsig b { font-weight: 700; }
.rsig i {
  font-style: normal; color: var(--muted);
  border: 1px solid var(--rule); padding: 1px 6px; font-size: .84em;
}

.rout { color: var(--muted); }
.rout::after {
  content: ''; display: inline-block; width: 6px; height: 1.02em;
  background: var(--ink); vertical-align: -.16em; margin-left: 2px; opacity: 0;
}
.rout.typing::after { opacity: 1; animation: caret .8s step-end infinite; }
@keyframes caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* the payoff column */
.rval { opacity: 0; transform: translateX(-4px); transition: opacity .3s ease, transform .3s ease; font-weight: 500; }
.rrow.done .rval { opacity: 1; transform: none; }
.rval .q { color: var(--muted); }            /* quotes: it is a string */
.rval .n { font-weight: 700; }               /* bare: it is a number */
.rrow.bad .rval { color: var(--fail); }
.rrow.bad .rsig b, .rrow.bad .rout { color: var(--fail); }
.rrow.bad .rsig i { color: var(--fail); border-color: var(--fail); }

.rmark {
  justify-self: end; font-family: var(--mono); font-size: 14px; font-weight: 700;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.rrow.done .rmark { opacity: 1; transform: none; }
.rrow.good .rmark::before { content: '\2713'; }
.rrow.bad  .rmark::before { content: '\2715'; color: var(--fail); }

.rig-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 11px;
  padding: 0 18px; max-height: 0; overflow: hidden;
  border-top: 1px solid transparent;
  font-family: var(--mono); font-size: 12.5px;
  transition: max-height .32s ease, padding .32s ease, border-color .32s ease;
}
.rig-foot.on { max-height: 150px; padding: 14px 18px; border-top-color: var(--rule); }
.rig-foot.bad { border-top-color: var(--fail); }
.foot-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  padding: 3px 9px; background: var(--ink); color: var(--paper);
}
.rig-foot.bad .foot-tag { background: var(--fail); }
.rig-foot.bad .foot-msg { color: var(--fail); }
.foot-msg { color: var(--muted); }

@media (max-width: 760px) {
  .rig-head { display: none; }
  .rrow { grid-template-columns: minmax(0, 1fr) 26px; gap: 5px 10px; padding: 13px 14px; }
  .rsig, .rout, .rval { grid-column: 1; }
  .rmark { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .rig-bar, .rig-foot.on { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rig-dot, .rout::after { animation: none !important; }
  .scan { display: none; }
  .rval { transition: none; }
}

/* ── bands ───────────────────────────────────────────────── */

.band { padding-block: var(--band); border-top: 1px solid var(--rule); }
.band-alt { background: var(--panel); }

/* ── split panes ─────────────────────────────────────────── */

.split {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 40px;
}
.pane { background: var(--paper); padding: clamp(22px, 3vw, 34px); margin: 0; min-width: 0; }
.pane-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 18px; color: var(--muted);
}
.pane-note { color: var(--muted); font-size: 15px; margin: 20px 0 0; max-width: 44ch; }

/* ── code ────────────────────────────────────────────────── */

.code {
  font-family: var(--mono);
  font-size: clamp(12px, 1.25vw, 13.5px);
  line-height: 1.72;
  margin: 0;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--rule);
  overflow-x: auto;
  max-width: 100%;
  tab-size: 2;
}
.band-alt .code { background: var(--paper); }
.code code { font: inherit; color: inherit; }
.code .c  { color: var(--muted); }
.code .kw { font-weight: 700; }
.code .s  { color: var(--muted); }
.code .ty { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.code .at { font-weight: 700; }

/* ── start grid ──────────────────────────────────────────── */

.start-grid {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  margin-top: 40px;
}
.start-grid > * { min-width: 0; }
@media (max-width: 860px) { .start-grid { grid-template-columns: minmax(0, 1fr); } }
.step-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 12px; color: var(--muted);
}
.start-grid .step-tag + .code { margin-bottom: 30px; }

/* ── provider cards ──────────────────────────────────────── */

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}
.card { background: var(--paper); padding: clamp(22px, 2.6vw, 30px); min-width: 0; }
.card-name {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.card-model {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  margin: 0 0 18px;
}
.card-body { font-size: 15px; color: var(--muted); margin: 0 0 22px; }
.card-cmd {
  font-family: var(--mono); font-size: 12px;
  display: block; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--rule);
  overflow-x: auto; white-space: nowrap;
}

/* ── definitions ─────────────────────────────────────────── */

.defs { margin: 40px 0 0; display: grid; gap: 0; }
.def {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 48px);
  padding: 30px 0;
  border-top: 1px solid var(--rule);
}
.def:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) { .def { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.def dt {
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 700;
  letter-spacing: -0.03em;
}
.def dt, .def dd { min-width: 0; }
.def dd { margin: 0; color: var(--muted); max-width: 62ch; }
.def dd code {
  font-family: var(--mono); font-size: 0.88em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); padding: 1px 5px;
}

/* ── footer ──────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--rule); padding-block: 44px; }
.foot-in {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-start; justify-content: space-between;
}
.foot-mark { font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; }
.foot-mark span { font-family: var(--mono); }
.foot-note { margin: 0; font-size: 14px; color: var(--muted); }
.foot-links { display: flex; gap: 26px; }
.foot-links a, .foot-note a {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid var(--rule);
}
.foot-links a:hover, .foot-note a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .row, .link::after, .verdict, .throw { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DOCS · ARCHITECTURE · EXAMPLES
   Same discipline as the landing page: ink on paper, and the one
   chromatic colour still belongs to failure alone. The template
   this was adapted from used blue for emphasis and green for
   success; both are dropped so red keeps its meaning.
   ═══════════════════════════════════════════════════════════ */

.pagehead { padding-block: clamp(36px, 5vw, 64px) 0; }
.pagehead .display { font-size: clamp(30px, 4.4vw, 52px); margin-bottom: 18px; }
.pagehead .lede { margin-bottom: 24px; }

.meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  margin: 0;
}
.meta span { border: 1px solid var(--rule); padding: 4px 10px; }

/* ── docs shell ──────────────────────────────────────────── */

.docs {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
  padding-block: 48px var(--band);
}
@media (max-width: 900px) { .docs { grid-template-columns: minmax(0, 1fr); } }
.docs > * { min-width: 0; }

.toc { position: sticky; top: 88px; }
@media (max-width: 900px) {
  .toc { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 20px; }
}
.toc-title {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc a {
  display: block; text-decoration: none; color: var(--muted);
  font-size: 14px; padding: 5px 0 5px 13px;
  border-left: 1px solid var(--rule);
  transition: color .16s ease, border-color .16s ease;
}
.toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.toc a.here { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }

.doc { display: grid; gap: clamp(46px, 6vw, 76px); }
/* min-width:0 or a wide child (a diagram, a table) expands the section
   instead of scrolling inside its own container. */
.doc > section { scroll-margin-top: 92px; display: grid; gap: 16px; min-width: 0; }
.doc > section > * { min-width: 0; }

.doc h2 {
  font-size: clamp(24px, 3vw, 33px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.12; margin: 0; max-width: 24ch;
}
.doc h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -0.015em; margin: 12px 0 0; }
.doc p { margin: 0; max-width: 68ch; color: var(--muted); }
.doc p strong, .doc li strong { color: var(--ink); font-weight: 600; }
.doc ul { margin: 0; padding-left: 19px; color: var(--muted); max-width: 68ch; display: grid; gap: 7px; }
.doc :not(pre) > code {
  font-family: var(--mono); font-size: 0.87em;
  background: var(--paper); border: 1px solid var(--rule);
  padding: 1px 5px; color: var(--ink);
}
.band-alt .doc :not(pre) > code { background: var(--panel); }
.anchor {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

/* ── tables ──────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--paper); max-width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); background: var(--panel);
}
tbody tr:last-child td { border-bottom: none; }
td.sym, td.path { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
td.sym { font-weight: 700; }
td.note { color: var(--muted); }
td code { font-family: var(--mono); font-size: 12px; }

/* ── callout ─────────────────────────────────────────────── */

.callout {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink);
  background: var(--panel); padding: 18px 22px; display: grid; gap: 8px;
}
.band-alt .callout { background: var(--paper); }
.callout .label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink);
}
.callout p { max-width: 66ch; }
.callout-warn { border-left-color: var(--fail); }
.callout-warn .label { color: var(--fail); }

/* ── figures ─────────────────────────────────────────────── */

figure.fig { margin: 0; border: 1px solid var(--rule); background: var(--panel); max-width: 100%; }
.band-alt figure.fig { background: var(--paper); }
.fig-body { overflow-x: auto; padding: 24px 20px 18px; }
.fig svg { display: block; width: 100%; min-width: 560px; height: auto; }
.fig figcaption {
  font-size: 14px; line-height: 1.6; color: var(--muted);
  border-top: 1px solid var(--rule); padding: 14px 20px;
}
.fig figcaption b { color: var(--ink); font-weight: 600; }
.fig figcaption code {
  font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--rule); padding: 1px 4px; background: var(--paper);
}
.band-alt .fig figcaption code { background: var(--panel); }

/* SVG primitives */
.n      { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; }
.band-alt .n { fill: var(--panel); }
.n-fill { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; }
.n-band { fill: none; stroke: var(--rule); stroke-width: 1.25; }
.n-fail { fill: var(--paper); stroke: var(--fail); stroke-width: 1.4; }
.band-alt .n-fail { fill: var(--panel); }

.e      { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.e-soft { stroke: var(--muted); stroke-width: 1.2; fill: none; stroke-dasharray: 4 4; }
.e-fail { stroke: var(--fail); stroke-width: 1.5; fill: none; }

.t      { font-family: var(--mono); fill: var(--ink); }
.t-ttl  { font-size: 12.5px; font-weight: 700; }
.t-sub  { font-size: 10.5px; fill: var(--muted); }
.t-edge { font-size: 10.5px; fill: var(--muted); }
.t-inv  { fill: var(--paper); }
.t-fail { fill: var(--fail); }
.t-band { font-size: 11px; font-weight: 700; fill: var(--muted); letter-spacing: 0.06em; }

/* animation: nodes settle, edges draw themselves */
.fig[data-anim] .g-node { opacity: 0; transition: opacity .46s ease; }
.fig[data-anim] .g-edge { stroke-dashoffset: var(--len); stroke-dasharray: var(--len); transition: stroke-dashoffset .6s ease; }
.fig[data-anim] .g-lbl  { opacity: 0; transition: opacity .38s ease; }
.fig[data-anim].run .g-node,
.fig[data-anim].run .g-lbl { opacity: 1; }
.fig[data-anim].run .g-edge { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .fig[data-anim] .g-node,
  .fig[data-anim] .g-lbl { opacity: 1; }
  .fig[data-anim] .g-edge { stroke-dashoffset: 0; }
  .fig[data-anim] * { transition: none !important; }
}

/* ── examples ────────────────────────────────────────────── */

.ex-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-tag {
  font-family: var(--mono); font-size: 10.5px;
  border: 1px solid var(--rule); padding: 3px 8px; color: var(--muted);
}
.out {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  border: 1px solid var(--rule); border-left: 3px solid var(--muted);
  background: var(--paper); padding: 14px 16px; margin: 0;
  overflow-x: auto; max-width: 100%; white-space: pre;
}
.band-alt .out { background: var(--panel); }
.out-fail { border-left-color: var(--fail); color: var(--fail); }
.out-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SYNTAX HIGHLIGHTING
   A code block is an editor surface embedded in the page, so it
   gets an editor's palette. The page chrome around it stays
   monochrome, which keeps failure-red meaning one thing.
   Values track GitHub's light and dark themes — both are tuned
   for contrast on their own ground rather than picked by eye.
   ═══════════════════════════════════════════════════════════ */

:root {
  --c-kw:   #cf222e;
  --c-str:  #0a3069;
  --c-com:  #6e7781;
  --c-typ:  #953800;
  --c-fn:   #8250df;
  --c-num:  #0550ae;
  --c-dec:  #953800;
  --c-prop: #0550ae;
  --c-pun:  #57606a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-kw:   #ff7b72;
    --c-str:  #a5d6ff;
    --c-com:  #8b949e;
    --c-typ:  #ffa657;
    --c-fn:   #d2a8ff;
    --c-num:  #79c0ff;
    --c-dec:  #ffa657;
    --c-prop: #79c0ff;
    --c-pun:  #8b949e;
  }
}

.code .c-kw   { color: var(--c-kw); }
.code .c-str  { color: var(--c-str); }
.code .c-com  { color: var(--c-com); font-style: italic; }
.code .c-typ  { color: var(--c-typ); }
.code .c-fn   { color: var(--c-fn); }
.code .c-num  { color: var(--c-num); }
.code .c-dec  { color: var(--c-dec); font-weight: 700; }
.code .c-prop { color: var(--c-prop); }
.code .c-pun  { color: var(--c-pun); }

/* Give the block a little editor chrome so the colour reads as
   deliberate rather than decorative. */
.code {
  position: relative;
  border-radius: 0;
}
.code[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 0; right: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  padding: 5px 10px;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}