@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Orbitron';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/orbitron-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* Generated from src/tokens.js — do not edit values here. */
  --color-base: #070B1E;
  --color-surface: #0F1638;
  --color-surface-raised: #161F4D;
  --color-text: #F2F6FF;
  --color-text-muted: #AFBCE6;
  --color-cyan: #35E9FF;
  --color-magenta: #FF69E0;
  --color-lime: #C2FF5C;
  --color-yellow: #FFD86B;
  --color-ink: #070B1E;
  --color-border: rgba(175, 188, 230, 0.24);
  --color-border-strong: rgba(175, 188, 230, 0.45);
  --color-focus: #FFD86B;
  --color-scrim: rgba(7, 11, 30, 0.86);
  --gradient-brand: linear-gradient(104deg, #35E9FF 0%, #FF69E0 52%, #C2FF5C 100%);
  --gradient-surface-sheen: linear-gradient(160deg, rgba(53, 233, 255, 0.12), rgba(255, 105, 224, 0.1) 55%, rgba(194, 255, 92, 0.08));
  --gradient-spectrum-bar: linear-gradient(90deg, #35E9FF, #FF69E0 45%, #FFD86B 72%, #C2FF5C);
  --gradient-ambient: radial-gradient(58rem 40rem at 8% -12%, rgba(53, 233, 255, 0.16), transparent 60%), radial-gradient(50rem 34rem at 96% 2%, rgba(255, 105, 224, 0.14), transparent 62%), radial-gradient(44rem 34rem at 50% 112%, rgba(194, 255, 92, 0.1), transparent 66%);
  --font-display: 'Orbitron', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --type-display: clamp(2.25rem, 1.35rem + 4.4vw, 4.25rem);
  --type-h1: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --type-h2: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  --type-h3: clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
  --type-lead: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --type-body: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --type-small: 0.875rem;
  --type-eyebrow: 0.78rem;
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.18em;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --radius-sm: 0.6rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-pill: 999px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-soft: cubic-bezier(0.22, 1.25, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 440ms;
  --duration-press: 110ms;
  --duration-ambient: 7s;
  --glow-cyan: 0 0 0 1px rgba(53, 233, 255, 0.35), 0 20px 45px -22px rgba(53, 233, 255, 0.75);
  --glow-magenta: 0 0 0 1px rgba(255, 105, 224, 0.35), 0 20px 45px -22px rgba(255, 105, 224, 0.75);
  --glow-lime: 0 0 0 1px rgba(194, 255, 92, 0.35), 0 20px 45px -22px rgba(194, 255, 92, 0.75);
  --glow-yellow: 0 0 0 1px rgba(255, 216, 107, 0.35), 0 20px 45px -22px rgba(255, 216, 107, 0.75);
  --shadow-card: 0 24px 60px -34px rgba(7, 11, 30, 0.95);
  --shadow-focus: 0 0 0 3px rgba(255, 216, 107, 0.55);
  --brand-glow: drop-shadow(0 6px 16px rgba(53, 233, 255, 0.45));
  --layout-max-width: 74rem;
  --layout-measure: 68ch;
  --layout-gutter: clamp(1rem, 4vw, 2.5rem);
  --layout-section-gap: clamp(2.5rem, 6vw, 5rem);
  --layout-grid-min-card: 17rem;
  --layout-anchor-offset: 6rem;
  --layout-anchor-offset-mobile: 9rem;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:var(--color-base);
  background-image:var(--gradient-ambient);
  background-attachment:fixed;
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--type-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,blockquote{margin:0}
ul,ol{padding-left:1.3rem}
img,svg,picture{max-width:100%}
img{height:auto;border-style:none}
a{color:var(--color-cyan);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--color-lime)}
strong{color:var(--color-text)}
hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-lg) 0}

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:3px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-focus);
}

/* -------------------------------------------------------------- layout */
.wrap{
  width:100%;
  max-width:var(--layout-max-width);
  margin-inline:auto;
  padding-inline:var(--layout-gutter);
}
main{flex:1 0 auto;padding-block:clamp(2rem,5vw,3.5rem) var(--layout-section-gap)}
.stack{display:flex;flex-direction:column;gap:var(--space-md)}
.stack--lg{gap:var(--layout-section-gap)}
.page-head{display:flex;flex-direction:column;gap:var(--space-2xs)}

