/* ============================================================
   GSV design system for gsv.space.
   Transcribed from gsv/web: gsv-tokens.css (dark), instrument.css
   (light theme, chrome, buttons), session-theme.css, GlyphStars.tsx.
   Change it there first, then mirror it here.

   The identity is the instrument's: void ground, phosphor glyphs,
   square corners, tracked uppercase chrome. Martian Mono is the
   machine; Host Grotesk is the person and the ship. Departure Mono
   survives only for the star field, whose grid assumes its 5px advance.
   ============================================================ */

/* ── faces (SIL OFL 1.1, self-hosted) ── */
@font-face{font-family:"Departure Mono";src:url("/DepartureMono-Regular.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/MartianMono-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("/HostGrotesk-Variable.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("/HostGrotesk-Italic-Variable.woff2") format("woff2");font-weight:300 800;font-style:italic;font-display:swap}

/* ── tokens: dark (gsv-tokens.css, verbatim) ── */
:root{
  --gsv-font-mono:"Martian Mono","IBM Plex Mono","JetBrains Mono",monospace;
  --gsv-font-prose:"Host Grotesk","Avenir Next","Segoe UI",sans-serif;
  --gsv-font-pixel:"Departure Mono",monospace;

  /* surfaces */
  --void:#07061a;--panel:#0a0820;--panel-2:#0a0822;--node-bg:#0b0a1e;--header-bar:#13112e;
  --frame-lo:#08061c;--frame-hi:#161240;--field-deep:#070612;--shadow-deep:#060414;--frame-inset:#060414;
  /* borders & rules */
  --border:#322e74;--border-raised:#4a449e;--rule-inner:#25224d;--rule-section:#3a3676;--bracket:#6b66c4;--dashed:#5a52a8;
  /* interaction */
  --hover:#171441;--hover-nav:#1b1840;--active:#201c4d;--selected:#221d56;
  /* text & accent */
  --text-hi:#f4f2ff;--text:#efeefe;--text-title:#e2dfff;--accent:#b3aeff;--accent-bright:#cbc7ff;
  --link:#8fb6ff;--link-hover:#b8d2ff;--label:#b3aee2;--node-label:#c4bfee;--text-muted:#8c86c8;
  --prose-dim:#9089d4;--meta:#8983bf;--text-dim:#837ebd;
  /* status */
  --online:#5ef2a0;--error:#ff6f8c;--idle:#6661a0;--update:#ffd24d;--live:#8f8aff;
  --bg-error:#170b17;--bg-online:#081812;--bg-warn:#181407;
  /* action accents */
  --primary-hi:#6b62c4;--danger:#a8324a;--danger-hi:#c4445f;--warn:#e0a64c;
  /* instrument surfaces */
  --glyph:#8071dd;--star:#5d5798;--faint:#4e496f;--principal:#8ec9a4;--target:#97aaff;--path:#bea4e8;
  --glow:0 0 5px rgba(140,120,235,.55),0 0 14px rgba(110,95,209,.28);
  --glow-soft:0 0 5px rgba(150,140,255,.3);
  --glow-focus:0 0 9px rgba(150,140,255,.4);
  --star-glow:0 0 4px rgba(128,113,221,.4);
  /* scales */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:22px;--space-6:32px;--space-7:48px;--space-8:72px;
  --radius:0;--measure-prose:68ch;--measure-response:1020px;
  --dur-fast:120ms;--dur-move:150ms;--dur-settle:600ms;--ease-out:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}

/* ── tokens: light (instrument.css .is-light, verbatim; the blog's extra
      surfaces derived to match session-theme.css). The same identity on paper:
      glows and scanlines belong to phosphor and switch off. ── */
:root[data-theme="light"]{
  color-scheme:light;
  --void:#f4f3fb;--panel:#ffffff;--panel-2:#f0eef8;--node-bg:#f7f6fc;--header-bar:#e9e6f5;
  --frame-lo:#eeebf7;--frame-hi:#e4e0f2;--field-deep:#ffffff;--shadow-deep:#d7d2ee;--frame-inset:#e7e4f4;
  --border:#d8d4ec;--border-raised:#c4bee3;--rule-inner:#e6e3f2;--rule-section:#d1ccea;--bracket:#6b66c4;--dashed:#a7a3c8;
  --hover:#edeaf8;--hover-nav:#edeaf8;--active:#e4e0f7;--selected:#e4e0f7;
  --text-hi:#14112b;--text:#1b1836;--text-title:#221e44;--accent:#5a52a8;--accent-bright:#4a43a0;
  --link:#2f5fc7;--link-hover:#1f4db0;--label:#4a4677;--node-label:#4a4677;--text-muted:#5f5a8e;
  --prose-dim:#5f5a8e;--meta:#6d6899;--text-dim:#6d6899;
  --online:#1e8a55;--error:#c0364f;--idle:#9d98c6;--update:#a46b00;--live:#5a52a8;
  --bg-error:#fbeef1;--bg-online:#eaf7f0;--bg-warn:#fbf4e6;
  --primary-hi:#4a43a0;--danger:#a8324a;--danger-hi:#c0364f;--warn:#a46b00;
  --glyph:#6b5fd6;--star:#b8b2e6;--faint:#a7a3c8;--principal:#2e7d4f;--target:#3d4fbf;--path:#7a56b5;
  --glow:none;--glow-soft:none;--glow-focus:none;--star-glow:none;
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--void);color:var(--text);font-family:var(--gsv-font-mono);font-size:13px;line-height:1.5;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:not-allowed}
:is(button,a,summary,[tabindex]):focus{outline:none}
:is(button,a,summary):focus-visible{text-decoration:underline;text-underline-offset:.25em}
input:focus-visible,textarea:focus-visible{outline:none}
::selection{background:var(--selected);color:var(--text-hi)}
[hidden]{display:none!important}
img,video{max-width:100%}
kbd{font:inherit;color:var(--label);border:1px solid var(--border-raised);padding:0 5px;margin-right:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 56px}
@media(max-width:720px){.wrap{padding:0 18px}}

