/* ============================================================================
   Link to NetEra: homepage layer (2026-09-27)

   Loaded on the homepage only (index.njk: extraStyles), after components.css,
   so it can build on the shared components without every other page paying
   for sections that exist nowhere else.

   Everything here is prefixed home- (or hero- for the hero's own layers), and
   every colour is either a site token or a home token defined just below with
   its dark-theme twin: the same two-selector pattern design-tokens.css uses,
   so an explicit theme choice and the OS preference both work.

   Motion rule for this file: every animation is decorative, slow, and removed
   under prefers-reduced-motion (see the block at the end). Nothing the reader
   needs is ever conveyed only by movement.
   ============================================================================ */

:root {
  --home-dot: rgba(242, 246, 243, 0.08);
  --home-glow-a: rgba(125, 242, 200, 0.16);
  --home-glow-b: rgba(125, 242, 200, 0.08);
  --home-net-line: rgba(125, 242, 200, 0.36);
  --home-net-faint: rgba(125, 242, 200, 0.18);
  --home-net-label: rgba(179, 195, 188, 0.62);
  --home-card-glow: rgba(125, 242, 200, 0.22);
}
:root[data-theme="light"] {
  --home-dot: rgba(7, 35, 28, 0.09);
  --home-glow-a: rgba(43, 190, 140, 0.18);
  --home-glow-b: rgba(43, 190, 140, 0.10);
  --home-net-line: rgba(10, 107, 85, 0.36);
  --home-net-faint: rgba(10, 107, 85, 0.2);
  --home-net-label: rgba(75, 97, 90, 0.72);
  --home-card-glow: rgba(43, 190, 140, 0.18);
}

/* ---- Design B surfaces (2026-10-04) -----------------------------------------
   The homepage keeps this site's own components (design A) and paints each
   section with one of the backgrounds of the "v3-alethia" design (design B):
     .hb-base   deep green #0F211D      .hb-deep   band green #132A25
     .hb-panel  light panel #F4F5F2     .hb-acid   acid green #7DF2C8
   No surface is black (the owner's call, 2026-10-04): B's near-black became
   the band green, and the hero is green with an acid glow.
   Each class re-points the tokens design-tokens.css defines: the neutrals AND
   the aliases, because an alias such as --accent is resolved where it is
   declared, so changing --teal-700 alone would never reach it. These sections
   look the same in the light and the dark theme; the header and footer still
   follow the theme, as everywhere else on the site.
   Contrast checked: body text on each surface is AAA, muted text AA or better.
   ------------------------------------------------------------------------------ */
