:root {
  --bg: #05060c;
  --panel: rgba(10,16,29,.74); --panel-deep: rgba(8,13,24,.82);
  --panel-hover: rgba(13,21,38,.82); --sunken: rgba(7,11,22,.62);
  /* Scanlines, as one 3px tile repeated. A single gradient spanning the whole
     element gets rasterised at reduced resolution once the element is very
     tall, and the lines smear into bands. The size rides along in the value,
     so --scan only works as a layer of a `background:` shorthand. */
  --scan: linear-gradient(rgba(190,225,255,.035) 0 1px, transparent 1px) 0 0 / 100% 3px;
  --nav-surface: rgba(8,13,24,.97);
  --stripe-a: #101a2c; --stripe-b: #0c1423;
  --line: #1b2840; --line-2: #24354f;
  /* The rule between a doc chapter's sub-entries. Measured against the window
     it sits in (--panel over --bg), not --bg: 3.9:1 here, 4.3 in the others. */
  --doc-rule: #4f7299;
  --ink: #dfe6f5; --ink-bright: #ffffff; --ink-2: #b9c6e0;
  --ink-3: #93a1bf; --ink-4: #6d7c9b; --ink-5: #445473;
  --accent: #5ad7ff; --accent-bright: #7fe3ff; --accent-2: #ffd08a; --on-accent: #05121c;
  --tint: rgba(90,215,255,.11); --tint-2: rgba(90,215,255,.16); --accent-glow: rgba(90,215,255,.3);
  --overlay: rgba(6,10,20,.93); --scrim: rgba(3,5,10,.72); --chip-bg: rgba(5,6,12,.7);
  --planet-a: #fff200; --planet-b: #e4c423; --grid: rgba(90,215,255,.17);

  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* The ink ramp is measured against --bg rather than eyeballed. Every step that
   carries text clears WCAG AA: ink-2 12.0:1, ink-3 7.4, ink-4 5.6, ink-5 4.6,
   both accents past 6, white-on-accent past 7. line-2 clears the 3:1 that
   borders and other non-text UI need; --line stays a hairline at 1.8. */
[data-theme="nova"] {
  --bg: #f4f2ec;
  --panel: rgba(252,251,248,.84); --panel-deep: rgba(238,235,226,.88);
  --panel-hover: rgba(255,255,255,.94); --sunken: rgba(255,255,255,.78);
  --scan: linear-gradient(rgba(40,35,25,.06) 0 1px, transparent 1px) 0 0 / 100% 3px;
  --nav-surface: rgba(243,240,233,.98);
  --stripe-a: #e2ddd0; --stripe-b: #eeebe2;
  --line: #bfb6a2; --line-2: #8f8775;
  --doc-rule: #7d7666;
  --ink: #15171c; --ink-bright: #000000; --ink-2: #2b2f36;
  --ink-3: #4a4f59; --ink-4: #5c616b; --ink-5: #696e76;
  --accent: #155d8c; --accent-bright: #0e4a70; --accent-2: #8a4509; --on-accent: #ffffff;
  --tint: rgba(21,93,140,.12); --tint-2: rgba(21,93,140,.18); --accent-glow: rgba(21,93,140,.26);
  --overlay: rgba(250,249,245,.96); --scrim: rgba(28,26,22,.55); --chip-bg: rgba(250,249,245,.86);
  --planet-a: #0d083c; --planet-b: #250a65; --grid: rgba(21,93,140,.20);
}

[data-theme="back-to-earth"] {
  --bg: #000000;
  --panel: rgba(22,24,28,.76); --panel-deep: rgba(17,19,23,.84);
  --panel-hover: rgba(28,31,36,.84); --sunken: rgba(10,11,13,.66);
  --scan: linear-gradient(rgba(175,200,255,.04) 0 1px, transparent 1px) 0 0 / 100% 3px;
  --nav-surface: rgba(9,10,13,.97);
  --stripe-a: #1c1f24; --stripe-b: #141619;
  --line: #087619; --line-2: #0059ff;
  --doc-rule: #4a78c4;
  --ink: #e4e7ee; --ink-bright: #ffffff; --ink-2: #c0c5cf;
  --ink-3: #9aa1ae; --ink-4: #79808d; --ink-5: #4e5561;
  --accent: #7fb0ff; --accent-bright: #a8ccff; --accent-2: #dbe4f2; --on-accent: #05080f;
  --tint: rgba(127,176,255,.12); --tint-2: rgba(127,176,255,.18); --accent-glow: rgba(127,176,255,.28);
  --overlay: rgba(10,11,13,.94); --scrim: rgba(0,0,0,.78); --chip-bg: rgba(0,0,0,.72);
  --planet-a: #3b5f8c; --planet-b: #3b692a; --grid: rgba(127,176,255,.14);
}

/* ------------------------------------------------------------------ base -- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Column flex + a growing <main> keeps the footer at the bottom of the
   viewport on short pages, and below the content on long ones. The fixed
   backdrop and nav are out of flow, so they are not flex items. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  overflow-x: hidden;
}

body > main { flex: 1 0 auto; }
body > #footer-mount { flex: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
::selection { background: var(--accent); color: var(--on-accent); }

img { max-width: 100%; }
[hidden] { display: none !important; }

button, input, select { font: inherit; color: inherit; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes ootw-drift { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes ootw-sweep { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Same suppression, driven by the Settings page rather than the OS. */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}

