/* fenecdb — dusk in the dune field.
   The fennec is a desert fox: nocturnal, very fast, enormous ears. The whole
   surface is built from that — a night sky over lit dunes, sand in the wind,
   and vectors drawn as the stars they mathematically resemble. Speed is shown
   rather than claimed: the hero runs the real engine and races its results. */

:root {
  /* sky, top to horizon */
  --night-0:  #070A18;
  --night-1:  #0E1026;
  --night-2:  #1B1233;
  --night-3:  #331A3A;

  /* dune ridges, far to near */
  --dune-4:   #4A2444;
  --dune-3:   #6B2F3E;
  --dune-2:   #93412F;
  --dune-1:   #B85A2B;

  /* light */
  --sun:      #F4A93C;
  --sun-hot:  #FFCE73;
  --ember:    #FF7A3D;
  --oasis:    #4FE0C4;
  --star:     #FFF4DC;

  /* text on night */
  --sand:     #F0E2C4;
  --sand-2:   #CDB894;
  --sand-dim: #96856A;
  --rule:     #3A2A3F;
  --rule-hot: #5C3A42;
  --panel:    #150F26;
  --panel-2:  #1D1430;

  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 68px);
  --measure: 66ch;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  background: var(--night-0);
}

body {
  margin: 0;
  color: var(--sand);
  font: 400 17px/1.66 var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Wind-blown grit. Painted into the page background rather than as a blended
   overlay: a fixed `mix-blend-mode` layer forces a whole-page CPU composite on
   every canvas frame, which froze the renderer outright. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 0%, var(--night-2) 0%, var(--night-1) 45%, var(--night-0) 100%);
  background-attachment: fixed, fixed;
}

a { color: var(--sun); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--sun-hot); }
:focus-visible { outline: 2px solid var(--sun-hot); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  background: var(--sun); color: #1A0E04; padding: 10px 18px;
  border-radius: 4px; font-weight: 600;
}
.skip:focus { left: 10px; }

::selection { background: rgba(244,169,60,.3); color: var(--star); }

/* ============================================================ the header */

.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--gutter); height: 66px;
  background: linear-gradient(to bottom, rgba(7,10,24,.92), rgba(7,10,24,.62));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 18px/1 var(--sans); letter-spacing: -.02em;
  color: var(--sand); text-decoration: none;
}
.brand .mark { color: var(--sun); flex: none; filter: drop-shadow(0 0 8px rgba(244,169,60,.55)); }
.brand:hover .mark { animation: ping 1.1s var(--ease); }
@keyframes ping {
  0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); }
}

.top-nav { margin-left: auto; display: flex; gap: 24px; }
.top-nav a {
  position: relative; font: 500 15px/1 var(--sans); color: var(--sand-2);
  text-decoration: none; padding: 8px 0;
}
.top-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--ember));
  transition: right .32s var(--ease);
}
.top-nav a:hover { color: var(--sand); }
.top-nav a:hover::after, .top-nav a[aria-current]::after { right: 0; }
.top-nav a[aria-current] { color: var(--sand); }

.side-toggle {
  display: none; margin-left: auto;
  font: 500 14px/1 var(--sans); color: var(--sand);
  background: rgba(244,169,60,.09); border: 1px solid var(--rule-hot);
  border-radius: 4px; padding: 8px 13px; cursor: pointer;
}

/* ========================================================== the hero scene */

/* The ridge line is pinned to the bottom of the first screen, so the dune
   field is in the frame before anything is scrolled. Below it the page
   continues in the colour of the nearest ridge, and the horizon never seams. */
.hero {
  --fold: 100svh;
  --dune-h: clamp(190px, 27svh, 330px);
  position: relative; isolation: isolate;
  min-height: var(--fold);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(46px, 7vh, 104px) var(--gutter) clamp(120px, 15vw, 210px);
  overflow: hidden;
}

.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* The 404 has no console under it, so the hero is the whole page. */
.hero.lost { justify-content: center; min-height: calc(100svh - 66px); padding-bottom: clamp(140px, 22vh, 260px); }
.hero.lost .hero-q { color: var(--sand-dim); }