.hb-base,
.hb-deep {
  color-scheme: dark;
  --ink-900: #F2F6F3; --ink-800: #DCE7E2; --slate-600: #B9C7C1; --slate-400: #829890;
  --paper: #0F211D; --page: #0F211D; --paper-soft: #17312B; --paper-mist: #1C3A33;
  --section-band: #0F211D;
  --line: #26423B; --line-strong: #355A50;
  --teal-050: #0F241F; --teal-100: #15342C; --teal-300: #7DF2C8; --teal-500: #7DF2C8;
  --teal-600: #A5F7DA; --teal-700: #7DF2C8; --teal-800: #A5F7DA;
  --violet-050: #171630; --violet-100: #201E3D; --violet-300: #B7ADFF; --violet-500: #9C8FFF; --violet-600: #B5AAFF;
  --success-600: #5BD68F; --success-100: #12301F;
  --danger-600: #F98A8A; --danger-100: #341A1A;
  --warning-600: #F0B454; --warning-100: #32250F;
  --accent: #7DF2C8; --accent-hover: #A5F7DA; --accent-soft: #15342C; --accent-decor: #7DF2C8;
  --text: #F2F6F3; --text-muted: #B9C7C1;
  --surface: #17312B; --surface-alt: #1C3A33; --border: #26423B;
  --on-accent: #07231C;
  --code-bg: #0B1A16; --code-surface: #10231E; --code-line: #22392F;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5); --shadow-lift: 0 14px 36px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 2px #0F211D, 0 0 0 4px #7DF2C8;
  --grid-paper:
    linear-gradient(to right, rgba(242, 246, 243, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 246, 243, 0.045) 1px, transparent 1px);
  --grad-soft: linear-gradient(135deg, #132E28 0%, #17312B 100%);
  --home-dot: rgba(242, 246, 243, 0.08);
  --home-glow-a: rgba(125, 242, 200, 0.16);
  --home-glow-b: rgba(125, 242, 200, 0.08);
  --home-net-line: rgba(125, 242, 200, 0.36);
  --home-net-faint: rgba(125, 242, 200, 0.18);
  --home-net-label: rgba(185, 199, 193, 0.62);
  --home-card-glow: rgba(125, 242, 200, 0.22);
  background: var(--page);
  color: var(--text);
}
.hb-deep {
  --paper: #132A25; --page: #132A25; --section-band: #132A25;
  --paper-soft: #1A372F; --surface: #1A372F; --paper-mist: #1F3E36; --surface-alt: #1F3E36;
  --line: #2B4A42; --border: #2B4A42;
  --focus-ring: 0 0 0 2px #132A25, 0 0 0 4px #7DF2C8;
}
.hb-panel {
  color-scheme: light;
  --ink-900: #07231C; --ink-800: #12342B; --slate-600: #4B615A; --slate-400: #8A9A94;
  --paper: #FFFFFF; --page: #F4F5F2; --paper-soft: #ECEFEA; --paper-mist: #E5EAE4;
  --section-band: #F4F5F2;
  --line: #DCE2DE; --line-strong: #C3CDC8;
  --teal-050: #EEFBF5; --teal-100: #D9F5EA; --teal-300: #7DF2C8; --teal-500: #2BBE8C;
  --teal-600: #0B7A60; --teal-700: #0A6B55; --teal-800: #075645;
  --accent: #0A6B55; --accent-hover: #075645; --accent-soft: #D9F5EA; --accent-decor: #2BBE8C;
  --text: #07231C; --text-muted: #4B615A;
  --surface: #FFFFFF; --surface-alt: #ECEFEA; --border: #DCE2DE;
  --on-accent: #FFFFFF;
  --focus-ring: 0 0 0 2px #F4F5F2, 0 0 0 4px #0A6B55;
  --home-card-glow: rgba(43, 190, 140, 0.18);
  background: var(--page);
  color: var(--text);
}
.hb-acid {
  color-scheme: light;
  --ink-900: #07231C; --ink-800: #0E3329; --slate-600: #1F5244; --slate-400: #3E7A68;
  --paper: #7DF2C8; --page: #7DF2C8; --paper-soft: #74E6BD; --paper-mist: #6CDCB3;
  --section-band: #7DF2C8;
  --line: rgba(7, 35, 28, 0.16); --line-strong: rgba(7, 35, 28, 0.3);
  --accent: #07231C; --accent-hover: #0E3329; --accent-soft: #74E6BD; --accent-decor: #07231C;
  --violet-500: #1F6B57;
  --text: #07231C; --text-muted: #1F5244;
  --surface: #74E6BD; --surface-alt: #6CDCB3; --border: rgba(7, 35, 28, 0.16);
  --on-accent: #7DF2C8;
  --focus-ring: 0 0 0 2px #7DF2C8, 0 0 0 4px #07231C;
  background: var(--page);
  color: var(--text);
}
/* A section's own rule (e.g. .home-syllabus { background: var(--surface) })
   must not repaint design B's ground, so the surface wins on specificity. */
section.hb-base, section.hb-deep, section.hb-panel, section.hb-acid { background: var(--page); }
/* The page behind and between the sections is the site's deep green. */
body { background: #0F211D; }
main#main { background: #0F211D; }

/* ---- Hero (design B) --------------------------------------------------------- */
.hb-hero {
  --hb-acid: #7DF2C8;
  --hb-on-acid: #07231C;
  --hb-ink: #F2F6F3;
  --hb-dim: rgba(242, 246, 243, 0.72);
  --hb-quiet: #829890;
  --hb-line: rgba(242, 246, 243, 0.14);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: min(820px, calc(100svh - 72px));
  background:
    radial-gradient(900px 620px at 70% 36%, rgba(125, 242, 200, 0.09), transparent 70%),
    linear-gradient(180deg, #10251F 0%, #0F211D 100%);
  color: var(--hb-ink);
}
.hb-hero__net { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; }
/* Darkens the top under the header and fades the scene into the next section. */
.hb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 33, 29, 0.55) 0%, rgba(15, 33, 29, 0.08) 36%, rgba(15, 33, 29, 0.94) 100%);
}
.hb-hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(72px, 9vw, 96px) clamp(48px, 6vw, 72px); }
.hb-kicker {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hb-dim);
}
/* All three lines share one grid cell, so the box takes the tallest and the
   lines crossfade in place (blur + fade, never a slide). */
