/* © 2026 William C. Chesher. All Rights Reserved. */
/* spawn docs - Material/Zensical in spawn's skin.

   Every colour, face and motion is a token from the studio's /tokens.css (linked in overrides/main.html), the ONE
   source the landing, the studio, Spawn Point and the brand page read. This file names no new hue: it maps the
   theme's variables onto the tokens and composes the house's pieces (the lockup, the pixel eyebrow, the genesis
   headline, the void's light, the station colours, the minihero stage) for pages a student reads.

   The station colours walk the genesis gradient left to right, as the studio's bar does: 01 pick lime, 02 design
   spring, 03 make cerulean, 04 ship royal. Player two is royal wherever it appears; lime is the student's. One accent
   leads per surface. Motion is the house's: hard steps, once, and none when the reader asks for less. */

:root, [data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--surface); --md-default-bg-color--light: var(--panel); --md-default-bg-color--lighter: var(--panel-2); --md-default-bg-color--lightest: var(--line);
  --md-default-fg-color: var(--ink); --md-default-fg-color--light: var(--ink-2); --md-default-fg-color--lighter: var(--muted); --md-default-fg-color--lightest: var(--line-2);
  --md-primary-fg-color: var(--surface); --md-primary-bg-color: var(--ink); --md-primary-fg-color--light: var(--panel); --md-primary-fg-color--dark: var(--surface);
  --md-accent-fg-color: var(--accent); --md-accent-fg-color--transparent: var(--accent-soft); --md-accent-bg-color: var(--surface);
  --md-typeset-a-color: var(--accent); --md-code-bg-color: var(--well); --md-code-fg-color: var(--ink-2); --md-code-hl-color: var(--accent-soft);
  --md-footer-bg-color: var(--surface); --md-footer-bg-color--dark: var(--surface); --md-footer-fg-color: var(--muted);
  --md-admonition-fg-color: var(--ink); --md-shadow-z1: none; --md-shadow-z2: none; --md-shadow-z3: none;
  --md-text-font: var(--body); --md-code-font: var(--mono);
  --md-typeset-table-color: var(--line);
  /* the station colours, the genesis walk */
  --st-1: var(--accent); --st-2: var(--genesis-2); --st-3: var(--genesis-3); --st-4: var(--p2);
}
html { background: var(--surface); }
body { background: transparent; }                      /* the void's light (tokens.css body::before) shows through */
.md-container, .md-main { background: transparent; }
.md-main { overflow-x: clip; }

/* ---- the header: the lockup, then search; the tabs under it, quiet ---- */
.md-header { background: rgb(7 11 24 / .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: none; }
.md-header__inner { padding: 6px 0; }
.md-header__button.md-logo { margin: 0 4px 0 12px; padding: 6px; }
.md-header__button.md-logo .mark, .spawn-foot .mark { display: block; width: 30px; height: 30px; }
.mark .frame { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: square; }
.mark .p1 { fill: var(--accent); } .mark .p2 { fill: var(--p2); }
.md-header__button.md-logo:hover .mark .frame { stroke: var(--ink); }
/* "spawn docs" is the site name (it titles every tab); the header draws it as the wordmark, then the pixel label */
.md-header__topic:first-child .md-ellipsis { font-size: 0; display: inline-flex; align-items: center; gap: 12px; overflow: visible; }
.md-header__topic:first-child .md-ellipsis::before { content: "spawn"; font: 800 24px/1 var(--display); letter-spacing: -.055em; color: var(--ink);
  text-shadow: var(--ink-glow); padding-right: .26em;
  background: linear-gradient(var(--accent), var(--accent)) right .04em bottom .02em / .17em .17em no-repeat; }
.md-header__topic:first-child .md-ellipsis::after { content: "docs"; font: 400 11px/1 var(--pixel); letter-spacing: .06em; color: var(--muted);
  padding-left: 12px; border-left: 1px solid var(--line-2); text-transform: uppercase; }
.md-header__topic + .md-header__topic .md-ellipsis { font: 600 17px var(--display); letter-spacing: -.02em; }
.md-search__form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color var(--fast) var(--ease); }
.md-search__form:hover { background: var(--panel); border-color: var(--line-2); }
.md-search__input { color: var(--ink); } .md-search__input::placeholder { color: var(--muted); }
.md-search__output, .md-search__scrollwrap { background: var(--panel); }
.md-search-result__meta { background: var(--panel-2); color: var(--muted); font: 400 var(--type-label) var(--mono); }
.md-search-result mark { color: var(--accent); }
.md-tabs { background: transparent; border-bottom: 1px solid var(--line); }
.md-tabs__link { font: 600 14px/1 var(--display); color: var(--muted); opacity: 1; letter-spacing: -.005em; }
.md-tabs__item--active .md-tabs__link, .md-tabs__link:hover { color: var(--ink); }
.md-tabs__item--active { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- the side rails ---- */
.md-nav { font-size: .74rem; }
.md-nav__title { font: 400 var(--type-label) var(--pixel); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; background: transparent !important; box-shadow: none !important; }
.md-nav__link { color: var(--ink-2); transition: color var(--fast) var(--ease); }
.md-nav__link:hover { color: var(--ink); }
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--accent); }
.md-nav--primary .md-nav__link--active { position: relative; }
.md-nav--secondary .md-nav__title { color: var(--muted); }
[dir] .md-sidebar__scrollwrap { scrollbar-color: var(--line-2) transparent; }