/* --------------------------------------------------- gravity-well overlay -- */

.grid-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.grid-overlay svg { display: block; }
.grid-overlay polyline { fill: none; stroke: var(--grid); stroke-width: 1; }

/* ------------------------------------------------------------ nav trigger -- */

.nav-trigger {
  position: fixed; top: 18px; left: 18px; z-index: 120;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--scan), var(--panel-deep);
  border: 2px solid var(--line-2); border-radius: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--tint), 0 8px 24px rgba(0,0,0,.6);
  transition: opacity .2s ease, border-color .15s ease;
}
.nav-trigger:hover { border-color: var(--accent); }
.nav-trigger[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.nav-trigger .bars { display: grid; gap: 5px; }
.nav-trigger .bars span { display: block; width: 22px; height: 2px; background: var(--accent); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 105;
  background: var(--scrim); backdrop-filter: blur(2px);
  transition: opacity .3s ease; opacity: 0; pointer-events: none;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------- side nav -- */

.site-nav {
  position: fixed; z-index: 110; top: 0; left: 0;
  width: 340px; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--scan), var(--nav-surface);
  backdrop-filter: blur(14px) saturate(120%);
  border-right: 1px solid var(--line-2);
  box-shadow: 24px 0 60px rgba(0,0,0,.6);
  transition: transform .34s cubic-bezier(.22,.8,.3,1);
  transform: translateX(-102%);
}
.site-nav.open { transform: translateX(0); }

.nav-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 22px 22px 14px 22px; border-bottom: 1px solid var(--line);
}
.nav-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .22em; color: var(--accent);
}
.nav-brand:hover { text-decoration: none; color: var(--accent-bright); }
.nav-close {
  background: none; border: none; color: var(--ink-4); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; padding: 2px 0;
}
.nav-close:hover { color: var(--accent-2); }

.nav-search { padding: 18px 22px 10px 22px; }
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--scan), var(--sunken);
  border: 2px solid var(--line-2); border-radius: 0; padding: 9px 11px;
}
.search-box input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-family: var(--font-body); font-size: 14px;
}
.search-results {
  margin-top: 8px; border: 2px solid var(--line); border-radius: 0;
  background: var(--scan), var(--sunken); overflow: hidden;
}
.search-result {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 11px; cursor: pointer; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--ink); width: 100%; text-align: left;
  background: none; border-left: none; border-right: none; border-top: none;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--stripe-a); text-decoration: none; color: var(--ink); }
.search-result .kind {
  color: var(--ink-4); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; white-space: nowrap;
}

.nav-list { padding: 8px 14px 22px 14px; display: grid; gap: 2px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 0; cursor: pointer; font-size: 15px; color: var(--ink-2);
  background: transparent; border-left: 2px solid transparent;
}
.nav-item:hover { color: var(--ink-bright); text-decoration: none; background: var(--stripe-a); }
.nav-item.active { color: var(--ink-bright); background: var(--tint); border-left-color: var(--accent); }
.nav-item .tag {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  width: 22px; display: inline-block;
}
.nav-item .label { flex: 1; }
.nav-item .note { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }

/* A nav entry that drops down (Docs): the row still links to the section's own
   page, and the caret beside it owns the sub-list. */
.nav-row { display: flex; align-items: stretch; gap: 2px; }
.nav-row .nav-item { flex: 1 1 auto; min-width: 0; }
.nav-caret {
  flex: none; width: 34px; cursor: pointer; padding: 0;
  background: transparent; border: none;
  color: var(--accent); font-family: var(--font-mono); font-size: 14px; line-height: 1;
}
.nav-caret:hover { background: var(--stripe-a); color: var(--accent-bright); }

/* The sub-list hangs off a hairline; an active item's own border paints over
   it, matching the accent bar on the entries above. */
.nav-sub {
  display: grid; gap: 2px;
  margin: 2px 0 4px 13px; border-left: 1px solid var(--line-2);
}
.nav-subitem {
  padding: 9px 10px 9px 13px; margin-left: -1px;
  font-size: 13px; color: var(--ink-3);
  border-left: 2px solid transparent;
}
.nav-subitem:hover { color: var(--ink-bright); background: var(--stripe-a); text-decoration: none; }
.nav-subitem.active { color: var(--ink-bright); background: var(--tint); border-left-color: var(--accent); }

.nav-theme {
  margin-top: auto; padding: 14px 22px 10px 22px; border-top: 1px solid var(--line);
}
.mono-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--accent); margin-bottom: 9px;
}
.theme-row { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-chip {
  padding: 7px 12px; border-radius: 0; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  border: 2px solid var(--line-2); color: var(--ink-4); background: transparent;
}
.theme-chip:hover { color: var(--ink-2); border-color: var(--ink-4); }
.theme-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--ink-bright); background: var(--tint); }