.hb-cycler { display: grid; }
.hb-cycler__line {
  grid-area: 1 / 1;
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--hb-ink);
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 0.9s var(--ease);
}
.hb-cycler__line.is-on { opacity: 1; filter: none; transform: none; }
.hb-cycler__line em { font-style: normal; color: var(--hb-acid); }
.hb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }

/* Design B's button: outlined, mono caps, with the accent arrow chip at the end. */
.hb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: 0 8px 0 var(--sp-3);
  border: 1px solid rgba(242, 246, 243, 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--hb-ink);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hb-btn:hover { border-color: var(--hb-acid); color: var(--hb-ink); text-decoration: none; }
.hb-btn i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 4px; background: var(--hb-acid); color: var(--hb-on-acid); }
.hb-btn--solid { background: var(--hb-acid); border-color: var(--hb-acid); color: var(--hb-on-acid); }
.hb-btn--solid:hover { background: #A5F7DA; border-color: #A5F7DA; color: var(--hb-on-acid); }
.hb-btn--solid i { background: var(--hb-on-acid); color: var(--hb-acid); }
.hb-btn:focus-visible, .hb-pin:focus-visible { outline: 2px solid var(--hb-acid); outline-offset: 3px; }

/* Pins sit on the three fixed nodes of the canvas (js/home.js reads the same
   --x/--y), so every label names a node that is really drawn there. */
.hb-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -13px 0 0 -13px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hb-ink);
  cursor: pointer;
}
.hb-pin__dot { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hb-acid); }
.hb-pin__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hb-on-acid); }
.hb-pin__dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hb-acid); animation: hb-ping 2.6s var(--ease) infinite; }
.hb-pin__txt {
  padding: 6px 9px;
  border: 1px solid var(--hb-line);
  border-radius: 4px;
  background: rgba(15, 33, 29, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.hb-pin:hover .hb-pin__txt, .hb-pin:focus-visible .hb-pin__txt, .hb-pin.is-open .hb-pin__txt { opacity: 1; transform: none; }
@keyframes hb-ping { 0% { transform: scale(1); opacity: 0.9; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 860px) { .hb-pin { display: none; } }

/* The readout counts the packets the canvas is drawing at that moment. */
.hb-readout {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(56px, 7vw, 80px);
  z-index: 3;
  width: 236px;
  padding: var(--sp-3);
  border: 1px solid var(--hb-line);
  border-radius: 22px;
  background: rgba(19, 42, 37, 0.7);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.hb-readout__label, .hb-readout__note { margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; }
.hb-readout__label { margin-bottom: 10px; color: var(--hb-quiet); }
.hb-readout__note { margin-top: 8px; color: var(--hb-acid); }
.hb-readout__n { display: block; font-family: var(--font-head); font-weight: 500; font-size: 2.375rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hb-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: var(--sp-2); }
.hb-spark i { flex: 1; height: 3px; border-radius: 1px; background: var(--hb-acid); opacity: 0.5; transition: height 0.4s var(--ease); }
@media (max-width: 1080px) { .hb-readout { display: none; } }

/* ---- Syllabus strip -------------------------------------------------------- */
.home-syllabus {
  position: relative;
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: var(--sp-4);
  overflow: hidden;
}
.home-syllabus__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px var(--sp-4);
  margin-bottom: var(--sp-3);
}
.home-syllabus__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.home-syllabus__counts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.home-syllabus__counts b {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}

.home-marquee {
  display: grid;
  gap: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.home-marquee__row { display: flex; width: max-content; }
.home-marquee__track {
  display: flex;
  flex: none;
  gap: 10px;
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
  animation: home-marquee 110s linear infinite;
}
.home-marquee__row--rev .home-marquee__track { animation-direction: reverse; animation-duration: 125s; }
.home-marquee:hover .home-marquee__track { animation-play-state: paused; }
.home-marquee__track li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--paper-soft);
  font-size: var(--fs-sm);
  white-space: nowrap;
  color: var(--text);
}
.home-marquee__track li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-decor);
}
.home-marquee__row--rev .home-marquee__track li::before { background: var(--violet-500); }
@keyframes home-marquee { to { transform: translateX(-100%); } }