/* ---- type ---- */
.md-typeset { font-size: .86rem; line-height: 1.65; color: var(--ink-2); }
.md-typeset strong { color: var(--ink); font-weight: 600; }
.md-typeset h1 { font: 800 clamp(36px, 4.6vw, 56px)/1 var(--display); letter-spacing: -.048em; color: var(--ink); margin: 0 0 .5em; text-wrap: balance; }
.md-typeset h2 { font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -.034em; color: var(--ink); margin: 2.4em 0 .7em; text-wrap: balance; }
.md-typeset h3 { font: 650 19px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); margin: 1.8em 0 .5em; }
.md-typeset h2 + h3 { margin-top: .6em; }
.md-typeset .headerlink { color: var(--line-2); } .md-typeset .headerlink:hover { color: var(--accent); }
.md-typeset a, .md-typeset a code { color: var(--accent); text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color var(--fast) var(--ease); }
.md-typeset a:hover, .md-typeset a:hover code { color: var(--accent-hover); }
.md-typeset a.headerlink { background: none; }
.md-typeset code { border-radius: 6px; padding: .1em .38em; background: var(--panel-2); color: var(--ink); font-size: .82em; }
.md-typeset pre > code { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--well); color: var(--ink-2); }
.md-typeset kbd { background: var(--panel-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; box-shadow: none; color: var(--ink); font: 400 .78em var(--mono); padding: .1em .45em; }
.md-typeset hr { border-color: var(--line); }
.md-typeset ul li::marker, .md-typeset ol li::marker { color: var(--muted); }
.md-content__inner { padding-bottom: 3rem; }
.md-content__inner > p, .md-content__inner > ul, .md-content__inner > ol { max-width: 44em; }

/* ---- the eyebrow: the pixel label over a page's title, a lit square in the section's colour ---- */
.px { --c: var(--accent); display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 12px/1.4 var(--pixel); color: var(--muted); letter-spacing: .04em; }
.px::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 12px -1px var(--c); }
.px b { color: var(--c); font-weight: 400; }
.px.s1 { --c: var(--st-1); } .px.s2 { --c: var(--st-2); } .px.s3 { --c: var(--st-3); } .px.s4, .px.two { --c: var(--st-4); }

/* the lede under a title */
.md-typeset .lede { font-size: 1.04rem; line-height: 1.55; color: var(--ink-2); max-width: 40em; text-wrap: pretty; margin: -.2em 0 1.6em; }

/* ---- the stage: a page's head, lit (the house's minihero, wider). --c names the section's light ---- */
.md-typeset .stage { --c: var(--p2); position: relative; isolation: isolate; margin: 0 0 2em; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(closest-side circle at 88% 20%, color-mix(in srgb, var(--c) 30%, transparent), transparent),
    radial-gradient(closest-side circle at 4% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    linear-gradient(160deg, rgb(255 255 255 / .035), transparent 60%), var(--panel); }
.md-typeset .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(70% 90% at 85% 10%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 85% 10%, #000, transparent 75%); }
.md-typeset .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--c), transparent 80%); }
.md-typeset .stage.genesis-seam::after { background: var(--genesis); }
.md-typeset .stage h1 { margin: 0 0 .3em; }
.md-typeset .stage .lede { margin: 0; font-size: .96rem; }
.md-typeset .stage .px { --c: inherit; }
.md-typeset .stage.s1 { --c: var(--st-1); } .md-typeset .stage.s2 { --c: var(--st-2); } .md-typeset .stage.s3 { --c: var(--st-3); } .md-typeset .stage.s4, .md-typeset .stage.two { --c: var(--st-4); }
.md-typeset .stage .px::before { background: var(--c); box-shadow: 0 0 12px -1px var(--c); } .md-typeset .stage .px b { color: var(--c); }
.md-typeset .stage .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.2em 0 0; }
.md-typeset .stage .meta span { padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 8%, transparent);
  font: 400 12px var(--mono); color: var(--ink-2); }