.nav-foot {
  padding: 14px 22px 22px 22px; font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-4); line-height: 1.7;
}

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  background: var(--scan), var(--panel-deep);
}
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 22px 20px;
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-4); line-height: 1.7;
}
.footer-inner p { margin: 0; }
.footer-inner b { color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------- page scaffold -- */

.wrap {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto; padding: 92px 20px 100px 20px;
}
.wrap--wide { max-width: 1180px; padding-bottom: 110px; }
.wrap--narrow { max-width: 780px; padding: 140px 20px; }

.page-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 5vw, 46px); letter-spacing: .06em;
  color: var(--accent-bright);
}
.page-intro { color: var(--ink-3); font-size: 15px; line-height: 1.6; max-width: 62ch; }

.section { margin-top: 60px; }
.section--first { margin-top: 34px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.section-title {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: .1em; color: var(--accent-2);
}
.section-link { font-size: 13px; color: var(--accent); cursor: pointer; font-family: var(--font-mono); }
.count-note { margin: 0; font-size: 11px; letter-spacing: .1em; color: var(--ink-4); }

/* ------------------------------------------------------------- primitives -- */

.panel {
  border: 2px solid var(--line); background: var(--scan), var(--panel);
  border-radius: 0; padding: 20px;
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line);
}
.panel--deep { background: var(--scan), var(--panel-deep); }

/* Cut corner brackets, as on the mockup's search field and demo stage. */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ''; position: absolute; width: 14px; height: 14px; z-index: 2;
}
.bracket::before { top: -2px; left: -2px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.bracket::after { bottom: -2px; right: -2px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.btn {
  display: inline-block; border-radius: 0; padding: 10px 16px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
  border: 2px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn--ghost { border-color: var(--line-2); color: var(--ink-2); background: none; }
.btn--ghost:hover { border-color: var(--accent); color: var(--ink-bright); }
.btn--sm { padding: 8px 14px; font-size: 11px; }
.btn--xs { padding: 7px 12px; font-size: 11px; letter-spacing: .1em; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--line-2); background: var(--scan), var(--panel);
  color: var(--ink-3); border-radius: 0; padding: 7px 14px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.pill:hover { color: var(--ink-2); border-color: var(--ink-4); }
.pill[aria-pressed="true"] { border-color: var(--accent); background: var(--tint); color: var(--ink-bright); }
.pill--mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }

.filters-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 22px 0 20px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.filters-row .spacer { flex: 1 1 40px; }

.kind-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  border-radius: 0; padding: 2px 6px;
  border: 1px solid currentColor; white-space: nowrap;
}
.kind-tag--release { color: var(--accent); }
.kind-tag--commit  { color: var(--ink-4); }
.kind-tag--post    { color: var(--accent-2); }

.mono { font-family: var(--font-mono); }

.empty-state {
  border: 2px dashed var(--line-2); background: var(--scan), var(--sunken);
  padding: 42px 24px; text-align: center; color: var(--ink-3);
  font-size: 15px; line-height: 1.7;
}
.empty-state .mono-label { margin-bottom: 12px; }

/* ------------------------------------------------------------------ home -- */

.hero { text-align: center; padding: 18px 0 34px 0; }
.hero-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 6.4vw, 62px); letter-spacing: .06em; line-height: 1.05;
  color: var(--accent-bright); text-shadow: 0 0 22px var(--accent-glow);
}
.hero-planet {
  margin: 26px auto 0 auto; width: 96px; height: 96px; border-radius: 50%;
  background: repeating-linear-gradient(48deg, var(--planet-a) 0 6px, var(--planet-b) 6px 12px), var(--planet-b);
  box-shadow: inset -14px -10px 28px rgba(0,0,0,.65), 0 0 44px var(--accent-glow);
  animation: ootw-drift 4.5s ease-in-out infinite alternate;
}

.hero-search { max-width: 720px; margin: 0 auto; }
.hero-search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--scan), var(--panel-deep);
  border: 2px solid var(--line-2); border-radius: 0; padding: 14px 16px;
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line),
              0 0 0 1px var(--tint), 0 14px 40px rgba(0,0,0,.5);
}
.hero-search-box input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-size: 16px; font-family: var(--font-body);
}
.hero-search-box button {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 0;
  padding: 9px 18px; font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.hero-search-box button:hover { background: var(--accent-2); }

.quickbar { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.quick {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--line-2); background: var(--scan), var(--panel);
  border-radius: 0; padding: 7px 15px; font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.quick:hover { border-color: var(--accent); color: var(--ink-bright); text-decoration: none; }
.quick .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.demo-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-tab {
  padding: 7px 14px; border-radius: 0; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  border: 2px solid var(--line-2); color: var(--ink-3); background: transparent;
}
.demo-tab:hover { color: var(--ink-2); border-color: var(--ink-4); }
.demo-tab[aria-selected="true"] { border-color: var(--accent); color: var(--ink-bright); background: var(--tint); }

.demo-grid {
  margin-top: 18px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; align-items: start;
}
.demo-stage {
  border: 2px solid var(--line-2); background: var(--scan), var(--sunken);
  border-radius: 0; overflow: hidden; min-height: 300px; position: relative;
}
.demo-stage iframe, .demo-stage video { display: block; width: 100%; border: 0; }
.demo-stage iframe { height: 380px; background: transparent; }
.demo-stage video { height: auto; max-height: 420px; background: #000; }

.demo-placeholder {
  min-height: 300px; display: grid; place-items: center; gap: 14px;
  padding: 24px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);
}
.demo-placeholder .note {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .12em; line-height: 1.8;
}
.demo-poster { position: relative; display: block; }
.demo-poster img { display: block; width: 100%; }
.demo-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--scrim); border: none; cursor: pointer; color: var(--ink-bright);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase;
}
.demo-play:hover { color: var(--accent); }

