/* ---------------------------------------------------------------
   alkeyword — marketing site

   Palette is the tool's own: crawl.py prints gold for claim bars,
   verdigris for MINTABLE and rust for REFUSED, and dashboard.py
   renders its HTML in these exact hexes. The page should look like
   the terminal it is selling, because most of the page IS terminal
   output.

   No build step, no framework, no webfont, no CDN — the install
   section promises the tool phones nowhere, and the page it makes
   that promise on should not either.

   One caveat, because overstating this would be the exact failure
   the tool looks for: in production the page does load one external
   script it did not ask for. Cloudflare injects its Web Analytics
   beacon (static.cloudflareinsights.com) at the edge — it is absent
   from the HTML in this repo and absent when served locally. It is a
   zone setting, not markup, and turning it off is a dashboard
   change rather than a commit.
   --------------------------------------------------------------- */

:root {
  --bg:      #0b0d11;
  --bg2:     #0e1116;
  --panel:   #12151c;
  --panel2:  #171b23;
  --line:    #232833;
  --line2:   #2e3542;
  --ink:     #e8e6e1;
  --dim:     #9aa0ab;
  --faint:   #6c7280;

  --gold:    #d9a441;
  --gold-hi: #e8b95a;
  --gold-dk: #8a6a2c;
  --verd:    #4a9e8f;   /* MINTABLE */
  --rust:    #c15f3c;   /* REFUSED  */
  --blue:    #6fa8dc;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1140px;
  --r: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.022em; margin: 0; }
code, kbd { font-family: var(--mono); font-size: .87em; }
b, strong { color: var(--ink); font-weight: 650; }
p { color: var(--dim); margin: 0 0 18px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--gold);
        color: #14161b; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

/* Visible only to assistive tech — the rail's claim counts read as bare numbers
   otherwise ("graphonomous.com 2,826"). */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Keyboard focus was inheriting the UA default, which is invisible against this
   palette in several places. Only shown for keyboard users. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

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

#nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 26px;
  padding: 11px 24px;
  background: rgba(11,13,17,.76);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
#nav.stuck { border-bottom-color: var(--line); background: rgba(11,13,17,.94); }

.brand { display: flex; align-items: baseline; gap: 9px; font-family: var(--mono); }
.brand .gl { color: var(--gold); font-size: 17px; }
.brand .nm { color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: .06em; }

.navlinks { display: flex; gap: 22px; margin-left: auto; font-size: 13.5px; color: var(--dim); }
.navlinks a { color: inherit; transition: color .15s; }
.navlinks a:hover { color: var(--ink); }
@media (max-width: 860px) { .navlinks { display: none; } }

.btn {
  display: inline-block; background: var(--gold); color: #14161b;
  font-weight: 650; font-size: 13.5px; padding: 8px 16px;
  border-radius: 7px; border: 1px solid var(--gold-hi);
  transition: filter .15s, box-shadow .18s, transform .12s;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 0 0 4px rgba(217,164,65,.14); }
.btn:active { transform: translateY(1px); }
.btn.big { font-size: 15px; padding: 12px 24px; }

.ghost {
  display: inline-block; font-size: 13.5px; color: var(--ink);
  padding: 8px 16px; border-radius: 7px; border: 1px solid var(--line2);
  transition: border-color .15s, color .15s;
}
.ghost:hover { border-color: var(--gold-dk); }
.ghost.big { font-size: 15px; padding: 12px 24px; }

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

.hero {
  position: relative; padding: 74px 0 64px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 62% at 50% -12%, rgba(217,164,65,.11), transparent 62%);
}

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.pill {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(217,164,65,.32); border-radius: 99px; padding: 4px 11px;
}

.glyph { font-family: var(--mono); font-size: 40px; color: var(--gold);
         line-height: 1; margin-bottom: 20px; opacity: .92; }

