/* Dark Context -- consolidated stylesheet.
   Generated by merging the per-page <style> blocks that had drifted apart.
   404.html is intentionally NOT part of this union -- it keeps its own local
   <style> block (see build report) because several of its bare selectors
   (`.mark`, `.line`, `.sub`, `body`) reuse class names that mean something
   different on every other page; merging them would bleed its standalone-
   error-page styling into the shared nav/hero/footer components site-wide.
*/

:root {
  --void:        #04050a;
  --void-2:      #090c13;
  --blue:        #3c8db6;
  --blue-glow:   #61b7e6;
  --green:       #4fd6a0;
  --green-glow:  #7dffc0;
  --pink:        #ff2d6f;
  --pink-glow:   #ff4d8d;
  --violet:      #8a6bff;

  --surface:     rgba(255,255,255,0.025);
  --surface-2:   rgba(255,255,255,0.05);
  --hairline:    rgba(97,183,230,0.16);
  --hairline-2:  rgba(97,183,230,0.32);

  --ink:         #e8eaf0;
  --ink-dim:     #b9c1cf;
  --ink-faint:   #79808e;

  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-pixel:   'DotGothic16', monospace;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --space-16: 64px; --space-24: 96px; --space-32: 128px;

  --reading: 720px;
  --wide: 1080px;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --ns-blue:   0 0 5px rgba(234,247,255,0.85), 0 0 14px rgba(97,183,230,0.85), 0 0 36px rgba(97,183,230,0.55), 0 0 80px rgba(60,141,182,0.4);
  --ns-pink:   0 0 5px rgba(255,230,241,0.85), 0 0 14px rgba(255,77,141,0.85), 0 0 34px rgba(255,45,111,0.55), 0 0 70px rgba(255,45,111,0.35);
  --ns-green:  0 0 4px rgba(234,255,244,0.85), 0 0 12px rgba(125,255,192,0.85), 0 0 28px rgba(79,214,160,0.5);
  --ns-violet: 0 0 5px rgba(241,236,255,0.85), 0 0 14px rgba(138,107,255,0.8), 0 0 34px rgba(138,107,255,0.5);

  /* -- appended: properties present in other pages' :root but absent from index.html's -- */
  --green-dim: #43b083;  /* from context-levels_index.html */
  --slate: #5a6170;  /* from context-levels_index.html */
  --amber: #febc2e;  /* from knowledge-audit_index.html */
  --amber-glow: #ffd479;  /* from knowledge-audit_index.html */
  --ns-amber: 0 0 5px rgba(255,247,230,0.85), 0 0 14px rgba(254,188,46,0.8), 0 0 30px rgba(254,188,46,0.45);  /* from knowledge-audit_index.html */
  --link: #bfeed8;  /* from privacy_index.html */
  --link-hover: #ffffff;  /* from privacy_index.html */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--void);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 700px at 78% -8%, rgba(60,141,182,0.18), transparent 60%),
    radial-gradient(820px 820px at 6% 10%, rgba(138,107,255,0.13), transparent 60%),
    radial-gradient(680px 520px at 90% 78%, rgba(79,214,160,0.07), transparent 60%),
    radial-gradient(900px 700px at 30% 110%, rgba(255,45,111,0.10), transparent 55%),
    var(--void);
}

.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 80%);
}

.scanlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(4,8,14,0.55) 3px);
  mix-blend-mode: soft-light;
}

.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 28%, transparent 50%, rgba(1,2,5,0.78) 100%);
}

canvas#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.nebula-wrap {
  position: fixed; left: -20%; top: -20%; width: 140%; height: 140%;
  z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: screen; filter: saturate(1.35);
}

.nebula { width: 100%; height: 100%; display: block; }

.page { position: relative; z-index: 1; }

a { color: var(--blue-glow); text-decoration: none; }

a:hover { color: #fff; text-shadow: 0 0 12px rgba(97,183,230,0.8); }

p { margin: 0 0 var(--space-4); color: var(--ink-dim); }

strong { color: #fff; font-weight: 600; text-shadow: 0 0 12px rgba(97,183,230,0.55); }

em { font-style: normal; color: #ffd9e8; text-shadow: 0 0 14px rgba(255,77,141,0.6); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--space-6); }

.col { max-width: var(--reading); 
 margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.3em; color: #ffd9e8; text-shadow: var(--ns-pink); margin: 0 0 var(--space-4);
}

nav.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(4,5,10,0.66);
  border-bottom: 1px solid var(--hairline-2);
  box-shadow: 0 6px 40px rgba(60,141,182,0.12);
}

nav.top .mark { display: flex; align-items: baseline; gap: var(--space-3); }

nav.top .wordmark {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 15px; color: #eaf7ff;
  text-shadow: 0 0 14px rgba(97,183,230,0.7);
  /* Same reason as the CTA pill: squeezed as a flex item this broke between the
     logomark and "D.C." and the header silently grew a second line. */
  white-space: nowrap; flex: 0 0 auto;
}

/* The stepper keeps its intrinsic width rather than being crushed by a tight row. */
nav.top .lifecycle { flex: 0 0 auto; }

nav.top .wordmark .star { color: var(--green-glow); letter-spacing: 0; text-shadow: 0 0 14px rgba(125,255,192,0.9); }

nav.top .wordmark .wm-short { display: none; }

nav.top .wordmark .logomark { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.26em; margin-right: 0.06em; color: var(--green-glow); filter: drop-shadow(0 0 7px rgba(125,255,192,0.85)); }

nav.top .wordmark .logomark svg { display: block; width: 100%; height: 100%; }

nav.top .sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: var(--space-2);
}

.sig {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-glow); box-shadow: 0 0 10px rgba(125,255,192,0.9);
  animation: sig 2.6s ease-in-out infinite;
}

@keyframes sig { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

nav.top .nav-actions { display: flex; align-items: center; gap: var(--space-3); }

nav.top .cta-link {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #eafff4;
  border: 1px solid rgba(125,255,192,0.5); border-radius: 999px;
  padding: 8px 16px; transition: all 200ms var(--ease);
  text-shadow: 0 0 10px rgba(125,255,192,0.5);
  box-shadow: inset 0 0 12px rgba(125,255,192,0.08);
  /* A pill that wraps stops reading as a button. As a flex item in the nav row
     this shrank to 52px and broke "Book a call" over three lines at 390px; it
     only ever fit by accident, and the localized labels are longer still
     ("In Kontakt bleiben", "Seguir en contacto"). Pin the intrinsic width so
     the label can't be broken — if space ever runs out, the header overflows
     visibly instead of silently degrading into a three-line pill. */
  white-space: nowrap; flex: 0 0 auto;
}

nav.top .cta-link:hover {
  border-color: var(--green-glow); color: #fff;
  box-shadow: 0 0 26px rgba(125,255,192,0.45), inset 0 0 14px rgba(125,255,192,0.15);
}

nav.top .lang-menu { position: relative; }

nav.top .lang-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 8px 13px; transition: all 200ms var(--ease);
}

nav.top .lang-menu summary::-webkit-details-marker { display: none; }

nav.top .lang-menu summary:hover, nav.top .lang-menu[open] summary { border-color: var(--blue-glow); color: #fff; box-shadow: 0 0 22px rgba(97,183,230,0.4); }

nav.top .lang-menu .globe { width: 14px; height: 14px; opacity: 0.85; }

nav.top .lang-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 170px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: rgba(7,10,16,0.97); border: 1px solid var(--hairline-2); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 0 30px rgba(97,183,230,0.14);
}

nav.top .lang-item { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-dim); padding: 8px 12px; border-radius: 8px; white-space: nowrap; }

nav.top a.lang-item:hover { color: #fff; background: rgba(97,183,230,0.14); }

nav.top .lang-item.lang-now { color: var(--blue-glow); background: rgba(97,183,230,0.10); }

nav.top .nav-burger {
  display: none; align-items: center; justify-content: center;
  background: transparent; cursor: pointer;
  color: var(--ink-dim); border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 8px 11px; transition: all 200ms var(--ease);
}

nav.top .nav-burger:hover, nav.top .nav-burger[aria-expanded="true"] { border-color: var(--blue-glow); color: #fff; box-shadow: 0 0 22px rgba(97,183,230,0.4); }

nav.top .nav-burger svg { width: 17px; height: 17px; display: block; }

header.hero {
  position: relative;
  padding: var(--space-32) var(--space-6) var(--space-24);
  text-align: center;
}

header.hero .inner { max-width: 900px; margin: 0 auto; }

.hero-kanji {
  position: absolute; left: clamp(10px, 4vw, 56px); top: 110px;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--font-pixel); font-size: clamp(40px, 6vw, 66px);
  letter-spacing: 0.16em; line-height: 1;
  color: #f1ecff; text-shadow: var(--ns-violet);
}

.hero-kata {
  position: absolute; right: clamp(8px, 3.4vw, 48px); top: 96px;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--font-pixel); font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.12em; line-height: 1;
  color: #ffe6f1; text-shadow: var(--ns-pink);
}

.hero .eyebrow { margin-bottom: var(--space-8); }

h1.title {
  font-family: var(--font-display);
  font-size: clamp(52px, 12vw, 124px);
  line-height: 0.98; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
  color: #eaf7ff;
  text-shadow: var(--ns-blue);
  animation: glowPulse 6.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,100% { filter: drop-shadow(0 0 26px rgba(60,141,182,0.3)); }
  50%     { filter: drop-shadow(0 0 60px rgba(97,183,230,0.55)); }
}

.hero .kicker {
  font-family: var(--font-mono); font-size: clamp(17px, 3vw, 27px); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 var(--space-8); line-height: 1.32;
}

.hero .kicker .b { color: var(--green-glow); text-shadow: var(--ns-green); }

.cur {
  display: inline-block; width: 0.62em; height: 1.05em; margin-left: 0.35em;
  vertical-align: -0.12em; background: var(--green-glow);
  box-shadow: 0 0 12px rgba(125,255,192,0.8);
  animation: blink 1.15s steps(1) infinite;
}

@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

p.subtitle {
  font-family: var(--font-mono); font-size: 16.5px; line-height: 1.85; color: var(--ink-dim);
  max-width: 620px; margin: 0 auto var(--space-12);
}

p.subtitle b { color: #fff; font-weight: 600; text-shadow: 0 0 12px rgba(97,183,230,0.6); }

.scroll-chev { display: inline-block; filter: drop-shadow(0 0 9px rgba(125,255,192,0.55)); }

.scroll-chev polyline { animation: marchdown 1.7s linear infinite; opacity: 0.12; }

.scroll-chev polyline:nth-child(2) { animation-delay: 0.28s; }

.scroll-chev polyline:nth-child(3) { animation-delay: 0.56s; }

@keyframes marchdown { 0% { opacity: 0.12; } 30% { opacity: 1; } 60%, 100% { opacity: 0.12; } }

@keyframes softblink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@keyframes flicker {
  0%, 7.4%, 8.4%, 12%, 45.9%, 47%, 100% { opacity: 1; }
  7.5%, 8.3% { opacity: 0.25; }
  12.4% { opacity: 0.6; }
  12.8% { opacity: 1; }
  46.2% { opacity: 0.35; }
  46.6% { opacity: 1; }
}

.flick { animation: flicker 6.2s linear infinite; }

.marquee {
  overflow: hidden; border-top: 1px solid rgba(255,77,141,0.35); border-bottom: 1px solid rgba(255,77,141,0.35);
  padding: var(--space-4) 0; margin: 0 0 var(--space-24);
  background: linear-gradient(90deg, rgba(255,45,111,0.05), rgba(138,107,255,0.05));
  box-shadow: 0 0 30px rgba(255,45,111,0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee .track {
  display: inline-flex; white-space: nowrap; gap: var(--space-6);
  font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.06em; color: #e9c4d2;
  animation: scroll 72s linear infinite; will-change: transform;
}

.marquee .track strong { color: #fff; text-shadow: 0 0 12px rgba(255,77,141,0.7); }

.marquee .star { color: var(--pink-glow); text-shadow: 0 0 14px rgba(255,77,141,0.9); }

@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

section.s { padding: var(--space-16) 0; scroll-margin-top: 80px; }

.s-head { margin-bottom: var(--space-8); 
 text-align: center; }

.s-num {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em;
  color: var(--green-glow); text-shadow: var(--ns-green);
  display: block; margin-bottom: var(--space-3); text-transform: uppercase;
}

.s-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.8vw, 42px); line-height: 1.18; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  margin: 0; color: #eaf7ff; text-shadow: var(--ns-blue);
  max-width: 24ch; text-wrap: balance;

 margin-left: auto; margin-right: auto; }

.s-title.wide { max-width: 30ch; }

.lead { font-family: var(--font-mono); font-size: 16px; color: var(--ink-dim); max-width: var(--reading); margin-top: var(--space-4); 
 margin-left: auto; margin-right: auto; text-align: center; }

.pullquote {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 3.8vw, 32px); line-height: 1.55; letter-spacing: 0.04em;
  color: #ffe6f1; text-shadow: var(--ns-pink);
  max-width: 780px; margin: var(--space-24) 0;

 margin-left: auto; margin-right: auto; text-align: center; }

.pullquote em { color: #eafff4; text-shadow: var(--ns-green); }

.aside {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #b9efd7;
  max-width: var(--reading); margin: var(--space-8) 0;
  border: 1px dashed rgba(125,255,192,0.45); border-radius: 10px;
  background: rgba(79,214,160,0.05);
  box-shadow: inset 0 0 18px rgba(79,214,160,0.08);
  padding: var(--space-8) var(--space-12);

 margin-left: auto; margin-right: auto; text-align: center; }

.aside::before { content: "// "; color: var(--green-glow); }

.diagram {
  margin: var(--space-12) 0; padding: var(--space-8);
  border: 1px solid var(--hairline-2); border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,14,22,0.82), rgba(6,9,14,0.92));
  box-shadow: 0 0 44px rgba(60,141,182,0.14), inset 0 0 50px rgba(0,0,0,0.5);
  max-width: var(--wide);

 margin-left: auto; margin-right: auto; }