/* the genesis headline: player one into player two, clipped to the letters */
.md-typeset .gen { background: var(--genesis); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; padding-bottom: .06em; }

/* ---- the home: the hero and its door ---- */
.md-typeset .hero { position: relative; isolation: isolate; text-align: center; padding: clamp(28px, 6vw, 64px) 0 clamp(20px, 4vw, 36px); margin: 0 0 1em; }
.md-typeset .hero::before { content: ""; position: absolute; z-index: -1; inset: -80px -30vw -20px; pointer-events: none;
  background: radial-gradient(28% 46% at 50% 36%, var(--bloom-1), transparent 70%), radial-gradient(46% 70% at 50% 40%, var(--bloom-2), transparent 72%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(50% 80% at 50% 40%, #000 25%, transparent 80%); mask-image: radial-gradient(50% 80% at 50% 40%, #000 25%, transparent 80%); }
.md-typeset .hero .px { justify-content: center; }
.md-typeset .hero h1 { font-size: clamp(44px, 7.4vw, 84px); line-height: .95; letter-spacing: -.055em; margin: 0 auto .32em; max-width: 12em; }
.md-typeset .hero .lede { margin: 0 auto; font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 34em; }
.md-typeset .go { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 0; }
.md-typeset .hero .go { justify-content: center; }
.md-typeset a.btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h-big); padding: 0 var(--btn-pad-big); border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font: 600 15px var(--display); background-image: none; transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.md-typeset a.btn:hover, .md-typeset a.btn:focus-visible { background: var(--accent-hover); color: var(--accent-ink); box-shadow: var(--glow); }
.md-typeset a.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.md-typeset a.btn.ghost:hover, .md-typeset a.btn.ghost:focus-visible { border-color: var(--muted); box-shadow: none; color: var(--ink); }
.md-typeset a.btn.two { background: transparent; color: var(--p2-hover); border: 1px solid color-mix(in srgb, var(--p2) 55%, var(--line)); }
.md-typeset a.btn.two:hover { border-color: var(--p2); box-shadow: none; }

/* ---- the four stations, a strip in their colours (home, studio overview) ---- */
.md-typeset .stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 1.4em 0 2em; }
.md-typeset .stations > a { --c: var(--st-1); position: relative; display: block; padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink-2);
  background-image: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.md-typeset .stations > a::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--c), transparent 75%); }