.hero h1 { font-size: clamp(2.3rem, 6.4vw, 3.7rem); font-weight: 600; margin-bottom: 18px; }

.lede { font-size: 1.16rem; color: var(--dim); max-width: 58ch; margin: 0 0 28px; }
.lede strong { color: var(--ink); }

.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fineprint { font-size: .85rem; color: var(--faint); margin: 16px 0 0; max-width: 62ch; }

/* ---------------------------------------------------------------- sections */

.band { padding: 74px 0; border-bottom: 1px solid var(--line); }
.band.alt { background: var(--bg2); }

.tag {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dk);
  margin-bottom: 12px;
}
.tag.ctr { display: block; text-align: center; }

h2.sec { font-size: clamp(1.55rem, 3.3vw, 2.05rem); margin-bottom: 14px; }
h2.sec.ctr, .sub.ctr { text-align: center; }
.sub { color: var(--dim); max-width: 68ch; margin: 0 0 30px; }
.sub.ctr { margin-left: auto; margin-right: auto; }

.caption { font-size: .82rem; color: var(--faint); margin-top: 14px; }
.caption.ctr { text-align: center; }
.caption code { color: var(--gold-dk); }

/* ---------------------------------------------------------------- split cards */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 0; }
.card {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; background: var(--panel);
}
.card h3 {
  font-size: .78rem; font-family: var(--mono); letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 11px;
}
.card p { font-size: .95rem; margin: 0; }
.card.bad h3 { color: var(--rust); }
.card.good h3 { color: var(--verd); }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- terminal */

.term {
  border: 1px solid var(--line); border-radius: var(--r);
  background: #070910; overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .74rem; color: var(--faint);
  letter-spacing: .05em; background: #0a0d13;
}
.dots { display: flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.term pre {
  margin: 0; padding: 18px; overflow-x: auto;
  font-family: var(--mono); font-size: .775rem; line-height: 1.72;
  color: #c9cdd6; white-space: pre;
}
.g { color: var(--gold); } .r { color: var(--rust); }
.v { color: var(--verd); } .d { color: var(--faint); } .b { color: var(--blue); }

/* caret while the hero report types itself in */
.caret { display: inline-block; width: 7px; height: 1em; vertical-align: -2px;
         background: var(--gold); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* ---------------------------------------------------------------- explorer */

.explorer {
  display: grid; grid-template-columns: 232px 1fr; gap: 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden;
}
@media (max-width: 900px) { .explorer { grid-template-columns: 1fr; } }

.rail {
  border-right: 1px solid var(--line); background: var(--bg2);
  padding: 12px 0; max-height: 620px; overflow-y: auto;
}
@media (max-width: 900px) {
  .rail { border-right: 0; border-bottom: 1px solid var(--line);
          max-height: 190px; }
}
.railhead {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); padding: 4px 16px 10px;
}
.rail button {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  background: none; border: 0; border-left: 2px solid transparent;
  padding: 7px 16px; text-align: left; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  transition: color .13s, background .13s, border-color .13s;
}
.rail button:hover { color: var(--ink); background: rgba(217,164,65,.05); }
.rail button.on {
  color: var(--gold); border-left-color: var(--gold);
  background: rgba(217,164,65,.09);
}
.rail button .n { margin-left: auto; color: var(--faint); font-size: 11px; }
.rail button.on .n { color: var(--gold-dk); }

.panel { padding: 20px 22px 24px; min-width: 0; }

.statstrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 620px) { .statstrip { grid-template-columns: repeat(2, 1fr); } }
.stat {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg2); padding: 11px 13px;
}
.stat .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 3px;
}
.stat .v { font-size: 1.15rem; color: var(--ink); font-weight: 600;
           font-variant-numeric: tabular-nums; }
/* An inferred entity can be a whole tagline — "Agent memory that improves
   itself" — so the stat card has to hold a sentence without blowing its row. */