/* ------------------------------------------------------------ type */
h1{font-family:var(--font-display);font-size:var(--type-h1);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:800}
h2{font-family:var(--font-display);font-size:var(--type-h2);line-height:var(--leading-heading);font-weight:700}
h3{font-family:var(--font-display);font-size:var(--type-h3);line-height:var(--leading-heading);font-weight:700}
h4,h5,h6{font-family:var(--font-display);font-size:var(--type-h3);line-height:var(--leading-heading);font-weight:600}
.eyebrow{
  font-family:var(--font-display);
  font-size:var(--type-eyebrow);
  font-weight:700;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--color-lime);
}
.lead{font-size:var(--type-lead);color:var(--color-text-muted);max-width:var(--layout-measure)}
.updated{font-size:var(--type-small);color:var(--color-text-muted)}
.display{
  font-family:var(--font-display);
  font-size:var(--type-display);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  font-weight:800;
}
.spectrum-text{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ------------------------------------------------------------- header */
.skip{
  position:absolute;
  left:var(--space-sm);
  top:-6rem;
  z-index:40;
  padding:var(--space-2xs) var(--space-sm);
  background:var(--color-yellow);
  color:var(--color-ink);
  border-radius:var(--radius-pill);
  font-weight:700;
  text-decoration:none;
  transition:top var(--duration-fast) var(--ease-spring-soft);
}
.skip:focus{top:var(--space-sm)}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--color-scrim);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
}
.site-header::after{
  content:"";
  display:block;
  height:2px;
  background:var(--gradient-spectrum-bar);
  opacity:.75;
}
.site-header__inner,.site-footer__inner{
  width:100%;
  max-width:var(--layout-max-width);
  margin-inline:auto;
  padding-inline:var(--layout-gutter);
}
.site-header__inner{
  min-height:4.25rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-sm);
  padding-block:var(--space-2xs);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  text-decoration:none;
  color:var(--color-text);
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:transform var(--duration-base) var(--ease-spring);
}
.brand:hover{transform:translateY(-2px) scale(1.02)}
.brand__mark{display:block;flex:0 0 auto;filter:var(--brand-glow)}
.brand__word{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-nav{display:flex;flex-wrap:wrap;gap:var(--space-3xs)}
.site-nav__link{
  display:inline-flex;
  align-items:center;
  padding:.45rem .95rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  text-decoration:none;
  color:var(--color-text);
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:transform var(--duration-base) var(--ease-spring), background-color var(--duration-fast) linear, border-color var(--duration-fast) linear, color var(--duration-fast) linear;
}
.site-nav__link:hover{transform:translateY(-3px);background:var(--color-surface-raised);border-color:var(--color-border-strong);color:var(--color-text)}
.site-nav__link:active{transform:translateY(-1px) scale(.97);transition-duration:var(--duration-press)}
.site-nav__link[aria-current="page"],.site-nav__link.is-active{
  color:var(--color-ink);
  background:var(--gradient-brand);
  border-color:transparent;
  box-shadow:var(--glow-cyan);
}

/* -------------------------------------------------------------- footer */
.site-footer{
  margin-top:auto;
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
}
.site-footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2xs);
  padding-block:var(--space-md);
  font-size:var(--type-small);
  color:var(--color-text-muted);
}
.site-footer__copy{margin:0}
.site-footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs)}
.site-footer__links a{color:var(--color-text-muted);text-decoration:none}
.site-footer__links a:hover{color:var(--color-cyan);text-decoration:underline}

