@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0B0A0F;
  --panel: #16131D;
  --border: #2B2438;
  --ink: #F0EAF5;
  --dim: #9A90AC;
  --faint: #56506B;
  --amber: #FFA23A;
  --magenta: #FF3D8B;
  --cyan: #22E8FF;
  --green: #7EE787;
  --font: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --max: 440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.45;
  position: relative;
}

/* ===== active colour scheme (links.json: theme) ===== */
/* neon — default scheme. Token block only; build.py inlines the active one. */
.page {
  --ink:#FBF7FF; --dim:#A79BBF; --faint:#5C5273;
  --line:#221B31; --panel:#0C0912; --bg:#08060C;
  --g1:#FF2D7E; --g2:#A61C63; --g3:#4E0B2E;
  --edge:#3FE6FF; --hair:#FF7A2E; --room:#B14BFF;
  --live:#6BF0A8; --alert:#FF3B30;
}

body.home,
body.builds {
  background: #050408;
  font-family: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 60px;
  overflow-x: hidden;
  text-transform: none;
  letter-spacing: 0;
}
/* the page carries its own tube (.crt) — no second scanline layer on body */
body.home::before,
body.builds::before { content: none; }

.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(2) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-3%,2%); }
  100% { transform: translate(2%,-1%); }
}

.page {
  width: 100%;
  max-width: 460px;
  position: relative;
  background: var(--bg);
  margin-top: 22px;
  color: var(--ink);
  box-shadow: 0 0 120px color-mix(in srgb, var(--room) 14%, transparent);
}

/* ---- hero ------------------------------------------------------------
   .heroWrap must NOT clip: the wordmark overhangs the bottom of the photo.
   Only the inner .hero gets overflow:hidden. Checked at 320/390/460px. */
.heroWrap { position: relative; }
.hero {
  position: relative;
  aspect-ratio: 1400 / 1254;
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  filter: saturate(1.10) contrast(1.05);
  animation: boot 1.1s ease-out both;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(70% 45% at 78% 8%, color-mix(in srgb, var(--hair) 26%, transparent), transparent 62%),
    radial-gradient(60% 50% at 10% 88%, color-mix(in srgb, var(--room) 34%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 22%, rgba(0,0,0,.50) 66%, var(--bg) 99%);
}
.page .scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.page .vig {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(0,0,0,.9);
}

/* power-on: tube comes up blown out and desaturated, settles over ~1.1s */
@keyframes boot {
  0%   { filter: saturate(0) contrast(2.4) brightness(2.6); opacity: .25; }
  35%  { filter: saturate(1.4) contrast(1.3) brightness(1.25); opacity: 1; }
  100% { filter: saturate(1.10) contrast(1.05) brightness(1); }
}
.page .sweep {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.page .sweep::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06) 42%,
              rgba(255,255,255,.20) 50%, rgba(255,255,255,.06) 58%, transparent);
  animation: sweep 1.35s cubic-bezier(.35,.05,.35,1) .1s both;
}
@keyframes sweep { from { top: -110px; } to { top: 100%; } }

/* ---- the tube over the whole page ---- */
.page .crt {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.020) 0 1px, transparent 1px 3px);
}
.page .crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.052), transparent);
  animation: roll 11s linear infinite;
}
@keyframes roll { from { top: -170px; } to { top: 100%; } }

