/* ===========================================================================
   ATOMYS_OS — DESIGN TOKENS (modernized)
   Mobile-first. CSS @layer organized. Fluid type. prefers-reduced-motion safe.
   =========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ─── @layer reset ─────────────────────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }
  body {
    margin: 0;
    min-height: 100dvh;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote {
    margin: 0;
  }
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  fieldset {
    border: none;
  }
  dd {
    margin-inline-start: 0;
  }
}

/* ─── @layer tokens ────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* ── Color seeds — only these change between palettes.
       All -hi / -lo / scale variants are derived via OKLCH relative color
       syntax: change the seed and the whole ramp follows.

       Browser support: Chrome 119+, Safari 16.4+, Firefox 128+.

       Tuning knobs (kept as custom props so palettes can also override the
       deltas if they need a tighter or looser ramp): */
    --hi-l: 0.1; /* lightness step for `-hi` variants */
    --lo-l: 0.15; /* lightness step for `-lo` variants */
    --bg-step: 0.04; /* lightness step between bg layers */
    --ink-down-1: 0.1; /* lightness drop ink-0 → ink-1 */
    --ink-down-2: 0.28; /* lightness drop ink-0 → ink-2 */
    --ink-down-3: 0.42; /* lightness drop ink-0 → ink-3 */
    --ink-tint-1: 0.015; /* chroma boost ink-1 (slight tint) */
    --ink-tint-2: 0.04; /* chroma boost ink-2 */
    --ink-tint-3: 0.06; /* chroma boost ink-3 */

    /* Backgrounds — bg-0 is the seed, others step lighter in equal increments */
    --bg-0: #07060d;
    --bg-1: oklch(
      from var(--bg-0) calc(l + var(--bg-step) * 0.75)
        calc(c + var(--bg-step) * 0.5) h
    );
    --bg-2: oklch(
      from var(--bg-0) calc(l + var(--bg-step) * 1.5)
        calc(c + var(--bg-step) * 1) h
    );
    --bg-3: oklch(
      from var(--bg-0) calc(l + var(--bg-step) * 2.25)
        calc(c + var(--bg-step) * 1.5) h
    );

    /* Ink — ink-0 is the seed (lightest); others step darker + slightly more
       chromatic so muted text stays subtly tinted with the palette hue. */
    --ink-0: #f4f1ff;
    --ink-1: oklch(
      from var(--ink-0) calc(l - var(--ink-down-1)) calc(c + var(--ink-tint-1))
        h
    );
    --ink-2: oklch(
      from var(--ink-0) calc(l - var(--ink-down-2)) calc(c + var(--ink-tint-2))
        h
    );
    --ink-3: oklch(
      from var(--ink-0) calc(l - var(--ink-down-3)) calc(c + var(--ink-tint-3))
        h
    );

    /* Brand & semantic seeds — -hi / -lo derived */
    --violet: #693efe;
    --violet-hi: oklch(from var(--violet) calc(l + var(--hi-l)) c h);
    --violet-lo: oklch(from var(--violet) calc(l - var(--lo-l)) c h);
    --lime: #d3fe3e;
    /* lime is already near-max lightness, so clamp the L bump to avoid
       clipping to pure white (which would lose contrast for .btn-lime text). */
    --lime-hi: oklch(from var(--lime) min(calc(l + var(--hi-l)), 0.97) c h);
    --danger: #ff3b6b;
    --danger-hi: oklch(from var(--danger) calc(l + var(--hi-l)) c h);

    /* Typography stacks (overridden by data-typeface on :root) */
    --font-sans: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-pixel: "VT323", "JetBrains Mono", monospace;

    /* Fluid typography ramp — replaces all hardcoded hero font-sizes.
       Slope tuned so each size hits its MAX at viewport width 1024px (the md
       breakpoint). At 1024px, 1vw = 10.24px, so X * 10.24 ≈ MAX_px. Below the
       min, the clamp floor catches it; above 1024px the cap holds. Net effect:
       desktop matches the original px values exactly while mobile scales down. */
    --fs-hero-xl: clamp(2.5rem, 11vw, 7rem); /* was 112px @ 1024+ */
    --fs-hero-lg: clamp(2.25rem, 8.6vw, 5.5rem); /* was 88px / 84px */
    --fs-hero-md: clamp(2rem, 7.4vw, 4.75rem); /* was 76px */
    --fs-display: clamp(3.5rem, 27.4vw, 17.5rem); /* was 280px (404) */
    --fs-h1: clamp(1.75rem, 5.1vw, 3.25rem); /* was 52px */
    --fs-h2: clamp(1.5rem, 3.7vw, 2.375rem); /* was 38px */
    --fs-h3: clamp(1.25rem, 2.75vw, 1.75rem); /* was 28px (section heads) */
    --fs-lede: clamp(1.125rem, 2.15vw, 1.375rem); /* was 22px */
    --fs-body: clamp(0.9375rem, 1.66vw, 1.0625rem); /* 15-17px */
    --fs-sm: 0.875rem; /* 14px — UI labels, secondary copy */
    --fs-ui: 0.8125rem; /* 13px — small UI text, tags inside rows */
    --fs-meta: 0.6875rem; /* 11px — chrome/labels */
    --fs-micro: 0.625rem; /* 10px */
    --fs-nano: 0.5625rem; /* 9px */

    /* Spacing — fluid gutter is the headline change */
    --gutter: clamp(1rem, 5vw, 2.5rem); /* replaces all `*px 40px` */
    --gutter-y: clamp(1.5rem, 4vw, 3.5rem);
    --rail-w: 40px;
    --bottom-h: clamp(36px, 4vw, 48px); /* was inverted (min > max) */
    --container: 1400px;

    /* Radii */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Effect intensity knobs (overridden per data-intensity) */
    --fx-scanline: 1;
    --fx-vignette: 1;
    --fx-crt-scan: 1;
    --fx-crt-scan-speed: 6s;
    --fx-vhs: 7s;
    --fx-chroma: 1;
    --fx-marquee: 32s;
    --fx-glitch-hover: 1;
    --fx-glow: 1;
    --fx-glyphs: 1;

    /* Motion */
    --t-fast: 120ms;
    --t-base: 220ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* a11y — motion ─────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --fx-vhs: 0s;
      --fx-crt-scan-speed: 0s;
      --fx-marquee: 0s;
      --fx-glitch-hover: 0;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ─── @layer base ──────────────────────────────────────────────────────── */