.md-typeset .stations > a:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--line)); transform: translateY(-2px); color: var(--ink-2); }
.md-typeset .stations > a:nth-child(2) { --c: var(--st-2); } .md-typeset .stations > a:nth-child(3) { --c: var(--st-3); } .md-typeset .stations > a:nth-child(4) { --c: var(--st-4); }
.md-typeset .stations .n { display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--pixel); color: var(--c); letter-spacing: .04em; }
.md-typeset .stations .n::before { content: ""; width: 7px; height: 7px; background: var(--c); }
.md-typeset .stations b { display: block; margin: 10px 0 4px; font: 700 21px/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.md-typeset .stations span:last-child { display: block; font-size: .78rem; line-height: 1.45; }

/* ---- doors: cards that are links, whole (home, section overviews) ---- */
.md-typeset .doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin: 1.2em 0 2em; }
.md-typeset .doors > a { --c: var(--accent); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink-2); background-image: none; transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.md-typeset .doors > a:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); background-color: var(--panel-2); color: var(--ink-2); }
.md-typeset .doors > a .k { font: 400 11px/1 var(--pixel); color: var(--c); letter-spacing: .04em; }
.md-typeset .doors > a b { font: 650 18px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.md-typeset .doors > a b::after { content: " \2192"; color: var(--c); opacity: 0; transition: opacity var(--fast) var(--ease); }
.md-typeset .doors > a:hover b::after { opacity: 1; }
.md-typeset .doors > a span:last-child { font-size: .78rem; line-height: 1.5; }
.md-typeset .doors > a.two { --c: var(--p2-hover); background-image: radial-gradient(90% 90% at 100% 100%, var(--p2-wash), transparent 75%); border-color: color-mix(in srgb, var(--p2) 28%, var(--line)); }
.md-typeset .doors > a.s2 { --c: var(--st-2); } .md-typeset .doors > a.s3 { --c: var(--st-3); } .md-typeset .doors > a.s4 { --c: var(--st-4); }
.md-typeset .doors > a.lead { grid-column: span 2; background-image: radial-gradient(80% 120% at 100% 0%, var(--bloom-2), transparent 70%), radial-gradient(60% 100% at 0% 100%, var(--bloom-1), transparent 70%); }
.md-typeset .doors > a.lead b { font-size: 24px; letter-spacing: -.035em; }
@media (max-width: 640px) { .md-typeset .doors > a.lead { grid-column: auto; } }

/* ---- steps: a rail lit in the station colours, a card on it for each step ---- */
.md-typeset ol.steps { --rail: 22px; list-style: none; margin: 1.4em 0 2em; padding: 0 0 0 calc(var(--rail) + 22px); position: relative; display: grid; gap: 12px; }
.md-typeset ol.steps::before { content: ""; position: absolute; left: calc(var(--rail) / 2 - 1px); top: 22px; bottom: 22px; width: 2px;
  background: linear-gradient(var(--muted), var(--st-1) 22%, var(--st-2) 45%, var(--st-3) 68%, var(--st-4)); opacity: .55; }
.md-typeset ol.steps > li { --c: var(--ink-2); position: relative; margin: 0; padding: 18px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--fast) var(--ease); }
.md-typeset ol.steps > li:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.md-typeset ol.steps > li::before { content: ""; position: absolute; left: calc(-22px - var(--rail) / 2 - 6px); top: 24px; width: 12px; height: 12px; background: var(--c); box-shadow: 0 0 0 5px var(--surface), 0 0 18px 0 var(--c); }
.md-typeset ol.steps > li::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--c), transparent 70%); }
.md-typeset ol.steps > li.s1 { --c: var(--st-1); } .md-typeset ol.steps > li.s2 { --c: var(--st-2); } .md-typeset ol.steps > li.s3 { --c: var(--st-3); } .md-typeset ol.steps > li.s4 { --c: var(--st-4); }
.md-typeset ol.steps .n { display: block; font: 400 11px/1 var(--pixel); color: var(--c); letter-spacing: .04em; margin: 0 0 8px; }
.md-typeset ol.steps h3 { margin: 0 0 .3em; font: 700 21px/1.15 var(--display); letter-spacing: -.025em; }
.md-typeset ol.steps h3 .headerlink { display: none; }
.md-typeset ol.steps p { margin: 0; max-width: 46em; }
.md-typeset ol.steps p + p { margin-top: .8em; }
.md-typeset .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.md-typeset .chips span { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--st-3) 40%, var(--line)); background: color-mix(in srgb, var(--st-3) 7%, transparent); font: 400 12px var(--mono); color: var(--ink-2); }
.md-typeset .chips span.p2 { border-color: color-mix(in srgb, var(--p2) 55%, var(--line)); background: var(--p2-wash); color: var(--p2-hover); }

/* ---- asks: a grid of question cards, the question in white ---- */
.md-typeset .asks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 1.2em 0 2em; }
.md-typeset .asks > div { padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--fast) var(--ease); }
.md-typeset .asks > div:hover { border-color: var(--line-2); }
.md-typeset .asks > div.p2 { background: radial-gradient(80% 90% at 100% 100%, var(--p2-soft), transparent 75%), var(--panel); border-color: color-mix(in srgb, var(--p2) 30%, var(--line)); }
.md-typeset .asks p { margin: 0; font-size: .8rem; }
.md-typeset .asks strong:first-child { display: block; margin: 0 0 6px; color: var(--ink); font-size: 1rem; line-height: 1.25; letter-spacing: -.01em; }
.md-typeset .asks .p2 strong:first-child { color: var(--p2-hover); }

/* ---- words: a pill beside what it means ---- */
.md-typeset dl.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 28px; margin: 1.2em 0; }
.md-typeset dl.words > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.md-typeset dl.words dt { justify-self: start; padding: 2px 8px; border: 1px solid var(--line-2); font: 400 12px var(--mono); color: var(--ink); white-space: nowrap; }
.md-typeset dl.words dt.p2 { border-color: color-mix(in srgb, var(--p2) 55%, var(--line)); color: var(--p2-hover); }
.md-typeset dl.words dd { margin: 0; font-size: .8rem; }