/* ── the field: stars, scanlines, vignette (instrument-field) ──
   Fixed behind the page. The star grid is filled by instrument.js. */
.gsv-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gsv-field .gsv-glyph-stars{position:absolute;inset:0;overflow:hidden}
.gsv-field .gsv-glyph-stars pre{position:absolute;left:50%;top:50%;margin:0;color:var(--star);font-family:var(--gsv-font-pixel);font-size:8px;line-height:8px;letter-spacing:0;font-variant-ligatures:none;text-rendering:geometricPrecision;text-shadow:var(--star-glow);transform:translate(-50%,-50%);white-space:pre;-webkit-font-smoothing:none}
.gsv-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.22) 3px);mix-blend-mode:multiply}
.gsv-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 86% 84% at 50% 50%,transparent 66%,rgba(0,0,0,.38) 100%)}
:root[data-theme="light"] :is(.gsv-scan,.gsv-vignette){display:none}
body>*:not(.gsv-field){position:relative;z-index:1}

/* ── chrome: the top bar (instrument-top) ── */
.bar{position:sticky;top:0;z-index:100;min-height:44px;display:flex;align-items:center;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);background:color-mix(in srgb,var(--void) 84%,transparent);backdrop-filter:blur(8px)}
.bar .wrap{display:flex;align-items:center;gap:24px;width:100%}
.bar-identity{display:flex;align-items:center;gap:24px;min-width:0}
.bar-status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.bar-nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.bar-link{color:var(--text-dim);display:inline-flex;align-items:center;transition:color var(--dur-fast)}
.bar-link:hover,.bar-link.is-active{color:var(--accent)}
.bar-link svg{width:14px;height:14px;display:block}
.theme-toggle{display:inline-flex;align-items:center;color:var(--text-dim);font:inherit;letter-spacing:inherit;text-transform:inherit}
.theme-toggle:hover{color:var(--accent)}
.theme-toggle kbd{color:inherit}
@media(max-width:720px){.bar-status{display:none}.bar .wrap{gap:14px}.bar-nav{gap:10px}.theme-toggle kbd{display:none}}

.wordmark{color:var(--glyph);text-shadow:var(--glow);letter-spacing:.34em;font-size:12px;font-weight:400;text-transform:uppercase;display:inline-block}
.wordmark.is-glitch{text-shadow:1px 0 0 rgba(255,90,160,.3),-1px 0 0 rgba(90,200,255,.28),0 0 9px rgba(140,120,235,.55);transform:translateX(.6px)}
:root[data-theme="light"] .wordmark.is-glitch{text-shadow:none;transform:none}

/* ── dots (fleet .dot) ── */
.dot{display:inline-block;width:6px;height:6px;background:var(--idle);vertical-align:middle;flex:none}
.dot.is-on{background:var(--online);box-shadow:0 0 6px var(--online)}
.dot.is-live{background:var(--live);box-shadow:0 0 6px var(--live)}
.dot.is-warn{background:var(--update)}
.dot.is-err{background:var(--error)}
:root[data-theme="light"] .dot{box-shadow:none}

