/* GENERATED by .design-sync/make-global-css.mjs — do not edit.
   Concatenation of: tokens/base.css, tokens/effects.css */

/* ---- tokens/base.css ---- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
}
html { overflow-x: hidden; }

body {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  margin: 0;
}
h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); line-height: 1.14; }
h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-heading); line-height: 1.2; }
h3 { font-size: var(--text-xl);  letter-spacing: var(--tracking-heading); }

p { text-wrap: pretty; }

a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }

code, pre, .mono { font-family: var(--font-mono); }

::selection { background: color-mix(in srgb, var(--c-violet) 40%, transparent); }

:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-neutral-700);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: none; border-radius: 50%;
  background: var(--color-accent); cursor: pointer;
}

@media (max-width: 780px) {
  h1 { font-size: clamp(26px, 7.5vw, 38px); }
  h2 { font-size: clamp(20px, 5.4vw, 27px); }
}

/* ---- tokens/effects.css ---- */
:root {
  --shadow-sm: 0 1px 3px rgba(6, 2, 16, 0.4);
  --shadow-md: 0 6px 20px rgba(6, 2, 16, 0.45);
  --shadow-lg: 0 18px 48px rgba(6, 2, 16, 0.55);

  /* A spectrum hue glowing against the dark ground. */
  --glow-soft:   0 0 14px color-mix(in srgb, var(--c-cyan) 45%, transparent);
  --glow-strong: 0 0 24px color-mix(in srgb, var(--c-violet) 40%, transparent);

  --blur-chrome: blur(14px) saturate(1.15);
}

/* The signature ground: a fine star field over slow nebula washes.
   Apply to the outermost page element. The star layers scroll; the nebulae
   are fixed, so the page feels like it moves through depth. */
.cosmic-ground {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.7px),
    radial-gradient(rgba(45, 212, 245, 0.34) 1px, transparent 1.9px),
    radial-gradient(rgba(240, 56, 159, 0.30) 1px, transparent 1.9px),
    radial-gradient(rgba(255, 179, 64, 0.26) 1px, transparent 1.9px),
    radial-gradient(ellipse 900px 620px at 12% 4%,  rgba(91, 124, 250, 0.16), transparent 70%),
    radial-gradient(ellipse 780px 560px at 88% 22%, rgba(240, 56, 159, 0.13), transparent 70%),
    radial-gradient(ellipse 1000px 700px at 46% 62%, rgba(168, 85, 247, 0.15), transparent 72%),
    radial-gradient(ellipse 640px 460px at 8% 88%,  rgba(45, 212, 245, 0.10), transparent 70%);
  background-size:
    260px 210px, 330px 270px, 210px 240px, 420px 350px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position:
    0 0, 120px 80px, 60px 170px, 200px 30px,
    0 0, 0 0, 0 0, 0 0;
  background-attachment:
    scroll, scroll, scroll, scroll,
    fixed, fixed, fixed, fixed;
}

/* A hairline that sweeps the full spectrum. Use under sticky chrome. */
.spectrum-rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--c-cyan) 55%, transparent) 14%,
    color-mix(in srgb, var(--c-violet) 50%, transparent) 38%,
    color-mix(in srgb, var(--c-magenta) 50%, transparent) 62%,
    color-mix(in srgb, var(--c-gold) 45%, transparent) 84%,
    transparent);
}

@keyframes cosmic-flow {
  0%   { left: 0%;                 opacity: 0; }
  12%  {                           opacity: 1; }
  85%  {                           opacity: 1; }
  100% { left: calc(100% - 8px);   opacity: 0; }
}
@keyframes cosmic-flow-reverse {
  0%   { right: 0%;                opacity: 0; }
  12%  {                           opacity: 1; }
  85%  {                           opacity: 1; }
  100% { right: calc(100% - 8px);  opacity: 0; }
}
@keyframes cosmic-pulse {
  0%   { opacity: 0.5; }
  50%  { opacity: 0.12; }
  100% { opacity: 0.5; }
}