.demo-info { display: flex; flex-direction: column; gap: 0; }
.demo-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--accent);
}
.demo-title { margin: 8px 0 0 0; font-family: var(--font-display); font-size: 26px; letter-spacing: .03em; }
.demo-blurb { color: var(--ink-3); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.demo-meta {
  margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); line-height: 1.9;
}

.card-grid {
  margin-top: 18px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
}
.news-card {
  border: 2px solid var(--line); background: var(--scan), var(--panel);
  border-radius: 0; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line);
  color: inherit;
}
.news-card:hover {
  border-color: var(--accent); background: var(--scan), var(--panel-hover);
  text-decoration: none; color: inherit;
}
.news-card .meta {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}
.news-card .title {
  display: block; font-family: var(--font-display); font-size: 17px;
  color: var(--ink-bright); line-height: 1.3; text-decoration: none;
}
.news-card .title:hover { color: var(--accent); text-decoration: none; }
/* Clamped so one long entry cannot stretch the whole preview row. */
.news-card .summary {
  font-size: 14px; color: var(--ink-3); line-height: 1.55; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
  line-clamp: 7; overflow: hidden;
}
.news-card .summary > :first-child { margin-top: 0; }
.news-card .summary > :last-child { margin-bottom: 0; }
.news-card .summary p { margin: 0 0 8px 0; }
.news-card .summary ul, .news-card .summary ol { margin: 6px 0 0 0; padding-left: 16px; }

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; align-items: start;
}
.about-card { grid-column: span 2; min-width: 0; padding: 24px; }
.about-card .section-title { margin-bottom: 6px; }
.about-card p { color: var(--ink-2); font-size: 16px; line-height: 1.7; text-wrap: pretty; max-width: 62ch; }
.about-facets {
  margin-top: 18px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
}
.facet-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--accent); margin-bottom: 6px;
}
.facet-value { font-size: 14px; color: var(--ink-3); line-height: 1.6; }

.elsewhere { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.social {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 2px solid var(--line-2); border-radius: 0; padding: 11px 14px;
  font-size: 14px; color: var(--ink-2); text-decoration: none;
}
.social:hover { border-color: var(--accent); color: var(--ink-bright); text-decoration: none; }
.social .handle { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* ------------------------------------------------------------------ news -- */

.news-layout { display: flex; gap: 26px; align-items: flex-start; }
.news-main { flex: 1 1 auto; min-width: 0; max-width: 820px; margin: 0 auto; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(var(--accent), var(--line-2) 60%, transparent);
}
/* No spine when there is nothing to hang off it. */
.timeline--empty { padding-left: 0; }
.timeline--empty::before { display: none; }

.tl-row { position: relative; margin-bottom: 14px; }
.tl-dot {
  position: absolute; left: -25px; top: 18px; width: 11px; height: 11px;
  border: 2px solid var(--accent); background: var(--accent);
  box-shadow: 0 0 0 5px var(--bg);
}
.tl-row--commit .tl-dot {
  top: 20px; width: 7px; height: 7px;
  background: var(--scan), var(--panel); border-color: var(--ink-4);
}
.tl-row--post .tl-dot { border-color: var(--accent-2); background: var(--accent-2); }

.tl-card {
  border: 2px solid var(--line-2); background: var(--scan), var(--panel);
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line);
  border-radius: 0; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.tl-row--commit .tl-card {
  border-color: var(--line); background: var(--scan), var(--panel-deep); padding: 12px 14px;
}
.tl-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}
.tl-meta .sep { color: var(--ink-5); }
.tl-meta .tl-version { color: var(--accent); }
.tl-meta .hash { margin-left: auto; color: var(--accent); }
.tl-title {
  font-family: var(--font-display); font-size: 21px; color: var(--ink-bright);
  line-height: 1.25; letter-spacing: .02em;
}
.tl-row--commit .tl-title { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-2); }
/* `body` in data-news.js is authored HTML, so style what it can contain. */
.tl-body { font-size: 15px; color: var(--ink-3); line-height: 1.65; text-wrap: pretty; }
.tl-body > :first-child { margin-top: 0; }
.tl-body > :last-child { margin-bottom: 0; }
.tl-body p { margin: 0 0 10px 0; }
.tl-body ul, .tl-body ol { margin: 8px 0 0 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.tl-body code {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-2);
  background: var(--sunken); border: 1px solid var(--line); padding: 1px 5px;
}
.tl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.news-rail {
  flex: 0 1 118px; min-width: 0; position: sticky; top: 92px; overflow: hidden;
}
.rail-year {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--accent); margin-bottom: 12px;
}
.rail-ticks { position: relative; padding-left: 12px; border-left: 2px solid var(--line-2); }
.rail-tick {
  display: flex; align-items: center; gap: 8px; position: relative; padding: 9px 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-5);
  background: none; border: none; width: 100%; text-align: left; cursor: default;
}
.rail-tick .mark { position: absolute; left: -13px; width: 5px; height: 1px; background: var(--line); }
.rail-tick .count { margin-left: auto; color: var(--ink-5); font-size: 10px; }
.rail-tick--has { color: var(--ink-2); cursor: pointer; }
.rail-tick--has .mark { width: 9px; background: var(--accent); }
.rail-tick--has:hover { color: var(--ink-bright); }