/* ── eyebrows and section headings (zen .who, fleet-block h2) ── */
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.sec-h{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--gsv-font-mono);font-size:12px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--label)}
.sec-h::before{content:"";width:7px;height:7px;background:var(--accent);box-shadow:0 0 8px var(--accent);display:inline-block;flex:none}
:root[data-theme="light"] .sec-h::before{box-shadow:none}
.sec-h .count{color:var(--faint);letter-spacing:.1em;margin-left:auto;font-variant-numeric:tabular-nums}

/* ── buttons (.ibtn: square, tracked, glowing primary) ── */
.ibtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--gsv-font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--border-raised);color:var(--accent);background:transparent;white-space:nowrap;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast)}
.ibtn:hover{border-color:var(--accent);background:var(--hover);text-decoration:none}
.ibtn.is-primary{background:#5a52a8;border-color:var(--primary-hi);color:#fff;box-shadow:0 0 18px rgba(120,110,230,.4)}
.ibtn.is-primary:hover{background:var(--primary-hi);box-shadow:0 0 28px rgba(120,110,230,.7)}
.ibtn.is-lg{padding:12px 22px;font-size:11.5px}
.ibtn:disabled{opacity:.45;cursor:default}
:root[data-theme="light"] .ibtn.is-primary{background:var(--accent);border-color:var(--accent-bright);box-shadow:none}
:root[data-theme="light"] .ibtn.is-primary:hover{background:var(--accent-bright);box-shadow:none}
/* text actions are the instrument's default */
.tbtn{color:var(--text-dim);padding:4px 0;font:inherit}
.tbtn:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── inputs (TextInput) ── */
.tin{width:100%;font-family:var(--gsv-font-mono);font-size:15px;letter-spacing:.04em;color:var(--text-hi);background:var(--panel-2);border:1px solid var(--border-raised);padding:11px 13px;outline:none;transition:border-color .14s,box-shadow .14s}
.tin::placeholder{color:#565199;letter-spacing:.08em}
.tin:hover{border-color:var(--primary-hi)}
.tin:focus{border-color:var(--accent);box-shadow:0 0 0 1px rgba(150,140,255,.22),0 0 16px rgba(150,140,255,.14);text-shadow:var(--glow-focus)}
:root[data-theme="light"] .tin::placeholder{color:var(--faint)}
:root[data-theme="light"] .tin:focus{box-shadow:0 0 0 1px var(--accent)}
@media(max-width:720px){.tin{font-size:16px}}

/* ── panels and rails ── */
.panel{background:var(--panel);border:1px solid var(--border);padding:16px}
.panel.is-raised{border-color:var(--border-raised)}
.rail{border-left:2px solid var(--border);padding-left:14px}

/* ── the voices: the ship speaks in Host Grotesk ── */
.ship{font-family:var(--gsv-font-prose);font-weight:400;font-size:clamp(20px,2.3vw,32px);line-height:1.28;color:var(--text-hi);text-wrap:pretty}
.human{font-family:var(--gsv-font-prose);font-weight:500;font-size:clamp(18px,1.7vw,24px);line-height:1.3;color:var(--accent)}
.prose{font-family:var(--gsv-font-prose);font-size:16px;line-height:1.6;color:var(--label);text-wrap:pretty}
.prose strong{color:var(--text-hi);font-weight:600}
.prose a{color:var(--link)}
.prose a:hover{color:var(--link-hover)}
.prose code{font-family:var(--gsv-font-mono);font-size:.78em;color:var(--label);background:var(--panel-2);padding:.05em .35em}
.note{font-size:12px;color:var(--text-dim);letter-spacing:.02em}
.note.is-ok{color:var(--online)}
.note.is-err{color:var(--error)}

/* ── footer ── */
.foot{border-top:1px solid var(--border);padding:22px 0 56px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
.foot-left,.foot-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-links{align-items:flex-start}
.foot a{color:var(--text-dim)}
.foot a:hover{color:var(--accent)}
.foot-blog{display:flex;flex-direction:column;align-items:center;gap:4px}
.foot-blog>a:first-child{line-height:17px}
.foot-icon{display:inline-flex;align-items:center}
.foot-icon svg{width:17px;height:17px;display:block}
.foot-rss svg{width:10px;height:10px}
.foot .is-plain{text-transform:none;letter-spacing:.04em}
@media(max-width:720px){.foot-row{flex-direction:column;align-items:flex-start}}

@media(prefers-reduced-motion:reduce){.wordmark.is-glitch{transform:none}}