/* ---- chips ---- */
.page .hchip {
  position: absolute;
  z-index: 7;
  top: 16px;
  font-size: 9px;
  letter-spacing: 3px;
  padding: 8px 13px;
  backdrop-filter: blur(10px);
  border-radius: 2px;
}
.page .hchip.l {
  left: 16px;
  background: rgba(0,0,0,.45);
  border: 1px solid color-mix(in srgb, var(--hair) 55%, transparent);
  color: color-mix(in srgb, var(--hair) 78%, white);
}
.page .hchip.r {
  right: 16px;
  background: color-mix(in srgb, var(--live) 12%, transparent);
  border: 1px solid var(--live);
  color: color-mix(in srgb, var(--live) 80%, white);
  display: flex;
  gap: 7px;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.page .hchip.l {
  white-space: nowrap;
  max-width: calc(100% - 7.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
}
.page .hchip.r {
  max-width: none;
  overflow: visible;
}
@media (max-width: 400px) {
  .page .hchip {
    font-size: 8px;
    letter-spacing: 1.5px;
    padding: 6px 8px;
    top: 12px;
  }
  .page .hchip.l { left: 10px; max-width: calc(100% - 6.5rem); }
  .page .hchip.r { right: 10px; gap: 5px; }
  .page .meta { flex-direction: column; gap: 8px; }
  .page .hd { letter-spacing: 2px; }
}
@media (max-width: 340px) {
  .page .hchip.l { display: none; }
}
.page .pulse {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--alert);
  box-shadow: 0 0 10px var(--alert);
  animation: pl 1.4s ease-in-out infinite;
}
@keyframes pl {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}

/* ---- wordmark ---- */
.page .wm {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -6px;
  z-index: 6;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(46px, 13vw, 66px);
  line-height: .86;
  padding-bottom: 6px;
  letter-spacing: -1px;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: -3px 0 var(--g1), 3px 0 var(--edge), 0 10px 40px rgba(0,0,0,.85);
  animation: rise .9s cubic-bezier(.2,.8,.2,1) both, zap 8s 1.4s steps(1,end) infinite;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes zap {
  0%, 96.4%, 100% { transform: none;
    text-shadow: -3px 0 var(--g1), 3px 0 var(--edge), 0 10px 40px rgba(0,0,0,.85); }
  96.8% { transform: translate(3px,-1px);
    text-shadow: -9px 0 var(--g1), 5px 0 var(--edge), 0 10px 40px rgba(0,0,0,.85); }
  97.4% { transform: translate(-4px,1px);
    text-shadow: -2px 0 var(--edge), 10px 0 var(--g1), 0 10px 40px rgba(0,0,0,.85); }
  98.0% { transform: translate(2px,0);
    text-shadow: -6px 2px var(--g1), 6px -2px var(--edge), 0 10px 40px rgba(0,0,0,.85); }
  98.6% { transform: none;
    text-shadow: -3px 0 var(--g1), 3px 0 var(--edge), 0 10px 40px rgba(0,0,0,.85); }
}

/* ---- ticker ---- */
.page .tick {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 9px 0;
  margin-top: 22px;
}
.page .tick .tick-run {
  display: flex;
  gap: 34px;
  white-space: nowrap;
  animation: mv 22s linear infinite;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--faint);
}
@keyframes mv { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.page .tick b { color: var(--hair); font-weight: 400; }

/* ---- meta ---- */
.page .meta {
  padding: 22px 18px 4px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.page .meta p {
  margin: 0;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.85;
  max-width: 27ch;
}
.page .hd {
  color: var(--live);
  font-size: 10.5px;
  letter-spacing: 2.6px;
  white-space: nowrap;
  padding-top: 2px;
}

/* ---- cards ---- */
.page .cards {
  padding: 20px 18px 0;
  display: grid;
  gap: 11px;
}
.page .card {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  padding: 28px 22px;
  border-radius: 3px;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.page .card:hover { transform: translateY(-3px) scale(1.006); }
.page .card:focus-visible { outline: 2px solid var(--edge); outline-offset: 3px; }
.page .ghost {
  position: absolute;
  right: 10px;
  top: -14px;
  z-index: 0;
  font-family: "Anton", sans-serif;
  font-size: 104px;
  line-height: 1;
  color: rgba(255,255,255,.055);
  pointer-events: none;
  transition: text-shadow .28s ease;
}
.page .kick {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 8px;
  letter-spacing: 3.6px;
  margin-bottom: 10px;
}
.page .tt {
  position: relative;
  z-index: 2;
  display: block;
  font-family: "Anton", sans-serif;
  font-size: 30px;
  line-height: .98;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.page .arw {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 22px;
  font-size: 24px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.page .card:hover .arw,
.page .card:focus-visible .arw { transform: translateX(6px); }
.page .sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(220px 140px at 50% 40%, rgba(255,255,255,.16), transparent 70%);
}
.page .card:hover .sheen,
.page .card:focus-visible .sheen { opacity: 1; }
.page .card:hover .ghost,
.page .card:focus-visible .ghost {
  text-shadow: -3px 0 color-mix(in srgb, var(--edge) 45%, transparent),
                3px 0 color-mix(in srgb, var(--g1) 45%, transparent);
}

.page .c1{
  background:linear-gradient(118deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);
  border:1px solid color-mix(in srgb, var(--g1) 50%, white);
  animation:rise .8s cubic-bezier(.2,.8,.2,1) both,
            neonflicker 7s steps(1,end) infinite;
}
@keyframes neonflicker{
  0%,94%,100%,95.2%,97.8%{box-shadow:
    0 0 0 1px color-mix(in srgb,var(--g1) 50%,white),
    0 0 14px color-mix(in srgb,var(--g1) 95%,transparent),
    0 0 36px color-mix(in srgb,var(--g1) 70%,transparent),
    0 0 84px color-mix(in srgb,var(--g1) 45%,transparent),
    0 0 150px color-mix(in srgb,var(--g1) 25%,transparent)}
  94.1%,96.6%{box-shadow:
    0 0 0 1px color-mix(in srgb,var(--g1) 65%,transparent),
    0 0 10px color-mix(in srgb,var(--g1) 55%,transparent),
    0 0 26px color-mix(in srgb,var(--g1) 38%,transparent),
    0 0 60px color-mix(in srgb,var(--g1) 24%,transparent),
    0 0 110px color-mix(in srgb,var(--g1) 13%,transparent)}
}
.page .c1:hover,
.page .c1:focus-visible {
  border-color: var(--edge);
  box-shadow: 0 18px 56px color-mix(in srgb, var(--edge) 34%, transparent),
              0 0 0 1px color-mix(in srgb, var(--edge) 40%, transparent);
}
.page .c1:hover .arw,
.page .c1:focus-visible .arw { color: var(--edge); }
.page .c1 .kick { color: rgba(255,255,255,.8); }
.page .c1 .tt   { color: #fff; }
.page .c1 .arw  { color: #fff; }

.page .c2 {
  background: linear-gradient(118deg, color-mix(in srgb, var(--panel) 60%, #1A1226) 0%, var(--panel) 100%);
  border: 1px solid var(--line);
}
.page .c2:hover,
.page .c2:focus-visible {
  border-color: var(--hair);
  box-shadow: 0 14px 44px color-mix(in srgb, var(--hair) 18%, transparent);
}
.page .c2 .kick { color: var(--hair); }
.page .c2 .tt   { color: var(--ink); }
.page .c2 .arw  { color: var(--hair); }

.page .lab,
.page .foot span,
.page .hd {
  text-shadow: -1px 0 color-mix(in srgb, var(--g1) 26%, transparent),
                1px 0 color-mix(in srgb, var(--edge) 26%, transparent);
}
.page .hd {
  text-shadow: -1px 0 color-mix(in srgb, var(--g1) 55%, transparent),
                1px 0 color-mix(in srgb, var(--edge) 55%, transparent),
                0 0 12px color-mix(in srgb, var(--live) 45%, transparent);
}

.page .lab {
  padding: 26px 18px 11px;
  color: var(--faint);
  font-size: 8px;
  letter-spacing: 3.6px;
}
.page .strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page .strip a {
  padding: 16px 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  color: #8A7EA6;
  text-decoration: none;
  border-right: 1px solid var(--line);
  position: relative;
  transition: color .2s, background .2s;
}
.page .strip a:last-child { border-right: 0; }
.page .strip a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--edge);
  transform: scaleX(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.page .strip a:hover,
.page .strip a:focus-visible {
  color: var(--edge);
  background: color-mix(in srgb, var(--edge) 6%, transparent);
}
.page .strip a:hover::after,
.page .strip a:focus-visible::after { transform: scaleX(1); }

.page .foot {
  padding: 18px;
  display: flex;
  justify-content: space-between;
  color: #3A3350;
  font-size: 8px;
  letter-spacing: 2.2px;
}

.page .rv { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
/* Re-state after .page .rv (equal specificity). Shorthand must keep rise
   or rv cancels neonflicker on .c1.rv. Delays stay below so they stick. */
.page .c1 {
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both,
             neonflicker 7s steps(1,end) infinite;
}
.page .d1 { animation-delay: .12s; }
.page .d2 { animation-delay: .2s; }
.page .d3 { animation-delay: .28s; }
.page .d4 { animation-delay: .36s; }

/* ---- /builds (CRT, same .page tube) -------------------------------- */
body.builds .page .tick { margin-top: 0; }
.page .builds-head {
  padding: 28px 18px 6px;
  position: relative;
}
.page .builds-wm {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  font-size: clamp(36px, 11vw, 54px);
  margin: 0 0 14px;
  padding-bottom: 0;
}
.page .builds-intro {
  margin: 10px 0 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  text-transform: none;
  max-width: 28rem;
}
.page .builds-about {
  margin: 8px 18px 18px;
  padding: 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.15px;
  text-transform: none;
}
.page .builds-about p { margin: 0 0 12px; max-width: 32rem; }
.page .builds-about p:last-child { margin-bottom: 0; }
.page .builds-next {
  position: relative;
  margin: 0 18px 20px;
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  overflow: hidden;
}
.page .builds-next .nb-accent {
  width: 4px;
  flex: 0 0 4px;
  background: linear-gradient(180deg, var(--g1), var(--edge));
}
.page .builds-next .nb-body {
  flex: 1;
  padding: 14px 16px 16px;
}
.page .builds-next .nb-label {
  font-size: 9px;
  letter-spacing: 2.8px;
  color: var(--hair);
  margin-bottom: 6px;
}
.page .builds-next .nb-value {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(22px, 6vw, 34px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-transform: uppercase;
}
.page .builds-next .nb-meter {
  margin-top: 12px;
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
  overflow: hidden;
}
.page .builds-next .nb-meter span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--g1), var(--edge));
}
.page .builds-next .nb-meta {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--faint);
  text-transform: uppercase;
}
.page .builds-orphan-note {
  margin: 0 18px 14px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--edge) 45%, var(--line));
  border-radius: 10px;
  color: var(--hair);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
}

/* ---- age gate (/go/<slug>) ----------------------------------------- */
.page.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px 40px;
}
.page.gate .gate-panel {
  width: min(100%, 420px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 28px 22px 24px;
  text-align: left;
}
.page.gate .gate-eyebrow {
  font-size: 9px;
  letter-spacing: 2.8px;
  color: var(--hair);
  margin-bottom: 14px;
}
.page.gate .gate-title {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(28px, 8vw, 42px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.page.gate .gate-lead {
  color: var(--dim);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
  text-transform: none;
}
.page.gate .gate-go {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(118deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);
  color: #fff;
  font-size: 13px;
  letter-spacing: 1.6px;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--g1) 50%, white);
}
.page.gate .gate-back {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--hair);
  font-size: 12px;
  letter-spacing: 1.6px;
  margin-bottom: 16px;
}
.page.gate .gate-fine {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0.2px;
}
.page .builds-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 4px;
}
.page .builds-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  transition: border-color .2s, color .2s, opacity .2s;
}
.page .builds-tab.is-active {
  color: var(--ink);
  border-color: var(--hair);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hair) 25%, transparent);
}
.page .builds-tab.is-empty { opacity: 0.42; }
.page .builds-tab-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.page .builds-empty {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 8px 18px 18px;
  text-transform: none;
}
.page .section-div {
  text-align: center;
  color: var(--faint);
  font-size: 9px;
  letter-spacing: 2.8px;
  margin: 18px 18px 4px;
  text-transform: uppercase;
}
.page .builds-entries { padding-top: 12px; }
.page .card.entry { min-height: 118px; }
.page .card.entry .tt { font-size: 26px; max-width: 85%; }