/* ---- panels: a room or a part, a card with a seam ---- */
.md-typeset .panel { --c: var(--st-3); position: relative; margin: 1em 0 1.6em; padding: 4px 22px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.md-typeset .panel::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--c), transparent 70%); }
.md-typeset .panel.two { --c: var(--p2); background: radial-gradient(70% 90% at 100% 100%, var(--p2-wash), transparent 75%), var(--panel); }
.md-typeset .panel.s1 { --c: var(--st-1); } .md-typeset .panel.s2 { --c: var(--st-2); } .md-typeset .panel.s4 { --c: var(--st-4); }
.md-typeset .panel > h2:first-child, .md-typeset .panel > h3:first-child { margin-top: .8em; }

/* ---- tables ---- */
.md-typeset table:not([class]) { border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .8rem; background: var(--panel); overflow: hidden; }
.md-typeset table:not([class]) th { background: var(--panel-2); font: 400 var(--type-label) var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.md-typeset table:not([class]) td { border-top: 1px solid var(--line); vertical-align: top; }
.md-typeset table:not([class]) tr:hover { background: rgb(255 255 255 / .02); box-shadow: none; }
.md-typeset table:not([class]) td:first-child { color: var(--ink); }

/* ---- admonitions: a tagged panel, the tag in the pixel face. limit = what it does not do (caution), two = player
   two (royal), tip = the student's move (lime) ---- */
.md-typeset .admonition, .md-typeset details { --c: var(--muted); border: 1px solid var(--line); border-left: 2px solid var(--c); border-radius: var(--radius-sm); background: var(--panel); box-shadow: none; font-size: .8rem; padding: 0 16px; }
.md-typeset .admonition-title, .md-typeset summary { background: transparent !important; margin: 0 -16px !important; padding: 12px 16px 2px !important; border: 0 !important;
  font: 400 var(--type-label)/1.3 var(--pixel) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--c) !important; }
.md-typeset .admonition-title::before, .md-typeset summary::before { display: none; }
.md-typeset .admonition > p:last-child { margin-bottom: 12px; }
.md-typeset .admonition.limit { --c: var(--caution); }
.md-typeset .admonition.two { --c: var(--p2-hover); background: radial-gradient(70% 120% at 100% 100%, var(--p2-wash), transparent 75%), var(--panel); }
.md-typeset .admonition.tip { --c: var(--accent); }

/* ---- the generated pages (build_reference.py): the signature box, kept ---- */
.sig { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--well); font-size: .8rem; margin: 1em 0; }
.sig dt { color: var(--muted); font-family: var(--mono); font-size: .75rem; } .sig dd { margin: 0; }
.md-typeset .grid.cards > ul > li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--line-2); box-shadow: none; }

/* ---- How spawn games are written (reference/how-games-are-written.md): the shape as a numbered rail, each habit a
   card with its checker id, and a before / after pair. Lime is the spawn way; the before pane stays quiet. ---- */
.md-typeset ol.hw-shape { list-style: none; counter-reset: hw; margin: 1.2em 0 0; padding: 0; display: grid; gap: 6px; }
.md-typeset ol.hw-shape > li { counter-increment: hw; margin: 0; display: grid; grid-template-columns: 2.4em minmax(9.5em, max-content) minmax(0, 1fr); gap: 0 14px; align-items: baseline;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.md-typeset ol.hw-shape > li::before { content: counter(hw, decimal-leading-zero); font: 400 11px var(--mono); color: var(--muted); }
.md-typeset ol.hw-shape > li b { font: 500 12px var(--mono); color: var(--accent); letter-spacing: .02em; }
.md-typeset ol.hw-shape > li span { color: var(--ink-2); }
.md-typeset .hw-card { position: relative; margin: 18px 0; padding: 20px 22px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.md-typeset .hw-card::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--accent), transparent 70%); }
.md-typeset .hw-card h3 { margin: .2em 0 .5em; font-size: 20px; letter-spacing: -.02em; text-wrap: balance; }
.md-typeset .hw-card > p { max-width: 46em; }
.md-typeset .hw-id { font: 400 11px var(--mono); color: var(--muted); letter-spacing: .02em; }
.md-typeset .hw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 12px; }
.md-typeset .hw-before, .md-typeset .hw-after { position: relative; min-width: 0; }
.md-typeset .hw-before::before, .md-typeset .hw-after::before { display: block; margin: 0 0 6px; font: 400 11px var(--mono); letter-spacing: .02em; }
.md-typeset .hw-before::before { content: "harder to read"; color: var(--muted); }
.md-typeset .hw-after::before { content: "the spawn way"; color: var(--accent); }
.md-typeset .hw-pair pre { margin: 0; }
.md-typeset .hw-before pre > code { opacity: .72; }
.md-typeset .hw-after pre > code { border-color: rgb(198 244 50 / .45); box-shadow: inset 2px 0 0 var(--accent); }
@media (max-width: 760px) { .md-typeset .hw-pair { grid-template-columns: minmax(0, 1fr); } .md-typeset ol.hw-shape > li { grid-template-columns: 2.4em minmax(0, 1fr); } .md-typeset ol.hw-shape > li span { grid-column: 2; } }