@layer base {
  html {
    /* Hard cap at the viewport so nothing inside the document tree can
       extend the page wider than what's visible. `overflow-x: clip` does
       NOT break `position: sticky` on descendants (`hidden` would). */
    overflow-x: clip;
  }
  body {
    background: var(--bg-0);
    color: var(--ink-0);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    /* Defensive cap — body is at most as wide as its containing block (html). */
    max-inline-size: 100%;
  }

  hr {
    border-color: var(--ink-3);
  }

  /* Skip-link — hidden until focused */
  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--lime);
    color: var(--bg-0);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    border-radius: var(--radius-s);
    transform: translateY(-200%);
    transition: transform var(--t-base) var(--ease);
    z-index: 999;
  }
  .skip-link:focus-visible {
    transform: translateY(0);
    outline: none;
  }

  /* Visible focus ring everywhere */
  :focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
    border-radius: var(--radius-s);
  }
}

/* ─── @layer components — primitives shared across every page ─────────── */
@layer components {
  /* === EFFECTS === */

  /* Scanlines (subtle CRT background)
     Implemented as an inline SVG `data:` URL rather than a
     `repeating-linear-gradient`. Reason: on iPhone (DPR 2/3) and at any
     non-100% browser zoom, a 3px-period gradient rarely divides evenly
     into the element's device-pixel height. The browser fills the
     boundary rows with anti-aliased values, and the previous
     `mix-blend-mode: screen` amplified those AA rows into visible
     "dead bands" where scanlines looked faint or missing entirely.
     `shape-rendering='crispEdges'` on the SVG <rect> + `image-rendering:
     pixelated` on the background tells the rasterizer to skip AA and
     snap to whole device pixels — no banding at any DPR or zoom level.
     `mix-blend-mode: screen` is gone too (it's the single biggest source
     of compositor weirdness on iOS Safari); the fill-opacity is bumped
     slightly so the perceived brightness on dark backdrops matches the
     prior screen-blended look. `--fx-scanline` is now applied via
     `opacity` on the layer rather than baked into the fill, so the
     intensity multiplier still works as before. */
  .scanlines {
    position: relative;
  }
  /* `position: fixed` on the pseudo (rather than `absolute` on the host or
     `background-attachment: fixed`) anchors the scanline layer to the
     viewport — it paints once and stays put while the page scrolls. The
     prior `absolute` setup made the lines scroll along with the content,
     and at the chosen 3px period that drift across long pages reads as
     visual chatter and contributes to fatigue. iOS Safari has historic
     bugs with `background-attachment: fixed` (it scales to the element
     instead of the viewport, and triggers repaint thrashing on scroll);
     a fixed-positioned pseudo avoids that path entirely. */
  .scanlines::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23ffffff' fill-opacity='0.10'/%3E%3C/svg%3E");
    background-size: 1px 3px;
    background-repeat: repeat;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
    opacity: var(--fx-scanline);
    z-index: 0;
  }
  .scanlines-strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23d3fe3e' fill-opacity='0.10'/%3E%3C/svg%3E");
  }

  /* Grid dots background */
  .dots-bg {
    background-image: radial-gradient(
      circle at 1px 1px,
      rgb(105 62 254 / 0.18) 1px,
      transparent 0
    );
    background-size: 24px 24px;
  }

  /* Noise grain */
  .noise {
    position: relative;
  }
  .noise::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* Glitch text on hover (uses data-text attr) */
  .glitch {
    position: relative;
    display: inline-block;
  }
  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  .glitch:hover::before {
    opacity: calc(0.85 * var(--fx-glitch-hover));
    color: var(--lime);
    transform: translate(-2px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
    animation: glitch-a 0.6s steps(2, end) infinite;
  }
  .glitch:hover::after {
    opacity: calc(0.85 * var(--fx-glitch-hover));
    color: var(--violet-hi);
    transform: translate(2px, 0);
    clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
    animation: glitch-b 0.55s steps(2, end) infinite;
  }
  @keyframes glitch-a {
    0%,
    100% {
      transform: translate(-2px, 0);
    }
    50% {
      transform: translate(-3px, 1px);
    }
  }
  @keyframes glitch-b {
    0%,
    100% {
      transform: translate(2px, 0);
    }
    50% {
      transform: translate(3px, -1px);
    }
  }

  /* Chromatic aberration title */
  .chroma {
    text-shadow:
      calc(-2px * var(--fx-chroma)) 0 0
        rgb(105 62 254 / calc(0.75 * var(--fx-chroma))),
      calc(2px * var(--fx-chroma)) 0 0
        rgb(211 254 62 / calc(0.55 * var(--fx-chroma)));
  }

  /* Animated gradient underline / fill */
  .under-grad {
    background: linear-gradient(90deg, var(--violet), var(--lime));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Pixel corners */
  .pixel-corners {
    clip-path: polygon(
      0 8px,
      8px 8px,
      8px 0,
      calc(100% - 8px) 0,
      calc(100% - 8px) 8px,
      100% 8px,
      100% calc(100% - 8px),
      calc(100% - 8px) calc(100% - 8px),
      calc(100% - 8px) 100%,
      8px 100%,
      8px calc(100% - 8px),
      0 calc(100% - 8px)
    );
  }

  /* Neon border */
  .neon-border {
    border: 1px solid color-mix(in oklab, var(--violet) 40%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--violet) 15%, transparent),
      0 0 24px color-mix(in oklab, var(--violet) 12%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 0.04);
  }
  .neon-border-lime {
    border: 1px solid color-mix(in oklab, var(--lime) 45%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--lime) 12%, transparent),
      0 0 24px color-mix(in oklab, var(--lime) 10%, transparent);
  }

  /* === BUTTONS — cyberpunk hex-notched ─────────────────────────── */
  @keyframes btnScan {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(200%);
    }
  }
  @keyframes btnGlitchNudge {
    0%,
    100% {
      transform: translate(0, 0);
    }
    20% {
      transform: translate(1px, -1px);
    }
    40% {
      transform: translate(-1px, 1px);
    }
    60% {
      transform: translate(1px, 1px);
    }
    80% {
      transform: translate(-1px, -1px);
    }
  }

  .btn-primary,
  .btn-ghost,
  .btn-danger,
  .btn-lime,
  .btn-outline {
    --btn-accent: var(--violet);
    --btn-accent-hi: color-mix(in oklab, var(--violet) 35%, var(--ink-0));
    --btn-bg: var(--bg-1);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding-block: 0.8125rem;
    padding-inline: 1.375rem;
    color: var(--btn-accent-hi);
    background: var(--btn-bg);
    border: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    min-height: 44px; /* WCAG tap target */
    clip-path: polygon(
      12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px
    );
    transition:
      color var(--t-fast),
      background var(--t-fast),
      text-shadow var(--t-fast);
  }
  .btn-primary::before,
  .btn-ghost::before,
  .btn-danger::before,
  .btn-lime::before,
  .btn-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: var(--btn-accent);
    clip-path: polygon(
      12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px,
      12px 0,
      12px 1.5px,
      1.5px 12.5px,
      1.5px calc(100% - 1.5px),
      calc(100% - 12.5px) calc(100% - 1.5px),
      calc(100% - 1.5px) calc(100% - 12.5px),
      calc(100% - 1.5px) 1.5px,
      12.5px 1.5px,
      12px 0
    );
    pointer-events: none;
    box-shadow: 0 0 18px var(--btn-accent);
  }
  .btn-primary::after,
  .btn-ghost::after,
  .btn-danger::after,
  .btn-lime::after,
  .btn-outline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgb(255 255 255 / 0.12) 50%,
      transparent 100%
    );
    transform: translateY(-100%);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .btn-primary:hover::after,
  .btn-ghost:hover::after,
  .btn-danger:hover::after,
  .btn-lime:hover::after,
  .btn-outline:hover::after {
    animation: btnScan 900ms linear infinite;
  }
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-danger:hover,
  .btn-lime:hover,
  .btn-outline:hover {
    animation: btnGlitchNudge 220ms steps(4) 1;
    text-shadow:
      0 0 10px var(--btn-accent),
      -1px 0 0 rgb(211 254 62 / 0.55),
      1px 0 0 rgb(255 59 107 / 0.55);
  }
  .btn-primary:active,
  .btn-ghost:active,
  .btn-danger:active,
  .btn-lime:active,
  .btn-outline:active {
    transform: translate(1px, 1px);
  }

  /* Variants */
  .btn-primary {
    --btn-accent: var(--violet);
    --btn-accent-hi: color-mix(in oklab, var(--violet) 25%, var(--ink-0));
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--violet) 20%, transparent) 0%,
        color-mix(in oklab, var(--violet) 5%, transparent) 100%
      ),
      var(--bg-1);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--violet) 15%, transparent),
      0 0 32px color-mix(in oklab, var(--violet) 18%, transparent);
  }
  .btn-primary:hover {
    color: #fff;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--violet) 35%, transparent) 0%,
        color-mix(in oklab, var(--violet) 10%, transparent) 100%
      ),
      var(--bg-1);
  }

  .btn-lime {
    --btn-accent: var(--lime);
    --btn-accent-hi: var(--lime-hi);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--lime) 15%, transparent) 0%,
        color-mix(in oklab, var(--lime) 3%, transparent) 100%
      ),
      var(--bg-1);
    color: var(--lime-hi);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--lime) 15%, transparent),
      0 0 32px color-mix(in oklab, var(--lime) 15%, transparent);
  }
  .btn-lime:hover {
    color: #fff;
  }

  .btn-outline {
    --btn-accent: color-mix(in oklab, var(--lime) 45%, transparent);
    --btn-accent-hi: var(--lime-hi);
    background: color-mix(in oklab, var(--lime) 3%, transparent);
    color: var(--ink-0);
  }
  .btn-outline:hover {
    --btn-accent: var(--lime);
    color: var(--lime);
  }

  .btn-ghost {
    --btn-accent: rgb(255 255 255 / 0.25);
    --btn-accent-hi: var(--ink-0);
    background: rgb(255 255 255 / 0.02);
    color: var(--ink-0);
  }
  .btn-ghost:hover {
    --btn-accent: color-mix(in oklab, var(--lime) 60%, transparent);
    color: var(--lime);
  }

  .btn-danger {
    --btn-accent: var(--danger);
    --btn-accent-hi: color-mix(in oklab, var(--danger) 35%, var(--ink-0));
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--danger) 20%, transparent) 0%,
        color-mix(in oklab, var(--danger) 5%, transparent) 100%
      ),
      var(--bg-1);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--danger) 15%, transparent),
      0 0 32px color-mix(in oklab, var(--danger) 20%, transparent);
  }

  /* === CHIPS === */
  .chip,
  .chip-lime,
  .chip-rabbit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.05em;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--violet) 14%, transparent);
    color: var(--violet-hi);
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  }
  .chip-lime {
    background: color-mix(in oklab, var(--lime) 10%, transparent);
    color: var(--lime-hi);
    border-color: color-mix(in oklab, var(--lime) 32%, transparent);
  }
  .chip-rabbit {
    background: color-mix(in oklab, var(--danger) 10%, transparent);
    color: var(--danger-hi);
    border-color: color-mix(in oklab, var(--danger) 35%, transparent);
  }

  /* Square chips (used in featured/post lists) */
  .chip-v,
  .chip-l {
    display: inline-flex;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    border-radius: 4px;
    background: color-mix(in oklab, var(--violet) 15%, transparent);
    color: var(--violet-hi);
    border: 1px solid color-mix(in oklab, var(--violet) 40%, transparent);
  }
  .chip-l {
    background: color-mix(in oklab, var(--lime) 10%, transparent);
    color: var(--lime);
    border-color: color-mix(in oklab, var(--lime) 40%, transparent);
  }

  /* Rabbit-hole badge */
  .rabbit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--danger-hi);
    background: color-mix(in oklab, var(--danger) 8%, transparent);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px dashed color-mix(in oklab, var(--danger) 45%, transparent);
  }

  /* Blinking cursor */
  .cursor-blink::after {
    content: "▋";
    display: inline-block;
    margin-inline-start: 2px;
    animation: blink 1s steps(1) infinite;
    color: var(--lime);
  }
  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  /* Pixel sprites */
  .sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
  }

  /* Image placeholder — diagonal stripes */
  .placeholder-img {
    background:
      repeating-linear-gradient(
        135deg,
        color-mix(in oklab, var(--violet) 14%, transparent) 0 8px,
        color-mix(in oklab, var(--violet) 6%, transparent) 8px 16px
      ),
      var(--bg-2);
    display: grid;
    place-items: center;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Pixel avatar (8×8 grid filled by js/pixel-avatar.js or pre-rendered) */
  .pixel-avatar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    image-rendering: pixelated;
  }
  .pixel-avatar i {
    display: block;
  }
  .pixel-avatar i[data-c="0"] {
    background: transparent;
  }
  .pixel-avatar i[data-c="1"] {
    background: var(--violet-lo);
  }
  .pixel-avatar i[data-c="2"] {
    background: var(--violet);
  }
  .pixel-avatar i[data-c="3"] {
    background: var(--bg-0);
  }
  .pixel-avatar i[data-c="4"] {
    background: var(--lime);
  }

  /* Pixel-style decorative avatar (gradient block) */
  .px-av {
    display: inline-block;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--violet), var(--lime));
    image-rendering: pixelated;
  }

  /* Marquee */
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  .marquee-track {
    animation: marquee var(--fx-marquee) linear infinite;
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    opacity: var(--fx-glyphs);
  }
  .marquee-track:hover {
    animation-play-state: paused;
  }

  .ascii-divider {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.05em;
    opacity: calc(0.2 + 0.8 * var(--fx-glyphs));
  }

  /* Glow utilities */
  .glow-violet {
    box-shadow: 0 0 60px color-mix(in oklab, var(--violet) 35%, transparent);
  }
  .glow-lime {
    box-shadow: 0 0 40px color-mix(in oklab, var(--lime) 20%, transparent);
  }

  /* CRT moving scanline */
  @keyframes crt-scan {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(100vh);
    }
  }
  .crt-scan-line {
    position: absolute;
    inset-inline: 0;
    block-size: 80px;
    background: linear-gradient(
      180deg,
      transparent,
      rgb(211 254 62 / calc(0.05 * var(--fx-crt-scan))),
      transparent
    );
    pointer-events: none;
    animation: crt-scan var(--fx-crt-scan-speed) linear infinite;
    opacity: var(--fx-crt-scan);
    z-index: 2;
  }

  /* VHS color-split shift */
  @keyframes vhs-shift {
    0%,
    92%,
    100% {
      transform: translate(0, 0);
      filter: none;
    }
    94% {
      transform: translate(1px, 0);
    }
    96% {
      transform: translate(-2px, 0);
      filter: hue-rotate(10deg);
    }
    98% {
      transform: translate(2px, -1px);
    }
  }
  .vhs-flicker {
    animation: vhs-shift var(--fx-vhs) infinite;
  }
}