.sky, .stars, .sandfield {
  position: absolute; top: 0; left: 0; right: 0; height: var(--fold);
  width: 100%;
}
.sky {
  background:
    radial-gradient(90% 58% at 66% 100%, rgba(255,140,60,.36) 0%, rgba(255,140,60,0) 64%),
    radial-gradient(150% 100% at 50% 100%, var(--night-3) 0%, var(--night-2) 32%, var(--night-1) 60%, var(--night-0) 100%);
}
.sandfield { z-index: 2; }

/* The sun sits just under the ridge: the light is there, the disc is not. */
.sunrise {
  position: absolute; left: 64%;
  top: calc(var(--fold) - var(--dune-h) * 0.5);
  width: min(50vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,206,115,.8) 0%, rgba(255,122,61,.4) 38%, rgba(255,122,61,0) 70%);
  animation: breathe 9s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes breathe {
  0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -52%) scale(1.06); }
}

.dunes {
  position: absolute; left: -2%; width: 104%;
  top: calc(var(--fold) - var(--dune-h)); height: var(--dune-h);
  z-index: 3; display: block;
}
/* Past the ridge the night resolves back into the page, with no seam at the
   hero's bottom edge. */
.floor {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  top: calc(var(--fold) - 2px);
  background: linear-gradient(to bottom, #150F26 0%, rgba(21,15,38,.75) 45%, rgba(21,15,38,0) 100%);
}

/* Two nested groups so the arrival and the parallax never fight over the
   same transform: the outer one is scrolled, the inner one animates in. */
.ridge { transform: translateY(var(--py, 0px)); will-change: transform; }
.ridge-in { opacity: 0; transform: translateY(52px); }
.loaded .ridge-in { animation: rise 1.3s var(--ease) forwards; }
.loaded .r4 .ridge-in { animation-delay: .06s; }
.loaded .r3 .ridge-in { animation-delay: .19s; }
.loaded .r2 .ridge-in { animation-delay: .32s; }
.loaded .r1 .ridge-in { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* Heat still coming off the sand after sundown. */
.shimmer {
  position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none;
  top: calc(var(--fold) - var(--dune-h) * 1.5); height: calc(var(--dune-h) * 1.5);
  background: linear-gradient(to top, rgba(255,150,70,.2), transparent 72%);
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: .44; }
  50%      { transform: translateY(-6px) scaleY(1.03); opacity: .58; }
}

/* ----------------------------------------------------------- hero content */

.hero-in { position: relative; z-index: 5; max-width: 1180px; margin: 0 auto; width: 100%; }

.hero-q {
  margin: 0; position: relative;
  font: 500 clamp(15px, 2.4vw, 29px)/1.46 var(--mono);
  letter-spacing: -.03em; white-space: pre;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 4px;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.hero-q .t-kw     { color: var(--oasis); }
.hero-q .t-string { color: var(--sun-hot); }
.hero-q .t-num, .hero-q .t-param { color: var(--sand-2); }
.hero-q .caret {
  display: inline-block; width: .56em; height: 1.05em;
  margin-left: .06em; vertical-align: -.18em;
  background: var(--sun); box-shadow: 0 0 14px rgba(244,169,60,.85);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.typed .caret { animation: blink 1.05s steps(1) 3, fadeout .4s 3.2s forwards; }
@keyframes fadeout { to { opacity: 0; } }

.hero-say {
  margin: clamp(20px, 2.8vw, 34px) 0 0; max-width: 21ch;
  font: 700 clamp(31px, 4.9vw, 62px)/1.04 var(--sans);
  letter-spacing: -.04em;
  background: linear-gradient(168deg, var(--star) 8%, var(--sun-hot) 48%, var(--ember) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(255,122,61,.28));
}
.hero-sub {
  margin: 18px 0 0; max-width: 64ch; color: var(--sand-2); font-size: 18.5px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.reveal { opacity: 0; transform: translateY(26px); }
.loaded .hero-in .reveal { animation: reveal .95s var(--ease) forwards; }
.loaded .hero-say { animation-delay: .5s; }
.loaded .hero-sub { animation-delay: .62s; }
.loaded .hero-cta { animation-delay: .74s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ buttons */

.btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  height: 50px; padding: 0 24px; border-radius: 6px; overflow: hidden;
  font: 600 15.5px/1 var(--sans); text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-fill {
  color: #23100A;
  background: linear-gradient(135deg, var(--sun-hot), var(--sun) 52%, var(--ember));
  box-shadow: 0 8px 30px -10px rgba(255,122,61,.85), inset 0 1px 0 rgba(255,255,255,.35);
}
/* A gust crossing the face of the button. */
.btn-fill::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
}
.btn-fill:hover::after { animation: gust .7s var(--ease); }
@keyframes gust { to { transform: translateX(120%); } }
.btn:hover { transform: translateY(-2px); }
.btn-fill:hover { box-shadow: 0 14px 38px -10px rgba(255,122,61,.95), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-line {
  color: var(--sand); border: 1px solid var(--rule-hot);
  background: rgba(244,169,60,.05);
}
.btn-line:hover { border-color: var(--sun); background: rgba(244,169,60,.12); }

/* ====================================================== the live instrument */

.rig {
  position: relative; z-index: 6;
  margin: clamp(-120px, -14vw, -80px) auto 0; max-width: 1180px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--rule-hot); border-radius: 14px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(244,169,60,.07) inset;
  overflow: hidden;
}
.rig-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--rule);
  font: 500 13px/1 var(--mono); color: var(--sand-dim);
  background: rgba(0,0,0,.25);
}
.rig-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand-dim); flex: none; }
.rig[data-state="running"] .rig-dot {
  background: var(--sun); box-shadow: 0 0 0 0 rgba(244,169,60,.7); animation: pulse 1.3s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244,169,60,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(244,169,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,169,60,0); }
}
.rig[data-state="done"] .rig-dot { background: var(--oasis); box-shadow: 0 0 12px rgba(79,224,196,.8); }
.rig[data-state="failed"] .rig-dot { background: var(--ember); }
.rig-note { margin-left: auto; }

