/* ==========================================================
   AntJanus — Y2K Futurism / "Chrome Millennium"
   Platinum (light) + Midnight Chrome (dark)
   ========================================================== */

/* ---------- Primitives ---------- */
:root {
  --navy-950: #060918;
  --navy-900: #0a1430;
  --navy-850: #0c1230;
  --navy-800: #111a3a;
  --navy-700: #1b2650;
  --navy-600: #2b3a66;
  --steel-500: #4a6488;
  --gunmetal: #364f6a;
  --steel-300: #a9b8d6;
  --platinum-50: #f7f9fc;
  --platinum-100: #eef2f7;
  --platinum-200: #e3e9f1;
  --platinum-300: #c9d3e0;
  --platinum-400: #aebbcc;
  --bondi-700: #005d74;
  --bondi-600: #00718c;
  --bondi-500: #0a8eab;
  --bondi-300: #3fd8f5;
  --bondi-200: #7ff0ff;
  --pink-600: #b3126f;
  --pink-300: #ff7ad9;
  --lime-700: #4a6600;
  --lime-300: #c6ff4d;
  --tangerine-600: #a34a00;
  --tangerine-300: #ffb35c;

  --holo: conic-gradient(from 200deg, #ff9de2, #b9a8ff, #8fdcff, #7ef3e0, #d4ffa6, #fff1a0, #ffc0b0, #ff9de2);
  --holo-linear: linear-gradient(100deg, #ff9de2, #b9a8ff 20%, #8fdcff 40%, #7ef3e0 55%, #d4ffa6 70%, #fff1a0 85%, #ffc0b0);

  --font-display: "Unbounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-tech: "Michroma", "Unbounded", system-ui, sans-serif;
  --font-body: "Figtree", "Frutiger", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-pod: 28px;
  --radius-inner: 18px;
  --radius-pill: 999px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Semantic: Platinum (light) ---------- */
:root {
  color-scheme: light;
  --ground: var(--platinum-200);
  --ground-2: var(--platinum-100);
  --surface: var(--platinum-50);
  --surface-2: #ffffff;
  --text-strong: var(--navy-900);
  --text: #1c2a48;
  --text-muted: var(--gunmetal);
  --line: var(--platinum-400);
  --line-soft: var(--platinum-300);
  --action: var(--bondi-600);
  --action-text: #ffffff;
  --link: var(--bondi-700);
  --accent-pink: var(--pink-600);
  --accent-lime: var(--lime-700);
  --accent-tangerine: var(--tangerine-600);
  --focus: var(--pink-600);
  --blob-1: rgba(63, 216, 245, .40);
  --blob-2: rgba(255, 122, 217, .28);
  --blob-3: rgba(198, 255, 77, .22);
  --grid-line: rgba(54, 79, 106, .22);
  --chrome-text: linear-gradient(180deg, #24365e 0%, #4a6488 38%, #0a1430 50%, #2b4468 72%, #0a1430 100%);
  --chrome-bar: linear-gradient(180deg, #ffffff 0%, #e6ecf3 45%, #cad4e1 52%, #eef2f7 100%);
  --chrome-edge: linear-gradient(160deg, #ffffff, #9aa9bd 30%, #f4f7fb 50%, #8595ab 75%, #ffffff);
  --gloss: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 60%);
  --pod-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -22px rgba(10, 20, 48, .45);
  --gel-primary: linear-gradient(180deg, #1aa3c2 0%, #00788f 48%, #005d74 52%, #0a7f99 100%);
  --gel-primary-text: #ffffff;
  --gel-ghost: linear-gradient(180deg, #ffffff 0%, #eef2f7 48%, #dbe3ed 52%, #f4f7fb 100%);
  --code-bg: #0a1128;
  --code-text: #dde6f7;
  --emboss: 0 1px 0 rgba(255,255,255,.85);
}

/* ---------- Semantic: Midnight Chrome (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: var(--navy-950);
    --ground-2: var(--navy-850);
    --surface: #0f1733;
    --surface-2: #152046;
    --text-strong: #f2f6ff;
    --text: #d9e2f5;
    --text-muted: var(--steel-300);
    --line: var(--navy-600);
    --line-soft: #1f2b52;
    --action: var(--bondi-300);
    --action-text: #03121f;
    --link: var(--bondi-300);
    --accent-pink: var(--pink-300);
    --accent-lime: var(--lime-300);
    --accent-tangerine: var(--tangerine-300);
    --focus: var(--pink-300);
    --blob-1: rgba(0, 170, 220, .26);
    --blob-2: rgba(200, 40, 170, .22);
    --blob-3: rgba(120, 200, 40, .10);
    --grid-line: rgba(127, 240, 255, .20);
    --chrome-text: linear-gradient(180deg, #ffffff 0%, #e3eaf5 40%, #95a4be 50%, #f6f9fd 64%, #bfcadb 100%);
    --chrome-bar: linear-gradient(180deg, #34406a 0%, #1a2348 48%, #0d1330 52%, #1f2a52 100%);
    --chrome-edge: linear-gradient(160deg, #8b9bbd, #2b3a66 30%, #c6d2e8 50%, #243157 75%, #8b9bbd);
    --gloss: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%);
    --pod-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 20px 50px -24px rgba(0, 0, 0, .9);
    --gel-primary: linear-gradient(180deg, #b5f7ff 0%, #56e0fa 48%, #1fb6d9 52%, #5fe3fb 100%);
    --gel-primary-text: #03121f;
    --gel-ghost: linear-gradient(180deg, #2c3862 0%, #1b2550 48%, #121a3c 52%, #202c58 100%);
    --code-bg: #050a1c;
    --emboss: 0 1px 0 rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--navy-950);
  --ground-2: var(--navy-850);
  --surface: #0f1733;
  --surface-2: #152046;
  --text-strong: #f2f6ff;
  --text: #d9e2f5;
  --text-muted: var(--steel-300);
  --line: var(--navy-600);
  --line-soft: #1f2b52;
  --action: var(--bondi-300);
  --action-text: #03121f;
  --link: var(--bondi-300);
  --accent-pink: var(--pink-300);
  --accent-lime: var(--lime-300);
  --accent-tangerine: var(--tangerine-300);
  --focus: var(--pink-300);
  --blob-1: rgba(0, 170, 220, .26);
  --blob-2: rgba(200, 40, 170, .22);
  --blob-3: rgba(120, 200, 40, .10);
  --grid-line: rgba(127, 240, 255, .20);
  --chrome-text: linear-gradient(180deg, #ffffff 0%, #e3eaf5 40%, #95a4be 50%, #f6f9fd 64%, #bfcadb 100%);
  --chrome-bar: linear-gradient(180deg, #34406a 0%, #1a2348 48%, #0d1330 52%, #1f2a52 100%);
  --chrome-edge: linear-gradient(160deg, #8b9bbd, #2b3a66 30%, #c6d2e8 50%, #243157 75%, #8b9bbd);
  --gloss: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%);
  --pod-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 20px 50px -24px rgba(0, 0, 0, .9);
  --gel-primary: linear-gradient(180deg, #b5f7ff 0%, #56e0fa 48%, #1fb6d9 52%, #5fe3fb 100%);
  --gel-primary-text: #03121f;
  --gel-ghost: linear-gradient(180deg, #2c3862 0%, #1b2550 48%, #121a3c 52%, #202c58 100%);
  --code-bg: #050a1c;
  --emboss: 0 1px 0 rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--ground);
  background-image:
    radial-gradient(900px 600px at 88% -8%, var(--blob-1), transparent 62%),
    radial-gradient(800px 600px at -12% 22%, var(--blob-2), transparent 60%),
    radial-gradient(700px 500px at 60% 70%, var(--blob-3), transparent 60%);
  background-repeat: no-repeat;
  overflow-x: hidden;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--text-strong); font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--gel-primary); color: var(--gel-primary-text); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sprite { display: none; }

/* ---------- Type helpers ---------- */
.chrome {
  background: var(--chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(var(--emboss));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome { color: var(--text-strong); -webkit-text-fill-color: currentColor; }
}
.eyebrow {
  font-family: var(--font-tech);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.spark { width: 1em; height: 1em; flex: none; color: var(--accent-pink); }
.spark.cyan { color: var(--action); }
.spark.lime { color: var(--accent-lime); }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--text); max-width: 60ch; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* ---------- Header dock ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 12px 0 0; }
.dock {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--chrome-bar) padding-box, var(--chrome-edge) border-box;
  box-shadow: var(--pod-shadow);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-strong); min-height: 44px; padding-right: 6px; }
.brand-orb { width: 42px; height: 42px; flex: none; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; line-height: 1; }
.brand-word small { display: block; font-family: var(--font-tech); font-weight: 400; font-size: .8125rem; letter-spacing: .14em; color: var(--text-muted); margin-top: 4px; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-size: 1rem;
  color: var(--text-strong); transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.nav-links a:hover { background: color-mix(in srgb, var(--action) 12%, transparent); }
.nav-links a[aria-current="page"] {
  background: var(--gel-primary); color: var(--gel-primary-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 10px -4px rgba(0, 93, 116, .7);
}
.nav-links a.nav-ai { position: relative; isolation: isolate; color: #0a1430; }
.nav-links a.nav-ai::before { content: ""; position: absolute; inset: 4px 0; border-radius: inherit; background: var(--holo-linear); z-index: -1; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(10,20,48,.15); }
.nav-links a.nav-ai[aria-current="page"] { background: none; box-shadow: 0 0 0 2px var(--text-strong); }
.dock-tools { display: flex; gap: 6px; margin-left: 6px; }
.gel-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; color: var(--text-strong);
  background: var(--gel-ghost) padding-box, var(--chrome-edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.gel-icon svg { width: 20px; height: 20px; }
.gel-icon:hover { filter: brightness(1.06); }
.gel-icon:active { transform: translateY(1px); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
.menu-toggle { display: none; }
.mobile-panel { display: none; }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .menu-toggle { display: grid; }
  .dock-tools { margin-left: auto; }
  .mobile-panel[data-open="true"] {
    display: block; margin-top: 8px; padding: 10px; border-radius: 26px;
    border: 1px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--chrome-edge) border-box;
    box-shadow: var(--pod-shadow);
  }
  .mobile-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .mobile-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 18px; border-radius: 16px; text-decoration: none; color: var(--text-strong); font-weight: 600; font-size: 1.0625rem; }
  .mobile-panel a[aria-current="page"] { background: var(--gel-primary); color: var(--gel-primary-text); }
  .mobile-panel a:hover { background: color-mix(in srgb, var(--action) 12%, transparent); }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 26px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; overflow: hidden; isolation: isolate;
  transition: transform 150ms var(--ease), filter 150ms var(--ease), box-shadow 150ms var(--ease);
}
.btn::after { content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 45%; border-radius: var(--radius-pill); background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); z-index: -1; pointer-events: none; }
.btn-primary { color: var(--gel-primary-text); background: var(--gel-primary) padding-box, linear-gradient(180deg, rgba(255,255,255,.7), rgba(0,40,60,.5)) border-box; box-shadow: 0 8px 20px -8px rgba(0, 113, 140, .8); }
.btn-ghost { color: var(--text-strong); background: var(--gel-ghost) padding-box, var(--chrome-edge) border-box; box-shadow: 0 6px 16px -10px rgba(10, 20, 48, .6); }
.btn:hover { filter: brightness(1.07) saturate(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); filter: brightness(.95); }
.btn-text { font-weight: 700; color: var(--text-strong); min-height: 44px; display: inline-flex; align-items: center; gap: .4em; text-decoration: underline; text-decoration-color: var(--accent-pink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

/* ---------- Pods (cards) ---------- */
.pod {
  position: relative; border-radius: var(--radius-pod); padding: 12px;
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--chrome-edge) border-box;
  box-shadow: var(--pod-shadow);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.pod::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--gloss); pointer-events: none; height: 42%; }
.pod.is-link:hover, .pod.is-link:focus-within { transform: translateY(-4px); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--holo) border-box; }
.pod.is-link:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.pod.is-link a.stretch { text-decoration: none; color: inherit; }
.pod.is-link a.stretch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; }
.pod.is-link a.stretch:focus-visible { outline: none; }
.pod-body { padding: 14px 12px 10px; position: relative; z-index: 1; }
.pod h3 { font-size: 1.25rem; line-height: 1.25; margin: .35rem 0 .5rem; }
.pod p { font-size: 1rem; color: var(--text); margin: 0 0 .6rem; }
.pod .meta { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted); letter-spacing: .02em; }
.media {
  position: relative; border-radius: var(--radius-inner); overflow: hidden; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1b2650, #3a5c8a 40%, #7ff0ff 70%, #ff9de2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,0) 33%); pointer-events: none; }
.media.placeholder { display: grid; place-items: center; }
.media.placeholder span { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.4rem; text-shadow: 0 2px 10px rgba(0,0,0,.4); padding: 0 1rem; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: .8125rem; color: var(--text-strong); text-decoration: none;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
a.chip:hover { border-color: var(--action); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
.badge.new { background: var(--holo-linear); color: #0a1430; }
.badge.updated { border: 1px solid var(--action); color: var(--link); }
.badge.soon { border: 1px dashed var(--text-muted); color: var(--text-muted); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 22px; }
.g-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.g-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* ---------- Sections ---------- */
section.block { padding: clamp(48px, 7vw, 96px) 0 0; }
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 24px; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.sec-head .sub { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 1.0625rem; }
.sec-head .more { align-self: center; }
@media (max-width: 640px) { .sec-head { grid-template-columns: 1fr; } }
.rule { height: 2px; border: 0; margin: 0; background: var(--holo-linear); border-radius: 2px; opacity: .85; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding: clamp(40px, 7vw, 90px) 0 clamp(30px, 5vw, 60px); overflow: hidden; }
.page-hero h1 { font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 800; line-height: .98; letter-spacing: -0.03em; margin-bottom: 1.2rem; }
.page-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .page-hero .hero-grid { grid-template-columns: 1fr; } }
.floor {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--grid-line) 1.5px, transparent 1.5px);
  background-size: 56px 56px;
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
.hero-art {
  position: relative; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; padding: 10px; aspect-ratio: 1;
  background: var(--holo); box-shadow: 0 30px 60px -30px rgba(10,20,48,.8);
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hero-art::after { content: ""; position: absolute; inset: 10px; border-radius: inherit; background: radial-gradient(60% 40% at 30% 18%, rgba(255,255,255,.55), transparent 70%); pointer-events: none; }

/* ---------- Home hero ---------- */
.home-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 90px); isolation: isolate; }
.home-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.home-hero h1 { font-size: clamp(2.4rem, 5.6vw, 5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 1.4rem; }
.home-hero .lede { margin-bottom: 1.8rem; }
@media (max-width: 860px) { .home-hero .hero-grid { grid-template-columns: 1fr; } }
.portrait-stage { position: relative; width: min(100%, 480px); margin-inline: auto; aspect-ratio: 1; }
.portrait-stage .hero-art { position: absolute; inset: 8%; aspect-ratio: auto; }
.portrait-stage .hero-art img { object-position: 30% 30%; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.orbit ellipse { fill: none; stroke: var(--action); stroke-width: 1.5; opacity: .75; }
.orbit .dot { fill: var(--accent-pink); }
.orbit-spin { transform-origin: 50% 50%; animation: spin 36s linear infinite; }
.float-spark { position: absolute; color: var(--accent-pink); width: 34px; height: 34px; animation: twinkle 3.2s ease-in-out infinite; }
.float-spark.s2 { color: var(--action); width: 22px; height: 22px; animation-delay: 1.2s; }
.float-spark.s3 { color: var(--accent-lime); width: 26px; height: 26px; animation-delay: 2s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.6) rotate(45deg); opacity: .6; } }

.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.readout {
  position: relative; border-radius: 22px; padding: 14px 16px 12px; text-align: left;
  border: 1px solid transparent; background: var(--gel-ghost) padding-box, var(--chrome-edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.readout b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.05; }
.readout span { font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 480px) { .readouts { gap: 8px; } .readout { padding: 12px 10px; border-radius: 18px; } .readout span { font-family: var(--font-mono); letter-spacing: 0; font-weight: 700; } }

/* ---------- Discs (Start here shelf) ---------- */
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 980px) { .shelf { grid-template-columns: 1fr; } }
.disc-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; text-decoration: none; color: inherit; padding: 16px; border-radius: 120px 32px 32px 120px; }
@media (min-width: 981px) { .disc-card { grid-template-columns: 1fr; border-radius: 32px; justify-items: center; text-align: center; } }
@media (max-width: 520px) { .disc-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 28px; align-items: start; } }
.disc { position: relative; width: 100%; max-width: 220px; aspect-ratio: 1; border-radius: 50%; padding: 9%; background: var(--holo); box-shadow: 0 16px 34px -16px rgba(10,20,48,.7), inset 0 0 0 2px rgba(255,255,255,.6); transition: transform 600ms var(--ease); }
.disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.disc::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0 1px, transparent 1px 4px), conic-gradient(from 30deg, rgba(255,255,255,.4), transparent 18%, rgba(255,255,255,.35) 50%, transparent 68%); mix-blend-mode: overlay; }
.disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--ground) 0 38%, #dfe6ef 40%, #8595ab 58%, #f4f7fb 72%, #aebbcc 100%); box-shadow: 0 0 0 1px rgba(10,20,48,.3); }
.disc-card:hover .disc, .disc-card:focus-visible .disc { transform: rotate(160deg); }
.disc-card h3 { font-size: 1.3rem; margin: .4rem 0 .45rem; }
.disc-card p { font-size: 1rem; margin: 0; color: var(--text); }
.disc-card:focus-visible { outline: 3px solid var(--focus); }