/* ---- Start here: three routes --------------------------------------------- */
.home-start__aside {
  flex: 0 1 36ch;
  margin: 0 0 6px;
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.home-routes { display: grid; gap: var(--sp-3); }
@media (min-width: 820px) { .home-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.home-route {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.home-route:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.home-route:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-route--lead {
  border-color: color-mix(in srgb, var(--accent-decor) 55%, var(--border));
  background: linear-gradient(180deg, var(--teal-050), var(--surface) 55%);
  box-shadow: 0 10px 30px -12px var(--home-card-glow);
}
.home-route__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.home-route__art {
  display: block;
  height: 104px;
  margin-bottom: 8px;
  border-radius: var(--r-md);
  background-color: var(--paper-soft);
  background-image: var(--grid-paper);
  background-size: 16px 16px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.home-route__art svg { width: 100%; height: 100%; display: block; }
.home-route__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.home-route__title { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-snug); }
.home-route__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.home-route__land {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.home-route__land b { color: var(--accent); font-weight: 600; margin-right: auto; margin-left: 4px; }
.home-route__land .icon--sm { color: var(--accent); transition: transform var(--t-fast); flex: none; }
.home-route:hover .home-route__land .icon--sm { transform: translateX(4px); }

/* route illustrations */
.r-line { stroke: var(--accent-decor); stroke-width: 2; stroke-dasharray: 4 6; }
.r-node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.r-node--on { fill: var(--accent); stroke: var(--accent); }
.r-txt { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--on-accent); }
.r-txt--mute { fill: var(--text-muted); }
.r-panel { fill: var(--surface); stroke: var(--border); }
.r-tick { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.r-bar { fill: var(--teal-100); }
.r-bar--b { fill: var(--violet-100); }
.r-clock { fill: var(--surface); stroke: var(--violet-500); stroke-width: 2; }
.r-hand { stroke: var(--violet-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r-term { fill: var(--code-bg); }
.r-dot { fill: var(--code-line); }
.r-mono { font-family: var(--font-mono); font-size: 12.5px; fill: var(--code-muted); }
.r-mono--cmd { fill: var(--code-teal); }

/* ---- Method: how a lesson works ------------------------------------------- */
.home-method__inner { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 1024px) { .home-method__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); } }
.home-method__art svg { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.home-method__art .e-bg-a { stop-color: var(--teal-050); }
.home-method__art .e-bg-b { stop-color: var(--violet-050); }
.home-method__art .e-halo { fill: var(--surface); opacity: 0.5; }
.home-method__art .e-return { stroke: var(--slate-400); opacity: 0.6; }
.home-method__art .e-lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); }
.home-method__art .e-lbl--v { fill: var(--violet-600); }
.home-method__art .e-lbl--mute { fill: var(--slate-400); }
.home-method__copy .lead { margin-top: var(--sp-2); }

.home-steps {
  position: relative;
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
/* The connector only shows in the gaps between the step cards, which is the
   point: it reads as one path through four stops. */
.home-steps::before {
  content: "";
  position: absolute;
  left: 37px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent-decor), var(--violet-500));
  opacity: 0.45;
}
.home-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.home-step__n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
}
.home-step h3 { font-size: var(--fs-md); margin: 2px 0 2px; }
.home-step p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- Tools console ---------------------------------------------------------- */
.home-console {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.home-console__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--border);
}
.home-console__tabs[hidden] { display: none; }
.home-console__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.home-console__tab:hover { background: var(--paper-mist); }
.home-console__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-console__tab .icon { flex: none; color: var(--text-muted); }
.home-console__tab b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.home-console__tab small { display: block; font-size: 0.75rem; color: var(--text-muted); }
.home-console__tab[aria-selected="true"] { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.home-console__tab[aria-selected="true"] .icon { color: var(--accent); }
@media (max-width: 559px) { .home-console__tab small { display: none; } }

.home-console__panels { padding: var(--sp-3); min-width: 0; }
.home-console__panel { display: grid; gap: var(--sp-3); align-items: start; }
.home-console__panel[hidden] { display: none; }
.home-console__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
.home-console:not(.is-ready) .home-console__panel + .home-console__panel {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.home-console__about h3 { font-size: var(--fs-lg); }
.home-console__about p { margin: 8px 0 12px; font-size: var(--fs-sm); color: var(--text-muted); }
@media (min-width: 768px) {
  .home-console__panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-4); }
}
@media (min-width: 1024px) {
  .home-console.is-ready { grid-template-columns: 280px minmax(0, 1fr); }
  .home-console__tabs { grid-template-columns: 1fr; align-content: start; padding: 14px; border-bottom: 0; border-right: 1px solid var(--border); }
  .home-console__panels { padding: var(--sp-4); }
}