.stat .v.long { font-size: .92rem; font-weight: 550; line-height: 1.35; }

.blockhead {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line); padding-bottom: 7px; margin: 0 0 13px;
}

/* claim graph */
.graph { margin-bottom: 24px; }
.grow {
  display: grid; grid-template-columns: 88px 44px 1fr;
  align-items: center; gap: 10px; margin-bottom: 5px;
  font-family: var(--mono); font-size: 12px;
}
.grow .t { color: var(--dim); }
.grow .c { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.grow.zero .t, .grow.zero .c { color: var(--faint); }
.bartrack { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Fixed track so the lever annotation sits just past the bar instead of being
   flung to the right edge by a flexible one. */
.barwrap { position: relative; flex: 0 0 auto; width: min(330px, 42vw); height: 11px; }
.bar {
  position: absolute; left: 0; top: 0; height: 11px; border-radius: 2px;
  background: var(--gold); min-width: 2px;
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
/* Overflowed the scale: fades out at the track edge rather than ending in a
   clean cap, so it does not read as a value that happens to be the maximum. */
.bar.over {
  background: repeating-linear-gradient(115deg, var(--gold) 0 7px, var(--gold-dk) 7px 12px);
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.lever.off { color: var(--gold-dk); }
/* Where crawl.py's ASCII bar stops. Drawn on the chart rather than described in
   a footnote, so the departure from the terminal is visible at the row. */
.capmark {
  position: absolute; top: -3px; bottom: -3px; width: 0;
  border-left: 1px dashed var(--gold-dk); opacity: .75;
}
.lever { color: var(--faint); font-size: 11px; white-space: nowrap; flex: 0 0 auto; }
/* Narrow enough that the annotation would be clipped by the panel rather than
   read. Hidden on purpose — the caption still states the ordering rule, and a
   half-visible label is worse than none. */
@media (max-width: 700px) { .lever { display: none; } }
.lever.hot { color: var(--gold-dk); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* verdicts */
.verdicts { margin-bottom: 24px; }
.vrow {
  display: grid; grid-template-columns: 106px 1fr auto;
  align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(35,40,51,.55);
}
.vrow:last-child { border-bottom: 0; }
.vmark { font-weight: 600; letter-spacing: .04em; }
.vrow.ok .vmark { color: var(--verd); }
.vrow.no .vmark { color: var(--rust); }
.vname { color: var(--ink); font-family: var(--sans); font-size: 13.5px; }
.vrow.no .vname { color: var(--dim); }
.vcount { color: var(--faint); font-variant-numeric: tabular-nums; }
.vrow.ok .vcount { color: var(--verd); }

/* findings */
.finds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 620px) { .finds { grid-template-columns: repeat(2, 1fr); } }
.find {
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg2);
  padding: 9px 11px; font-family: var(--mono); font-size: 11.5px; color: var(--faint);
}
.find b { display: block; font-size: 1.15rem; color: var(--ink);
          font-family: var(--sans); font-variant-numeric: tabular-nums; }
.find.warn b { color: var(--gold); }
.find.good b { color: var(--verd); }

/* material excerpt */
.material { margin-top: 22px; }
.mrow {
  border-left: 2px solid var(--gold-dk); padding: 2px 0 2px 13px;
  margin-bottom: 12px;
}
.mrow .mt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-dk); display: block; margin-bottom: 3px;
}
.mrow .mq { color: var(--ink); font-size: .92rem; display: block; }
.mrow .mu { font-family: var(--mono); font-size: 10.5px; color: var(--faint);
            word-break: break-all; }

/* ---------------------------------------------------------------- refusal demo */

.refuse {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); padding: 24px; margin-top: 26px;
}
.formpick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.formpick button {
  background: var(--bg2); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--mono); font-size: 11.5px; padding: 7px 13px;
  border-radius: 99px; cursor: pointer; transition: all .14s;
}
.formpick button:hover { color: var(--ink); border-color: var(--line2); }
.formpick button.on { color: var(--gold); border-color: var(--gold-dk);
                      background: rgba(217,164,65,.10); }

