/* Layout: a terminal-native one-pager. Sections are framed like TUI panes with numbered titles.
   The palette, type and frame tokens are set in hud.css (one dark theme). */
:root{--cell:22px}

html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);padding-inline:16px;position:relative}
/* character-cell ground + aurora behind the hero + a spotlight that follows the pointer */
.ground,.spot{position:fixed;inset:0;pointer-events:none;z-index:0}
.ground{background:
  radial-gradient(60% 50% at 18% -5%,color-mix(in srgb,var(--accent) calc(var(--glow)*100%),transparent),transparent 70%),
  radial-gradient(50% 45% at 92% 8%,color-mix(in srgb,var(--info) calc(var(--glow)*80%),transparent),transparent 70%),
  radial-gradient(circle at 1px 1px,var(--dot) 1.2px,transparent 1.6px) 0 0/var(--cell) var(--cell)}
.spot{background:radial-gradient(circle at 1px 1px,var(--accent) 1.3px,transparent 1.8px) 0 0/var(--cell) var(--cell);
  -webkit-mask:radial-gradient(180px circle at var(--mx,-999px) var(--my,-999px),#000,transparent 70%);
          mask:radial-gradient(180px circle at var(--mx,-999px) var(--my,-999px),#000,transparent 70%);opacity:.55}
.wrap,.gh{position:relative;z-index:1}
a{color:var(--info)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
code,pre,.mono{font-family:var(--mono)}
.wrap{max-width:1100px;margin-inline:auto}
h1,h2,h3{text-wrap:balance;line-height:1.15;margin:0}

p{margin:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:14px;margin-inline:-16px;padding-inline:16px;
  background:color-mix(in srgb,var(--page) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font:700 18px var(--mono);color:var(--ink);text-decoration:none;letter-spacing:.04em}
.brand b{color:var(--accent)}
.nav nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav nav a{color:var(--ink-2);text-decoration:none;font-size:15px;padding:4px 10px;border-radius:6px;transition:color .2s,background .2s}
.nav nav a:hover{color:var(--ink)}
.nav nav a.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pill{font:500 12px var(--mono);color:var(--low);border:1px solid color-mix(in srgb,var(--low) 45%,transparent);padding:2px 9px;letter-spacing:.04em}

/* ---------- hero ---------- */
.hero{display:grid;gap:26px;padding-block:56px 24px}
.hero>*{min-width:0}
.logo{font:700 clamp(9px,2.2vw,22px)/1.05 var(--mono);white-space:pre;margin:0;overflow-x:auto;
  background:linear-gradient(var(--a,90deg),var(--accent),var(--info),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:spin 8s linear infinite}
@property --a{syntax:"<angle>";initial-value:90deg;inherits:false}
@keyframes spin{to{--a:450deg}}
@media (prefers-reduced-motion:reduce){.logo{animation:none}}
.lede{max-width:28ch}
.lede em{font-style:normal;color:var(--accent)}
.sub{color:var(--ink-2);max-width:62ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cmd{display:flex;align-items:center;gap:12px;font:14px var(--mono);background:var(--sheet);border:1px solid var(--line);padding:10px 10px 10px 14px;min-width:0;max-width:100%}
.cmd span{color:var(--ink-3)} .cmd code{overflow-x:auto;white-space:nowrap}
.cmd button,.btn{font:500 13px var(--mono);border-radius:6px;cursor:pointer;padding:6px 12px;text-decoration:none}
.cmd button{background:var(--raised);color:var(--ink-2);border:1px solid var(--line)}
.btn{border:0;font-size:14px}

/* pane frame */
.pane{border:1px solid var(--line-2);position:relative;min-width:0}
.pane>.t{position:absolute;padding-inline:6px;color:var(--ink-3)}