.rig-main { display: grid; grid-template-columns: minmax(0, 1fr) 268px; }
@media (max-width: 900px) { .rig-main { grid-template-columns: 1fr; } }

.field-wrap {
  position: relative; border-right: 1px solid var(--rule);
  aspect-ratio: 16 / 9; min-height: 300px;
  background:
    radial-gradient(75% 75% at 50% 50%, rgba(51,26,58,.7), transparent 70%),
    #0A0717;
}
@media (max-width: 900px) { .field-wrap { border-right: 0; border-bottom: 1px solid var(--rule); } }
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.field-cap {
  position: absolute; left: 16px; bottom: 13px; z-index: 2;
  font: 400 12px/1.5 var(--mono); color: var(--sand-dim); pointer-events: none;
  text-shadow: 0 1px 8px #000;
}

.rig-stats { display: grid; grid-auto-rows: 1fr; }
.stat {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
.rig-stats .stat:last-child { border-bottom: 0; }
.stat dt { color: var(--sand-dim); font: 400 13px/1.35 var(--mono); flex: 1; }
.stat dd {
  margin: 0; font: 600 24px/1 var(--mono); color: var(--sun-hot);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  text-shadow: 0 0 22px rgba(244,169,60,.5);
}
.stat dd.idle { color: var(--rule-hot); text-shadow: none; }
.stat dd small { font-size: 12.5px; color: var(--sand-dim); font-weight: 400; margin-left: 4px; text-shadow: none; }
.stat.lit::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(244,169,60,.16), transparent);
  animation: sweep .85s var(--ease);
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.rig-log {
  margin: 0; padding: 16px 20px 20px; border-top: 1px solid var(--rule);
  font: 400 13px/1.85 var(--mono); color: var(--sand-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 210px; overflow-y: auto;
  background: rgba(0,0,0,.22);
}
.rig-log b { color: var(--oasis); font-weight: 500; }
.rig-log i { color: var(--sand-dim); font-style: normal; }
.rig-log em { color: var(--sun); font-style: normal; font-weight: 500; }

/* ================================================================ sections */

.band { position: relative; padding: clamp(78px, 10vw, 140px) var(--gutter); }
.band-in { max-width: 1180px; margin: 0 auto; }
.band h2 {
  margin: 0 0 12px; max-width: 22ch;
  font: 700 clamp(30px, 4.4vw, 52px)/1.06 var(--sans); letter-spacing: -.035em;
  color: var(--star);
}
.band .lede { margin: 0 0 46px; max-width: var(--measure); color: var(--sand-2); font-size: 19px; }

/* Ridgelines between sections: the dune field keeps going down the page. */
.ridgeline { display: block; width: 100%; height: clamp(40px, 6vw, 92px); margin-bottom: -1px; }
.band.lit {
  background:
    radial-gradient(100% 62% at 18% 0%, rgba(147,65,47,.22), transparent 62%),
    linear-gradient(to bottom, rgba(27,18,51,.75), rgba(7,10,24,0));
  border-top: 1px solid var(--rule);
}

/* Strata: each layer of a section is a band of sand laid over the last. */
.strata { display: grid; gap: 0; }
.stratum {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 40px;
  padding: 30px 0; border-top: 1px solid var(--rule);
  position: relative;
}
.stratum:first-child { border-top: 1px solid var(--rule-hot); }
.stratum::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--sun), transparent);
  transition: width 1s var(--ease);
}
.stratum.seen::before { width: 62%; }
.stratum-k {
  font: 500 15.5px/1.5 var(--mono); color: var(--sun); letter-spacing: -.01em;
  align-self: start; position: sticky; top: 90px;
}
.stratum-v { color: var(--sand-2); max-width: var(--measure); }
.stratum-v p { margin: 0 0 12px; }
.stratum-v p:last-child { margin-bottom: 0; }
.stratum-v strong { color: var(--sand); font-weight: 600; }
.stratum-v .bill { color: var(--sand-dim); }
.stratum-v .bill b { color: var(--ember); font-weight: 600; }
@media (max-width: 760px) {
  .stratum { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .stratum-k { position: static; }
}

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(28px, 4vw, 54px); align-items: start; }
.split h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--sans); color: var(--star); letter-spacing: -.02em; }