/* ------------------------------------------------------------------ repo -- */

.repo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.app-card {
  position: relative; border: 2px solid var(--line-2);
  background: var(--scan), var(--panel);
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line);
  border-radius: 0; overflow: hidden; cursor: pointer;
  min-height: 260px; display: flex; flex-direction: column;
  text-align: left; color: inherit; font: inherit; padding: 0;
}
.app-card:hover, .app-card:focus-visible { border-color: var(--accent); }
.app-card.open { border-color: var(--accent); }

.app-thumb {
  height: 120px; display: grid; place-items: center; position: relative;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.app-thumb img { width: 100%; height: 100%; object-fit: cover; }
.app-thumb img.icon { width: auto; height: 64px; object-fit: contain; image-rendering: pixelated; }
.app-thumb .note {
  position: absolute; bottom: 6px; left: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
  letter-spacing: .1em; background: var(--chip-bg); padding: 3px 7px; border-radius: 0;
}

.app-body { padding: 12px 13px 14px 13px; display: flex; flex-direction: column; gap: 5px; }
.app-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.app-name { font-family: var(--font-display); font-size: 16px; color: var(--ink-bright); letter-spacing: .02em; }
.app-cat { font-family: var(--font-mono); font-size: 11px; color: var(--accent); white-space: nowrap; }
.app-short { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.app-chips { display: flex; gap: 6px; margin-top: 4px; align-items: center; flex-wrap: wrap; }
.app-status {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 0; white-space: nowrap;
  color: var(--accent-2); background: transparent; border: 1px solid var(--accent-2);
}
.app-status--active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.app-status--dead { color: var(--ink-4); border-color: var(--line-2); }

.app-overlay {
  position: absolute; inset: 0; background: var(--scan), var(--overlay);
  border: 2px solid var(--accent); border-radius: 0; padding: 14px;
  display: flex; flex-direction: column; gap: 9px; overflow: hidden;
}
.app-overlay-media {
  position: relative; height: 92px; border: 2px solid var(--line-2); border-radius: 0;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 7px, var(--stripe-b) 7px 14px);
  display: grid; place-items: center; overflow: hidden;
}
.app-overlay-media img { width: 100%; height: 100%; object-fit: cover; }
.app-overlay-media .sweep {
  position: absolute; inset: 0; width: 30%;
  background: linear-gradient(90deg, transparent, var(--tint-2), transparent);
  animation: ootw-sweep 2.2s linear infinite;
}
.app-overlay-media .note {
  position: absolute; font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: .12em;
}
/* Clamped rather than hard-cropped, so the cut ends in an ellipsis and the
   "..." button reads as the way to see the rest. */
.app-overlay .desc {
  font-size: 13px; color: var(--ink-2); line-height: 1.5; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  line-clamp: 5; overflow: hidden;
}
.app-overlay .foot { margin-top: auto; display: grid; gap: 7px; }
.app-overlay .foot-row { display: flex; gap: 7px; flex-wrap: wrap; }
.app-deps { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); line-height: 1.7; }

/* "..." button, pinned above the hover overlay so it stays clickable. */
.app-more {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 32px; height: 26px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  padding: 0; line-height: 0;
  color: var(--ink-2); background: var(--chip-bg);
  border: 2px solid var(--line-2); border-radius: 0; cursor: pointer;
}
/* Three CSS dots rather than a text "…": the glyph sits on the baseline, so
   centring it would depend on the metrics of whichever font actually loaded. */
.app-more span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.app-more:hover, .app-more:focus-visible {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent);
}

/* ----------------------------------------------------------- project modal -- */

.modal {
  padding: 0; border: 2px solid var(--accent); border-radius: 0;
  background: var(--scan), var(--panel-deep); color: var(--ink);
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
/* Custom properties are not dependable inside ::backdrop, so this is literal. */
.modal::backdrop { background: rgba(3,5,10,.74); }

.modal-inner { display: flex; flex-direction: column; max-height: calc(100vh - 52px); }

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 14px 22px; border-bottom: 1px solid var(--line); flex: none;
}
.modal-title {
  margin: 7px 0 0 0; font-family: var(--font-display); font-size: 24px;
  color: var(--ink-bright); letter-spacing: .03em; line-height: 1.2;
}
.modal-close {
  flex: none; background: none; border: 2px solid var(--line-2); border-radius: 0;
  color: var(--ink-3); cursor: pointer; padding: 7px 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.modal-close:hover { border-color: var(--accent); color: var(--ink-bright); }

.modal-body { padding: 20px 22px 24px 22px; overflow-y: auto; }

.modal-media {
  position: relative; border: 2px solid var(--line-2); margin-bottom: 18px;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);
  min-height: 80px; display: grid; place-items: center;
}
.modal-media img, .modal-media video { display: block; width: 100%; }
.modal-media .note {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  letter-spacing: .12em; padding: 26px 12px;
}
.modal-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(3,5,10,.55); border: none; cursor: pointer; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase;
}
.modal-play:hover { color: var(--accent); }

.modal-desc p { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin: 0 0 12px 0; }
.modal-desc p:last-child { margin-bottom: 0; }