.home-moretools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: var(--sp-4); }
.home-moretools__label { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.home-moretools__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-moretools__list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.home-moretools__list a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.home-moretools__live {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--success-600);
  background: var(--success-100);
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
/* On a phone the 13 wrapped pills filled a whole screen (464px tall at 375px).
   Below 640px they become two rows that scroll sideways, edge to edge, with the
   right edge faded so the row reads as "more this way". */
@media (max-width: 639px) {
  .home-moretools { display: block; }
  .home-moretools__label { margin-bottom: 10px; }
  /* Two classes: base.css's ul[class] { padding: 0 } outranks one. */
  .home-moretools .home-moretools__list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content;
    gap: 8px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .home-moretools__list::-webkit-scrollbar { display: none; }
  .home-moretools__list li { scroll-snap-align: start; }
  .home-moretools__list a { white-space: nowrap; font-size: var(--fs-xs); }
}

/* ---- Exam map ----------------------------------------------------------------- */
.home-exams__box {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 479px) { .home-exams__box { padding: var(--sp-3); } }
.home-exams__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--sp-4);
  background: var(--paper-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.home-exams__tabs[hidden] { display: none; }
.home-exams__tab {
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.home-exams__tab span { margin-left: 6px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; }
.home-exams__tab:hover { color: var(--text); }
.home-exams__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-exams__tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
@media (max-width: 419px) { .home-exams__tab span { display: none; } }

.home-exams__panel { display: grid; gap: var(--sp-4); }
.home-exams__panel[hidden] { display: none; }
.home-exams__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
.home-exams__box:not(.is-ready) .home-exams__panel + .home-exams__panel {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) { .home-exams__panel { grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-6); } }

.home-exams__summary h3 { font-size: var(--fs-xl); }
.home-exams__summary h3 span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.home-exams__facts { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.home-exams__facts li { display: flex; align-items: baseline; gap: 10px; }
.home-exams__facts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-decor); transform: translateY(-2px); }
.home-exams__src { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

.home-exams__domains { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 720px) { .home-exams__domains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--sp-4); } }
.home-exams__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-exams__name { font-weight: 600; }
.home-exams__pct { font-family: var(--font-mono); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.home-exams__bar { height: 8px; margin: 8px 0 8px; border-radius: var(--r-pill); background: var(--paper-mist); overflow: hidden; }
/* Scaled so the heaviest domain on either exam (25%) nearly fills the track:
   the bars compare domains with each other, and the printed % is the number. */
.home-exams__bar span { display: block; height: 100%; width: calc(var(--w) * 3.8%); border-radius: inherit; background: var(--grad-brand); }
.home-exams__domain--gap .home-exams__bar span { background: var(--line-strong); }
.home-exams__domain--gap .home-exams__pct { color: var(--text-muted); }
.home-exams__tracks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.home-exams__tracks a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
}
.home-exams__tracks a:hover { text-decoration: none; background: var(--accent); color: var(--on-accent); }
.home-exams__none {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
}
.home-exams__checked { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- Tech news ------------------------------------------------------------------ */
.home-news__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) {
  .home-news__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
  .home-story--lead { grid-row: span 2; }
}
.home-story {
  position: relative;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.home-story:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.home-story__cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-soft); border-bottom: 1px solid var(--border); }
.home-story__cover svg { display: block; width: 100%; height: 100%; transition: transform 0.6s var(--ease); }
.home-story:hover .home-story__cover svg { transform: scale(1.04); }
.home-story__body { padding: var(--sp-3); }
.home-story h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin-top: 6px; }
.home-story--lead h3 { font-size: var(--fs-xl); }
.home-story__excerpt { margin: 10px 0 0; color: var(--text-muted); font-size: var(--fs-base); }
.home-story .card__link { color: var(--text); }
.home-story .card__link::after { border-radius: var(--r-lg); }
@media (min-width: 560px) {
  /* The two smaller stories sit cover-beside-text, so the pair matches the
     lead's height instead of stacking two more full-width images. */
  .home-story:not(.home-story--lead) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .home-story:not(.home-story--lead) .home-story__cover { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--border); }
  .home-story:not(.home-story--lead) .home-story__cover svg { height: 100%; object-fit: cover; }
}