/* --------------------------------------------------------------- the race */

.race { margin: 8px 0 0; display: grid; gap: 22px; }
.lane { display: grid; grid-template-columns: 172px minmax(0, 1fr) 96px; gap: 18px; align-items: center; }
@media (max-width: 680px) { .lane { grid-template-columns: 110px minmax(0,1fr) 78px; gap: 10px; } }
.lane-name { font: 500 15px/1.3 var(--sans); color: var(--sand-2); }
.lane-name b { display: block; color: var(--star); font-weight: 600; }
.lane-track {
  position: relative; height: 34px; border-radius: 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(147,65,47,.16));
  border: 1px solid var(--rule); overflow: hidden;
}
.lane-fill {
  position: absolute; inset: 0 100% 0 0; border-radius: 18px; z-index: 1;
  background: linear-gradient(90deg, rgba(147,65,47,.5), var(--sun));
  transition: right 0s;
}
.lane-runner {
  position: absolute; z-index: 3; top: 50%; left: 0; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--sun-hot), var(--ember));
  box-shadow: 0 0 20px rgba(255,122,61,.9);
}
/* The dust a runner kicks up. */
.lane-dust {
  position: absolute; z-index: 2; top: 50%; left: 0; width: 84px; height: 22px;
  margin: -11px 0 0 -84px; border-radius: 11px; opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(255,240,210,.5));
  filter: blur(5px);
}
.lane.fenec .lane-fill { background: linear-gradient(90deg, rgba(79,224,196,.35), var(--oasis)); }
.lane.fenec .lane-runner { background: radial-gradient(circle at 35% 32%, #C6FFF3, var(--oasis)); box-shadow: 0 0 22px rgba(79,224,196,.95); }
.lane.fenec .lane-name b { color: var(--oasis); }
.lane-time {
  font: 600 15px/1 var(--mono); color: var(--sand-dim); text-align: right;
  font-variant-numeric: tabular-nums;
}
.lane.done .lane-time { color: var(--sun-hot); }
.lane.fenec.done .lane-time { color: var(--oasis); }
.race-foot { margin: 20px 0 0; color: var(--sand-dim); font-size: 14.5px; max-width: var(--measure); }
.race-replay {
  margin-top: 16px; font: 500 14px/1 var(--sans); color: var(--sand);
  background: rgba(244,169,60,.08); border: 1px solid var(--rule-hot);
  border-radius: 5px; padding: 10px 16px; cursor: pointer;
}
.race-replay:hover { border-color: var(--sun); background: rgba(244,169,60,.16); }

/* ==================================================================== code */

.code {
  position: relative; margin: 24px 0; border-radius: 9px; overflow: hidden;
  background: linear-gradient(160deg, #150F26, #0C0819);
  border: 1px solid var(--rule);
  box-shadow: 0 22px 50px -26px rgba(0,0,0,.9);
}
.code::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,169,60,.5), transparent);
}
.code-label {
  padding: 10px 16px; border-bottom: 1px solid var(--rule);
  font: 400 12.5px/1 var(--mono); color: var(--sand-dim);
  background: rgba(0,0,0,.3);
}
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.code code { font: 400 13.5px/1.72 var(--mono); color: var(--sand); display: block; white-space: pre; tab-size: 2; }
.t-kw      { color: var(--oasis); }
.t-type    { color: #C79BF2; }
.t-string  { color: var(--sun-hot); }
.t-num     { color: var(--sun); }
.t-param   { color: #C79BF2; }
.t-anno    { color: #C79BF2; }
.t-comment { color: var(--sand-dim); font-style: italic; }

code:not(.code code) {
  font: 400 .87em/1.4 var(--mono); color: var(--sun-hot);
  background: rgba(244,169,60,.09); border: 1px solid rgba(244,169,60,.16);
  padding: .1em .36em; border-radius: 4px; word-break: break-word;
}

/* =================================================================== tables */

.tbl { margin: 26px 0; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
th { font-weight: 600; font-size: 13.5px; color: var(--sun); border-bottom-color: var(--rule-hot); }
td { color: var(--sand-2); }
td.n, th.n {
  text-align: right; white-space: nowrap; padding-right: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px;
}
td b { color: var(--star); font-weight: 600; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(244,169,60,.045); }
tbody tr:last-child td { border-bottom: 0; }

/* ===================================================================== docs */

.shell {
  display: grid; grid-template-columns: 228px minmax(0, 1fr) 196px;
  gap: 0 clamp(24px, 3vw, 44px);
  max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter);
  align-items: start;
}
@media (max-width: 1160px) { .shell { grid-template-columns: 224px minmax(0,1fr); } .toc { display: none; } }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } }

.docs .hero-scarp {
  height: clamp(90px, 12vw, 170px); margin-bottom: -1px; position: relative;
  background: radial-gradient(90% 100% at 72% 100%, rgba(255,140,60,.2), transparent 62%);
}
.docs .hero-scarp svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; display: block; }