.modal-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
  margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px;
}
.modal-facts .facet-value a { word-break: break-word; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.libs { margin-top: 46px; border-top: 1px solid var(--line); padding-top: 18px; }
.libs-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-3);
  background: none; border: none; padding: 0; text-align: left; flex-wrap: wrap;
}
.libs-toggle:hover { color: var(--ink-bright); }
.libs-toggle .caret { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.libs-toggle .name { font-family: var(--font-display); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.libs-toggle .hint { font-size: 13px; color: var(--ink-4); }
.libs-grid {
  margin-top: 16px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.lib-card {
  border: 2px solid var(--line); background: var(--scan), var(--panel-deep);
  border-radius: 0; padding: 13px;
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line);
}
.lib-card .head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lib-card .name { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.lib-card .ver { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.lib-card .desc { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 5px; }
.lib-card .lib-links { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.lib-card .src { font-family: var(--font-mono); font-size: 11px; }
.lib-card .src-btn {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--accent);
  font-family: var(--font-mono); font-size: 11px;
}
.lib-card .src-btn:hover { color: var(--accent-2); text-decoration: underline; }

/* ------------------------------------------------------------------ docs -- */

/* Index: two per row, one per row once that stops fitting. */
.docs-grid {
  margin-top: 18px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.doc-card {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 176px; color: inherit; text-decoration: none;
}
.doc-card:hover {
  border-color: var(--accent); background: var(--scan), var(--panel-hover);
  text-decoration: none; color: inherit;
}
.doc-card .kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--accent);
}
.doc-card .name {
  font-family: var(--font-display); font-size: 21px; color: var(--ink-bright);
  letter-spacing: .02em; line-height: 1.3;
}
.doc-card:hover .name { color: var(--accent); }
.doc-card .desc { font-size: 14px; color: var(--ink-3); line-height: 1.6; text-wrap: pretty; }
.doc-card .foot {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}
.doc-card .go { margin-left: auto; color: var(--accent); }

.doc-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-2);
  border: 1px solid var(--accent-2); padding: 2px 6px; white-space: nowrap;
}

/* .count-note sits flush inside a .section-head; standalone under a page
   intro it needs room before whatever follows it. */
.count-note + .doc-note { margin-top: 24px; }

/* ---------------------------------------------------------- doc scaffold -- */

/* Full-bleed on the left so the contents rail can sit against the edge of the
   window rather than inside the centred column. It ends up under the nav
   drawer while that is open, which is fine — the drawer is a scrim overlay. */
/* width + margin, not just max-width: <main> is a flex item of the body column,
   and .wrap's auto side margins suppress the stretch that would otherwise fill
   the window — without these it shrink-wraps its contents and stays centred. */
.doc-layout {
  max-width: none; width: 100%; margin: 0; padding-left: 0;
  display: flex; gap: 34px; align-items: flex-start;
}

/* Sticks beside the article, scrolls on its own when it outgrows the viewport. */
.doc-toc {
  flex: 0 0 252px; min-width: 0; padding-left: 20px;
  position: sticky; top: 92px; max-height: calc(100vh - 132px); overflow-y: auto;
}
/* A thin themed scrollbar rather than the platform's own. scrollbar-width does
   not inherit, so the list (which scrolls in the mobile drop-down) repeats it. */
.doc-toc, .toc-list { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.toc-list { display: grid; border-left: 2px solid var(--line-2); }
.toc-link {
  padding: 8px 10px 8px 12px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13px; line-height: 1.4; color: var(--ink-4);
}
.toc-link:hover { color: var(--ink-bright); background: var(--stripe-a); text-decoration: none; }
.toc-link.active { color: var(--accent); background: var(--tint); border-left-color: var(--accent); }
.toc-link--sub {
  padding-left: 26px; font-family: var(--font-mono);
  font-size: 12px; color: var(--ink-5);
}

/* The mobile drop-down's opener and close button, added by doc-page.js. Both
   stay hidden until the responsive block turns the rail into a drop-down. */
.toc-trigger {
  display: none; position: fixed; top: 18px; right: 18px; z-index: 100;
  height: 52px; padding: 0 16px; align-items: center; gap: 10px;
  background: var(--scan), var(--panel-deep);
  border: 2px solid var(--line-2); border-radius: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--tint), 0 8px 24px rgba(0,0,0,.6);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  transition: border-color .15s ease;
}
.toc-trigger:hover { border-color: var(--accent); }
.toc-close { display: none; }
/* Above the nav trigger, so the open drop-down covers it. */
.toc-scrim { z-index: 125; }

/* Centred in whatever the rail leaves behind, so the prose keeps a readable
   measure instead of stretching to the window. */
.doc-main { flex: 1 1 auto; min-width: 0; max-width: 1100px; margin: 0 auto; }

.doc-crumbs {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--ink-4); margin-bottom: 16px;
}
.doc-crumbs .sep { color: var(--ink-5); margin: 0 8px; }
.doc-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  color: var(--accent); margin-bottom: 8px;
}
/* Rendered from the doc folder's index.md, above the chapters. */
.doc-lede p { color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.doc-lede .doc-note { margin-top: 18px; }
.doc-lede .doc-note p { font-size: 14px; color: inherit; max-width: none; }

.doc-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}
.doc-source { margin-left: auto; }
.doc-loading { color: var(--ink-5); font-size: 12px; letter-spacing: .14em; }