/* ---- the foot: the lockup, one line, the doors out ---- */
.md-footer { display: none; }
.spawn-foot { position: relative; border-top: 1px solid var(--line); margin-top: 2rem; background: radial-gradient(40% 120% at 0% 100%, rgb(62 230 160 / .06), transparent 70%); }
.spawn-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--genesis); opacity: .5; }
.spawn-foot__in { max-width: 61rem; margin: 0 auto; padding: 32px 1.2rem 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 28px; align-items: center; }
.spawn-foot__lock { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.spawn-foot .wordmark { display: flex; align-items: baseline; font: 800 22px/.9 var(--display); letter-spacing: -.055em; color: var(--ink); text-shadow: var(--ink-glow); }
.spawn-foot .wordmark .pt { display: inline-block; width: .17em; height: .17em; margin-left: .05em; background: var(--accent); }
.spawn-foot p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
.spawn-foot nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 10px 0 0; font: 400 13px var(--mono); }
.spawn-foot nav a { color: var(--muted); text-decoration: none; } .spawn-foot nav a:hover { color: var(--ink); }
.spawn-foot nav a.go { color: var(--accent-ink); background: var(--accent); padding: 6px 12px; border-radius: var(--radius-sm); font: 600 14px var(--display); }
.spawn-foot nav a.go:hover { background: var(--accent-hover); color: var(--accent-ink); }
/* the copyright is the house's line (tokens.css), full width, never the paragraph measure */
.spawn-foot p.copyright { max-width: none; font-size: var(--type-label); color: var(--faint); }
@media (max-width: 640px) { .spawn-foot__in { grid-template-columns: minmax(0, 1fr); } }

/* ---- motion: things on a page spawn in, once, in hard steps ---- */
@media (prefers-reduced-motion: no-preference) {
  .md-typeset .stations > a, .md-typeset ol.steps > li, .md-typeset .doors > a { animation: docs-in 320ms steps(4, end) both; }
  .md-typeset .stations > a:nth-child(2), .md-typeset ol.steps > li:nth-child(2), .md-typeset .doors > a:nth-child(2) { animation-delay: 60ms; }
  .md-typeset .stations > a:nth-child(3), .md-typeset ol.steps > li:nth-child(3), .md-typeset .doors > a:nth-child(3) { animation-delay: 120ms; }
  .md-typeset .stations > a:nth-child(4), .md-typeset ol.steps > li:nth-child(4), .md-typeset .doors > a:nth-child(4) { animation-delay: 180ms; }
  .md-typeset ol.steps > li:nth-child(5), .md-typeset .doors > a:nth-child(n+5) { animation-delay: 240ms; }
  .md-typeset .px::before { animation: docs-blink 1.6s steps(2, jump-none) 3; }
}
@keyframes docs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes docs-blink { 50% { opacity: .25; } }

/* ---- a phone ---- */
@media (max-width: 760px) {
  .md-typeset .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-header__topic:first-child .md-ellipsis::after { display: none; }
}
@media (max-width: 600px) {
  .md-typeset ol.steps { --rail: 12px; padding-left: calc(var(--rail) + 16px); }
  .md-typeset ol.steps > li::before { left: calc(-16px - var(--rail) / 2 - 6px); }
  .md-typeset ol.steps > li { padding: 16px; }
  .md-typeset dl.words > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .md-typeset .stage { padding: 20px 18px; }
}
@media print {
  .md-typeset .stage, .md-typeset .hero::before { background: none; }
  .spawn-foot nav { display: none; }
}