/* ------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2xs);
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-spring), background-color var(--duration-fast) linear, border-color var(--duration-fast) linear, color var(--duration-fast) linear;
  will-change:transform;
}
.btn--md{padding:.75rem 1.4rem;font-size:.85rem}
.btn--lg{padding:1rem 1.9rem;font-size:1rem}
.btn--primary{background:var(--gradient-brand);color:var(--color-ink);box-shadow:var(--glow-cyan)}
.btn--primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:var(--glow-magenta);color:var(--color-ink)}
.btn--primary:active{transform:translateY(1px) scale(.96);transition-duration:var(--duration-press)}
.btn--secondary{background:var(--color-surface-raised);color:var(--color-text);border-color:var(--color-border-strong)}
.btn--secondary:hover{transform:translateY(-3px) scale(1.02);border-color:var(--color-cyan);box-shadow:var(--glow-cyan);color:var(--color-text)}
.btn--secondary:active{transform:translateY(1px) scale(.96);transition-duration:var(--duration-press)}
.btn--ghost{background:transparent;color:var(--color-cyan);border-color:var(--color-cyan)}
.btn--ghost:hover{transform:translateY(-3px);background:var(--color-surface-raised);box-shadow:var(--glow-cyan);color:var(--color-cyan)}
.btn--ghost:active{transform:translateY(1px) scale(.96);transition-duration:var(--duration-press)}
.btn--block{width:100%}

/* -------------------------------------------------------------- badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .7rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-family:var(--font-display);
  font-size:var(--type-eyebrow);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.3;
  white-space:normal;
  max-width:100%;
  overflow-wrap:anywhere;
}
.badge--cyan{background:var(--color-cyan);color:var(--color-ink)}
.badge--magenta{background:var(--color-magenta);color:var(--color-ink)}
.badge--lime{background:var(--color-lime);color:var(--color-ink)}
.badge--yellow{background:var(--color-yellow);color:var(--color-ink)}
.badge--neutral{background:var(--color-surface-raised);color:var(--color-text);border-color:var(--color-border-strong)}

/* --------------------------------------------------------------- cards */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-2xs);
  padding:var(--space-md);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background-color:var(--color-surface);
  background-image:var(--gradient-surface-sheen);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-spring), border-color var(--duration-fast) linear;
}
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:var(--gradient-spectrum-bar);
  opacity:.6;
  transition:opacity var(--duration-fast) linear;
}
.card:hover{transform:translateY(-6px);border-color:var(--color-cyan);box-shadow:var(--shadow-card),var(--glow-cyan)}
.card:hover::before{opacity:1}
.card:active{transform:translateY(-2px) scale(.988);transition-duration:var(--duration-press)}
.card--link{text-decoration:none;color:inherit}
.card--link:hover{color:inherit}
.card__media{margin:calc(var(--space-2xs) * -1) calc(var(--space-2xs) * -1) var(--space-2xs);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);background:var(--color-base)}
.card__media img{display:block;width:100%}
.card__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2xs)}
.card__title{margin-top:var(--space-2xs)}
.card__body{color:var(--color-text-muted)}
.card__body p{margin:0}
.card__meta{font-size:var(--type-small);color:var(--color-text-muted)}
.card__cta{
  margin-top:auto;
  padding-top:var(--space-2xs);
  font-family:var(--font-display);
  font-size:var(--type-small);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-cyan);
}

/* ---------------------------------------------------- section headings */
.section-heading{display:flex;flex-direction:column;gap:var(--space-2xs);max-width:var(--layout-measure)}
.section-heading h2,.section-heading h3{font-size:var(--type-h2)}
.section-heading h4,.section-heading h5,.section-heading h6{font-size:var(--type-h3)}
.section-heading--center{align-items:center;text-align:center;margin-inline:auto}
.section-heading--end{align-items:flex-end;text-align:right;margin-left:auto}

/* --------------------------------------------------------------- grids */
.grid{display:grid;gap:var(--space-md)}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--layout-grid-min-card)),1fr))}
.grid--2,.grid--3{grid-template-columns:1fr}
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1440px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------------- prose */
.prose{display:flex;flex-direction:column;gap:var(--space-sm);max-width:var(--layout-measure)}
.prose h2{margin-top:var(--space-md)}
.prose h3{margin-top:var(--space-sm)}
.prose p,.prose li{color:var(--color-text-muted)}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:var(--space-3xs)}
.prose a{color:var(--color-cyan)}
.prose :target{scroll-margin-top:var(--layout-anchor-offset)}
.prose h2[id],.prose h3[id]{scroll-margin-top:var(--layout-anchor-offset)}