/* ---------- Capsules (AI experiments, small cards) ---------- */
.capsule { display: flex; gap: 16px; align-items: flex-start; }
.capsule .icon-orb { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #ffffff 0 12%, transparent 30%), var(--holo); box-shadow: inset 0 -6px 12px rgba(10,20,48,.25), 0 8px 16px -8px rgba(10,20,48,.6); color: #0a1430; }
.capsule .icon-orb svg { width: 26px; height: 26px; }
.type-tag { font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-pink); }

/* ---------- List rows ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.rows a { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 22px; padding: 18px 8px; text-decoration: none; color: inherit; border-radius: 14px; transition: background-color 150ms var(--ease); }
.rows a:hover { background: color-mix(in srgb, var(--action) 8%, transparent); }
.rows time { font-family: var(--font-mono); font-size: .875rem; color: var(--text-muted); padding-top: 4px; }
.rows strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text-strong); display: block; }
.rows span.d { grid-column: 2; color: var(--text); font-size: 1rem; }
@media (max-width: 600px) { .rows a { grid-template-columns: 1fr; } .rows span.d { grid-column: 1; } }

/* ---------- Panels (dark "window") ---------- */
.window {
  border-radius: var(--radius-pod); overflow: hidden; border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--chrome-edge) border-box;
  box-shadow: var(--pod-shadow);
}
.titlebar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--chrome-bar); border-bottom: 1px solid var(--line); font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-strong); }
.lights { display: flex; gap: 6px; }
.lights i { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 15%, transparent 40%), var(--c, #ff7ad9); box-shadow: inset 0 -2px 3px rgba(0,0,0,.3); }
.lights i:nth-child(2) { --c: #c6ff4d; }
.lights i:nth-child(3) { --c: #3fd8f5; }
.titlebar .tb-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.window-body { padding: clamp(20px, 3vw, 34px); }

.deep {
  position: relative; color: #e8eefc; border-radius: var(--radius-pod); overflow: hidden; isolation: isolate;
  background-color: #070b1f;
  background-image: url("assets/chrome-horizon.jpg"), radial-gradient(700px 400px at 90% 0%, rgba(63,216,245,.35), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(255,122,217,.28), transparent 60%);
  background-size: cover, auto, auto;
  background-position: center;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  border: 1px solid #2b3a66;
}
.deep::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,11,31,.55), rgba(7,11,31,.85)); }
.deep h2, .deep h3 { color: #ffffff; }
.deep .muted, .deep .eyebrow { color: #b7c5e3; }
.deep a { color: #7ff0ff; }
.deep .chrome { background: linear-gradient(180deg, #ffffff 0%, #e3eaf5 40%, #95a4be 50%, #f6f9fd 64%, #bfcadb 100%); -webkit-background-clip: text; background-clip: text; filter: none; }
.deep .btn-primary { color: #03121f; background: linear-gradient(180deg, #b5f7ff 0%, #56e0fa 48%, #1fb6d9 52%, #5fe3fb 100%) padding-box, linear-gradient(180deg, rgba(255,255,255,.7), rgba(0,40,60,.5)) border-box; }
.deep .chip { color: #e8eefc; border-color: #3b4d80; background: rgba(255,255,255,.04); }

.foil {
  position: relative; border-radius: var(--radius-pod); overflow: hidden; isolation: isolate; color: #0a1430;
  background-image: url("assets/holo-foil.jpg"), var(--holo);
  background-size: cover, 180% 180%;
  background-position: center;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 24px 50px -26px rgba(10,20,48,.8), inset 0 1px 0 rgba(255,255,255,.9);
}
.foil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); }
.foil h2, .foil h3 { color: #0a1430; }
.foil p { color: #0a1430; }
.foil a:not(.btn) { color: #0a1430; }
.foil .btn-primary { color: #fff; background: linear-gradient(180deg, #1aa3c2 0%, #00788f 48%, #005d74 52%, #0a7f99 100%) padding-box, linear-gradient(180deg, rgba(255,255,255,.7), rgba(0,40,60,.5)) border-box; }
.foil .eyebrow { color: #1c2a48; }

/* ---------- Home bottom row ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .trio { grid-template-columns: 1fr; } }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.link-list a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; padding: 6px 14px; border-radius: 16px; text-decoration: none; color: var(--text-strong); font-weight: 600; background: color-mix(in srgb, var(--surface-2) 60%, transparent); border: 1px solid var(--line-soft); }
.link-list a:hover { border-color: var(--action); }
.link-list small { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted); font-weight: 400; }

/* ---------- Newsletter ---------- */
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.signup input[type="email"] {
  flex: 1 1 220px; min-height: 50px; padding: 0 20px; border-radius: var(--radius-pill); font: inherit; font-size: 1.0625rem;
  color: var(--text-strong); border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: inset 0 2px 5px rgba(10,20,48,.18);
}
.signup input::placeholder { color: var(--text-muted); opacity: 1; }
.signup-status { flex-basis: 100%; margin: .3rem 0 0; font-weight: 600; min-height: 1.5em; }
.foil .signup input[type="email"] { background: #ffffff; color: #0a1430; border-color: #8595ab; }
.foil .signup input::placeholder { color: #364f6a; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; flex-basis: 100%; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--bondi-600); }

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(70px, 9vw, 130px); padding: 0 0 30px; }
.footer-pod { padding: clamp(24px, 4vw, 44px); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.5fr; gap: 30px; position: relative; z-index: 1; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h2 { font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--text-muted); margin-bottom: .8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-grid ul a { display: inline-flex; min-height: 40px; align-items: center; color: var(--text-strong); text-decoration: none; font-weight: 600; }
.footer-grid ul a:hover { text-decoration: underline; text-decoration-color: var(--accent-pink); }
.monogram-big { position: relative; width: 120px; height: 120px; margin-bottom: 14px; }
.monogram-big svg, .monogram-big img { position: absolute; inset: 0; width: 100%; height: 100%; }
.monogram-big.has-img svg { display: none; }
.bottom-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; padding: 0 8px; font-family: var(--font-mono); font-size: .875rem; color: var(--text-muted); }

/* ---------- Jump bar ---------- */
.jumpbar { position: sticky; top: 86px; z-index: 30; margin-top: 10px; }
.jumpbar ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 8px; overflow-x: auto; border-radius: var(--radius-pill); border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--chrome-edge) border-box; box-shadow: var(--pod-shadow); scrollbar-width: thin; }
.jumpbar a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; color: var(--text-strong); }
.jumpbar a:hover, .jumpbar a.is-active { background: var(--gel-primary); color: var(--gel-primary-text); }
.jumpbar .label { font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 0 8px 0 12px; display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 960px) { .jumpbar { top: 78px; } }

/* ---------- Projects ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; padding: 0; overflow: hidden; }
.feature .media { aspect-ratio: auto; min-height: 100%; border-radius: 0; }
.feature .feature-body { padding: clamp(24px, 4vw, 44px); position: relative; z-index: 1; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature .media { aspect-ratio: 16/10; } }
.stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin: 1.2rem 0 1.4rem; }
.stat-strip div { background: var(--surface-2); padding: 12px 14px; }
.stat-strip b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stat-strip span { font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.landscape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; align-items: center; }
.landscape:nth-child(even) .media { order: 2; }
@media (max-width: 760px) { .landscape { grid-template-columns: 1fr; } .landscape:nth-child(even) .media { order: 0; } }
.landscape .pod-body { padding: 10px 14px 14px; }
.landscape h3 { font-size: 1.6rem; }
.stack { display: grid; gap: 26px; }
.stars { font-family: var(--font-mono); font-size: .875rem; color: var(--text-strong); display: inline-flex; gap: 6px; align-items: center; }
.stars svg { width: 16px; height: 16px; color: var(--accent-tangerine); }
.term-still { background: #050a1c; display: grid; place-items: center; }
.term-still img { object-fit: contain; }

/* ---------- Article ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 60; background: transparent; }
.progress span { display: block; height: 100%; width: 0; background: var(--holo-linear); box-shadow: 0 0 12px rgba(127, 240, 255, .8); }
.article-hero { position: relative; margin-top: 24px; border-radius: 36px; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(18px, 3vw, 40px); border: 1px solid transparent; background: radial-gradient(600px 400px at 100% 0%, rgba(63,216,245,.35), transparent 60%) padding-box, radial-gradient(500px 360px at 0% 100%, rgba(255,122,217,.30), transparent 60%) padding-box, linear-gradient(#070b1f, #0a1128) padding-box, var(--chrome-edge) border-box; }
.article-hero::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -20%; height: 60%; z-index: -1; background-image: linear-gradient(rgba(127,240,255,.18) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(127,240,255,.18) 1.5px, transparent 1.5px); background-size: 48px 48px; transform: perspective(380px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000, transparent 85%); mask-image: linear-gradient(to top, #000, transparent 85%); }
.ah-media { margin: 0; padding: 8px; border-radius: 30px; background: var(--holo); transform: rotate(2.5deg); box-shadow: 0 30px 50px -24px rgba(0,0,0,.9); }
.ah-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
@media (max-width: 860px) { .article-hero { grid-template-columns: 1fr; } .ah-media { order: -1; transform: rotate(1.5deg); max-width: 420px; } }
.article-hero .inner { padding: clamp(4px, 2vw, 20px); color: #e8eefc; }

.article-hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; margin: .6rem 0 1rem; }
.article-hero .desc { font-size: clamp(1.125rem, 1.8vw, 1.35rem); color: #e8eefc; max-width: 55ch; }
.article-hero .crumb { color: #7ff0ff; font-weight: 700; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; gap: 8px; }
.article-hero .crumb:hover { text-decoration: underline; }
.article-hero .chips .chip { color: #e8eefc; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.article-hero .metabar { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: #c9d6f0; margin-top: 1rem; }
.article-layout { display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: center; gap: 56px; margin-top: 44px; }
@media (max-width: 1100px) { .article-layout { grid-template-columns: minmax(0, 760px); } .toc-rail { display: none; } }
.toc-rail { position: sticky; top: 110px; align-self: start; }
.toc h2 { font-family: var(--font-tech); font-weight: 400; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .8rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc ol a { counter-increment: toc; display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 14px; text-decoration: none; color: var(--text); font-size: 1rem; line-height: 1.35; border: 1px solid transparent; }
.toc ol a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted); }
.toc a:hover { background: color-mix(in srgb, var(--action) 10%, transparent); }
.toc a.is-active { background: var(--gel-ghost) padding-box, var(--chrome-edge) border-box; color: var(--text-strong); font-weight: 700; }
.toc ol a.is-active::before { color: var(--accent-pink); }
.toc-mobile { display: none; margin-bottom: 26px; }
@media (max-width: 1100px) { .toc-mobile { display: block; } }
.toc-mobile summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-strong); }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; }
.toc-mobile[open] summary::after { content: "–"; }
.toc-mobile .toc { padding: 0 8px 12px; }
.toc-tools { margin-top: 20px; display: grid; gap: 8px; }
.toc-tools a { font-size: 1rem; }

.prose { font-size: 1.125rem; line-height: 1.75; color: var(--text); }
.prose > * + * { margin-top: 1.25em; }
.prose p { margin: 0; }
.prose > p:first-of-type { margin-top: 0; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 2.4em; padding-top: .2em; display: flex; gap: 14px; align-items: center; }
.prose h2::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 45%), var(--holo); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.prose ol { padding-left: 1.4em; }
.prose ol li { padding-left: .3em; margin: .35em 0; }
.prose ol li::marker { font-family: var(--font-mono); color: var(--accent-pink); font-weight: 700; }
.prose code { font-family: var(--font-mono); font-size: .88em; padding: .1em .4em; border-radius: 8px; background: color-mix(in srgb, var(--action) 12%, var(--surface-2)); color: var(--text-strong); border: 1px solid var(--line-soft); }
.prose a { color: var(--link); font-weight: 600; }
.prose em { font-style: italic; }
.code-window { margin-inline: -24px; }
@media (max-width: 800px) { .code-window { margin-inline: 0; } }
.code-window .window { background: linear-gradient(var(--code-bg), var(--code-bg)) padding-box, var(--chrome-edge) border-box; }
.code-window pre { margin: 0; padding: 20px 22px; overflow-x: auto; font-family: var(--font-mono); font-size: .9375rem; line-height: 1.65; color: var(--code-text); background: var(--code-bg); tab-size: 2; }
.code-window pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.tok-k { color: #ff9de2; }
.tok-s { color: #c6ff4d; }
.tok-c { color: #93a4c6; font-style: italic; }
.tok-t { color: #7ff0ff; }
.tok-n { color: #ffd27a; }
.copy-btn { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-strong); border: 1px solid transparent; background: var(--gel-ghost) padding-box, var(--chrome-edge) border-box; }
.copy-btn:hover { filter: brightness(1.06); }
.copy-btn.is-success { background: var(--gel-primary) padding-box, var(--chrome-edge) border-box; color: var(--gel-primary-text); }
.callout { position: relative; border-radius: 24px; padding: 18px 22px 18px 72px; border: 1px solid transparent; background: linear-gradient(var(--cbg), var(--cbg)) padding-box, var(--cedge) border-box; }
.callout > p { margin: 0; }
.callout .c-icon { position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #0a1430; background: radial-gradient(circle at 35% 28%, #fff 0 14%, transparent 40%), var(--corb); box-shadow: inset 0 -4px 8px rgba(0,0,0,.2); }
.callout .c-label { display: block; font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clabel); margin-bottom: .25rem; }
.callout.why { --cbg: color-mix(in srgb, #3fd8f5 12%, var(--surface)); --cedge: linear-gradient(135deg, #3fd8f5, #8595ab); --corb: #7ff0ff; --clabel: var(--link); }
.callout.ask { --cbg: color-mix(in srgb, #ff7ad9 12%, var(--surface)); --cedge: linear-gradient(135deg, #ff7ad9, #b9a8ff); --corb: #ff9de2; --clabel: var(--accent-pink); }
.callout.note { --cbg: color-mix(in srgb, #c6ff4d 12%, var(--surface)); --cedge: linear-gradient(135deg, #c6ff4d, #8595ab); --corb: #d4ffa6; --clabel: var(--accent-lime); }
.callout.skill { --cbg: var(--surface); --cedge: var(--holo); --corb: var(--holo); --clabel: var(--text-strong); }
.after-article { margin-top: 56px; display: grid; gap: 22px; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.series-note { display: flex; gap: 14px; align-items: center; }

/* ---------- AI page ---------- */
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.part-num { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; }
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 22px; border: 1px dashed var(--accent-pink); background: color-mix(in srgb, var(--accent-pink) 7%, var(--surface)); }
.notice svg { width: 28px; height: 28px; flex: none; color: var(--accent-pink); }
.consult { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 36px); }
.consult p { margin: 0; font-size: 1.2rem; font-weight: 600; max-width: 52ch; }
.soon-card { opacity: .92; border-style: dashed; }

/* ---------- About ---------- */
.about-hero-art { border-radius: 50% 50% 46% 54% / 56% 50% 50% 44%; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--holo-linear); }
.timeline > li { position: relative; padding-left: 64px; }
.timeline > li::before { content: ""; position: absolute; left: 8px; top: 18px; width: 29px; height: 29px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 45%), var(--holo); box-shadow: 0 0 0 4px var(--ground), 0 4px 10px rgba(0,0,0,.3); }
.timeline h3 { font-size: 1.35rem; }
.timeline .period { font-family: var(--font-mono); font-size: .9rem; color: var(--accent-pink); }
.roles { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: 6px; }
.roles li { padding-left: 18px; position: relative; }
.roles li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--action); }
.careerbar { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 26px; }
.careerbar li { padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-2); font-size: .95rem; }
.careerbar b { color: var(--text-strong); }
.careerbar span { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted); margin-left: 6px; }
.history-toggle > summary { list-style: none; cursor: pointer; display: inline-flex; }
.history-toggle > summary::-webkit-details-marker { display: none; }
.history-toggle[open] > summary .show { display: none; }
.history-toggle:not([open]) > summary .hide { display: none; }
.proverbs { list-style: none; counter-reset: pv; margin: 0; padding: 0; display: grid; gap: 14px; }
.proverbs li { counter-increment: pv; display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: baseline; font-size: clamp(1.15rem, 2vw, 1.45rem); font-style: italic; color: #f2f6ff; font-family: var(--font-body); }
.proverbs li::before { content: counter(pv, decimal-leading-zero); font-family: var(--font-display); font-style: normal; font-weight: 800; font-size: 1.4rem; background: var(--holo-linear); -webkit-background-clip: text; background-clip: text; color: transparent; }
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.caps .cap { border-radius: 22px; padding: 20px; border: 1px solid #33447a; background: rgba(255,255,255,.04); }
.caps h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.caps p { color: #c9d6f0; font-size: 1rem; }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.beyond li { margin-bottom: 1rem; }
.beyond { list-style: none; padding: 0; margin: 0; }
.beyond b { font-family: var(--font-display); color: var(--text-strong); display: block; font-size: 1.15rem; }

/* ---------- Patterns ---------- */
.three-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .three-ways { grid-template-columns: 1fr; } }
.three-ways > div { border-radius: 20px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.three-ways h3 { font-size: 1.15rem; display: flex; gap: 10px; align-items: center; margin-bottom: .35rem; }
.three-ways p { font-size: 1rem; margin: 0; }
.filterbar { display: grid; gap: 14px; margin: 30px 0 22px; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-muted); pointer-events: none; }
.search-field input { width: 100%; min-height: 56px; padding: 0 22px 0 54px; border-radius: var(--radius-pill); font: inherit; font-size: 1.0625rem; color: var(--text-strong); border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--chrome-edge) border-box; box-shadow: inset 0 2px 6px rgba(10,20,48,.15); }
.search-field input::placeholder { color: var(--text-muted); opacity: 1; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-weight: 600; font-size: 1rem; color: var(--text-strong); border: 1px solid transparent; background: var(--gel-ghost) padding-box, var(--chrome-edge) border-box; }
.pill[aria-pressed="true"] { background: var(--gel-primary) padding-box, var(--chrome-edge) border-box; color: var(--gel-primary-text); }
.pill:hover { filter: brightness(1.05); }
.sort { display: flex; gap: 10px; align-items: center; }
.sort label { font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sort select { min-height: 44px; padding: 0 14px; border-radius: 14px; font: inherit; font-size: 1rem; color: var(--text-strong); background: var(--surface-2); border: 1px solid var(--line); }
.result-count { font-family: var(--font-mono); font-size: .9375rem; color: var(--text-strong); display: flex; gap: 12px; align-items: center; }
.result-count button { font: inherit; font-weight: 700; color: var(--link); background: none; border: 0; cursor: pointer; text-decoration: underline; min-height: 44px; }
.empty { text-align: center; padding: 50px 20px; }
.empty svg { width: 80px; height: 80px; color: var(--text-muted); margin: 0 auto 10px; }
.thumb { position: relative; height: 170px; border-radius: var(--radius-inner); overflow: hidden; background: linear-gradient(160deg, var(--surface-2), color-mix(in srgb, var(--action) 14%, var(--surface-2))); border: 1px solid var(--line-soft); display: grid; place-items: center; }
.thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%); pointer-events: none; }
.thumb .mini { width: 78%; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.mini-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--holo-linear); background-size: 400% 100%; }
.mini-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-tiles i { height: 34px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.mini-tiles i:nth-child(1) { grid-column: span 2; background: var(--holo-linear); }
.mini-ui { display: grid; gap: 8px; }
.mini-ui i { height: 16px; border-radius: 999px; background: var(--line); }
.mini-ui i:nth-child(2) { width: 70%; }
.mini-ui b { justify-self: start; height: 34px; width: 46%; border-radius: 999px; background: var(--gel-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.mini-form { display: grid; gap: 8px; }
.mini-form i { height: 30px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.mini-form b { height: 30px; width: 40%; border-radius: 999px; background: var(--accent-pink); }
.mini-color { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mini-color i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -4px 6px rgba(0,0,0,.2), inset 0 3px 3px rgba(255,255,255,.6); }
.good-for { font-size: 1rem; }
.good-for b { font-family: var(--font-tech); font-weight: 400; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-strong); }
.pattern-card .cat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pattern-card .cat .eyebrow { margin: 0; }
[hidden] { display: none !important; }

/* Pattern detail */
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
.back:hover { text-decoration: underline; }
.use-cases { columns: 2 260px; column-gap: 32px; padding-left: 1.2em; margin: 0; }
.use-cases li { margin: 0 0 .4em; break-inside: avoid; }
.use-cases li::marker { color: var(--accent-pink); }
.panes .tablist { display: flex; gap: 6px; flex-wrap: wrap; }
.panes .titlebar { flex-wrap: wrap; padding: 8px 10px; row-gap: 8px; }
.tab { min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); font-family: var(--font-tech); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; color: var(--text-strong); border: 1px solid transparent; background: transparent; }
.tab:hover { background: color-mix(in srgb, var(--action) 12%, transparent); }
.tab[aria-selected="true"] { background: var(--gel-primary) padding-box, var(--chrome-edge) border-box; color: var(--gel-primary-text); }
.panes [role="tabpanel"] { padding: 22px; }
.panes pre { margin: 0; border-radius: 16px; padding: 18px; overflow-x: auto; font-family: var(--font-mono); font-size: .9375rem; line-height: 1.6; background: var(--code-bg); color: var(--code-text); }
.pane-note { font-size: 1rem; margin-bottom: 14px; padding: 12px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.prompt-text { max-width: 70ch; font-size: 1.0625rem; }
.stage { border-radius: 18px; padding: clamp(14px, 3vw, 26px); background: var(--ground-2); border: 1px solid var(--line-soft); }

/* Hairline stat strip demo (uses pattern tokens remapped to this site) */
.hss { --hss-border: var(--line); --hss-surface: var(--surface-2); }
.hss-caption { font-size: 1rem; color: var(--text-muted); margin: 0 0 10px; }
.hss-strip { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hss-border); border: 1px solid var(--hss-border); border-radius: 16px; overflow: hidden; margin: 0 0 26px; }
@media (min-width: 21rem) { .hss-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 42rem) { .hss-strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .hss-strip.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hss-tile { background: var(--hss-surface); padding: 14px 16px; min-width: 0; text-align: left; font: inherit; color: inherit; border: 0; }
button.hss-tile { cursor: pointer; }
button.hss-tile:hover { background: color-mix(in srgb, var(--action) 8%, var(--hss-surface)); }
button.hss-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--action) 18%, var(--hss-surface)); box-shadow: inset 0 -3px 0 var(--action); }
.hss-label { display: block; font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); overflow-wrap: anywhere; }
.hss-figure { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hss-figure.missing { color: var(--text-muted); }
.hss-sub { display: block; font-size: .9375rem; color: var(--text-muted); overflow-wrap: anywhere; }
.hss-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hss-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.hss-list .st { font-family: var(--font-mono); font-size: .875rem; color: var(--text-strong); }
.hss-status { font-weight: 600; margin: 12px 0 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .disc-card:hover .disc { transform: none; }
}

/* ---------- Narrow-screen fixes ---------- */
.titlebar > span:not(.lights):not(.tb-end) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-strip span { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .titlebar { letter-spacing: .04em; }
  .titlebar .tb-end .muted { display: none; }
  .stat-strip span { letter-spacing: 0; font-family: var(--font-mono); font-weight: 700; }
}

/* UI pattern library article */
.prose .prose-fig { margin-top: 28px; margin-bottom: 28px; }
.prose .prose-fig img { width: 100%; height: auto; display: block; }
.prose .callout p + p { margin-top: .8em; }
.prose .live-pattern a.btn { white-space: normal; text-decoration: none; color: var(--gel-primary-text); }
.prose p code { overflow-wrap: anywhere; }
.prose > * + p { margin-top: 1.1em; }
.prose > h2 + p { margin-top: .6em; }
.prose > aside + p:first-of-type { margin-top: 1.25em; }