.diagram .caption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.5);
  margin-bottom: var(--space-6); text-align: center;
}

.diagram svg { display: block; width: 100%; height: auto; overflow: visible; filter: saturate(1.25) drop-shadow(0 0 7px rgba(97,183,230,0.3)); }

.shift { margin-top: var(--space-8); }

.shift .row { display: grid; grid-template-columns: minmax(150px, 0.95fr) 48px 1.4fr; gap: var(--space-4); align-items: center; padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }

.shift .row:first-child { border-top: 0; }

.shift .from { font-family: var(--font-mono); font-size: clamp(17px, 2.2vw, 20px); line-height: 1.25; color: #8d93a0; text-decoration: line-through; text-decoration-color: rgba(255,45,111,0.9); text-decoration-thickness: 3px; text-align: right; }

.shift .arrow { font-family: var(--font-mono); font-size: 24px; color: var(--green-glow); text-align: center; text-shadow: var(--ns-green); }

.shift .to h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 4px; color: #eaf7ff; text-shadow: 0 0 14px rgba(97,183,230,0.45); }

.shift .to p { margin: 0; font-size: 14px; color: var(--ink-dim); }

.people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: var(--space-8); }

.person h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--space-1); color: #eaf7ff; text-shadow: 0 0 16px rgba(97,183,230,0.5); }

.person .org { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.4); margin-bottom: var(--space-4); }

.person p { font-size: 14.5px; }

/* FAQ — extraction-friendly Q&A for AEO. Left-aligned reading column; the
   section header keeps the uppercase .s-title pattern, the items are
   sentence-case for readability. Content must be on-page for FAQPage schema. */
.faq { max-width: var(--reading); margin: var(--space-8) auto 0; text-align: left; }
.faq-item { padding: var(--space-8) 0; border-top: 1px solid var(--hairline); }
.faq-item:first-child { border-top: none; padding-top: 0; }
.faq-item h3 {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.35; margin: 0 0 var(--space-3);
  color: #eaf7ff; text-shadow: var(--ns-blue);
}
.faq-item p { font-size: 15px; line-height: 1.65; color: var(--ink-dim); margin: 0; }
.faq-item em { color: #eafff4; font-style: italic; }

.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

.stat {
  min-width: 190px; padding: var(--space-6) var(--space-8);
  border: 1px solid rgba(97,183,230,0.4); border-radius: 12px;
  background: rgba(8,12,18,0.6); text-align: center;
  box-shadow: 0 0 26px rgba(97,183,230,0.14), inset 0 0 16px rgba(97,183,230,0.06);
}

.stat .n2 { display: block; font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #eaf7ff; line-height: 1.1; margin-bottom: var(--space-2); text-shadow: var(--ns-blue); }

.stat .l { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.4); }

.cta-term { margin: var(--space-24) 0; }

.term {
  max-width: 760px; margin: 0 auto; border: 1px solid rgba(125,255,192,0.45); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(8,12,16,0.94), rgba(5,8,12,0.97));
  box-shadow: 0 0 60px rgba(79,214,160,0.16), inset 0 0 60px rgba(0,0,0,0.45);
}

.term-bar { display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.02); }

.term-bar .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.85; }

.term-bar .dot.r { background: #ff5f57; box-shadow: 0 0 8px rgba(255,95,87,0.7); }

.term-bar .dot.y { background: #febc2e; box-shadow: 0 0 8px rgba(254,188,46,0.7); }

.term-bar .dot.g { background: #28c840; box-shadow: 0 0 8px rgba(40,200,64,0.7); }

.term-bar .term-title { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin-left: var(--space-3); letter-spacing: 0.04em; }

.term-body { padding: var(--space-8); font-family: var(--font-mono); }

.term-body .line { font-size: clamp(18px, 2.6vw, 24px); color: #eafff4; text-shadow: 0 0 12px rgba(125,255,192,0.3); margin: 0 0 var(--space-3); }

.term-body .prompt { color: var(--green-glow); text-shadow: var(--ns-green); margin-right: var(--space-3); }

.term-body .resp { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 var(--space-8); line-height: 1.7; }

.term-form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.term-form .prompt { color: var(--green-glow); }

.term-form input {
  flex: 1; min-width: 200px; background: transparent; border: 0; border-bottom: 1px solid rgba(125,255,192,0.4);
  color: #eafff4; font-family: var(--font-mono); font-size: 16px; padding: 8px 2px;
}

.term-form input:focus { outline: none; border-bottom-color: var(--green-glow); box-shadow: 0 2px 0 rgba(125,255,192,0.5); }

.term-form input::placeholder { color: var(--ink-faint); }

.term-form button {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; cursor: pointer;
  color: var(--void); background: var(--green-glow); border: 0; border-radius: 6px; padding: 9px 18px;
  box-shadow: 0 0 26px rgba(125,255,192,0.55); transition: all 180ms var(--ease);
}

.term-form button:hover { box-shadow: 0 0 40px rgba(125,255,192,0.85); transform: translateY(-1px); }

/* Primary booking CTA — an <a> styled as the terminal's big green action.
   Plain link on cold load (no Cal embed, no third-party script); JS only
   decorates the href and fires the click event. */
.term-book {
  display: inline-block; margin: 0 0 var(--space-8);
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.06em;
  color: var(--void); background: var(--green-glow);
  border-radius: 8px; padding: 14px 28px;
  box-shadow: 0 0 32px rgba(125,255,192,0.55); transition: all 180ms var(--ease);
}

.term-book:hover { box-shadow: 0 0 48px rgba(125,255,192,0.85); transform: translateY(-1px); color: var(--void); }

.term-book:focus-visible { outline: 2px solid var(--green-glow); outline-offset: 3px; }

.term-book .cta-arr { margin-left: var(--space-2); }

/* Secondary (demoted) email block under the booking CTA */
.term-alt { border-top: 1px dashed rgba(125,255,192,0.25); padding-top: var(--space-6); }

.term-alt .line { font-size: 15px; text-shadow: none; }

@media (max-width: 560px) {
  .term-book { display: block; text-align: center; }
}

.cta-term .form-done { font-family: var(--font-mono); font-size: 14px; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.5); margin-top: var(--space-4); min-height: 20px; }

.cta-term .form-done.err { color: var(--pink-glow); text-shadow: 0 0 10px rgba(255,45,111,0.45); }

.cta-term .term-checks { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }

/* Cloudflare Turnstile mount (created by /js/forms-guard.js on first form interaction;
   empty until then, so no cold-load cost). Full-width so the "flexible" widget sizes
   to the form. */
.cf-turnstile-mount { width: 100%; margin: var(--space-4) 0 0; }
.cf-turnstile-mount:empty { margin: 0; }

.cta-term .term-check { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); cursor: pointer; text-shadow: none; }

.cta-term .term-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 16px; height: 16px; min-width: 0; margin: 2px 0 0; padding: 0; border: 1px solid rgba(125,255,192,0.45); border-radius: 4px; background: rgba(255,255,255,0.05); box-shadow: none; cursor: pointer; position: relative; transition: background 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease); }

.cta-term .term-check input[type="checkbox"]:checked { background: var(--green-glow); border-color: var(--green-glow); box-shadow: 0 0 12px rgba(125,255,192,0.5); }

.cta-term .term-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid #04130c; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.cta-term .term-check input[type="checkbox"]:focus-visible { outline: 2px solid rgba(125,255,192,0.7); outline-offset: 2px; }

.cta-term .term-check a { color: #bfeed8; text-decoration: underline; text-underline-offset: 2px; }

.cta-term .term-check a:hover { color: #fff; }

.collect-form { max-width: var(--reading); margin: var(--space-8) auto 0; text-align: left; }

.collect-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); align-items: center; }

.collect-row input {
  flex: 1; min-width: 170px; background: rgba(0,0,0,0.4); border: 1px solid rgba(125,255,192,0.35);
  border-radius: 999px; color: #eafff4; font-family: var(--font-mono); font-size: 14px; padding: 10px 16px;
  box-shadow: inset 0 0 12px rgba(79,214,160,0.06);
}

.collect-row input:focus { outline: none; border-color: var(--green-glow); box-shadow: 0 0 18px rgba(125,255,192,0.3); }

.collect-row input::placeholder { color: var(--ink-faint); }

.collect-form button {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; cursor: pointer;
  color: var(--void); background: var(--green-glow); border: 0; border-radius: 999px; padding: 11px 22px;
  box-shadow: 0 0 26px rgba(125,255,192,0.5); transition: all 180ms var(--ease); white-space: nowrap;
}

.collect-form button:hover { box-shadow: 0 0 40px rgba(125,255,192,0.8); transform: translateY(-1px); }

.collect-done { font-family: var(--font-mono); font-size: 13.5px; color: var(--green-glow); margin-top: var(--space-4); min-height: 20px; }

.define { padding: var(--space-16) 0 var(--space-16); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-8); }

.dict {
  position: relative;
  max-width: 816px; margin: 0 auto; text-align: center;
  background: rgba(8,12,20,0.78);
  border: 1px solid rgba(97,183,230,0.45); border-radius: 18px;
  padding: var(--space-24) var(--space-24);
  box-shadow: 0 0 70px rgba(60,141,182,0.28), 0 0 24px rgba(255,45,111,0.08), inset 0 0 50px rgba(0,0,0,0.5);
}

.dict .word { display: block; font-family: var(--font-display); font-size: clamp(34px, 6.6vw, 60px); font-weight: 700; line-height: 1.1; color: #eaf7ff; text-shadow: var(--ns-blue); }

.dict .phon { margin: var(--space-3) 0 0; }

.dict .pos { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-faint); }

.dict .ipa { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--blue-glow); text-shadow: 0 0 10px rgba(97,183,230,0.5); margin-left: var(--space-3); }

.dict .def { font-family: var(--font-mono); font-size: clamp(16px, 2.2vw, 19px); line-height: 1.8; color: var(--ink-dim); margin: var(--space-6) auto 0; max-width: 50ch; }

.dict .def b { color: #fff; font-weight: 600; text-shadow: 0 0 12px rgba(97,183,230,0.6); }

.dict .def-2 { margin-top: var(--space-4); }

.dict .def-2 em { font-weight: 800; }

.dict .similar { margin: var(--space-6) auto 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--ink-faint); max-width: 52ch; }

.dict .similar .lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.4); margin-right: var(--space-3); }

.shapes-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-8); max-width: var(--wide); margin-left: auto; margin-right: auto; text-align: center; }

.shape4 {
  padding: var(--space-6); border-radius: 12px;
  border: 1px solid rgba(97,183,230,0.35); background: rgba(8,12,18,0.6);
  box-shadow: 0 0 20px rgba(97,183,230,0.08);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}

.shape4:hover { transform: translateY(-3px); box-shadow: 0 0 36px rgba(97,183,230,0.25); }

.shape4-icon { width: 38px; height: 38px; display: block; margin: 0 auto var(--space-4); }

.shape4-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: var(--space-3); }

.shape4 h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 var(--space-2); color: #eaf7ff; text-shadow: 0 0 12px rgba(97,183,230,0.45); }

.shape4 p { font-size: 13px; line-height: 1.65; margin: 0; color: var(--ink-dim); }

.shape4-capture .shape4-icon { color: var(--blue-glow); filter: drop-shadow(0 0 7px rgba(97,183,230,0.7)); }

.shape4-capture .shape4-tag { color: var(--blue-glow); border: 1px solid rgba(97,183,230,0.4); text-shadow: 0 0 8px rgba(97,183,230,0.5); }

.shape4-access { border-color: rgba(255,77,141,0.4); background: rgba(255,45,111,0.045); box-shadow: 0 0 20px rgba(255,45,111,0.08); }

.shape4-access:hover { box-shadow: 0 0 36px rgba(255,45,111,0.22); }