.slrow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sllab { font-size: .92rem; color: var(--dim); }
.slrow output {
  margin-left: auto; font-family: var(--mono); font-size: 1.05rem;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 99px; outline: none; margin: 10px 0 20px;
  background: linear-gradient(90deg, var(--gold) var(--pct, 40%), var(--line) var(--pct, 40%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--gold); cursor: pointer;
}

.verdictbox {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  background: var(--bg2); padding: 16px 18px;
  transition: border-color .2s;
}
.verdictbox.ok { border-left-color: var(--verd); }
.verdictbox.no { border-left-color: var(--rust); }
.vhead {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 8px;
}
.verdictbox.ok .vhead { color: var(--verd); }
.verdictbox.no .vhead { color: var(--rust); }
.verdictbox p { margin: 0; color: var(--dim); font-size: .95rem; }
.verdictbox p b { color: var(--ink); }

/* ---------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button {
  background: none; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  padding: 8px 15px; border-radius: 7px; cursor: pointer; transition: all .14s;
}
.tabs button:hover { color: var(--ink); border-color: var(--line2); }
.tabs button.on { color: var(--gold); border-color: var(--gold-dk);
                  background: rgba(217,164,65,.09); }
.tabs button .step { color: var(--faint); margin-right: 7px; }
.tabs button.on .step { color: var(--gold-dk); }

.tabnote { font-size: .9rem; color: var(--dim); margin: 0 0 16px; max-width: 72ch; }
.tabnote b { color: var(--ink); }

/* ---------------------------------------------------------------- query table */

.qtable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.qtable th {
  text-align: left; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.qtable td { padding: 9px 10px; border-bottom: 1px solid rgba(35,40,51,.6);
             color: var(--dim); vertical-align: top; }
.qtable td.q { color: var(--ink); }
.qtable tr:last-child td { border-bottom: 0; }
.vd { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.vd.ready { color: var(--verd); } .vd.thin { color: var(--gold); }
.vd.none { color: var(--rust); } .vd.weak { color: var(--faint); }

/* ---------------------------------------------------------------- seeds toggle */

.seedbox { border: 1px solid var(--line); border-radius: 12px;
           background: var(--panel); padding: 22px; }
.seedcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
            margin-top: 18px; }
@media (max-width: 620px) { .seedcols { grid-template-columns: 1fr; } }
.seedcol { border: 1px solid var(--line); border-radius: 8px;
           background: var(--bg2); padding: 14px; text-align: center; }
.seedcol .lab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 6px;
}
.seedcol .num { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
                transition: color .25s; }
.seedcol.ready .num { color: var(--verd); }
.seedcol.thin .num { color: var(--gold); }
.seedcol.none .num { color: var(--rust); }

/* ---------------------------------------------------------------- gaps grid */

.gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 10px; }
.gap {
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  padding: 15px 16px; transition: border-color .15s, transform .15s;
}
.gap:hover { border-color: var(--gold-dk); transform: translateY(-2px); }
.gap .id { font-family: var(--mono); font-size: 11px; color: var(--gold);
           letter-spacing: .08em; }
.gap b { display: block; margin: 5px 0 6px; font-size: .96rem; }
.gap span { color: var(--dim); font-size: .86rem; display: block; }
.gap.urgent { border-color: rgba(193,95,60,.42); }
.gap.urgent .id { color: var(--rust); }

/* ---------------------------------------------------------------- tables */

.scroll { overflow-x: auto; }
table.plain { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 8px 0; }
table.plain th, table.plain td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.plain th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
}
table.plain td { color: var(--dim); }
table.plain td:first-child { color: var(--ink); }

/* ---------------------------------------------------------------- quote */