.side { position: sticky; top: 66px; align-self: start; max-height: calc(100vh - 66px); overflow-y: auto; }
.side-inner { padding: 34px 0 60px; }
.side-group {
  margin: 28px 0 9px; font: 600 12.5px/1 var(--sans); color: var(--sun);
  letter-spacing: .06em; text-transform: none;
}
.side-inner > .side-group:first-child { margin-top: 0; }
.side-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.side-list a {
  display: block; padding: 7px 0 7px 15px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 15px; color: var(--sand-2); text-decoration: none;
  transition: color .2s, border-color .2s, transform .2s var(--ease);
}
.side-list a:hover { color: var(--sand); transform: translateX(2px); }
.side-list a.here {
  color: var(--star); font-weight: 600;
  border-left-color: var(--sun);
  text-shadow: 0 0 16px rgba(244,169,60,.45);
}

@media (max-width: 860px) {
  .docs .side-toggle { display: inline-block; }
  .top-nav { margin-left: 0; gap: 16px; }
  .top-nav a { font-size: 14px; }
  .side { position: static; max-height: none; display: none; border-bottom: 1px solid var(--rule); }
  .side.open { display: block; animation: reveal .4s var(--ease); }
  .side-inner { padding: 20px 0 28px; }
}
@media (max-width: 600px) {
  .top { gap: 12px; }
  .docs .top-nav a[href$="benchmarks.html"] { display: none; }
}