.page .doc-wrap { padding: 8px 18px 0; }
.page .builds-article { margin: 4px 0 10px; }
.page .doc-p {
  color: var(--dim);
  font-size: 12.5px;
  letter-spacing: 0;
  line-height: 1.7;
  text-transform: none;
  margin: 0 0 14px;
}
.page .doc-p a {
  color: var(--hair);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page .doc-h1, .page .doc-h2 {
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-shadow: -1px 0 color-mix(in srgb, var(--g1) 40%, transparent),
                1px 0 color-mix(in srgb, var(--edge) 40%, transparent);
}
.page .doc-h1 { font-size: 28px; margin: 0 0 14px; line-height: 1; }
.page .doc-h2 { font-size: 20px; margin: 22px 0 10px; line-height: 1; }
.page .doc-ul {
  margin: 0 0 14px 18px;
  padding: 0;
  color: var(--dim);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.65;
}
.page .doc-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 4px 0 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #0a0a0c;
}
.page .doc-back { margin: 22px 18px 8px; }
.page .doc-back a {
  color: var(--hair);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.page .doc-back a:hover,
.page .doc-back a:focus-visible { color: var(--edge); }
.page .builds-text {
  margin: 0 18px 14px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.7;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .grain,
  .page .sweep::before,
  .page .crt::after,
  .page .tick .tick-run,
  .page .pulse,
  .page .rv { animation: none; }
  .page .wm { animation: none; }
  .page .c1 {
    animation: none;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--g1) 50%, white),
      0 0 14px color-mix(in srgb, var(--g1) 95%, transparent),
      0 0 36px color-mix(in srgb, var(--g1) 70%, transparent),
      0 0 84px color-mix(in srgb, var(--g1) 45%, transparent),
      0 0 150px color-mix(in srgb, var(--g1) 25%, transparent);
  }
  .hero img { animation: none; filter: saturate(1.10) contrast(1.05); }
}