blockquote {
  margin: 22px 0; padding: 18px 22px; border-left: 3px solid var(--gold);
  background: var(--panel); border-radius: 0 8px 8px 0;
}
blockquote p { color: var(--ink); margin: 0; font-size: 1.02rem; }
blockquote cite {
  display: block; margin-top: 10px; font-style: normal; font-size: .82rem;
  color: var(--faint); font-family: var(--mono);
}

/* ---------------------------------------------------------------- status */

.statusrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 800px) { .statusrow { grid-template-columns: 1fr; } }
.st { border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
      padding: 17px; }
.st b { display: block; margin: 9px 0 5px; }
.st span { color: var(--dim); font-size: .89rem; }
.chip {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 99px; border: 1px solid;
}
.chip.measured { color: var(--verd); border-color: rgba(74,158,143,.45); }
.chip.once { color: var(--gold); border-color: rgba(217,164,65,.42); }
.chip.untested { color: var(--rust); border-color: rgba(193,95,60,.45); }

/* ---------------------------------------------------------------- download */

.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 18px; }
@media (max-width: 620px) { .dl { grid-template-columns: 1fr; } }
.dl a {
  display: block; border: 1px solid var(--line); border-radius: 9px;
  padding: 17px 19px; background: var(--panel); transition: border-color .15s;
}
.dl a:hover { border-color: var(--gold-dk); }
.dl .name { color: var(--ink); font-weight: 650; display: block; }
.dl .meta { color: var(--faint); font-size: .8rem; font-family: var(--mono); }

/* ---------------------------------------------------------------- finale + footer */

.finale { padding: 84px 0; text-align: center;
          background: radial-gradient(90% 100% at 50% 100%, rgba(217,164,65,.10), transparent 65%); }
.finale h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); margin-bottom: 14px; }
.finale p { max-width: 54ch; margin: 0 auto 26px; }
.finale .cta { justify-content: center; }

footer { border-top: 1px solid var(--line); padding: 40px 0 64px; }
.fwrap { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.fbrand { max-width: 46ch; }
.fbrand p { font-size: .86rem; color: var(--faint); margin: 10px 0 0; }
.flinks { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap;
          font-size: .88rem; color: var(--dim); }
.flinks a { color: inherit; }
.flinks a:hover { color: var(--gold); }
.fbot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
        margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
        font-size: .8rem; color: var(--faint); }

/* ---------------------------------------------------------------- reveal */

.rv { opacity: 0; transform: translateY(14px);
      transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- light mode

   The terminal panes stay dark in light mode on purpose. They are screenshots
   of a terminal; inverting them would make them a screenshot of nothing. */

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfaf7; --bg2: #f4f2ed; --panel: #fffefb; --panel2: #f0eee8;
    --line: #e2ded4; --line2: #cfc9ba;
    --ink: #1a1c22; --dim: #4e5561; --faint: #7d8490;
    --gold: #9a6f16; --gold-hi: #b3831f; --gold-dk: #a98436;
    --verd: #2f7a6c; --rust: #a8482a; --blue: #37618f;
  }
  #nav { background: rgba(251,250,247,.8); }
  #nav.stuck { background: rgba(251,250,247,.95); }
  .btn { color: #fff; }
  .term { background: #0a0d13; border-color: #d8d3c7; }
  .term-bar { background: #0d1017; border-bottom-color: #1c2029; color: #7c8797; }
  .term pre { color: #c9cdd6; }
  /* The panes stay dark, so their syntax colours have to stay the dark-mode
     ones. Inheriting the light palette here put #9a6f16 gold and #2f7a6c green
     on a near-black background — legible, but muddy and wrong for a terminal. */
  .term .g { color: #d9a441; } .term .r { color: #c15f3c; }
  .term .v { color: #4a9e8f; } .term .d { color: #6c7280; }
  .term .b { color: #6fa8dc; }
  .rail button.on { background: rgba(154,111,22,.10); }
}