.doc { padding: 40px 0 100px; min-width: 0; }
.doc article > :first-child { margin-top: 0; }
.doc h1 {
  margin: 0 0 16px; max-width: 19ch;
  font: 700 clamp(34px, 4.6vw, 52px)/1.04 var(--sans); letter-spacing: -.038em;
  background: linear-gradient(160deg, var(--star), var(--sun-hot));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.doc .kicker { margin: 0 0 40px; max-width: var(--measure); color: var(--sand-2); font-size: 19px; }
.doc h2 {
  margin: 64px 0 16px; padding-top: 26px; position: relative;
  border-top: 1px solid var(--rule);
  font: 700 26px/1.2 var(--sans); letter-spacing: -.028em; color: var(--star);
}
.doc h2::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 84px; height: 1px;
  background: linear-gradient(90deg, var(--sun), transparent);
}
.doc h3 { margin: 38px 0 10px; font: 600 19px/1.32 var(--sans); letter-spacing: -.018em; color: var(--sand); }
.doc h4 { margin: 28px 0 8px; font: 600 16px/1.35 var(--sans); color: var(--sand); }
.doc p, .doc ul, .doc ol { max-width: var(--measure); color: var(--sand-2); }
.doc p { margin: 0 0 17px; }
.doc li { margin-bottom: 8px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li::marker { color: var(--sun); }
.doc strong, .doc b { color: var(--sand); font-weight: 600; }

.anchor {
  position: absolute; left: -24px; top: 26px; width: 24px; height: 1.2em;
  opacity: 0; text-decoration: none; transition: opacity .2s;
}
.anchor::before { content: "#"; color: var(--rule-hot); font-weight: 400; }
.doc h2:hover .anchor, .anchor:focus { opacity: 1; }
@media (max-width: 1160px) { .anchor { display: none; } }

.note {
  margin: 26px 0; padding: 18px 20px; position: relative;
  border-radius: 0 7px 7px 0; border-left: 3px solid var(--sun);
  background: linear-gradient(90deg, rgba(244,169,60,.1), rgba(244,169,60,.02));
}
.note p { margin: 0 0 9px; max-width: none; color: var(--sand-2); }
.note p:last-child { margin: 0; }
.note b { color: var(--sun-hot); font-weight: 600; }
.note.trap { border-left-color: var(--ember); background: linear-gradient(90deg, rgba(255,122,61,.13), rgba(255,122,61,.02)); }
.note.trap b { color: var(--ember); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; max-width: none; list-style: none; padding: 0; margin: 30px 0; }
.cards li {
  margin: 0; padding: 18px 20px; border-radius: 9px;
  border: 1px solid var(--rule); background: linear-gradient(160deg, rgba(29,20,48,.7), rgba(12,8,25,.5));
  transition: transform .28s var(--ease), border-color .28s, box-shadow .28s;
}
.cards li:hover {
  transform: translateY(-3px); border-color: var(--rule-hot);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.95);
}
.cards a { font-weight: 600; font-size: 17px; text-decoration: none; color: var(--sun-hot); }
.cards p { margin: 6px 0 0; color: var(--sand-dim); font-size: 15px; max-width: none; }

.toc { position: sticky; top: 66px; padding: 44px 0 40px; font-size: 14px; }
.toc p { margin: 0 0 11px; font-weight: 600; font-size: 12.5px; color: var(--sun); letter-spacing: .05em; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px;
  border-left: 2px solid transparent; color: var(--sand-dim);
  text-decoration: none; line-height: 1.42; transition: color .2s, border-color .2s;
}
.toc a:hover { color: var(--sand); }
.toc a.here { color: var(--star); border-left-color: var(--sun); }
.toc .lvl3 a { padding-left: 27px; font-size: 13.5px; }

.pagenav { display: flex; gap: 16px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--rule); }
.pn {
  flex: 1; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 8px;
  text-decoration: none; color: var(--sand); font-weight: 600; font-size: 16px;
  background: linear-gradient(160deg, rgba(29,20,48,.6), transparent);
  transition: border-color .25s, transform .25s var(--ease);
}
.pn:hover { border-color: var(--rule-hot); transform: translateY(-2px); color: var(--sun-hot); }
.pn span { display: block; font: 400 13px/1.4 var(--sans); color: var(--sand-dim); margin-bottom: 3px; }
.pn.next { text-align: right; }

/* ================================================================== footer */

.foot { position: relative; padding: 60px var(--gutter) 70px; border-top: 1px solid var(--rule); }
.foot-in {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 26px 48px; align-items: start;
}
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } }
.foot-mark { margin: 0 0 10px; font: 700 18px/1 var(--sans); letter-spacing: -.02em; color: var(--sand); }
.foot p { margin: 0; color: var(--sand-dim); font-size: 15.5px; max-width: 44ch; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 26px; }
.foot a { color: var(--sand-2); text-decoration: none; font-size: 15.5px; }
.foot a:hover { color: var(--sun-hot); }

/* ============================================ scroll reveals + reduced motion */

.rise { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rise.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ridge-in, .reveal, .rise { opacity: 1 !important; transform: none !important; }
  .ridge { transform: none !important; }
  .sunrise, .shimmer { animation: none; }
}