/* ------------------------------------------------------------- doc prose -- */

/* Each chapter, with its sub-entries, sits in its own window. Below the
   mobile breakpoint the frame comes off and the chapters run on. */
.doc-chapter {
  margin-top: 24px; padding: 24px 28px;
  border: 2px solid var(--line); background: var(--scan), var(--panel);
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line);
}
.doc-chapter:first-child { margin-top: 30px; }
/* The window's padding is the bottom edge, not the last paragraph's margin. */
.doc-section > :last-child { margin-bottom: 0; }
/* A chapter's sub-entry (one command under "Command reference") is ruled off
   from the entry before it, and opens on its own h3, in the accent so the
   names stand out from the prose while scrolling the run of them. */
.doc-section--sub { margin-top: 26px; padding-top: 24px; border-top: 2px dashed var(--doc-rule); }
.doc-section--sub > h3:first-child { margin-top: 0; color: var(--accent-bright); }

/* Clears the heading of the fixed nav trigger when a TOC link jumps to it. */
.doc-body h2, .doc-body h3 { scroll-margin-top: 92px; }

.doc-body h2 {
  margin: 0 0 14px 0; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: .08em; color: var(--accent-2);
}
.doc-body h3 {
  margin: 30px 0 12px 0; font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: .06em; color: var(--ink-bright);
}
.doc-body h4 {
  margin: 22px 0 10px 0; font-family: var(--font-mono); font-weight: 500;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.doc-body p { margin: 0 0 14px 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.doc-body ul, .doc-body ol { margin: 0 0 14px 0; padding-left: 20px; }
.doc-body li { font-size: 15px; line-height: 1.75; color: var(--ink-2); margin-bottom: 7px; }
.doc-body b { color: var(--ink-bright); font-weight: 600; }
.doc-body a { word-break: break-word; }

/* Appended by doc-page.js; only shows while the heading is hovered. */
.head-anchor {
  margin-left: 10px; font-family: var(--font-mono); font-size: .62em;
  color: var(--ink-5); opacity: 0; transition: opacity .15s ease;
}
h2:hover .head-anchor, h3:hover .head-anchor, .head-anchor:focus-visible { opacity: 1; }
.head-anchor:hover { color: var(--accent); text-decoration: none; }

.doc-body code {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-2);
  background: var(--sunken); border: 1px solid var(--line); padding: 1px 5px;
  overflow-wrap: anywhere;
}
.doc-body pre {
  margin: 0 0 16px 0; padding: 15px 17px; overflow-x: auto;
  border: 2px solid var(--line); background: var(--scan), var(--sunken);
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--line);
}
.doc-body pre code {
  background: none; border: none; padding: 0;
  font-size: 13px; line-height: 1.75; color: var(--ink-2); white-space: pre;
}
.doc-body kbd {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-bright);
  background: var(--stripe-a); border: 1px solid var(--line-2);
  border-bottom-width: 2px; padding: 2px 7px; white-space: nowrap;
}

.doc-scroll { overflow-x: auto; margin-bottom: 16px; }

/* Aside, mirroring .archive-warn. --warn is for anything provisional. */
.doc-note {
  margin: 0 0 18px 0; padding: 14px 17px;
  border-left: 2px solid var(--accent); background: var(--scan), var(--sunken);
  color: var(--ink-3); font-size: 14px; line-height: 1.7;
}
.doc-note--warn { border-left-color: var(--accent-2); }
.doc-note .mono-label { margin-bottom: 6px; }
.doc-note > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- doc footer -- */

.doc-pager {
  margin-top: 52px; border-top: 1px solid var(--line); padding-top: 18px;
  display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap;
}
.doc-step {
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px;
  border: 2px solid var(--line); background: var(--scan), var(--panel-deep);
  padding: 13px 16px; color: inherit;
}
.doc-step:hover { border-color: var(--accent); text-decoration: none; color: inherit; }
.doc-step--next { text-align: right; }
.doc-step .dir {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.doc-step .name { font-family: var(--font-display); font-size: 15px; color: var(--ink-bright); line-height: 1.35; }
.doc-step:hover .name { color: var(--accent); }

/* --------------------------------------------------------- simple pages -- */

.simple-body { color: var(--ink-3); font-size: 16px; line-height: 1.7; max-width: 58ch; }

.settings-form { margin-top: 26px; display: grid; gap: 0; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.setting-row:first-child { border-top: 1px solid var(--line); }
.setting-label { font-size: 15px; color: var(--ink-2); }
.setting-hint { font-size: 13px; color: var(--ink-4); line-height: 1.5; margin-top: 4px; max-width: 46ch; }
.setting-control { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }

.switch {
  position: relative; width: 46px; height: 24px; flex: none; cursor: pointer;
  border: 2px solid var(--line-2); background: var(--scan), var(--sunken); padding: 0;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--ink-4); transition: left .18s ease, background .18s ease;
}
.switch[aria-checked="true"] { border-color: var(--accent); background: var(--tint); }
.switch[aria-checked="true"] .knob { left: 24px; background: var(--accent); }

/* Shared by the certifications page and every table inside a doc page. */
.certs-table, .doc-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.doc-table { margin-top: 0; min-width: 480px; }
.certs-table th, .certs-table td, .doc-table th, .doc-table td {
  text-align: left; padding: 14px 16px; border: 1px solid var(--line);
  font-size: 14px; line-height: 1.6; vertical-align: top;
}
.doc-table th, .doc-table td { padding: 11px 14px; }
.certs-table th, .doc-table th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--accent); background: var(--scan), var(--panel-deep);
}
.certs-table td, .doc-table td { color: var(--ink-2); background: var(--scan), var(--panel); }
.certs-table .code, .doc-table .code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
/* First column of a doc table is the thing being documented, so it stays on
   one line and the description column takes the wrapping. */
