/* ============================================================
   Ultrafast, explained — base layer
   Tokens, reset, typography, focus, utilities.
   Independent explainer. Not affiliated with OpenAI or Cerebras.
   ============================================================ */

/* ---------- 1. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

/* Components below set display:grid/flex, which would otherwise beat the
   UA [hidden] rule and leave "hidden" panels on screen. */
[hidden] { display: none !important; }

img, svg, canvas, video { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

table { border-collapse: collapse; }

/* ---------- 2. Tokens — dark presentation (default) ---------- */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:            #05070A;
  --bg-veil:       #080B10;
  --surface:       #0D131A;
  --surface-2:     #131C25;
  --surface-3:     #1A2632;
  --surface-glass: rgba(13, 19, 26, 0.78);

  /* Rules */
  --line:          rgba(180, 210, 232, 0.13);
  --line-2:        rgba(180, 210, 232, 0.24);
  --line-strong:   rgba(180, 210, 232, 0.42);

  /* Ink */
  --ink:           #E9F3F9;
  --ink-2:         #A6BCCD;
  --ink-3:         #8CA2B4;
  --ink-invert:    #04060A;

  /* Signal — Ultrafast (lime -> sky, after the source's gradient signature) */
  --uf-lime:       #C9FF4D;
  --uf-lime-deep:  #93E000;
  --uf-sky:        #4FCBFF;
  --uf-sky-deep:   #1495DC;
  --uf-text:       #C9FF4D;
  --uf-text-alt:   #7FDCFF;
  --uf-grad:       linear-gradient(100deg, var(--uf-lime) 0%, #7BEF9C 42%, var(--uf-sky) 100%);
  --uf-grad-soft:  linear-gradient(100deg, rgba(201,255,77,.22) 0%, rgba(79,203,255,.22) 100%);
  --uf-glow:       0 0 0 1px rgba(201,255,77,.30), 0 8px 40px -12px rgba(120,230,190,.45);

  /* Signal — Standard (deliberately cool + quiet) */
  --std:           #8AA2B8;
  --std-deep:      #5B7A96;
  --std-text:      #A9C0D4;
  --std-grad:      linear-gradient(100deg, #7F9AB2 0%, #5B7A96 100%);
  --std-btn:       linear-gradient(100deg, #A0B6C9 0%, #8098AE 100%);
  --std-grad-soft: linear-gradient(100deg, rgba(138,162,184,.20) 0%, rgba(91,122,150,.20) 100%);

  /* Status */
  --good:          #6FE39A;
  --good-ink:      #0A2A18;
  --warn:          #FFC061;
  --warn-ink:      #2E1D00;
  --bad:           #FF8A8A;
  --bad-ink:       #360C0C;
  --info:          #7FDCFF;

  /* Illustrative / derived callout */
  --derived:       #FFC061;
  --derived-bg:    rgba(255, 192, 97, 0.10);
  --derived-line:  rgba(255, 192, 97, 0.38);

  /* Type */
  --font-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo,
               Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

  /* Fluid type scale */
  --t-mega:  clamp(3.25rem, 1.20rem + 8.6vw, 8.5rem);
  --t-xxl:   clamp(2.35rem, 1.35rem + 4.2vw, 4.25rem);
  --t-xl:    clamp(1.85rem, 1.28rem + 2.4vw, 2.9rem);
  --t-lg:    clamp(1.4rem,  1.12rem + 1.2vw, 1.95rem);
  --t-md:    clamp(1.09rem, 1.02rem + 0.32vw, 1.24rem);
  --t-base:  clamp(1.0rem,  0.97rem + 0.16vw, 1.075rem);
  --t-sm:    clamp(0.875rem, 0.86rem + 0.08vw, 0.925rem);
  --t-xs:    0.78rem;
  --t-xxs:   0.695rem;

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 4rem;
  --sp-9: 6rem;
  --gutter: clamp(1.05rem, 0.4rem + 2.6vw, 3rem);
  --measure: 68ch;
  --shell: 1220px;

  /* Radii + elevation */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 6px 20px -12px rgba(0,0,0,.8);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 60px -28px rgba(0,0,0,.9);

  /* Motion */
  --dur-1: 140ms; --dur-2: 260ms; --dur-3: 480ms; --dur-4: 900ms;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.55,.06,.68,.19);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--uf-sky);
}

/* ---------- 3. Tokens — light presentation ---------- */

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #F2F6F8;
  --bg-veil:       #EAF0F4;
  --surface:       #FFFFFF;
  --surface-2:     #F4F8FA;
  --surface-3:     #E7EEF3;
  --surface-glass: rgba(255, 255, 255, 0.84);

  --line:          rgba(12, 38, 56, 0.13);
  --line-2:        rgba(12, 38, 56, 0.22);
  --line-strong:   rgba(12, 38, 56, 0.42);

  --ink:           #071119;
  --ink-2:         #3D5567;
  --ink-3:         #4E6577;
  --ink-invert:    #FFFFFF;

  /* Lime stays a fill colour in light mode; accent *text* darkens to stay legible. */
  --uf-lime:       #9FE300;
  --uf-lime-deep:  #4E7500;
  --uf-sky:        #0FA3E8;
  --uf-sky-deep:   #036592;
  --uf-text:       #2F6100;
  --uf-text-alt:   #05678F;
  --uf-grad:       linear-gradient(100deg, #8FDA00 0%, #2FC08A 46%, #0FA3E8 100%);
  --uf-grad-soft:  linear-gradient(100deg, rgba(143,218,0,.20) 0%, rgba(15,163,232,.18) 100%);
  --uf-glow:       0 0 0 1px rgba(47,97,0,.20), 0 10px 34px -16px rgba(15,120,90,.55);

  --std:           #5B7A96;
  --std-deep:      #37536B;
  --std-text:      #38536A;
  --std-grad:      linear-gradient(100deg, #7E99B0 0%, #4E6C86 100%);
  --std-btn:       linear-gradient(100deg, #9CB2C4 0%, #7B94AA 100%);
  --std-grad-soft: linear-gradient(100deg, rgba(91,122,150,.20) 0%, rgba(55,83,107,.16) 100%);

  --good:          #0B7A44;
  --good-ink:      #FFFFFF;
  --warn:          #9A5B00;
  --warn-ink:      #FFFFFF;
  --bad:           #B3261E;
  --bad-ink:       #FFFFFF;
  --info:          #05678F;

  --derived:       #8A5000;
  --derived-bg:    rgba(154, 91, 0, 0.09);
  --derived-line:  rgba(154, 91, 0, 0.34);

  --shadow-1: 0 1px 2px rgba(12,38,56,.10), 0 8px 22px -14px rgba(12,38,56,.35);
  --shadow-2: 0 2px 8px rgba(12,38,56,.10), 0 28px 60px -32px rgba(12,38,56,.45);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--uf-sky-deep);
}

/* ---------- 4. Page ---------- */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.62;
  letter-spacing: -0.006em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Fixed atmospheric ground so first paint is never a flat void. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120vw 70vh at 78% -12%, rgba(79,203,255,.15), transparent 62%),
    radial-gradient(90vw 60vh at 8% 4%,   rgba(201,255,77,.11),  transparent 60%),
    radial-gradient(80vw 80vh at 50% 118%, rgba(79,203,255,.10), transparent 64%);
}