.shape4-access .shape4-icon { color: #ff8ab4; filter: drop-shadow(0 0 7px rgba(255,77,141,0.7)); }

.shape4-access .shape4-tag { color: #ff8ab4; border: 1px solid rgba(255,77,141,0.45); text-shadow: 0 0 8px rgba(255,77,141,0.5); }

.shape4-access h3 { text-shadow: 0 0 12px rgba(255,77,141,0.45); }

html.light, html.light body { background: #f5f4ef; color: #353b47; }

html.light .bg, html.light .grid-overlay, html.light .scanlines, html.light .vignette,
html.light .nebula-wrap, html.light canvas#stars,
html.light .hero-kanji, html.light .hero-kata { display: none; }

html.light *, html.light *::before, html.light *::after { text-shadow: none !important; box-shadow: none !important; }

html.light h1.title, html.light .flick { animation: none; filter: none; }

html.light p { color: #4a5160; }

html.light a { color: #1b6b96; }

html.light a:hover { color: #0e4a6b; }

html.light strong { color: #14181f; }

html.light em { color: #9a3412; }

html.light .eyebrow { color: #c2410c; }

html.light nav.top { background: rgba(247,246,242,0.82); border-bottom: 1px solid rgba(20,24,31,0.08); }

html.light nav.top .wordmark { color: #14181f; }

html.light nav.top .wordmark .star { color: #c2410c; }

html.light nav.top .wordmark .logomark { color: #c2410c; filter: drop-shadow(0 0 6px rgba(194,65,12,0.45)); }

html.light nav.top .sub { color: #7a8190; }

html.light .sig { background: #c2410c; }

html.light nav.top .cta-link { color: #14181f; border-color: rgba(20,24,31,0.22); }

html.light nav.top .cta-link:hover { border-color: #c2410c; color: #000; }

html.light nav.top .nav-burger { color: #4a5160; border-color: rgba(20,24,31,0.18); }

html.light nav.top .nav-burger:hover { border-color: #1b6b96; color: #000; }

html.light nav.top .lang-menu summary { color: #4a5160; border-color: rgba(20,24,31,0.18); }

html.light nav.top .lang-menu summary:hover, html.light nav.top .lang-menu[open] summary { border-color: #1b6b96; color: #000; }

html.light nav.top .lang-list { background: #ffffff; border-color: rgba(20,24,31,0.16); }

html.light nav.top .lang-item { color: #4a5160; }

html.light nav.top a.lang-item:hover { color: #000; background: rgba(27,107,150,0.08); }

html.light nav.top .lang-item.lang-now { color: #1b6b96; background: rgba(27,107,150,0.10); }

html.light h1.title { color: #14181f; }

html.light .hero .kicker { color: #4a5160; }

html.light .hero .kicker .b { color: #c2410c; }

html.light .cur { background: #c2410c; }

html.light p.subtitle { color: #4a5160; }

html.light p.subtitle b { color: #14181f; }

html.light .scroll-chev svg g { stroke: #c2410c; }

html.light .marquee { border-color: rgba(20,24,31,0.10); background: rgba(20,24,31,0.025); }

html.light .marquee .track { color: #5a6170; }

html.light .marquee .track strong { color: #14181f; }

html.light .marquee .star { color: #c2410c; }

html.light .s-num { color: #c2410c; }

html.light .s-title { color: #14181f; }

html.light .lead { color: #4a5160; }

html.light .pullquote { color: #20242c; }

html.light .pullquote em { color: #c2410c; }

html.light .aside { color: #9a3412; border-color: rgba(194,65,12,0.40); background: rgba(194,65,12,0.05); }

html.light .aside::before { color: #c2410c; }

html.light .dict { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .dict .word { color: #14181f; }

html.light .dict .ipa { color: #1b6b96; }

html.light .dict .pos, html.light .dict .similar { color: #7a8190; }

html.light .dict .def { color: #4a5160; }

html.light .dict .def b { color: #14181f; }

html.light .dict .def-2 em { color: #9a3412; }

html.light .dict .similar .lbl { color: #c2410c; }

html.light .shapes-4col .shape4 { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .shape4 h3 { color: #14181f; }

html.light .shape4 p { color: #4a5160; }

html.light .shape4-capture .shape4-icon { color: #1b6b96; filter: none; }

html.light .shape4-capture .shape4-tag { color: #1b6b96; border-color: rgba(27,107,150,0.4); }

html.light .shape4-access { background: rgba(158,138,125,0.10); border-color: rgba(122,102,87,0.30); }

html.light .shape4-access .shape4-icon { color: #7a6657; filter: none; }

html.light .shape4-access .shape4-tag { color: #7a6657; border-color: rgba(122,102,87,0.40); }

html.light .shift .row { border-color: rgba(20,24,31,0.10); }

html.light .shift .from { color: #9aa1ad; text-decoration-color: rgba(194,65,12,0.75); }

html.light .shift .arrow { color: #c2410c; }

html.light .shift .to h3 { color: #14181f; }

html.light .shift .to p { color: #4a5160; }

html.light .stat { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .stat .n2 { color: #14181f; }

html.light .stat .l { color: #c2410c; }

html.light .person h3 { color: #14181f; }

html.light .person .org { color: #c2410c; }

html.light .collect-row input { background: #ffffff; border-color: rgba(20,24,31,0.20); color: #14181f; }

html.light .collect-row input::placeholder { color: #9aa1ad; }

html.light .collect-row input:focus { border-color: #c2410c; }

html.light .collect-form button { background: #c2410c; color: #ffffff; }

html.light .collect-form button:hover { background: #9a3412; }

html.light .collect-done { color: #c2410c; }

html.light footer.colophon { border-top-color: rgba(20,24,31,0.10); }

html.light footer .big { color: #14181f; }

html.light footer .big .star { color: #c2410c; }

html.light footer .badge { color: #4a5160; border-color: rgba(20,24,31,0.18); }

html.light footer .badge:hover { color: #000; border-color: #c2410c; background: rgba(194,65,12,0.06); }

html.light footer .serial, html.light footer .meta { color: #7a8190; }

html.light .diagram { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .diagram .caption { color: #c2410c; }

html.light .diagram svg { filter: none; }

html.light .diagram svg text[fill="#e8eaf0"] { fill: #14181f; }

html.light .diagram svg text[fill="#cfe3ee"] { fill: #17597f; }

html.light .diagram svg text[fill="#cfd5df"] { fill: #3f4654; }

html.light .diagram svg text[fill="#aeb4c0"] { fill: #5f6775; }

html.light .diagram svg text[fill="#9aa2af"] { fill: #6e7686; }

html.light .diagram svg text[fill="#8b929f"] { fill: #5a6170; }

html.light .diagram svg text[fill="#7b8290"] { fill: #6e7686; }

html.light .diagram svg text[fill="#61b7e6"] { fill: #1b6b96; }

html.light .diagram svg circle[fill="#ffffff"], html.light .diagram svg rect[fill="#ffffff"] { fill: #14181f; fill-opacity: 0.04; }

html.light .diagram svg *[stroke="#3c8db6"] { stroke: #2273a3; }

html.light .diagram svg *[stroke="#6b7180"] { stroke: #8a93a1; }

html.light .diagram svg circle[fill="#3c8db6"] { fill: #2273a3; }

html.light .diagram svg circle[fill="#6b7180"] { fill: #818a99; }

html.light .diagram svg circle[fill="#61b7e6"] { fill: #2273a3; }

html.light .diagram svg circle[stroke="#61b7e6"] { stroke: #2273a3; }

html.light .fig-gap svg circle[fill="url(#dcglow)"] { fill: url(#dcglow-l); }

html.light .fig-measured svg rect[fill="#3c8db6"] { fill: #2273a3; fill-opacity: 0.08; }

html.light .fig-eras svg line[stroke="url(#eras)"] { stroke: url(#eras-l); }

html.light .fig-eras svg circle[fill="#4fd6a0"] { fill: #c2410c; }

html.light .fig-eras svg circle[stroke="#4fd6a0"] { stroke: #c2410c; stroke-opacity: 0.45; }

html.light .fig-eras svg text[fill="#7dffc0"] { fill: #c2410c; }

html.light .fig-eras svg text[fill="#4fd6a0"] { fill: #ad470e; }

html.light .fig-loops svg text[fill="#9e8a7d"] { fill: #a3490f; }

html.light .fig-loops svg text[fill="#c4a896"] { fill: #9a6043; }

html.light .fig-loops svg g[stroke="#9e8a7d"] { stroke: #b06a3e; }

html.light .fig-loops svg text[fill="#4fd6a0"] { fill: #17699b; }

html.light .fig-loops svg text[fill="#9fe0c2"] { fill: #3a7ca6; }

html.light .fig-loops svg g[stroke="#4fd6a0"] { stroke: #2273a3; }

html.light .fig-ladder svg line[stroke="url(#ladder-grad)"] { stroke: url(#ladder-grad-l); }

html.light .term { border-color: rgba(20,24,31,0.35); }

.asbar { position: fixed; top: 10px; right: 10px; z-index: 200; display: flex; gap: 8px; align-items: center;
  background: rgba(5,8,12,0.92); border: 1px solid var(--hairline-2); border-radius: 999px; padding: 7px 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.asbar .star { color: var(--green-glow); }

.asbar button { font-family: var(--font-mono); font-size: 12px; cursor: pointer; border: 1px solid var(--hairline-2);
  background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 12px; }

.asbar button.primary { background: var(--green-glow); color: var(--void); border: 0; font-weight: 600; }

.asctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-6);
  padding: 8px 10px; border: 1px dashed var(--hairline-2); border-radius: 10px; background: rgba(79,214,160,0.04); }

.asctl .aslabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-right: auto; }

.asctl button { font-family: var(--font-mono); font-size: 12px; cursor: pointer; border: 1px solid var(--hairline-2); background: transparent; color: var(--ink-dim); border-radius: 999px; padding: 5px 11px; transition: all 150ms var(--ease); }

.asctl button:hover { color: #fff; border-color: var(--blue-glow); }

.asctl button.on[data-v="keep"] { background: rgba(79,214,160,0.2); border-color: var(--green); color: var(--green-glow); }

.asctl button.on[data-v="rework"] { background: rgba(254,188,46,0.16); border-color: #febc2e; color: #ffd479; }

.asctl button.on[data-v="cut"] { background: rgba(255,95,87,0.16); border-color: #ff5f57; color: #ff9a94; }

.asctl .asnote { width: 100%; margin-top: 6px; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--ink); background: rgba(0,0,0,0.4); border: 1px solid var(--hairline-2); border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 54px; }

.asctl .asnote[hidden] { display: none; }

section.is-keep { border-left: 2px solid var(--green); padding-left: var(--space-4); }

section.is-rework { border-left: 2px solid #febc2e; padding-left: var(--space-4); }

section.is-cut { opacity: 0.5; }

footer.colophon {
  margin-top: var(--space-16); padding: var(--space-12) var(--space-6) var(--space-24);
  border-top: 1px solid var(--hairline-2); text-align: center;
  box-shadow: 0 -6px 50px rgba(60,141,182,0.08);
}

footer .big { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 15px; color: #eaf7ff; text-shadow: 0 0 16px rgba(97,183,230,0.6); margin-bottom: var(--space-3); }

footer .big .star { color: var(--green-glow); letter-spacing: 0; text-shadow: 0 0 14px rgba(125,255,192,0.9); }

footer .social { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-8); }

footer .badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-dim);
  border: 1px solid var(--hairline-2); border-radius: 999px; padding: 7px 14px;
  transition: all 200ms var(--ease);
}

footer .badge:hover { color: #fff; border-color: var(--pink-glow); box-shadow: 0 0 24px rgba(255,77,141,0.4); }

footer .badge svg { width: 15px; height: 15px; display: block; }

footer .serial { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--ink-faint); margin-bottom: var(--space-4); }

footer .meta { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; color: var(--ink-faint); max-width: 64ch; margin: 0 auto; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }

.reveal.in { opacity: 1; transform: none; }

.lifecycle { display:inline-flex; align-items:center; gap:3px; border:1px solid var(--hairline-2); border-radius:999px; padding:4px 8px; }

.lifecycle .lc-step { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-faint); padding:4px 8px; border-radius:999px; transition:all 200ms var(--ease); white-space:nowrap; }

.lifecycle a.lc-step:hover { color:#fff; background:rgba(255,255,255,0.06); }

.lifecycle .lc-dot { width:8px; height:8px; border-radius:50%; flex:none; transition:all 200ms var(--ease); }

.lifecycle .lc-live .lc-dot { background:var(--green-glow); box-shadow:0 0 8px rgba(125,255,192,0.8); }

.lifecycle .lc-gray .lc-dot { background:#8b94a2; }

.lifecycle .lc-dark .lc-dot { background:transparent; border:1px solid var(--ink-faint); }

.lifecycle .lc-sep { width:12px; height:1px; background:var(--hairline-2); flex:none; }

.lifecycle .lc-now { cursor:default; }

.lifecycle .lc-live.lc-now { color:var(--green-glow); background:rgba(125,255,192,0.10); }

.lifecycle .lc-gray.lc-now { color:#cdd4de; background:rgba(139,148,162,0.16); }

.lifecycle .lc-dark.lc-now { color:#eaf7ff; background:rgba(234,247,255,0.08); }

.lifecycle .lc-now .lc-dot { transform:scale(1.25); }

.lifecycle .lc-dark.lc-now .lc-dot { border-color:#eaf7ff; box-shadow:0 0 8px rgba(234,247,255,0.55); }

html.light .lifecycle { border-color:rgba(20,24,31,0.18); }

html.light .lifecycle .lc-step { color:#7a8190; }

html.light .lifecycle a.lc-step:hover { color:#000; background:rgba(20,24,31,0.05); }

html.light .lifecycle .lc-live .lc-dot { background:#1b6b96; box-shadow:none; }

html.light .lifecycle .lc-gray .lc-dot { background:#9aa1ad; }

html.light .lifecycle .lc-dark .lc-dot { border-color:#9aa1ad; }

html.light .lifecycle .lc-sep { background:rgba(20,24,31,0.14); }

html.light .lifecycle .lc-live.lc-now { color:#1b6b96; background:rgba(27,107,150,0.10); }

html.light .lifecycle .lc-gray.lc-now { color:#3a4150; background:rgba(120,128,140,0.16); }

html.light .lifecycle .lc-dark.lc-now { color:#14181f; background:rgba(20,24,31,0.06); }

html.light .lifecycle .lc-dark.lc-now .lc-dot { border-color:#14181f; box-shadow:none; }

.lifecycle-band { max-width:1000px; margin:0 auto; padding:8px var(--space-6) var(--space-8); }

.lifecycle-band .lb-head { font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); text-align:center; margin:0 0 var(--space-4); }

.lifecycle-band .lb-row { display:flex; align-items:stretch; justify-content:center; }

.lifecycle-band .lb-card { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:9px; padding:18px; border:1px solid var(--hairline-2); border-radius:14px; background:rgba(7,10,16,0.5); transition:all 220ms var(--ease); }

.lifecycle-band a.lb-card:hover { border-color:rgba(255,255,255,0.28); transform:translateY(-2px); }

.lifecycle-band .lb-top { display:flex; align-items:center; justify-content:space-between; min-height:14px; }

.lifecycle-band .lb-dot { width:11px; height:11px; border-radius:50%; flex:none; }

.lifecycle-band .lb-live .lb-dot { background:var(--green-glow); box-shadow:0 0 10px rgba(125,255,192,0.8); }

.lifecycle-band .lb-gray .lb-dot { background:#8b94a2; }

.lifecycle-band .lb-dark .lb-dot { background:transparent; border:1px solid var(--ink-dim); }

.lifecycle-band .lb-here { font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--hairline-2); border-radius:999px; padding:2px 8px; }

.lifecycle-band .lb-name { font-family:var(--font-display); font-size:16px; letter-spacing:0.04em; color:#eaf7ff; }

.lifecycle-band .lb-live .lb-name { color:#bdfbe0; }

.lifecycle-band .lb-desc { font-family:var(--font-mono); font-size:12.5px; line-height:1.5; color:var(--ink-dim); }

.lifecycle-band .lb-arrow { align-self:center; flex:none; padding:0 16px; color:var(--ink-faint); font-size:18px; }

.lifecycle-band .lb-now { background:rgba(255,255,255,0.045); }

.lifecycle-band .lb-foot { text-align:center; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin:var(--space-4) 0 0; }

.lifecycle-band .lb-more { text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin:12px 0 0; }

.lifecycle-band .lb-more a { color:var(--green-glow); text-decoration:none; border-bottom:1px solid transparent; transition:border-color 180ms var(--ease); }

.lifecycle-band .lb-more a:hover { border-bottom-color:currentColor; }

html.light .lifecycle-band .lb-head, html.light .lifecycle-band .lb-foot, html.light .lifecycle-band .lb-here, html.light .lifecycle-band .lb-more { color:#7a8190; }

html.light .lifecycle-band .lb-card { background:rgba(255,255,255,0.6); border-color:rgba(20,24,31,0.14); }

html.light .lifecycle-band a.lb-card:hover { border-color:rgba(20,24,31,0.3); }

html.light .lifecycle-band .lb-name { color:#14181f; }

html.light .lifecycle-band .lb-live .lb-name { color:#155e83; }

html.light .lifecycle-band .lb-desc { color:#4a5160; }

html.light .lifecycle-band .lb-live .lb-dot { background:#1b6b96; box-shadow:none; }

html.light .lifecycle-band .lb-gray .lb-dot { background:#9aa1ad; }

html.light .lifecycle-band .lb-dark .lb-dot { border-color:#5a6170; }

html.light .lifecycle-band .lb-now { background:rgba(20,24,31,0.04); }

html.light .lifecycle-band .lb-here { border-color:rgba(20,24,31,0.18); }

html.light .lifecycle-band .lb-more a { color:#1b6b96; }

.kicker {font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);}

.kicker b {color:var(--green);font-weight:500;}

.top {position:fixed;top:clamp(14px,3.4vh,28px);left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(14px,4vw,30px);}

.hero-title {margin:0 0 clamp(.3rem,1.6vh,.9rem);font-family:var(--font-mono);font-weight:600;font-size:clamp(16px,3.7vw,19px);letter-spacing:.2em;text-transform:uppercase;color:var(--green);text-shadow:0 0 14px rgba(125,255,192,.35);text-align:center;}

.hero {position:relative;min-height:100svh;display:grid;place-items:center;padding:6vmin 5vmin;
  background:radial-gradient(120% 90% at 50% 30%, rgba(79,214,160,.05), transparent 60%), var(--void);}

.phases {display:flex;width:100%;}

.ph {display:flex;flex-direction:column;gap:8px;align-items:center;opacity:.42;transition:opacity .25s var(--ease);}

.ph.p-dark {flex:0 0 25%;}

.ph.p-gray {flex:0 0 33.333%;}

.ph.p-green {flex:0 0 41.667%;}

.ph .phbar {width:calc(100% - 6px);height:15px;border:2px solid var(--slate);border-bottom:none;border-radius:4px 4px 0 0;}

.ph.p-dark .phbar {border-color:var(--slate);}

.ph.p-gray .phbar {border-color:var(--ink-faint);}

.ph.p-green .phbar {border-color:var(--green);}

.ph .phlbl {font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;}

.ph.on {opacity:1;}

.ph.on .phlbl {color:var(--ink-dim);}

.ph.on.p-green .phbar {filter:drop-shadow(0 0 5px rgba(125,255,192,.7)) drop-shadow(0 0 12px rgba(79,214,160,.45));}

.ph.on.p-green .phlbl {color:var(--green);}

.intro {display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;}

.model-statement {margin:0;font-family:var(--font-mono);font-weight:300;font-size:13px;line-height:1.5;letter-spacing:.02em;color:var(--ink-dim);max-width:52ch;}

.model-statement b {color:var(--green);font-weight:500;}

.phase-gloss {font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);}

.phase-gloss .g-dark {color:var(--ink-dim);}

.phase-gloss .g-gray {color:var(--ink-faint);}

.phase-gloss .g-green {color:var(--green);}

.phase-gloss .sep {color:var(--hairline-2);margin:0 .5em;}

.word {position:relative;display:inline-flex;align-items:center;gap:.34em;font-size:clamp(2.2rem,11vw,7rem);line-height:1;margin-top:clamp(.4rem,2vh,1.2rem);margin-bottom:clamp(1rem,4vh,2.4rem);}

.word .ctx {position:relative;display:grid;place-items:center;}

.layer {grid-area:1/1;margin:0;white-space:nowrap;font-weight:700;line-height:1;font-size:1em;opacity:0;transform-origin:50% 50%;}

.l0 {font-family:"Red100",serif;color:#5a6271;}

.l1 {font-family:"Red70",serif;color:#868f9d;}

.l2 {font-family:"Red50",serif;color:#b3bbc7;}

.l3 {font-family:"Red35",serif;color:#e6eaef;}

.l4 {font-family:"Red20",serif;color:var(--green-dim);}

.l5 {font-family:"Red10",serif;color:var(--green);text-shadow:0 0 4px rgba(234,255,244,.42),0 0 14px rgba(125,255,192,.4),0 0 30px rgba(79,214,160,.25);}

.l6 {font-family:"Red0",serif;color:var(--green-glow);text-shadow:var(--ns-green);}

.hdot {position:relative;flex:0 0 auto;width:.58em;height:.58em;}

.hdl {position:absolute;inset:0;opacity:0;}

.hdl .pulse,.hdl svg {display:block;width:100%;height:100%;}

.hd-s1 {color:#5a6271;}

.hd-s2 {color:#868f9d;}

.hd-s3 {color:#b3bbc7;}

.hd-s4 {color:#e6eaef;}

.hd-green-flat {color:var(--green-dim);}

.hd-green {color:var(--green);filter:drop-shadow(0 0 4px rgba(234,255,244,.85)) drop-shadow(0 0 14px rgba(125,255,192,.8)) drop-shadow(0 0 30px rgba(79,214,160,.5));}

.hd-green .pulse {animation:hdpulse6 1.9s var(--ease) infinite;}

.hd-green-pulse {color:var(--green);filter:drop-shadow(0 0 4px rgba(234,255,244,.85)) drop-shadow(0 0 14px rgba(125,255,192,.8)) drop-shadow(0 0 30px rgba(79,214,160,.5));}

.hd-green-pulse .pulse {animation:hdpulse 1.9s var(--ease) infinite;}

@keyframes hdpulse {0%,100%{opacity:1;}50%{opacity:.25;}}

@keyframes hdpulse6 {0%,100%{opacity:.5;}50%{opacity:.125;}}

.controls {width:100%;display:flex;flex-direction:column;gap:.85rem;}

.slider {--track:#5a6271;
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:grab;margin:0;display:block;}

.slider:active {cursor:grabbing;}

.slider:focus {outline:none;}

.slider::-webkit-slider-runnable-track {height:8px;border-radius:5px;background:var(--track);}

.slider::-moz-range-track {height:8px;border-radius:5px;background:var(--track);}

.slider::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;box-sizing:border-box;width:28px;height:28px;margin-top:-10px;border-radius:50%;
  background:var(--thumb,#e8eaf0);border:3px solid var(--void);box-shadow:0 0 0 1px var(--hairline-2),0 2px 8px rgba(0,0,0,.5);transition:background-color .2s;}

.slider::-moz-range-thumb {box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:var(--thumb,#e8eaf0);border:3px solid var(--void);box-shadow:0 0 0 1px var(--hairline-2),0 2px 8px rgba(0,0,0,.5);}

.slider.is-green::-webkit-slider-thumb {box-shadow:0 0 0 1px var(--hairline-2),0 0 18px rgba(125,255,192,.7);}

.slider:focus-visible::-webkit-slider-thumb {box-shadow:0 0 0 2px var(--green),0 0 16px rgba(125,255,192,.75);}

.slider:focus-visible::-moz-range-thumb {box-shadow:0 0 0 2px var(--green),0 0 16px rgba(125,255,192,.75);}

.stages {display:flex;justify-content:space-between;padding:0;}

.stg {box-sizing:border-box;width:28px;text-align:center;background:none;border:none;font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);cursor:pointer;padding:2px 0;transition:color .2s var(--ease),transform .2s var(--ease);}

.stg:hover {color:var(--ink-dim);}

.stg.on {transform:scale(1.18);font-weight:500;}

.stg.t-dark.on {color:#e8eaf0;}

.stg.t-gray.on {color:var(--ink-dim);}

.stg.t-green.on {color:var(--green);text-shadow:0 0 10px rgba(125,255,192,.5);}

.section {position:relative;width:100%;}

.attrs {border-top:1px solid var(--hairline);padding-top:1.1rem;display:flex;flex-direction:column;gap:.8rem;text-align:left;}

.pos {font-family:var(--font-mono);font-size:clamp(1.05rem,3.4vw,1.5rem);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);line-height:1.2;}

.pos .stagek {color:var(--ink-faint);font-weight:400;}

.pos .bname {font-weight:700;}

.c-dark .bcol {color:#e8eaf0;}

.c-gray .bcol {color:var(--ink-dim);}

.c-green .bcol {color:var(--green-glow);text-shadow:var(--ns-green);}

.attrs .def-line {margin:0;font-weight:300;font-size:1rem;line-height:1.5;color:var(--ink-dim);}

.ptype {font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint);margin-top:-.35rem;}

.ptype .j-type {text-transform:capitalize;color:var(--ink-dim);}

.attrrow {display:flex;flex-wrap:wrap;gap:7px;}

.attr {font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  border:1px solid transparent;color:var(--ink-dim);background:#363c45;font-weight:500;transition:all .2s var(--ease);}

.attr.on {color:var(--void);background:var(--green);border-color:var(--green);}

.attr.just {animation:pillpop .42s var(--ease);}

@keyframes pillpop {0%{transform:scale(1);}45%{transform:scale(1.14);box-shadow:0 0 16px rgba(125,255,192,.6);}100%{transform:scale(1);}}

.egline {margin:0;font-weight:300;font-size:.9rem;color:var(--ink-faint);line-height:1.55;max-width:62ch;}

.egk {color:var(--green);font-weight:500;margin-right:.45em;}

.explore-lead {font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:.55em;margin-top:clamp(2rem,5vh,3.6rem);
text-decoration:none;transition:color .2s var(--ease);}

.explore-lead .chev {color:var(--green);font-size:15px;}

.foot {position:fixed;left:0;right:0;bottom:clamp(12px,3vh,20px);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;z-index:3;
  padding:0 clamp(14px,3vw,26px);font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:.02em;}

.foot-state.c-dark {color:var(--ink-dim);}

.foot-state.c-gray {color:var(--ink-faint);}

.foot-state.c-green {color:var(--green);text-shadow:0 0 10px rgba(125,255,192,.4);}

html {scroll-behavior:smooth;}

.explore-lead:hover {color:var(--ink-dim);}

.chev {transition:transform .2s var(--ease);}

.explore-lead:hover .chev {transform:translateY(3px);}

.ladder {position:relative;max-width:min(760px,92vw);margin:0 auto;padding:clamp(1rem,3vh,2rem) 5vmin clamp(7rem,16vh,10rem);}

.spine {position:absolute;left:calc(5vmin + 26px);top:0;width:2px;border-radius:2px;opacity:.55;pointer-events:none;
  background:linear-gradient(180deg,var(--slate) 0%,var(--slate) 16%,var(--ink-faint) 32%,var(--ink-faint) 50%,var(--green) 66%,var(--green) 100%);}

.st-sec {position:relative;display:grid;grid-template-columns:52px 1fr;gap:clamp(1rem,3.5vw,2.2rem);padding:clamp(1.6rem,4vh,2.6rem) 0;border-top:1px solid var(--hairline);}

.st-sec:first-child {border-top:none;}

.st-sec.st-spaced {border-top:none;margin-top:clamp(1.4rem,4vh,2.8rem);}

.st-rail {display:flex;flex-direction:column;align-items:center;gap:.5rem;}

.st-dot {position:relative;z-index:1;display:grid;place-items:center;background:var(--void);border-radius:50%;padding:4px;}

.st-dot svg {display:block;width:100%;height:100%;fill:currentColor;}

.st-dot--glow {filter:drop-shadow(0 0 6px rgba(125,255,192,.55));}

.st-num {position:relative;z-index:1;background:var(--void);padding:1px 4px;border-radius:3px;font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,2.6vw,1.4rem);line-height:1;color:var(--ink-faint);opacity:.6;}

.st-sec.c-green .st-num {color:var(--green);opacity:.95;}

.st-body {display:flex;flex-direction:column;gap:.7rem;text-align:left;min-width:0;}

.st-head {display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}

.st-head .ptype {margin-top:.5rem;}

.st-glyph {flex:0 0 auto;width:clamp(34px,9vw,46px);height:clamp(34px,9vw,46px);color:var(--ink-faint);opacity:.9;}

.st-sec.c-gray .st-glyph {color:var(--ink-dim);}

.st-sec.c-green .st-glyph {color:var(--green);filter:drop-shadow(0 0 7px rgba(125,255,192,.4));}

.st-glyph svg {display:block;width:100%;height:100%;}

.cost-line {margin:0;font-weight:300;font-size:.9rem;line-height:1.5;color:var(--ink-faint);}

.cost-line .costk {color:var(--green);font-weight:500;margin-right:.4em;}

.st-conn {display:grid;grid-template-columns:52px 1fr;gap:clamp(1rem,3.5vw,2.2rem);align-items:center;min-height:clamp(2.2rem,5.5vh,3.4rem);}

.conn-body {display:flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}

.conn-arrow {color:var(--green);font-size:13px;line-height:1;}

.top .kicker.home {text-decoration:none;transition:color .2s var(--ease);}

.top .kicker.home:hover {color:var(--green);}

.top,.foot {transition:transform .3s var(--ease);}

.top.tuck {transform:translateY(calc(-100% - 36px));}

.foot.tuck {transform:translateY(calc(100% + 28px));}

nav.top .mode-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; cursor: pointer;
  color: var(--ink-dim); border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 8px 11px; transition: all 200ms var(--ease);
}

nav.top .mode-pill:hover { border-color: var(--blue-glow); color: #fff; box-shadow: 0 0 22px rgba(97,183,230,0.4); }

nav.top .mode-pill svg { width: 15px; height: 15px; display: block; }

html:not(.light) .mode-pill .icon-moon { display: none; }

html.light .mode-pill .icon-sun { display: none; }

html.light nav.top .mode-pill { color: #4a5160; border-color: rgba(20,24,31,0.18); }

html.light nav.top .mode-pill:hover { border-color: #1b6b96; color: #000; }

nav.top .mark .lifecycle { margin-left: var(--space-2); }

nav.top a.wordmark { text-decoration: none; }

nav.top .home-pill {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 8px 13px; transition: all 200ms var(--ease); white-space: nowrap;
}

nav.top .home-pill:hover { border-color: var(--blue-glow); color: #fff; box-shadow: 0 0 22px rgba(97,183,230,0.4); }

html.light nav.top .home-pill { color: #4a5160; border-color: rgba(20,24,31,0.18); }

html.light nav.top .home-pill:hover { border-color: #1b6b96; color: #000; }

.hero h1.title.title-line { font-size: clamp(30px, 6.2vw, 66px); letter-spacing: 0.02em; line-height: 1.06; }

.hero h1.title .lit { color: var(--green-glow); text-shadow: var(--ns-green); }

html.light .hero h1.title .lit { color: #c2410c; }

.hero p.subtitle { margin-bottom: var(--space-6); }

.toggle-nudge {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-faint);
  margin: 0 auto var(--space-12); display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center; max-width: 460px;
}

.toggle-nudge svg { width: 15px; height: 15px; color: var(--green-glow); filter: drop-shadow(0 0 6px rgba(125,255,192,0.6)); flex: 0 0 auto; }

html.light .toggle-nudge { color: #7a8190; }

html.light .toggle-nudge svg { color: #c2410c; filter: none; }

.passes { list-style: none; counter-reset: pass; margin: var(--space-8) auto 0; padding: 0; max-width: var(--reading); text-align: left; display: flex; flex-direction: column; gap: var(--space-4); }

.pass {
  counter-increment: pass;
  display: grid; grid-template-columns: 54px 1fr; gap: var(--space-6); align-items: start;
  padding: var(--space-6); border: 1px solid var(--hairline-2); border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,14,22,0.72), rgba(6,9,14,0.88));
  box-shadow: 0 0 30px rgba(60,141,182,0.10), inset 0 0 40px rgba(0,0,0,0.42);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease);
}

.pass::before { content: counter(pass, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--green-glow); text-shadow: var(--ns-green); }

.pass:hover { transform: translateY(-3px); border-color: rgba(125,255,192,0.4); box-shadow: 0 0 40px rgba(125,255,192,0.2); }

.pass h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--space-2); color: #eaf7ff; text-shadow: 0 0 14px rgba(97,183,230,0.45); }

.pass p { margin: 0; font-size: 14.5px; color: var(--ink-dim); }

html.light .pass { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .pass::before { color: #c2410c; }

html.light .pass:hover { border-color: rgba(194,65,12,0.4); }

html.light .pass h3 { color: #14181f; }

html.light .pass p { color: #4a5160; }

.crosslink { max-width: 760px; margin: var(--space-8) auto 0; text-align: center; border: 1px solid var(--hairline-2); border-radius: 16px; padding: var(--space-12); background: rgba(8,12,20,0.6); box-shadow: 0 0 44px rgba(60,141,182,0.14), inset 0 0 40px rgba(0,0,0,0.4); }

.crosslink-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.5); margin: 0 0 var(--space-3); }

.crosslink p { color: var(--ink-dim); margin: 0 auto var(--space-6); max-width: 56ch; }

.crosslink-go { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14.5px; color: #eafff4; border: 1px solid rgba(125,255,192,0.5); border-radius: 999px; padding: 11px 22px; display: inline-block; text-shadow: 0 0 10px rgba(125,255,192,0.5); box-shadow: inset 0 0 12px rgba(125,255,192,0.08); transition: all 200ms var(--ease); }

.crosslink-go:hover { border-color: var(--green-glow); color: #fff; box-shadow: 0 0 26px rgba(125,255,192,0.45), inset 0 0 14px rgba(125,255,192,0.15); }

html.light .crosslink { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .crosslink-lbl { color: #c2410c; }

html.light .crosslink p { color: #4a5160; }

html.light .crosslink-go { color: #14181f; border-color: rgba(20,24,31,0.22); }

html.light .crosslink-go:hover { border-color: #c2410c; color: #000; }

html.light .fig-beam svg polygon[fill="url(#beam)"] { fill: url(#beam-l); }

html.light .fig-beam svg circle[fill="url(#bulb)"] { fill: #c2410c; fill-opacity: 0.12; }

html.light .fig-beam svg circle[fill="#7dffc0"] { fill: #c2410c; }

html.light .fig-beam svg circle[fill="#eafff4"] { fill: #9a3412; }

html.light .fig-beam svg circle[stroke="#7dffc0"] { stroke: #c2410c; }

html.light .fig-beam svg text[fill="#9fe0c2"] { fill: #ad470e; }

.hero-radar .inner { max-width: 880px; }

.hero h1.title .gray-word { color: #aab2bf; text-shadow: 0 0 18px rgba(170,178,191,0.30); }

html.light .hero h1.title .gray-word { color: #6b7280; }

.radar-wrap { max-width: 360px; margin: var(--space-12) auto var(--space-8); }

.radar { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(125,255,192,0.12)); }

.rdr-ring { fill: none; stroke: rgba(97,183,230,0.30); stroke-width: 1; }

.rdr-cross { stroke: rgba(97,183,230,0.16); stroke-width: 1; }

.rdr-center-ring { fill: none; stroke: #7dffc0; stroke-opacity: 0.6; stroke-width: 1.5; }

.rdr-center { fill: #7dffc0; }

.rdr-live circle { fill: #7dffc0; animation: rdr-tw 2.6s ease-in-out infinite; }

.rdr-live circle:nth-child(2) { animation-delay: 1.2s; }

.rdr-gray circle { fill: #aab2bf; }

.rdr-dark { fill: none; stroke: #6b7180; stroke-width: 1.4; stroke-dasharray: 2 3; }

.rdr-line { stroke: #7dffc0; stroke-width: 2; stroke-opacity: 0.85; }

.rdr-sweep { transform-box: view-box; transform-origin: 210px 210px; animation: rdr-rotate 7s linear infinite; }

@keyframes rdr-rotate { to { transform: rotate(360deg); } }

@keyframes rdr-tw { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

html.light .radar { filter: none; }

html.light .rdr-ring { stroke: rgba(20,24,31,0.16); }

html.light .rdr-cross { stroke: rgba(20,24,31,0.09); }

html.light .rdr-center-ring { stroke: #1a8754; }

html.light .rdr-center, html.light .rdr-live circle { fill: #1a8754; }

html.light .rdr-gray circle { fill: #8b9099; }

html.light .rdr-dark { stroke: #9ca3af; }

html.light .rdr-line { stroke: #1a8754; }

html.light .fig-decay svg line[stroke="url(#decay)"] { stroke: url(#decay-l); }

html.light .fig-decay svg circle[fill="#4fd6a0"] { fill: #1a8754; }

html.light .fig-decay svg circle[stroke="#4fd6a0"] { stroke: #1a8754; }

html.light .fig-decay svg text[fill="#7dffc0"] { fill: #1a8754; }

html.light .fig-decay svg circle[fill="#9aa2af"] { fill: #8b9099; }

html.light .fig-decay svg text[fill="#aab2bf"] { fill: #6b7280; }

.map { max-width: var(--reading); margin: var(--space-8) auto 0; text-align: left; }

.map-row { display: grid; grid-template-columns: minmax(120px,0.8fr) 1.5fr; gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--hairline); align-items: baseline; }

.map-row:first-child { border-top: 0; }

.map-term { font-family: var(--font-mono); font-size: clamp(15px,2vw,18px); color: #aab2bf; }

.map-mean h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 4px; color: #eaf7ff; text-shadow: 0 0 14px rgba(97,183,230,0.45); }

.map-mean p { margin: 0; font-size: 14px; color: var(--ink-dim); }

html.light .map-row { border-color: rgba(20,24,31,0.10); }

html.light .map-term { color: #6b7280; }

html.light .map-mean h3 { color: #14181f; }

html.light .map-mean p { color: #4a5160; }

html.light .lifecycle-band .lb-more { color:#7a8190; }

html.light .lifecycle-band .lb-head, html.light .lifecycle-band .lb-foot, html.light .lifecycle-band .lb-here { color:#7a8190; }

.hero h1.title .live-word { color: var(--green-glow); text-shadow: var(--ns-green); }

html.light .hero h1.title .live-word { color: #1a8754; }

.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-8) auto 0; max-width: var(--wide); text-align: center; }

.prop { padding: var(--space-8) var(--space-6); border-radius: 12px; border: 1px solid rgba(125,255,192,0.35); background: rgba(79,214,160,0.05); box-shadow: 0 0 20px rgba(125,255,192,0.08); transition: transform 250ms var(--ease), box-shadow 250ms var(--ease); }

.prop:hover { transform: translateY(-3px); box-shadow: 0 0 34px rgba(125,255,192,0.22); }

.prop-icon { width: 36px; height: 36px; display: block; margin: 0 auto var(--space-4); color: var(--green-glow); filter: drop-shadow(0 0 7px rgba(125,255,192,0.6)); }

.prop-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: var(--space-3); color: var(--green-glow); border: 1px solid rgba(125,255,192,0.4); text-shadow: 0 0 8px rgba(125,255,192,0.5); }

.prop h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 var(--space-2); color: #eaf7ff; text-shadow: 0 0 12px rgba(97,183,230,0.45); }

.prop p { font-size: 13px; line-height: 1.65; margin: 0; color: var(--ink-dim); }

html.light .prop { background: #ffffff; border-color: rgba(20,24,31,0.10); box-shadow: none; }

html.light .prop-icon { color: #1a8754; filter: none; }

html.light .prop-tag { color: #1a8754; border-color: rgba(26,135,84,0.4); }

html.light .prop h3 { color: #14181f; }

html.light .prop p { color: #4a5160; }

.query { max-width: 720px; margin: var(--space-8) auto 0; border: 1px solid var(--hairline-2); border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(10,14,22,0.84), rgba(6,9,14,0.93)); box-shadow: 0 0 40px rgba(60,141,182,0.12), inset 0 0 50px rgba(0,0,0,0.45); text-align: left; }

.query .q { font-family: var(--font-mono); font-size: clamp(15px,2.2vw,18px); color: #eaf7ff; margin: 0; padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--hairline); }

.query .q-prompt { color: var(--green-glow); margin-right: var(--space-3); text-shadow: var(--ns-green); }

.q-row { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-4) var(--space-8); border-top: 1px solid var(--hairline); }

.q-row:first-of-type { border-top: 0; }

.q-tag { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 0; width: 54px; text-align: center; border-radius: 999px; }

.q-ans { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }

.q-note { color: var(--ink-faint); }

.q-dark .q-tag { color: #79808e; border: 1px solid rgba(121,128,142,0.5); }

.q-dark .q-ans { color: #79808e; }

.q-gray .q-tag { color: #aab2bf; border: 1px solid rgba(170,178,191,0.5); }

.q-gray .q-ans { color: #aab2bf; }

.q-live .q-tag { color: var(--void); background: var(--green-glow); border: 1px solid var(--green-glow); font-weight: 600; box-shadow: 0 0 12px rgba(125,255,192,0.5); }

.q-live .q-ans { color: #cfe9da; }

.q-live .q-ans b { color: #eafff4; text-shadow: 0 0 12px rgba(125,255,192,0.3); }

html.light .query { border-color: rgba(20,24,31,0.35); }

.ask-hero { max-width: 520px; margin: var(--space-12) auto var(--space-8); }

.ask-term { border: 1px solid var(--hairline-2); border-radius: 14px; background: #080b12; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 42px rgba(125,255,192,0.06); text-align: left; }

.ask-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.02); }

.ask-bar .ask-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.13); }

.ask-bar .ask-name { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

.ask-body { padding: 22px 22px 24px; font-family: var(--font-mono); font-size: clamp(14px, 2.3vw, 16.5px); line-height: 2; }

.ask-q { color: var(--ink-dim); }

.ask-pr { color: var(--green-glow); }

.ask-a { color: var(--green-glow); text-shadow: 0 0 12px rgba(125,255,192,0.4); white-space: nowrap; }

.ask-a-in { display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; animation: ask-type 6.5s steps(28) infinite; }

@keyframes ask-type { 0%,8%{width:0} 30%,90%{width:28ch} 100%{width:0} }

.ask-caret { display: inline-block; width: 9px; height: 1.05em; margin-left: 3px; vertical-align: -3px; background: var(--green-glow); box-shadow: 0 0 9px var(--green-glow); animation: ask-blink 1.05s steps(1) infinite; }

.ask-stamp { margin-top: 10px; font-size: 12px; color: var(--ink-faint); letter-spacing: 0.03em; }

.ask-lv { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; background: var(--green-glow); box-shadow: 0 0 10px var(--green-glow); animation: ask-pulse 1.6s ease-in-out infinite; }

@keyframes ask-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

@keyframes ask-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.find-search { max-width: 440px; margin: var(--space-8) auto 0; }

.fs-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hairline-2); border-radius: 11px; padding: 12px 15px; background: rgba(255,255,255,0.03); }

.fs-mag { width: 17px; height: 17px; flex: none; color: var(--green-glow); }

.fs-q { font-family: var(--font-mono); font-size: 14px; color: var(--ink); white-space: nowrap; }

.fs-caret { display: inline-block; width: 7px; height: 15px; margin-left: 1px; vertical-align: -2px; background: var(--green-glow); box-shadow: 0 0 8px var(--green-glow); animation: ask-blink 1.05s steps(1) infinite; }

.fs-res { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }

.fs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); padding: 10px 14px; border-radius: 9px; background: rgba(255,255,255,0.02); }

.fs-row.hit { color: var(--ink); border: 1px solid rgba(125,255,192,0.42); background: rgba(125,255,192,0.07); }

.fs-row.hit .fs-hl { color: var(--green-glow); }

.fs-meta { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.03em; flex: none; }

.fs-row.hit .fs-meta { color: var(--green); }

.fs-cap { text-align: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-faint); margin: var(--space-4) 0 0; }

html.light .fs-bar { background: rgba(20,24,31,0.03); border-color: rgba(20,24,31,0.16); }

html.light .fs-q { color: #14181f; }

html.light .fs-mag { color: #1b6b96; }

html.light .fs-caret { background: #1b6b96; box-shadow: none; }

html.light .fs-row { color: #79808e; background: rgba(20,24,31,0.03); }

html.light .fs-row.hit { color: #14181f; border-color: rgba(27,107,150,0.4); background: rgba(27,107,150,0.08); }

html.light .fs-row.hit .fs-hl, html.light .fs-row.hit .fs-meta { color: #1b6b96; }

nav.top a.wordmark:hover { color: #fff; }

.hero-meta {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }

.hero-meta svg { width: 14px; height: 14px; opacity: 0.85; }

.assess { max-width: 860px; margin: 0 auto; }

.aprog-wrap {
  position: sticky; top: 64px; z-index: 40;
  margin: 0 auto var(--space-8); padding: var(--space-3) 0;
  background: linear-gradient(180deg, rgba(4,5,10,0.92), rgba(4,5,10,0.0));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.aprog-row { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

.aprog-count { color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.4); white-space: nowrap; }

.aprog { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; border: 1px solid var(--hairline); }

.aprog-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--green-glow)); box-shadow: 0 0 14px rgba(125,255,192,0.5); transition: width 320ms var(--ease); }

.qcard {
  position: relative;
  border: 1px solid var(--hairline-2); border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,14,22,0.82), rgba(6,9,14,0.92));
  box-shadow: 0 0 30px rgba(60,141,182,0.10), inset 0 0 50px rgba(0,0,0,0.4);
  padding: var(--space-8); margin-bottom: var(--space-6);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

.qcard.answered { border-color: rgba(125,255,192,0.42); box-shadow: 0 0 30px rgba(79,214,160,0.14), inset 0 0 50px rgba(0,0,0,0.4); }

.qcard .qnum { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.4); }

.qcard .qtext { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.6vw, 22px); line-height: 1.4; letter-spacing: 0.01em; color: #eaf7ff; text-shadow: 0 0 14px rgba(97,183,230,0.35); margin: var(--space-2) 0 var(--space-6); text-wrap: balance; }

.scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }

.opt { position: relative; cursor: pointer; }

.opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.opt .face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; min-height: 64px; padding: 10px 8px;
  border: 1px solid var(--hairline-2); border-radius: 10px;
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-dim);
  transition: all 180ms var(--ease);
}

.opt .face .o-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

.opt:hover .face { border-color: var(--blue-glow); color: #fff; }

.opt input:focus-visible + .face { outline: 2px solid var(--green-glow); outline-offset: 2px; }

.opt input:checked + .face {
  border-color: var(--green-glow); color: #eafff4; background: rgba(79,214,160,0.10);
  box-shadow: 0 0 22px rgba(125,255,192,0.28), inset 0 0 16px rgba(125,255,192,0.08);
  text-shadow: 0 0 10px rgba(125,255,192,0.4);
}

.opt input:checked + .face .o-n { color: var(--green-glow); }

.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }

.btn {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; cursor: pointer;
  color: var(--void); background: var(--green-glow); border: 0; border-radius: 999px; padding: 13px 26px;
  box-shadow: 0 0 26px rgba(125,255,192,0.5); transition: all 180ms var(--ease);
}

.btn:hover:not(:disabled) { box-shadow: 0 0 40px rgba(125,255,192,0.85); transform: translateY(-1px); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: grayscale(0.4); }

.btn-ghost {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; cursor: pointer;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 12px 22px; transition: all 180ms var(--ease);
}

.btn-ghost:hover { color: #fff; border-color: var(--blue-glow); box-shadow: 0 0 22px rgba(97,183,230,0.3); }

.actions-hint { width: 100%; text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }

.results { max-width: 880px; margin: var(--space-12) auto 0; scroll-margin-top: 84px; }

.results[hidden] { display: none; }

.score-hero { text-align: center; border: 1px solid var(--hairline-2); border-radius: 18px;
  background: rgba(8,12,20,0.78); padding: var(--space-16) var(--space-8);
  box-shadow: 0 0 70px rgba(60,141,182,0.22), inset 0 0 50px rgba(0,0,0,0.5); }

.score-band { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-4); }

.score-pct { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 14vw, 108px); line-height: 1; color: #eaf7ff; text-shadow: var(--ns-blue); }

.score-pct .u { font-size: 0.34em; opacity: 0.7; margin-left: 4px; letter-spacing: 0; }

.score-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 4vw, 32px); letter-spacing: 0.04em; text-transform: uppercase; margin: var(--space-3) 0 var(--space-4); }

.score-name.lvl-low { color: #eafff4; text-shadow: var(--ns-green); }

.score-name.lvl-mid { color: #fff0cf; text-shadow: var(--ns-amber); }

.score-name.lvl-high { color: #ffe6f1; text-shadow: var(--ns-pink); }

.score-blurb { font-family: var(--font-mono); font-size: 15.5px; line-height: 1.8; color: var(--ink-dim); max-width: 60ch; margin: 0 auto; }

.meter { max-width: 560px; margin: var(--space-8) auto 0; }

.meter-track { height: 12px; border-radius: 999px; overflow: hidden; border: 1px solid var(--hairline-2);
  background: linear-gradient(90deg, rgba(79,214,160,0.18), rgba(254,188,46,0.18) 50%, rgba(255,45,111,0.20)); position: relative; }

.meter-needle { position: absolute; top: -5px; bottom: -5px; width: 3px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.9); transition: left 600ms var(--ease); }

.meter-scale { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

.breakdown { margin: var(--space-16) auto 0; max-width: 820px; }

.bd-head { text-align: center; margin-bottom: var(--space-8); }

.bd-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.4); }

.bd-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3.4vw, 28px); letter-spacing: 0.03em; text-transform: uppercase; color: #eaf7ff; text-shadow: var(--ns-blue); margin: var(--space-2) 0 0; }

.bars { display: grid; gap: var(--space-4); }

.bar-row {
  display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); align-items: center;
  border: 1px solid var(--hairline); border-radius: 12px; padding: var(--space-4) var(--space-6);
  background: rgba(8,12,18,0.5);
}

.bar-row.is-top { border-color: rgba(255,77,141,0.5); box-shadow: 0 0 26px rgba(255,45,111,0.12); }

.bar-label { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: #eaf7ff; }

.bar-label .tag { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; }

.bar-label .tag.capture { color: var(--blue-glow); }

.bar-label .tag.access { color: var(--pink-glow); }

.bar-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; position: relative; }

.bar-fill { height: 100%; width: 0%; border-radius: 999px; transition: width 700ms var(--ease); }

.bar-fill.capture { background: linear-gradient(90deg, var(--blue), var(--blue-glow)); box-shadow: 0 0 14px rgba(97,183,230,0.5); }

.bar-fill.access { background: linear-gradient(90deg, var(--pink), var(--pink-glow)); box-shadow: 0 0 14px rgba(255,77,141,0.5); }

.bar-val { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; margin-top: 4px; }

.advice { margin: var(--space-16) auto 0; max-width: var(--reading); }

.advice-card {
  border: 1px solid var(--hairline-2); border-radius: 14px; padding: var(--space-8) var(--space-12);
  background: rgba(8,12,18,0.6); margin-bottom: var(--space-6);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
}

.advice-card.lead-card { border-color: rgba(125,255,192,0.4); box-shadow: 0 0 30px rgba(79,214,160,0.12); }

.advice-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.6vw, 22px); letter-spacing: 0.03em; text-transform: uppercase; color: #eaf7ff; text-shadow: 0 0 14px rgba(97,183,230,0.4); margin: 0 0 var(--space-3); }

.advice-card .move { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.4); display: block; margin-bottom: var(--space-2); }

.advice-card p { font-size: 14.5px; line-height: 1.75; margin: 0 0 var(--space-3); }

.advice-card p:last-child { margin-bottom: 0; }

.kept-dark { border: 1px dashed rgba(138,107,255,0.45); border-radius: 12px; background: rgba(138,107,255,0.05);
  padding: var(--space-6) var(--space-12); margin: var(--space-8) auto 0; max-width: var(--reading);
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: #d9d2ff; }

.kept-dark::before { content: "// "; color: var(--violet); }

.result-cta { margin: var(--space-16) auto 0; }

.term-form input[type=email] {
  flex: 1; min-width: 200px; background: transparent; border: 0; border-bottom: 1px solid rgba(125,255,192,0.4);
  color: #eafff4; font-family: var(--font-mono); font-size: 16px; padding: 8px 2px;
}

.term-form input[type=email]:focus { outline: none; border-bottom-color: var(--green-glow); box-shadow: 0 2px 0 rgba(125,255,192,0.5); }

.term-checks { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }

.term-check { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); cursor: pointer; }

.term-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 16px; height: 16px; min-width: 0; margin: 2px 0 0; padding: 0; border: 1px solid rgba(125,255,192,0.45); border-radius: 4px; background: rgba(255,255,255,0.05); cursor: pointer; position: relative; transition: all 160ms var(--ease); }

.term-check input[type="checkbox"]:checked { background: var(--green-glow); border-color: var(--green-glow); box-shadow: 0 0 12px rgba(125,255,192,0.5); }

.term-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid #04130c; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.term-check a { color: #bfeed8; text-decoration: underline; text-underline-offset: 2px; }

.term-check a:hover { color: #fff; }

.form-done { font-family: var(--font-mono); font-size: 14px; color: var(--green-glow); text-shadow: 0 0 10px rgba(125,255,192,0.5); margin-top: var(--space-4); min-height: 20px; }

.form-done.err { color: var(--pink-glow); text-shadow: 0 0 10px rgba(255,45,111,0.45); }

.result-foot { text-align: center; margin-top: var(--space-8); }

html.light .bg, html.light .grid-overlay, html.light .scanlines, html.light .vignette,
html.light canvas#stars, html.light .hero-kanji, html.light .hero-kata { display: none; }

html.light .hero-meta { color: #7a8190; }

html.light .aprog-wrap { background: linear-gradient(180deg, rgba(245,244,239,0.92), rgba(245,244,239,0)); }

html.light .aprog-count { color: #1b6b96; }

html.light .aprog { background: rgba(20,24,31,0.07); border-color: rgba(20,24,31,0.12); }

html.light .aprog-fill { background: linear-gradient(90deg, #2273a3, #1b6b96); }

html.light .qcard { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .qcard.answered { border-color: rgba(27,107,150,0.5); }

html.light .qcard .qnum { color: #c2410c; }

html.light .qcard .qtext { color: #14181f; }

html.light .opt .face { background: #faf9f5; border-color: rgba(20,24,31,0.16); color: #4a5160; }

html.light .opt .face .o-n { color: #9aa1ad; }

html.light .opt:hover .face { border-color: #1b6b96; color: #000; }

html.light .opt input:checked + .face { background: rgba(27,107,150,0.08); border-color: #1b6b96; color: #14181f; }

html.light .opt input:checked + .face .o-n { color: #1b6b96; }

html.light .btn { background: #c2410c; color: #fff; }

html.light .btn:hover:not(:disabled) { background: #9a3412; }

html.light .btn-ghost { color: #4a5160; border-color: rgba(20,24,31,0.2); }

html.light .btn-ghost:hover { color: #000; border-color: #1b6b96; }

html.light .actions-hint { color: #7a8190; }

html.light .score-hero { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .score-band { color: #7a8190; }

html.light .score-pct { color: #14181f; }

html.light .score-name.lvl-low { color: #15803d; }

html.light .score-name.lvl-mid { color: #b45309; }

html.light .score-name.lvl-high { color: #b91c4b; }

html.light .score-blurb { color: #4a5160; }

html.light .meter-track { border-color: rgba(20,24,31,0.16); background: linear-gradient(90deg, rgba(21,128,61,0.2), rgba(180,83,9,0.2) 50%, rgba(185,28,75,0.22)); }

html.light .meter-needle { background: #14181f; }

html.light .meter-scale { color: #7a8190; }

html.light .bd-kicker { color: #c2410c; }

html.light .bd-title { color: #14181f; }

html.light .bar-row { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .bar-row.is-top { border-color: rgba(185,28,75,0.5); }

html.light .bar-label { color: #14181f; }

html.light .bar-label .tag.capture { color: #1b6b96; }

html.light .bar-label .tag.access { color: #b91c4b; }

html.light .bar-track { background: rgba(20,24,31,0.07); }

html.light .bar-fill.capture { background: #2273a3; }

html.light .bar-fill.access { background: #b91c4b; }

html.light .bar-val { color: #7a8190; }

html.light .advice-card { background: #ffffff; border-color: rgba(20,24,31,0.10); }

html.light .advice-card.lead-card { border-color: rgba(27,107,150,0.4); }

html.light .advice-card h3 { color: #14181f; }

html.light .advice-card .move { color: #c2410c; }

html.light .kept-dark { color: #5b4a8a; border-color: rgba(138,107,255,0.5); background: rgba(138,107,255,0.06); }

html.light .kept-dark::before { color: #6d54c4; }

.symptoms { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-8); }

.sym { display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--hairline-2); border-radius:14px; background:rgba(7,10,16,0.5); transition:border-color 200ms var(--ease); }

.sym:hover { border-color:rgba(255,255,255,0.26); }

.sym .sym-tag { align-self:flex-start; font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--hairline-2); border-radius:999px; padding:3px 9px; }

.sym.t-dark .sym-tag { color:#cbd3df; }

.sym.t-gray .sym-tag { color:#aeb6c2; }

.sym.t-cost .sym-tag { color:#ff9bbb; border-color:rgba(255,77,141,0.4); }

.sym h3 { font-family:var(--font-display); font-size:17px; letter-spacing:0.01em; color:#eaf7ff; margin:2px 0 0; }

.sym p { font-size:14.5px; color:var(--ink-dim); margin:0; line-height:1.5; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-8); }

.step { display:flex; flex-direction:column; gap:9px; padding:22px 20px; border:1px solid var(--hairline-2); border-radius:14px; background:rgba(7,10,16,0.5); }

.step .step-n { font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; color:var(--green-glow); text-shadow:0 0 12px rgba(125,255,192,0.5); }

.step h3 { font-family:var(--font-display); font-size:19px; color:#eaf7ff; margin:0; }

.step p { font-size:14.5px; color:var(--ink-dim); margin:0; line-height:1.55; }

.hero-cta { display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-8); font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#eafff4; border:1px solid rgba(125,255,192,0.55); border-radius:999px; padding:13px 26px; transition:all 200ms var(--ease); text-shadow:0 0 10px rgba(125,255,192,0.5); box-shadow:inset 0 0 12px rgba(125,255,192,0.08); }

.hero-cta:hover { border-color:var(--green-glow); color:#fff; box-shadow:0 0 26px rgba(125,255,192,0.45), inset 0 0 14px rgba(125,255,192,0.15); }

.ways { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-8); }

.way { display:flex; flex-direction:column; gap:10px; padding:24px 22px; border:1px solid var(--hairline-2); border-radius:14px; background:rgba(7,10,16,0.5); transition:border-color 200ms var(--ease); }

.way:hover { border-color:rgba(125,255,192,0.4); }

.way-k { font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-glow); text-shadow:0 0 10px rgba(125,255,192,0.4); }

.way h3 { font-family:var(--font-display); font-size:20px; color:#eaf7ff; margin:0; }

.way p { font-size:14.5px; color:var(--ink-dim); margin:0; line-height:1.55; flex:1 1 auto; }

.way .way-fit { margin-top:6px; padding-top:12px; font-family:var(--font-mono); font-size:11.5px; line-height:1.45; color:var(--ink-faint); border-top:1px solid var(--hairline); }

.gets { list-style:none; padding:0; margin:var(--space-8) 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px 30px; }

.gets li { position:relative; padding-left:28px; font-size:15.5px; color:var(--ink-dim); line-height:1.5; }

.gets li::before { content:"\2727"; position:absolute; left:0; top:0; color:var(--green-glow); text-shadow:0 0 10px rgba(125,255,192,0.5); }

.gets li b { color:#eaf7ff; font-weight:600; }

nav.top .tag { font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-glow); border:1px solid rgba(125,255,192,0.4); border-radius:999px; padding:4px 10px; text-shadow:var(--ns-green); }

.hero .kana { font-family:var(--font-pixel); font-size:clamp(15px,2.2vw,20px); letter-spacing:0.14em; color:var(--violet); text-shadow:var(--ns-violet,0 0 16px rgba(138,107,255,0.6)); margin-bottom:var(--space-4); }

.hero h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(34px,6.4vw,68px); line-height:1.08; letter-spacing:0.02em; text-transform:uppercase; margin:0 auto var(--space-6); color:#eaf7ff; text-shadow:var(--ns-blue); max-width:16ch; }

.hero .tagline { font-family:var(--font-mono); font-size:clamp(15px,2.4vw,20px); color:var(--ink-dim); max-width:var(--reading); margin-top:var(--space-6); line-height:1.7; }

.s p { max-width:var(--reading); }

.dict .brandline { margin:var(--space-8) auto 0; max-width:50ch; padding-top:var(--space-6); border-top:1px solid var(--hairline); font-family:var(--font-mono); font-size:14px; line-height:1.7; color:var(--ink-faint); }

.dict .brandline em { font-style:normal; color:var(--ink-dim); }

.dict sup.fn { font-size:0.68em; vertical-align:super; line-height:0; }

.dict sup.fn a { color:var(--blue-glow); text-decoration:none; }

.dict .dict-note { margin:var(--space-4) auto 0; max-width:52ch; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--ink-faint); }

.dict .dict-note .fnnum { color:var(--green-glow); text-shadow:0 0 10px rgba(125,255,192,0.4); margin-right:6px; }

.dict .dict-note a { color:var(--blue-glow); text-decoration:none; }

.figure { margin:var(--space-12) 0 var(--space-8); }

.fig-pan { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border:1px solid var(--hairline); border-radius:16px; background:linear-gradient(180deg,rgba(9,12,19,0.6),rgba(4,5,10,0.6)); box-shadow:0 10px 60px rgba(60,141,182,0.10); }

.fig-pan svg { display:block; width:100%; min-width:840px; height:auto; }

.fig-cap { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); text-align:center; margin-top:var(--space-4); letter-spacing:0.04em; }

.slice-band { animation:flow linear infinite; }

@keyframes flow { to { stroke-dashoffset:-40; } }

.layers { list-style:none; margin:var(--space-8) 0 0; padding:0; }

.layers li { display:grid; grid-template-columns:200px 130px 1fr; gap:var(--space-4); align-items:baseline; padding:var(--space-4) 0; border-top:1px solid var(--hairline); }

.layers li:last-child { border-bottom:1px solid var(--hairline); }

.layers .lname { font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:0.03em; text-transform:uppercase; color:#eaf7ff; }

.layers .lname small { display:block; font-family:var(--font-mono); font-weight:400; font-size:11px; letter-spacing:0.1em; color:var(--ink-faint); text-transform:none; margin-top:2px; }

.layers .lhalf { font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; }

.layers .ldesc { font-family:var(--font-mono); font-size:14px; color:var(--ink-dim); }

.h-fast { color:var(--pink-glow); text-shadow:0 0 10px rgba(255,77,141,0.5); }

.h-mid { color:var(--violet); text-shadow:0 0 10px rgba(138,107,255,0.5); }

.h-slow { color:var(--green-glow); text-shadow:var(--ns-green); }

.cta-row { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }

.cta-pill { font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue-glow); border:1px solid var(--hairline-2); border-radius:999px; padding:10px 20px; transition:all 200ms var(--ease); }

.cta-pill:hover { color:#fff; border-color:rgba(97,183,230,0.7); box-shadow:0 0 24px rgba(97,183,230,0.25); text-shadow:0 0 12px rgba(97,183,230,0.8); }

.colophon { border-top:1px solid var(--hairline); margin-top:var(--space-16); padding:var(--space-16) 0 var(--space-24); }

.colophon p { font-family:var(--font-mono); font-size:13px; color:var(--ink-faint); max-width:var(--reading); }

.colophon .star { color:var(--green-glow); text-shadow:var(--ns-green); }

html.light {
  --void: #f5f4ef; --void-2: #ffffff;
  --green-glow: #1b6b96; --green: #1b6b96;
  --ink: #14181f; --ink-dim: #353b47; --ink-faint: #6b7280;
  --link: #1b6b96; --link-hover: #0e4a6b;
  --hairline: rgba(20,24,31,0.12); --hairline-2: rgba(20,24,31,0.22);
  --surface: rgba(20,24,31,0.03);
}

nav.doc-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; color: var(--ink); text-decoration: none; }

.wordmark .star { color: var(--green-glow); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 7px 12px; text-decoration: none; background: none; cursor: pointer; transition: all 180ms var(--ease);
}

.pill:hover { border-color: var(--green-glow); color: var(--ink); }

main { padding: 56px 0 88px; }

h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 6vw, 48px); line-height: 1.06; letter-spacing: 0.01em; margin: 0 0 12px; color: var(--ink); }

.updated { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); margin: 0 0 40px; }

h2 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: 0.01em; margin: 44px 0 12px; color: var(--ink); }

h2 .n { color: var(--green-glow); font-size: 14px; margin-right: 10px; }

ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-dim); }

li { margin: 0 0 8px; }

.callout { border: 1px solid var(--hairline); background: var(--surface); border-radius: 12px; padding: 18px 20px; margin: 20px 0; font-size: 14.5px; }

.callout p:last-child { margin-bottom: 0; }

footer { border-top: 1px solid var(--hairline); padding: 28px 0 64px; }

footer p { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin: 0; }

footer a { color: var(--ink-faint); }

.back { display: inline-block; margin-top: 36px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; }

/* Below 900px the nav actions collapse behind the hamburger — EXCEPT on a
   `.no-burger` nav, where they stay inline. The burger only earns its place when
   it hides something worth hiding: on the homepage it held a language dropdown
   and a "Book a call" that mobile visitors (about half of production traffic,
   much of it LinkedIn's in-app browser) should never have to hunt for. Two items,
   one of them the primary conversion, is not a menu. Pages still carrying more
   than that keep the burger; drop `.no-burger` on the nav to opt back in. */
@media (max-width: 900px) {
  nav.top:not(.no-burger) .nav-burger { display: inline-flex; }
  nav.top:not(.no-burger) .nav-actions {
    position: absolute; right: var(--space-4); top: calc(100% + 8px); z-index: 60;
    display: none; flex-direction: column; align-items: stretch; gap: 8px;
    min-width: 190px; padding: 10px;
    background: rgba(7,10,16,0.97); border: 1px solid var(--hairline-2); border-radius: 12px;
    box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 0 30px rgba(97,183,230,0.14);
  }
  nav.top:not(.no-burger) .nav-actions.open { display: flex; }
  nav.top:not(.no-burger) .nav-actions .lang-menu { width: 100%; }
  nav.top:not(.no-burger) .nav-actions .lang-menu summary { width: 100%; justify-content: center; }
  nav.top:not(.no-burger) .nav-actions .lang-list { position: static; right: auto; top: auto; min-width: 0; padding: 4px 0 0; background: transparent; border: none; box-shadow: none; }
  nav.top:not(.no-burger) .nav-actions .cta-link { text-align: center; }

  nav.top.no-burger .nav-actions { gap: var(--space-2); margin-left: auto; }
}

/* Phone widths: make room for the Dark—Gray—Green stepper rather than dropping it.
   It is the only cross-link between the three context pages in the header, and
   hiding it on mobile removed the site's primary wayfinding for about half of
   production traffic. The stepper tightens its padding and separators to pay for
   it; the language pill only tightens its padding. It used to collapse to a bare
   globe here too, but once the stepper moved to its own row that row had 134px of
   slack at 390px, so the current locale is named again — a globe alone does not
   tell you which language you are already reading. */
@media (max-width: 700px) {
  nav.top.no-burger .lang-menu summary { padding: 6px 9px; }
  nav.top.no-burger .mark { gap: var(--space-2); }
  nav.top.no-burger .mark .lifecycle { margin-left: 0; padding: 3px 5px; gap: 1px; }
  nav.top.no-burger .lifecycle .lc-step { padding: 4px 5px; gap: 5px; }
  nav.top.no-burger .lifecycle .lc-sep { width: 6px; }
}

/* Phones: the stepper takes its own row under the wordmark rather than shrinking to
   bare dots. Measured — wordmark, labelled stepper, globe and CTA cannot share one
   390px row, and the alternatives each cost more than 36px of header does: dots-only
   leaves gray and green distinguishable by colour alone (WCAG 1.4.1), and dropping
   the wordmark to fit the labels inline still fails at 360px, a very common Android
   width. Header goes 59px -> 95px on phones; nothing else is given up.

   The row is laid out as a grid, not by wrapping `.mark`, for two reasons the first
   attempt got wrong: wrapping left the actions vertically centred against a two-row
   `.mark`, so the globe and CTA lined up with neither the wordmark above nor the
   stepper below; and the stepper stretched to `.mark`'s width while its steps stayed
   packed left, reading as a half-empty container rather than a control. `.mark` goes
   `display: contents` so the wordmark and the stepper become grid items directly —
   it is a presentational div with no semantics of its own, so dissolving it costs
   nothing. The stepper then spans the full header width and its separators grow to
   take up the slack, which turns the dead space into the rail between the steps.

   The upper bound is 479px, not 430px, because the single-row layout above it needs
   441px to hold wordmark + labelled stepper + globe + CTA inside the gutters, and
   456px once the locale pill names its language. 431-440px was quietly overflowing
   its right gutter by ~11px before this. 480px leaves the inline row 24px of slack,
   enough that a webfont failing to load cannot push it back over. */
@media (min-width: 360px) and (max-width: 479px) {
  nav.top.no-burger {
    display: grid; row-gap: var(--space-2);
    grid-template-columns: auto 1fr;
    grid-template-areas: "wordmark actions" "lifecycle lifecycle";
    align-items: center;
  }
  nav.top.no-burger .mark { display: contents; }
  nav.top.no-burger .wordmark { grid-area: wordmark; }
  nav.top.no-burger .nav-actions { grid-area: actions; justify-self: end; }
  nav.top.no-burger .mark .lifecycle {
    grid-area: lifecycle; width: auto;
    display: flex; justify-content: space-between; gap: 0;
    /* Unboxed here. At its intrinsic width the outer pill reads as a control; drawn
       across the whole header it becomes a large empty rectangle competing with the
       CTA above it. The connectors already carry the "these are stages" reading. */
    border: none; padding: 0;
  }
  /* The connectors absorb the extra width so the steps sit at the ends and the
     middle, instead of the pill growing and the content staying left-packed. */
  nav.top.no-burger .lifecycle .lc-sep { flex: 1 1 auto; width: auto; min-width: 8px; margin: 0 2px; }
}

/* Below 360px even that does not fit: the labelled stepper needs 184px beside a
   146px action group. Fall back to a single row of dots there, and collapse the
   wordmark to its logomark. At this size a 95px sticky header would also be eating
   an unreasonable share of the viewport. Measured: 341px overflows without this,
   360px is the narrowest width the own-row layout holds. */
@media (max-width: 359px) {
  nav.top.no-burger { padding-left: var(--space-3); padding-right: var(--space-3); }
  nav.top.no-burger .wordmark .wm-short { display: none; }
  nav.top.no-burger .lifecycle .lc-name { display: none; }
  /* The only width where the locale pill still gives up its label: the row needs
     301px of content in 296px at 320. The dropdown names every language in full
     and summary keeps its aria-label, so nothing is lost but the reminder. */
  nav.top.no-burger .lang-menu summary .lang-code { display: none; }
  nav.top.no-burger .lang-menu summary { gap: 0; }
  /* 8px around an 8px dot keeps each step a 24x24 tap target (WCAG 2.2 2.5.8). */
  nav.top.no-burger .lifecycle .lc-step { padding: 8px; gap: 0; }
}

@media (max-width: 560px) {
  nav.top { padding: var(--space-3) var(--space-4); }
  nav.top .wordmark .wm-full { display: none; }
  nav.top .wordmark .wm-short { display: inline; }
  nav.top .nav-actions { gap: var(--space-2); margin-left: auto; }
  nav.top .lang-menu summary { font-size: 11px; padding: 6px 10px; }
  nav.top .cta-link { font-size: 11px; padding: 6px 10px; }
  nav.top .mode-pill { padding: 6px 9px; }
  nav.top .home-pill { font-size: 11px; padding: 6px 10px; }
  .bar-row { grid-template-columns: 1fr; gap: var(--space-2); }
}

@media (max-width: 1100px) {
  .hero-kanji, .hero-kata { display: none; }
}

@media (max-width: 680px) {
  .shift .row { display: block; }
  .shift .from { display: inline; text-align: left; }
  .shift .arrow { display: inline; text-align: left; font-size: 18px; margin-left: var(--space-2); }
  .shift .to { display: block; margin-top: var(--space-2); }
}

@media (max-width: 760px) {
  .people { grid-template-columns: 1fr; gap: var(--space-16); }
  nav.top .sub { display: none; }
  .props { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .shapes-4col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .shapes-4col { grid-template-columns: 1fr; }
  .pass { grid-template-columns: 40px 1fr; gap: var(--space-4); padding: var(--space-6) var(--space-4); }
  .pass::before { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  h1.title { filter: none; }
  .cur, .flick, .scroll-chev polyline { opacity: 1 !important; }
  .ask-a-in { width: 28ch; }
  .ask-caret { animation: none; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  section.s { padding: var(--space-12) 0; }
  header.hero { padding: var(--space-24) var(--space-6) var(--space-16); }
  .diagram { padding: var(--space-6) var(--space-3); }
  .fig-pan { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .fig-pan svg { min-width: 560px; }
  .dict { padding: var(--space-12) var(--space-6); }
  .collect-row input { font-size: 16px; }
  .term-body { padding: var(--space-6) var(--space-4); }
  .advice-card { padding: var(--space-6); }
  .kept-dark { padding: var(--space-6); }
}

@media (max-width:560px) {
  .lifecycle { padding:3px 6px; gap:2px; }
  .lifecycle .lc-step { font-size:10px; padding:4px 6px; gap:5px; }
  .lifecycle .lc-sep { width:8px; }
  .foot {font-size:10px;justify-content:flex-end;}
  .foot>span:first-child {display:none;}
  .foot.at-end {justify-content:space-between;}
  .foot.at-end>span:first-child {display:inline;}
  .spine {left:calc(5vmin + 20px);}
  .st-sec,.st-conn {grid-template-columns:40px 1fr;gap:.9rem;}
  .st-head {flex-wrap:wrap-reverse;justify-content:flex-start;}
  .top {gap:8px;}
  .hero {place-items:start center;padding-top:74px;}
  .symptoms { grid-template-columns:1fr; }
}

@media (max-width:680px) {
  .lifecycle-band .lb-row { flex-direction:column; }
  .lifecycle-band .lb-arrow { transform:rotate(90deg); padding:6px 0; }
}

@media (max-width: 600px) {
  .map-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .query .q, .q-row { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (max-width: 540px) {
  .qcard { padding: var(--space-6) var(--space-4); }
  .scale { grid-template-columns: 1fr 1fr; }
  .opt .face { min-height: 52px; flex-direction: row; gap: 8px; }
}

@media (max-width:860px) {
  .symptoms { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px) {
  .steps { grid-template-columns:1fr; }
  .ways { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .gets { grid-template-columns:1fr; }
  .dict { padding:var(--space-12) var(--space-6); }
  .layers li { grid-template-columns:1fr; gap:var(--space-1); }
  .layers .lhalf { margin-top:var(--space-1); }
  section.s { padding:var(--space-12) 0; }
}

@media (prefers-reduced-motion:reduce) {
  .slice-band { animation:none; }
  .reveal { opacity:1; transform:none; }
}

/* ------------------------------------------------------------------ */
/* .breadcrumb — compact wayfinding trail at the top of a cluster or    */
/* spoke page; the visible mirror of the BreadcrumbList JSON-LD. Muted  */
/* via the theme-aware --ink-faint token (NOT container opacity, which  */
/* would composite the subtree and neuter the hover glow). Static,      */
/* CLS 0. Tracking matches the .lc-step register (0.07em).              */
.breadcrumb {
  max-width: var(--reading);
  margin: var(--space-6) auto var(--space-8);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--green-glow); border-bottom-color: currentColor; }
.breadcrumb .bc-sep { margin: 0 0.45em; opacity: 0.6; }
.breadcrumb .bc-current { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* .site-index — global footer site index (grouped page list), sits    */
/* directly above footer.colophon. Static, no JS, no new fonts, CLS 0. */
/* Dark theme is the default; html.light overrides below mirror the    */
/* footer's light treatment. See partials/footer.html.                 */
/* ------------------------------------------------------------------ */

.site-index {
  position: static; /* footer nav: override the global `nav { position:sticky; top:0 }` rule so it never pins */
  max-width: var(--reading);
  margin: var(--space-16) auto 0;
  padding: var(--space-12) var(--space-6) 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4-column taxonomy: Dark Context / Unwritten knowledge / The lifecycle / More. Equal tracks so long labels wrap in-column instead of going lopsided. Stacks to 1fr <640px. */
  justify-content: space-between;
  align-items: start; /* top-align columns; a cascading `nav` rule sets center, which drops the shorter columns' headings */
  column-gap: var(--space-8);
  row-gap: var(--space-8);
  font-family: var(--font-mono);
  text-align: left;
}

/* Group label — styled text, not a heading element (see footer.html note) */
.site-index .si-h {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.site-index .si-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-index .si-list a {
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.site-index .si-list a:hover { color: var(--green-glow); border-bottom-color: currentColor; }

/* Language row inside MORE: other editions, side by side */
.site-index .si-langs { display: flex; gap: var(--space-4); }

.site-index .si-langs a { letter-spacing: 0.12em; }

@media (max-width: 640px) {
  .site-index { grid-template-columns: 1fr; }
}

/* Light theme — mirrors html.light footer overrides above */
html.light .site-index { border-top-color: rgba(20,24,31,0.10); }

html.light .site-index .si-h { color: #7a8190; }

html.light .site-index .si-list a { color: #4a5160; }

html.light .site-index .si-list a:hover { color: #1b6b96; border-bottom-color: currentColor; }