/* ------------------------------------------- table of contents (legal) */
.toc{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  padding:var(--space-sm) var(--space-md);
  max-width:var(--layout-measure);
}
.toc__title{
  font-family:var(--font-display);
  font-size:var(--type-eyebrow);
  font-weight:700;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--color-lime);
}
/* The list sits inside .prose, whose ul/ol rule sets display:flex — these selectors
   are deliberately descendant-qualified so the grid wins the cascade. */
.toc .toc__list{display:grid;grid-template-columns:1fr;gap:var(--space-3xs);margin-top:var(--space-2xs);padding-left:0;list-style:none}
.toc .toc__list a{
  display:inline-flex;
  padding-block:.15rem;
  color:var(--color-cyan);
  font-size:var(--type-small);
  text-decoration:none;
}
.toc .toc__list a:hover{color:var(--color-lime);text-decoration:underline}
@media (min-width:768px){
  .toc .toc__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3xs) var(--space-md)}
}

/* ------------------------------------------------- long-form documents */
/* Note: .toc and .toc__* are owned by the shared TableOfContents component (see the
   contents block above). This adds the marked notice used for placeholder copy. */
.notice{
  display:flex;
  flex-direction:column;
  gap:var(--space-3xs);
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-border-strong);
  border-left:var(--space-3xs) solid var(--color-yellow);
  border-radius:var(--radius-md);
  background-color:var(--color-surface-raised);
  max-width:var(--layout-measure);
}
.notice__flag{font-size:var(--type-small)}
.notice strong{color:var(--color-yellow)}

/* -------------------------------------------------------- notices/misc */
.draft{
  border:1px solid var(--color-yellow);
  border-left-width:6px;
  border-radius:var(--radius-md);
  background:var(--color-surface-raised);
  color:var(--color-yellow);
  padding:var(--space-sm) var(--space-md);
  max-width:var(--layout-measure);
}
.draft strong{color:var(--color-yellow)}

/* ------------------------------------------------------ landing page */
.page-head--hero{display:grid;gap:var(--space-lg);align-items:center}
.page-head__copy{display:flex;flex-direction:column;gap:var(--space-2xs)}
.hero__lead{font-size:var(--type-lead);color:var(--color-text-muted);max-width:var(--layout-measure)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs)}
.hero__note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);margin-top:var(--space-2xs);font-size:var(--type-small);color:var(--color-text-muted)}
.hero-art{margin:0}
.hero-art img{
  display:block;
  width:100%;
  border-radius:var(--radius-lg);
  border:1px solid var(--color-border-strong);
  box-shadow:var(--shadow-card);
  animation:hero-float var(--duration-ambient) var(--ease-spring-soft) infinite alternate;
}
@keyframes hero-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.sections{display:flex;flex-direction:column;gap:var(--layout-section-gap)}
.sections [id]{scroll-margin-top:var(--layout-anchor-offset)}
.section-block{display:flex;flex-direction:column;gap:var(--space-lg)}
.cta-band{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-lg);
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-xl);
  background-color:var(--color-surface);
  background-image:var(--gradient-surface-sheen);
  box-shadow:var(--shadow-card);
  text-align:center;
}
.cta-band .section-heading{align-items:center;text-align:center}
.cta-band__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs)}
.cta-band__note{font-size:var(--type-small);color:var(--color-text-muted);max-width:var(--layout-measure)}
@media (min-width:768px){
  .page-head--hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}

/* ----------------------------------------------------------- narrow view */
@media (max-width:768px){
  :root{--layout-anchor-offset:var(--layout-anchor-offset-mobile)}
  .site-header__inner{justify-content:space-between}
  .brand{font-size:1rem}
  .site-nav__link{padding:.4rem .7rem;font-size:.75rem;letter-spacing:.08em}
}

/* ------------------------------------------- reduced motion (a11y) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
  .card:hover,.btn:hover,.brand:hover,.site-nav__link:hover{transform:none}
  .hero-art img{animation:none}
}