:root[data-theme="light"] body::before {
  background:
    radial-gradient(120vw 70vh at 78% -12%, rgba(15,163,232,.16), transparent 62%),
    radial-gradient(90vw 60vh at 8% 4%,   rgba(143,218,0,.20),  transparent 60%),
    radial-gradient(80vw 80vh at 50% 118%, rgba(15,163,232,.12), transparent 64%);
}

/* Faint engineering grid — reads as instrumentation, not decoration. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(120vw 100vh at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120vw 100vh at 50% 30%, #000 20%, transparent 78%);
}

/* ---------- 5. Typography primitives ---------- */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.031em;
  text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); line-height: 1.16; letter-spacing: -0.022em; }
h4 { font-size: var(--t-md); line-height: 1.28; letter-spacing: -0.014em; }

p { text-wrap: pretty; }

strong, b { font-weight: 680; color: var(--ink); }
em { font-style: italic; }

code, kbd, samp, .mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Every changing digit on the page uses this. */
.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

kbd {
  display: inline-block;
  padding: .08em .42em;
  font-size: .82em;
  line-height: 1.5;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- 6. Links ---------- */

a:where(:not([class])), .link {
  color: var(--uf-text-alt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--uf-text-alt) 45%, transparent);
  border-radius: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
a:where(:not([class])):hover, .link:hover {
  text-decoration-color: currentColor;
  color: var(--ink);
}

/* ---------- 7. Focus ---------- */

:focus { outline: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
  position: relative;
  z-index: 5;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 200;
  transform: translateY(-260%);
  padding: .7rem 1.15rem;
  background: var(--uf-grad);
  color: #04060A;
  font-weight: 700;
  font-size: var(--t-sm);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- 8. Utilities ---------- */

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 860px; }

.measure { max-width: var(--measure); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.center { text-align: center; }
.nowrap { white-space: nowrap; }

.gradient-text {
  background: var(--uf-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Fallback for engines without background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text { color: var(--uf-text); background: none; }
}

.muted  { color: var(--ink-2); }
.muted-2{ color: var(--ink-3); }

hr.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
  margin-block: var(--sp-7);
}

/* ---------- 9. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Manual override: the page also exposes a Motion switch. */
:root[data-motion="off"] * ,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
:root[data-motion="off"] html { scroll-behavior: auto; }

/* ---------- 10. Print (kept sane, not a feature) ---------- */

@media print {
  body::before, body::after { display: none; }
  .site-header, .hud, .scroll-cue { display: none !important; }
}