/* ---- Close ------------------------------------------------------------------------ */
/* Dark in BOTH themes, on purpose: the page ends on the one scene that is
   meant to feel different. Its colours are local, not the theme's, so the
   section cannot invert under the light theme. Since 2026-10-04 they are
   design B's: a deep green ground (never black), acid accent, green greys. */
.home-close {
  --c-bg: #11261F;
  --c-text: #F2F6F3;
  --c-muted: #B9C7C1;
  --c-faint: #829890;
  --c-teal: #7DF2C8;
  --c-line: rgba(242, 246, 243, 0.12);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  padding-block: clamp(84px, 11vw, 150px) clamp(64px, 8vw, 110px);
}
.home-close__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-close__floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 100%;
  background-image:
    linear-gradient(rgba(125, 242, 200, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 242, 200, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
  /* Tuned by measurement, not by eye: with these values the projected plane
     runs from about 60% of the section's height to its bottom edge, so the
     horizon sits just under the call to action. A shorter perspective folds
     the whole plane into the last few pixels (or below the section). */
  transform: perspective(1500px) rotateX(50deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 78%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 78%);
  animation: home-floor 9s linear infinite;
}
@keyframes home-floor { to { background-position: 0 60px, 0 0; } }
.home-close__aurora {
  position: absolute;
  inset: -30% -10% 30%;
  background:
    radial-gradient(ellipse 38% 46% at 28% 42%, rgba(125, 242, 200, 0.26), transparent 70%),
    radial-gradient(ellipse 34% 42% at 74% 30%, rgba(91, 217, 174, 0.18), transparent 70%);
  filter: blur(24px);
  animation: home-drift-a 24s ease-in-out infinite alternate;
}
.home-close__inner { display: grid; gap: clamp(var(--sp-8), 8vw, var(--sp-12)); }
.home-close__cta { max-width: 820px; margin-inline: auto; text-align: center; }
.home-close__eyebrow {
  max-width: none; /* base p { max-width: 68ch } left it off-centre above the heading */
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-teal);
}
.home-close h2 {
  font-size: clamp(2.375rem, 6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--c-text);
  background: linear-gradient(95deg, #FFFFFF 10%, #D2FBEA 55%, #7DF2C8 92%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-close__lead { max-width: 52ch; margin: var(--sp-3) auto 0; font-size: var(--fs-md); color: var(--c-muted); }
.home-close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--sp-5); }
.home-close__btn {
  padding: 17px 28px;
  font-size: var(--fs-md);
  font-weight: 600;
  background: #7DF2C8;
  color: #07231C;
  box-shadow: 0 12px 36px -12px rgba(125, 242, 200, 0.55);
}
.home-close__btn:hover { background: #A5F7DA; color: #07231C; box-shadow: 0 16px 40px -12px rgba(125, 242, 200, 0.7); }
.home-close__ghost {
  padding: 17px 26px;
  font-size: var(--fs-md);
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.22);
}
.home-close__ghost:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.4); }
.home-close :focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; box-shadow: none; }

.home-close__trace { max-width: 720px; margin: var(--sp-6) auto 0; }
.home-close__trace svg { display: block; width: 100%; height: auto; overflow: visible; }
.hc-line { stroke: rgba(255, 255, 255, 0.2); stroke-width: 2; stroke-dasharray: 3 7; }
.hc-hops circle { fill: #11261F; stroke: var(--c-teal); stroke-width: 1.5; }
.hc-hops circle:last-child { fill: var(--c-teal); }
.hc-names text { font-family: var(--font-mono); font-size: 12px; fill: var(--c-faint); }
.hc-names text:last-child { fill: var(--c-teal); }
.hc-packet { fill: #FFFFFF; filter: drop-shadow(0 0 6px rgba(125, 242, 200, 1)); }
@media (max-width: 559px) { .home-close__trace { display: none; } }


/* ---- Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .home-close__floor,
  .home-close__aurora,
  .hb-pin__dot::before { animation: none; }
  .hb-cycler__line, .hb-spark i { transition: none; }
  .hc-packet { display: none; }
  /* The strip stops and wraps into a static cloud; the duplicate copy that
     only existed to make the loop seamless goes away. */
  .home-marquee { -webkit-mask-image: none; mask-image: none; }
  .home-marquee__row { width: auto; }
  .home-marquee__track { flex-wrap: wrap; animation: none; padding: 0; }
  .home-marquee__track[aria-hidden="true"] { display: none; }
  .home-route:hover, .home-story:hover { transform: none; }
}