.doc-table td:first-child { white-space: nowrap; }

.archive-list { display: grid; gap: 14px; margin-top: 24px; }
.archive-item {
  position: relative;
  display: flex; gap: 18px; align-items: flex-start; padding: 20px;
  color: inherit; text-decoration: none;
}
/* Stretched link: the title's hit area covers the whole card, so the card
   still behaves like one big link without nesting anchors inside anchors.
   Links in the description paint later, so they stay clickable on top. */
.archive-item a.name::after { content: ''; position: absolute; inset: 0; }
.archive-item .desc a { position: relative; z-index: 1; }
.archive-item:hover { border-color: var(--accent); background: var(--scan), var(--panel-hover); text-decoration: none; color: inherit; }
.archive-item .when {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--accent); flex: none; width: 92px; padding-top: 3px;
}
/* Both are spans, so they need blockifying before the margin below applies. */
.archive-item > :last-child { min-width: 0; }
.archive-item .name {
  display: block; font-family: var(--font-display); font-size: 19px;
  color: var(--ink-bright); letter-spacing: .02em; line-height: 1.35;
  text-decoration: none;
}
.archive-item:hover a.name { color: var(--accent); }
.archive-item .desc {
  display: block; font-size: 14px; color: var(--ink-3);
  line-height: 1.6; margin-top: 6px;
}
.archive-warn {
  margin-top: 24px; border-left: 2px solid var(--accent-2); padding: 12px 16px;
  background: var(--scan), var(--sunken); color: var(--ink-3);
  font-size: 14px; line-height: 1.65;
}

/* ----------------------------------------------------------------- vault -- */

/* Pieces for sealed pages (see tools/vault-template.html), which are
   otherwise built from .doc-body prose and the primitives above. */
.vault-build { margin-top: 30px; padding: 24px; }
.vault-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px;
}
.vault-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.vault-hint { margin: 14px 0 0 0; font-size: 13px; color: var(--ink-4); line-height: 1.6; max-width: 62ch; }
.vault-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.vault-gallery a { display: block; border: 1px solid var(--line); background: var(--sunken); }
.vault-gallery a:hover, .vault-gallery a:focus-visible { border-color: var(--accent); }
.vault-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1008; object-fit: cover; }
@media (max-width: 559px) {
  .vault-gallery { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 859px) {
  .site-nav {
    width: 100%; height: min(88vh, 640px);
    border-right: none; border-bottom: 1px solid var(--line-2);
    transform: translateY(-102%);
  }
  .site-nav.open { transform: translateY(0); }
  .news-rail { display: none; }
  .about-card { grid-column: auto; }
  .news-layout { display: block; }

  /* The TOC stops being a rail and becomes a drop-down from the top, like the
     nav drawer, opened from a button opposite the nav trigger. .wrap's z-index
     is dropped so the fixed drop-down can stack above that trigger rather than
     being held inside main's stacking context. */
  .doc-layout { display: block; padding-left: 20px; z-index: auto; }
  .doc-toc {
    position: fixed; z-index: 130; top: 0; left: 0; right: 0;
    display: flex; flex-direction: column;
    max-height: min(88vh, 640px); padding: 22px 22px 14px 22px; overflow: hidden;
    background: var(--scan), var(--nav-surface);
    backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid var(--line-2);
    transform: translateY(-102%); visibility: hidden;
    transition: transform .34s cubic-bezier(.22,.8,.3,1), visibility 0s linear .34s;
  }
  /* Shadow only while open, or it would hang into the top of the page. */
  .doc-toc.open {
    transform: translateY(0); visibility: visible; transition-delay: 0s;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
  }
  .doc-toc > .mono-label {
    margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
  }
  .toc-close { display: block; position: absolute; top: 22px; right: 22px; }
  /* The list scrolls, so the rail's border is painted as an inset shadow: an
     active link's bar can't hang over a border the scroll box would clip. */
  .toc-list {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border-left: none; box-shadow: inset 2px 0 0 var(--line-2);
  }
  .toc-link { margin-left: 0; }
  .toc-trigger { display: flex; }
  .doc-main { max-width: none; }
  .doc-chapter {
    margin-top: 44px; padding: 0;
    border: none; background: none; box-shadow: none;
  }
}

@media (max-width: 720px) {
  .docs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wrap { padding-top: 84px; }
  .wrap--narrow { padding-top: 110px; padding-bottom: 80px; }
  .archive-item { flex-direction: column; gap: 8px; }
  .archive-item .when { width: auto; padding-top: 0; }
  .demo-stage iframe { height: 300px; }
  .doc-step--next { text-align: left; }
}