/* =========================================================================
   🪐 1. GLOBAL ROOT VARIABLES & BASE RESETS
   ========================================================================= */
   :root {
    color-scheme: dark;
    --ink: #0b0f1a;
    --ink-2: #121829;
    --ink-3: #1a2238;
    --line: #28314a;
    --steel: #9aa6b8;
    --text: #e8ecf3;
    --lamp: #f2a641;
    --lamp-dim: #b8742a;
    --aurora: #5fd3b5;
    --alarm: #ef5a5f;
  
    --display: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif;
    --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  
    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: 1.3rem;
    --step-2: 1.75rem;
    --step-3: clamp(1.9rem, 4.4vw, 2.6rem);
  }
  
  * { box-sizing: border-box; }
  html { background: var(--ink); scroll-behavior: smooth; }
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ink);
    color: var(--text);
    font: 400 var(--step-0)/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
  }
  img, canvas, svg { max-width: 100%; }
  a { color: var(--lamp); text-underline-offset: 3px; }
  a:hover { color: var(--text); }
  :focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; border-radius: 2px; }
  
  /* ---------- Global Content Framing Layout ---------- */
  .wrap { 
    max-width: 1160px; 
    margin: 0 auto; 
    padding-inline: 32px; 
  }
  
  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
    margin: 0;
  }
  h2 { font-size: var(--step-3); letter-spacing: 0.01em; }
  h3 { font-size: var(--step-1); }
  p { margin: 0; }
  .lede { max-width: 62ch; color: var(--steel); font-size: var(--step-1); line-height: 1.5; align-content: start;}
  
  .label {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lamp);
  }
  
  /* =========================================================================
     🕹️ 2. COMPONENT DESIGN MODULES (MOBILE-FIRST BASE)
     ========================================================================= */
  
  /* ---------- top bar ---------- */
  .top {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 99999;
    background: #070a12;
    border-bottom: 1px solid var(--line);
  }
  .top .bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    padding-left: 20px;
    min-height: 52px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--lamp);
    text-decoration: none;
  }
  .brand svg { width: 22px; height: 22px; }
  /* Mobile: section links live in a dropdown under the bar, opened by the menu button.
     At 1024px+ the button hides and the links sit inline in the bar. */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 60px;
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line);
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--steel);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
  }
  .nav-toggle:hover span { background: var(--text); }
  /* Bars fold into an X while the menu is open */
  .nav-toggle[aria-expanded="true"] span { background: var(--lamp); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #070a12;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  }
  .nav.open { display: flex; }
  .nav a {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* right-aligned under the menu button */
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav a:hover { color: var(--text); }
  .nav .navcta { background: var(--lamp); color: #1b1206; padding-inline: 14px; font-size: 0.8rem; }
  .nav .navcta:hover { background: #ffbd5c; color: #1b1206; }
  /* Patch Notes: a page of its own, not a section of this one, so it is set
     apart -- teal monospace, a status light that pulses while there is an
     update you have not read, and the live version on a tag. */
  .nav .navnotes {
    gap: 9px;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--aurora);
    background: rgba(95, 211, 181, 0.05);
  }
  .nav .navnotes:hover { color: #8ff0d6; background: rgba(95, 211, 181, 0.1); }
  .navnotes-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--aurora);
    box-shadow: 0 0 8px rgba(95, 211, 181, 0.8);
    flex: none;
  }
  .navnotes.fresh .navnotes-dot { animation: notes-pulse 1.6s ease-in-out infinite; }
  @keyframes notes-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(95, 211, 181, 0.8); }
    50% { opacity: 0.35; box-shadow: 0 0 2px rgba(95, 211, 181, 0.3); }
  }
  .navnotes-ver:empty { display: none; }
  .navnotes-ver {
    font-size: 0.7rem;
    color: var(--steel);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 1px 6px;
    letter-spacing: 0.04em;
  }
  .navnotes.fresh .navnotes-ver { color: var(--aurora); border-color: rgba(95, 211, 181, 0.5); }
  @media (prefers-reduced-motion: reduce) {
    .navnotes.fresh .navnotes-dot { animation: none; }
  }
  
  /* ---------- hero ---------- */
  .hero {
    position: relative;
    min-height: clamp(560px, 88vh, 900px);
    overflow: hidden;
    background: #0a0d1c;
    display: grid;
    justify-items: center;
    align-content: start;
  }
  #scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero-copy {
    position: relative;
    z-index: 10;
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
    padding: clamp(48px, 10vh, 110px) 20px 0;
    max-width: 760px;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
  }
  .eyebrow i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--alarm);
    box-shadow: 0 0 10px var(--alarm);
    animation: blink 1.6s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0.2; } }
  h1 {
    font-size: clamp(2.6rem, 9vw, 6.2rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    line-height: 1;
    text-shadow: 0 2px 30px rgba(7, 10, 20, 0.7);
  }
  .tagline {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 1px 16px rgba(7, 10, 20, 0.9);
  }
  .tagline em { font-style: normal; color: var(--lamp); }
  .hero-sub {
    max-width: 52ch;
    color: #c9d0dc;
    text-shadow: 0 1px 12px rgba(7, 10, 20, 0.95);
  }
  
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 26px;
    color: var(--text);
    background: rgba(11, 15, 26, 0.55);
    border: 1px solid var(--steel);
    transition: background .15s, color .15s, border-color .15s;
  }
  .btn::before, .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px; height: 9px;
    border: 1px solid currentColor;
    background: var(--ink);
    transform: translateY(-50%) rotate(45deg);
  }
  .btn::before { left: -5px; }
  .btn::after { right: -5px; }
  .btn:hover { border-color: var(--text); background: rgba(11, 15, 26, 0.8); color: var(--text); }
  .btn.primary { background: var(--lamp); border-color: var(--lamp); color: #1b1206; }
  .btn.primary::before, .btn.primary::after { border-color: var(--lamp); background: #1b1206; }
  .btn.primary:hover { background: #ffbd5c; border-color: #ffbd5c; color: #1b1206; }
  .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding-top: 8px; }
  
  .hero.has-shot { background: #0a0d1c center / cover no-repeat; }
  .hero.has-shot #scene { display: none; }
  .hero.has-shot::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 55% 42% at 50% 36%, rgba(7,10,20,0.62), rgba(7,10,20,0) 72%),
      linear-gradient(to bottom, rgba(7,10,20,0.45), rgba(7,10,20,0) 45%, rgba(7,10,20,0.55));
  }
  /* The hero's slow 360 turn, under the same wash as a still shot. */
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* A soft focus: the footage is atmosphere behind the title, not the thing
       to read, and it smooths what recording and compression leave behind.
       Zoomed a touch so the blurred edges never show. */
    filter: blur(2px) saturate(1.08);
    transform: scale(1.04);
  }
  .hero.has-shot::before { z-index: 1; }
  /* Vignette over the edges, and faint scanlines -- the console look the rest
     of the page has, and texture so soft footage reads as a screen, not a blur. */
  .hero.has-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
      /* a faint reflection on the glass, high on the left */
      radial-gradient(ellipse 55% 35% at 28% 10%, rgba(255,255,255,0.07), rgba(255,255,255,0) 70%),
      radial-gradient(ellipse 85% 75% at 50% 45%, rgba(7,10,20,0) 55%, rgba(7,10,20,0.55) 100%),
      repeating-linear-gradient(to bottom, rgba(7,10,20,0.16) 0 1px, rgba(7,10,20,0) 1px 3px);
    /* the tube curving away at the edges */
    box-shadow:
      inset 0 0 90px 18px rgba(0,0,0,0.7),
      inset 0 0 0 1px rgba(255,255,255,0.06);
  }

  /* ---------- the hero as an old CRT ---------- */
  /* The screen: corners rounded like a curved tube, in a dark bezel that sits
     on the page with a shadow under it. */
  .hero.has-shot {
    margin: clamp(10px, 2.2vw, 28px) clamp(10px, 2.2vw, 28px) 0;   /* the same gap above as at the sides */
    border-radius: 38px / 34px;
    isolation: isolate;
    box-shadow:
      0 0 0 12px #121828,
      0 0 0 13px #2a3350,
      0 0 0 15px #070a14,
      0 28px 60px rgba(0, 0, 0, 0.55);
  }
  @media (max-width: 600px) {
    .hero.has-shot {
      margin: 10px 10px 0;
      border-radius: 24px / 22px;
      box-shadow:
        0 0 0 8px #121828,
        0 0 0 9px #2a3350,
        0 0 0 10px #070a14,
        0 18px 40px rgba(0, 0, 0, 0.5);
    }
    .hero.has-shot::after { box-shadow: inset 0 0 60px 10px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.06); }
  }

  /* ---------- the cube's edge ---------- */
  .edge-layout { display: grid; gap: 40px; align-items: center; }
  .edge-copy { display: grid; gap: 16px; align-content: start; }
  .edge-specs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
  .edge-specs li {
    display: grid;
    gap: 2px;
    padding-left: 18px;
    border-left: 2px solid var(--aurora);
  }
  .edge-specs b {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--aurora);
  }
  .edge-specs span { color: var(--steel); font-size: 0.97rem; }

  .edge-media { position: relative; padding-bottom: 0; }
  /* The clip in a camera feed's frame: corner brackets, a HUD strip, a caption bar. */
  .feed-frame {
    position: relative;
    margin: 0;
    padding: 10px;
    background: var(--ink-2);
    border: 1px solid var(--line);
  }
  .feed-frame::before, .feed-frame::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid var(--lamp);
    pointer-events: none;
  }
  .feed-frame::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
  .feed-frame::after { top: -5px; right: -5px; border-left: 0; border-bottom: 0; }
  .feed-hud, .feed-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--steel);
    text-transform: uppercase;
  }
  .feed-hud { padding: 2px 4px 9px; }
  .feed-hud .wide-only { display: none; }      /* one line on a phone */
  @media (min-width: 480px) { .feed-hud .wide-only { display: inline; } }
  .feed-foot { padding: 9px 4px 2px; }
  .feed-foot b { color: var(--lamp); font-weight: 500; padding-inline: 4px; }
  .feed-rec { display: inline-flex; align-items: center; gap: 7px; color: var(--alarm); }
  .feed-rec i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--alarm);
    box-shadow: 0 0 8px var(--alarm);
    animation: blink 1.6s steps(1) infinite;
  }
  .feed-frame .clip-video { border: 1px solid var(--line); }
  /* The still, pinned over the frame's lower corner like a print. */
  .edge-inset {
    margin: 18px 0 0;
    background: var(--ink-3);
    border: 1px solid var(--line);
    padding: 8px 8px 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .edge-inset img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
  .edge-inset figcaption {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
    padding-top: 6px;
  }
  @media (min-width: 640px) {
    .edge-media { padding-bottom: 70px; }
    .edge-inset {
      position: absolute;
      right: -18px;
      bottom: 0;
      width: 38%;
      margin: 0;
      transform: rotate(2deg);
    }
  }
  @media (min-width: 960px) {
    .edge-layout { grid-template-columns: 5fr 7fr; gap: 56px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .feed-rec i { animation: none; }
  }

  /* ---------- the deep ---------- */
  .deep-grid { display: grid; gap: 20px; }
  .deep-grid img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border: 1px solid var(--line);
  }
  @media (min-width: 768px) {
    .deep-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- flip-book and time-lapse ---------- */
  .clip-video {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
    background: #0a0d1c;
  }
  .scroll-hint {
    position: absolute;
    z-index: 3;   /* above the hero's vignette */
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.0rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
  }
  
  /* ---------- sections ---------- */
  section { padding-block: 80px; position: relative !important;}
  section + section { border-top: 1px solid var(--line); }
  .head { display: grid; gap: 14px; margin-bottom: 44px; }
  .head.center { justify-items: center; text-align: center; }
  .head.center .lede { text-align: center; }

  /* Phones / small tablets: section text content is centered.
     Everything returns to left-aligned at 768px+. */
  .head,
  .fam,
  .terminal-text-block,
  .dark-copy,
  #visor-telemetry-section > div { text-align: center; }

  /* Visor callout accent: short centered rule under the heading while centered,
     becomes a left-side bar at 768px+ */
  .visor-callout { position: relative; padding-top: 18px; margin-top: 24px; }
  .visor-callout::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 40px; height: 2px;
    background: var(--aurora);
    transform: translateX(-50%);
  }

  /* While centered, the two visor columns flatten into one stack so the grey callout
     sits under the white intro paragraph: label, title, intro, callout, HUD readout */
  #visor-telemetry-section { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .visor-intro, .visor-readout { display: contents; }
  .visor-readout > p { margin-top: 24px; }
  .visor-callout { order: 1; }
  .visor-readout .hud-terminal-display { order: 2; margin-top: 24px; }
  
  /* ---------- story sandbox ---------- */
  /* Mobile: vertical timeline list. Becomes a 5-column row at 1024px+. */
  .story {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    counter-reset: step;
  }
  .story li {
    counter-increment: step;
    padding: 0 0 26px 22px;
    display: block;
    gap: 8px;
    align-content: start;
    position: relative;
  }
  .story li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: 4px;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--lamp);
  }

  /* Timeline connector line, bound to each card's text so it stops at the next card */
  .story li:not(:last-child) h3::before {
    content: "";
    position: absolute;
    left: 2px;
    width: 2px;
    top: 9px; /* starts at the diamond's center */
    height: 100%;
    margin-bottom: -10px;
    background-color: var(--line);
    display: block;
    z-index: 1;
  }

  .story li::after {
    content: "";
    position: absolute;
    top: 4px; left: -4px;
    z-index: 2;
    width: 10px; height: 10px;
    background: var(--ink);
    border: 2px solid var(--lamp);
    transform: rotate(45deg);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .story li.active::after {
    background: var(--aurora) !important;
    border-color: var(--aurora) !important;
    box-shadow: 0 0 12px var(--aurora); /* Adds a high-tech radar glow */
  }
  .story li.active::before {
    color: var(--aurora) !important;
    text-shadow: 0 0 10px rgba(95, 211, 181, 0.4); /* Gives the numbers a matching clean sci-fi glow */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Keeps the step transition perfectly fluid */
  }

  /* .story li:first-child::after { background: var(--aurora); border-color: var(--aurora); } */
  .story h3 { font-size: 1.15rem; }
  .story p { color: var(--steel); font-size: 0.97rem; }
  
  /* ---------- planet families ---------- */
  .families {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    margin-bottom: 56px;
  }
  .fam { display: grid; gap: 12px; align-content: start; }
  .fam canvas {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    border: 1px solid var(--line);
  }
  .fam img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    border: 1px solid var(--line);
  }
  .fam h3 { font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .fam p { color: var(--steel); font-size: 0.97rem; }
  /* ---------- systems panel & telemetry ---------- */
  .classes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
  .classes .lede { font-size: var(--step-0); }
  .table-scroll { overflow-x: auto; }
  
  table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
  th, td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-family: var(--mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
  td.cls { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--lamp); width: 3rem; }
  td.name { font-weight: 700; white-space: nowrap; }
  td.desc { color: var(--steel); }
  
  /* Mobile: stacked standalone cards with airspace on top for the crawler.
     Becomes a bordered grid panel at 768px+. */
  .systems-grid-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 60px;
    user-select: none;
    -webkit-user-select: none;
    margin-inline: auto;
  }

  .pot-backdrop-shield {
    display: none;
    position: absolute;
    left: calc(50% - 800px);
    bottom: 150px;
    z-index: 0;
    width: 320px;
    height: 320px;
    pointer-events: none;
  }
  .bg-vector-pot {
    width: 100% !important;
    height: 100% !important;
    transform: rotate(-16deg);
  }
  
  .crawler-track-gutter {
    display: none;
    position: absolute;
    left: calc(50% - 580px);
    right: calc(50% - 580px);
    top: unset !important;
    bottom: calc(100% - 2px) !important;
    height: 48px;
    z-index: 15;
    pointer-events: none;
  }
  /* Mobile: crawler patrols inside the panel's top airspace on a shorter loop */
  .bg-vector-rover {
    display: block;
    position: absolute;
    top: 18px; /* wheels (y=98 of the 120 viewBox) land on the first card at the 60px padding line */
    transform: translateY(-100%) scaleX(-1);
    transform-origin: bottom center;
    width: 76px;
    height: 52px;
    z-index: 25;
    animation: mobileCrawlerPatrol 16s linear infinite;
    pointer-events: none;
  }

  @keyframes crawlerPatrol {
    0% { left: 24px; transform: translateY(-100%) scaleX(-1); }
    45% { left: calc(100% - 250px); transform: translateY(-100%) scaleX(-1); }
    48% { left: calc(100% - 250px); transform: translateY(-100%) scaleX(1); }
    95% { left: 24px; transform: translateY(-100%) scaleX(1); }
    100% { left: 24px; transform: translateY(-100%) scaleX(-1); }
  }

  /* Wheels (tire, rim and hub) spin in place. The art faces left, so they roll counter-clockwise;
     the patrol's scaleX flip mirrors the spin to match when it heads right. */
  .rover-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: roverWheelSpin 1.6s linear infinite;
  }
  @keyframes roverWheelSpin {
    to { transform: rotate(-360deg); }
  }

  /* Tailored animation pathing optimized to fit tighter mobile bounds without clipping */
  @keyframes mobileCrawlerPatrol {
    0% { left: 16px; transform: translateY(0) scaleX(-1); }
    45% { left: calc(100% - 92px); transform: translateY(0) scaleX(-1); }
    48% { left: calc(100% - 92px); transform: translateY(0) scaleX(1); }
    95% { left: 16px; transform: translateY(0) scaleX(1); }
    100% { left: 16px; transform: translateY(0) scaleX(-1); }
  }

  /* Alien plant: mirrors the cooking pot on the other side (same size, offset and tilt, flipped).
     Which plant it is gets picked at random on each page load. */
  .bg-vector-fauna {
    display: none;
    position: absolute;
    right: calc(50% - 800px);
    bottom: 150px;
    z-index: 0;
    width: 320px !important;
    height: 320px !important;
    transform: rotate(16deg);
    pointer-events: none;
  }
  /* The plant hangs past the right edge on narrower desktops like the pot does on the left;
     clip it so it can't cause sideways scrolling */
  #systems { overflow-x: clip; }
  
  .recipe-flow-row {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 0.72rem; color: var(--steel);
    padding-top: 4px; border-top: 1px dashed rgba(40, 49, 74, 0.3); margin-top: 4px;
  }
  .recipe-flow-row span.output { color: var(--aurora); font-weight: 500; }
  
  .console-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    padding: 28px 24px;
    display: grid;
    gap: 16px;
    align-content: start;
    position: relative;
    cursor: default;
  }
  .console-card h3 { font-size: 1.4rem; letter-spacing: 0.04em; color: var(--text); }
  .console-card p { color: var(--steel); font-size: 1.0rem; line-height: 1.6; margin: 0; }
  .console-card svg { display: none; }

  .hud-terminal-display {
    background: #060a14;
    border: 1px solid rgba(95, 211, 181, 0.25);
    border-radius: 4px;
    padding: 42px 24px 30px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--aurora);
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    position: relative;
    box-shadow: inset 0 0 20px rgba(95, 211, 181, 0.08), 0 8px 24px rgba(5, 7, 14, 0.6);
  }
  .hud-terminal-display::before {
    content: "SYS_STATUS: TELEMETRY_ACTIVE";
    position: absolute;
    top: 4px; left: 10px;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: rgba(95, 211, 181, 0.4);
  }
  .hud-terminal-display::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
      linear-gradient(to right, var(--aurora) 8px, transparent 8px) no-repeat 0 0 / 100% 2px,
      linear-gradient(to bottom, var(--aurora) 8px, transparent 8px) no-repeat 0 0 / 2px 100%,
      linear-gradient(to left, var(--aurora) 8px, transparent 8px) no-repeat 100% 100% / 100% 2px,
      linear-gradient(to top, var(--aurora) 8px, transparent 8px) no-repeat 100% 100% / 2px 100%;
  }
  .hud-node { border-left: 2px solid var(--aurora); padding-left: 14px; text-align: left; }
  .hud-label { color: var(--steel); display: block; font-size: 0.65rem; letter-spacing: 0.08em; margin-bottom: 2px; }
  .hud-value { color: var(--text); font-size: 0.95rem; line-height: 1.3; word-break: break-word; font-weight: 500; }
  .hud-value.alert { color: var(--lamp); text-shadow: 0 0 8px rgba(242, 166, 65, 0.3); }
  
  /* ---------- after dark section ---------- */
  .dark {
    background: #05070d; 
    border-top: 1px solid var(--line);
    padding-block: 0;
    overflow: hidden;
  }
  .dark-layout-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
  }
  .dark-copy {
    display: grid;
    gap: 18px;
    padding-block: 64px 24px;
    text-align: center;
    justify-items: center;
  }
  .stage {
    position: relative;
    align-self: stretch;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .stage::after {
    content: "";
    position: absolute;
    /* Bleeds past the stage on both sides; .dark's overflow: hidden trims it to the screen edges */
    inset: auto -100vw 0 -100vw;
    height: 18%;
    background: linear-gradient(to top, #05070d 10%, rgba(5, 7, 13, 0));
    pointer-events: none;
    z-index: 5;
  }
  /* The animal in the foreground, and the eyes that open in the dark behind it */
  #night-beast {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(560px, 100%);
    height: auto;
    transform: translateX(-50%);
    overflow: visible;
    z-index: 2;
  }
  #night-beast .eyes { opacity: 0; transition: opacity 0.5s ease; }
  #night-beast .eyes.open { opacity: 1; animation: eyes-blink 5.5s infinite; }
  #night-beast .far-eyes .eyes.open { opacity: 0.75; }
  @keyframes eyes-blink {
    0%, 92%, 100% { transform-box: fill-box; transform-origin: center; scale: 1 1; }
    95% { transform-box: fill-box; transform-origin: center; scale: 1 0.1; }
  }
  @media (prefers-reduced-motion: reduce) {
    #night-beast .eyes.open { animation: none; }
  }

  /* ---------- floating widgets & overlays ---------- */
  .floating-bug-panel-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100001; 
    width: 40px;
    height: 40px;
    background: rgba(18, 24, 41, 0.95);
    border: 1px solid var(--steel);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .floating-bug-panel-btn:hover {
    border-color: var(--aurora);
    box-shadow: 0 0 12px rgba(95, 211, 181, 0.35);
  }
  .floating-bug-panel-btn svg {
    width: 24px;
    height: 20px;
    fill: none;
    stroke: var(--text);
    stroke-width: 1.5;
    stroke-linecap: square;
    transition: stroke 0.15s ease;
  }
  .floating-bug-panel-btn:hover svg { stroke: var(--aurora); }
  /* Lift the bug button above the alpha banner while it's showing */
  .floating-bug-panel-btn { transition: border-color 0.15s ease, box-shadow 0.15s ease, bottom 0.3s ease; }
  .alpha-banner-visible .floating-bug-panel-btn { bottom: 68px; }

  /* Wiki shortcut: the bug button's twin, mirrored into the bottom-left corner */
  .wiki-fab { right: auto; left: 24px; text-decoration: none; }
  /* Seed map shortcut: stacked one button-height (plus a gap) above the wiki button */
  .map-fab { bottom: 76px; }
  .alpha-banner-visible .map-fab { bottom: 120px; }

  /* Hover labels for the floating buttons: a tag that slides out to the left.
     Only on devices that can hover; a touch screen just gets the icon. */
  @media (hover: hover) {
    .hud-fab::after {
      content: attr(data-label);
      position: absolute;
      right: calc(100% + 10px);
      top: 50%;
      transform: translate(6px, -50%);
      padding: 6px 10px;
      background: rgba(18, 24, 41, 0.95);
      border: 1px solid var(--line);
      border-radius: 4px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
      color: var(--text);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .hud-fab:hover::after,
    .hud-fab:focus-visible::after {
      opacity: 1;
      transform: translate(0, -50%);
    }
    /* The wiki button sits on the left, so its label slides out to the right */
    .wiki-fab::after {
      right: auto;
      left: calc(100% + 10px);
      transform: translate(-6px, -50%);
    }
    .wiki-fab:hover::after,
    .wiki-fab:focus-visible::after {
      transform: translate(0, -50%);
    }
  }

  /* Alpha sign-up banner: slim bar pinned to the bottom, hidden below the screen until shown.
     Mobile shows just the button; the "Open Alpha" tag joins it at 480px+. */
  .alpha-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100000;
    min-height: 52px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(7, 10, 18, 0.92);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .alpha-banner.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }
  .alpha-banner-text { display: none; font-size: 0.68rem; color: var(--steel); }
  .alpha-banner-btn { font-size: 0.75rem; padding: 7px 18px; }
  @media (prefers-reduced-motion: reduce) {
    .alpha-banner, .alpha-banner.is-visible, .floating-bug-panel-btn { transition: none; }
  }
  
  #visor-night-shroud {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    display: none;
  }
  
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: rgba(7, 10, 18, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .modal-overlay.active { opacity: 1; pointer-events: auto; }
  /* While a pop-up or the mobile menu is open, the page behind it doesn't scroll.
     scrollbar-gutter keeps the scrollbar's space so nothing shifts when it locks. */
  html { scrollbar-gutter: stable; }
  /* Only the root is locked. Hiding overflow on <body> too turned the body into its own scroll
     container, which pinned the sticky header to the very top of the page: open the menu while
     scrolled down and the header (and the menu hanging off it) vanished off-screen, with the page
     locked so there was no way back to it. */
  html.scroll-locked { overflow: hidden; }
  /* The box never exceeds the viewport; if the form is still taller, .modal-scroll
     scrolls inside it so the corner brackets and close button stay put. */
  .modal-box {
    background: #060a14;
    border: 1px solid rgba(95, 211, 181, 0.25);
    border-radius: 4px;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
  }
  .modal-scroll {
    padding: 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 211, 181, 0.35) transparent;
  }
  .game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text);
  }
  /* Laptop-height screens: tighten spacing so the whole form fits without scrolling */
  @media (max-height: 940px) {
    .modal-scroll { padding: 20px 28px; }
    .modal-box h2 { font-size: 1.25rem; margin-bottom: 2px; }
    .modal-box p { font-size: 0.8rem; line-height: 1.45; margin-bottom: 12px; }
    .modal-box .form-group { gap: 5px; margin-bottom: 10px; }
    .modal-box .form-input { padding: 8px 12px; }
    .game-grid { gap: 6px 10px; }
  }
  /* Desktop: two-column form. Email + game list on the left, specs / OS / bug-report
     answer on the right, status message and submit across the bottom. */
  @media (min-width: 900px) {
    .modal-box { max-width: 860px; }
    #invite-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "email  specs"
        "games  os"
        "games  commit"
        "status status"
        "submit submit";
      column-gap: 32px;
      align-items: start;
    }
    #invite-form > .form-group:nth-of-type(1) { grid-area: email; }
    #invite-form > .form-group:nth-of-type(2) { grid-area: games; }
    #invite-form > .form-group:nth-of-type(3) { grid-area: specs; }
    #invite-form > .form-group:nth-of-type(4) { grid-area: os; }
    #invite-form > .form-group:nth-of-type(5) { grid-area: commit; }
    #invite-form > #form-feedback { grid-area: status; margin-top: 0; }
    #invite-form > button[type="submit"] { grid-area: submit; }
  }
  .modal-box::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
      linear-gradient(to right, var(--aurora) 8px, transparent 8px) no-repeat 0 0 / 100% 2px,
      linear-gradient(to bottom, var(--aurora) 8px, transparent 8px) no-repeat 0 0 / 2px 100%,
      linear-gradient(to left, var(--aurora) 8px, transparent 8px) no-repeat 100% 100% / 100% 2px,
      linear-gradient(to top, var(--aurora) 8px, transparent 8px) no-repeat 100% 100% / 2px 100%;
  }
  .modal-box h2 { font-size: 1.5rem; color: var(--text); margin-bottom: 8px; letter-spacing: 0.02em; }
  .modal-box p { color: var(--steel); font-size: 0.9rem; line-height: 1.5; margin-bottom: 24px; }
  .form-group { display: grid; gap: 8px; margin-bottom: 20px; }
  .form-input {
    background: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.85rem;
    width: 100%;
  }
  .form-input:focus { outline: 1px solid var(--aurora); border-color: var(--aurora); }
  /* 44px tap target, the minimum comfortable size for a finger */
  /* The Founder offer at the top of the invite form */
  .skip-queue {
    display: flex; flex-direction: column; gap: 10px;
    margin: 0 0 18px; padding: 14px 16px;
    border: 1px solid rgba(242, 166, 65, 0.55); border-radius: 4px;
    background: rgba(242, 166, 65, 0.08);
    color: var(--steel); text-decoration: none; font-size: 0.85rem; line-height: 1.5;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .skip-queue:hover { background: rgba(242, 166, 65, 0.14); border-color: var(--lamp); }
  .skip-queue strong { display: block; color: var(--lamp); font-family: var(--display); font-size: 1rem; letter-spacing: 0.02em; margin-bottom: 2px; }
  .skip-queue-cta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--lamp); text-transform: uppercase; }
  .skip-queue-or { display: block; margin: 0 0 12px; color: var(--steel); font-size: 0.68rem; letter-spacing: 0.14em; }
  @media (min-width: 1024px) {
    .skip-queue { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
    .skip-queue-cta { white-space: nowrap; }
  }

  .modal-close-btn {
    position: absolute;
    top: 6px; right: 6px;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--steel);
    font-family: var(--mono);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
  }
  .modal-close-btn:hover { color: var(--alarm); }
  #form-feedback { font-family: var(--mono); font-size: 0.75rem; margin-top: -12px; margin-bottom: 16px; display: none; }
  #form-feedback.error { color: var(--alarm); display: block; }
  #form-feedback.success { color: var(--aurora); display: block; }
  
  /* ---------- systems overview ---------- */
  #system-overview { margin-bottom: 44px; } /* the panel's 60px top padding already gives the crawler room */

  /* ---------- balanced system footer ---------- */
  footer {
    border-top: 1px solid var(--line);
    background: #060912;
    padding-block: 64px 36px;
    color: var(--steel);
  }
  /* Mobile: centered single column. Becomes a 3-column split at 1024px+. */
  .footer-action-split {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 36px;
  }
  .footer-central-deck {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 14px;
    width: 100%; max-width: 280px;
    background: var(--ink-2); border: 1px solid var(--line);
    padding: 16px; border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  .footer-central-deck .btn { font-size: 0.78rem; padding: 9px 18px; white-space: nowrap; width: 100%; justify-content: center; }
  .footer-label-anchor { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--steel); text-align: center; }

  .footer-baseline-row {
    display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
    text-align: center;
    padding-top: 28px; border-top: 1px solid rgba(40, 49, 74, 0.4);
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em; color: rgba(154, 166, 184, 0.4);
  }
  .footer-links-group { display: flex; justify-content: center; width: 100%; gap: 16px; flex-wrap: wrap; order: 1; }
  .footer-tech-badges { display: flex; justify-content: center; width: 100%; gap: 12px; flex-wrap: wrap; order: 2; }
  .footer-social { display: flex; justify-content: center; width: 100%; gap: 10px; flex-wrap: wrap; order: 0; }
  .footer-baseline-row .footer-social a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 3px;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--steel);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .footer-baseline-row .footer-social a:hover { color: var(--lamp); border-color: var(--lamp); }
  .footer-social svg { width: 16px; height: 16px; image-rendering: pixelated; shape-rendering: crispEdges; }
  .footer-scroll-top-link { order: -1; font-weight: 600; display: inline-block; margin-bottom: 2px; }
  
  .footer-baseline-row a { color: rgba(154, 166, 184, 0.4); text-decoration: none; transition: color 0.15s ease; }
  .footer-baseline-row a:hover { color: var(--text); }
  .status-badge { border-left: 2px solid rgba(95, 211, 181, 0.25); padding-left: 8px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; color: rgba(154, 166, 184, 0.4); }
  
  
  /* =========================================================================
     📱 3. MOBILE-FIRST MEDIA BREAKPOINTS
     Base styles above apply to Small Mobile (320px and up).
     ========================================================================= */
  
  /* 2. Large Mobile / Small Tablets */
  @media (min-width: 480px) {
    .alpha-banner-text { display: inline-flex; }

    .brand { font-size: 1.15rem; }
    .nav .navcta { padding-inline: 22px; font-size: 0.9rem; }

    .families { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .fam canvas, .fam img { aspect-ratio: 4 / 5; }
  }
  
  /* 3. Tablets (Portrait) */
  @media (min-width: 768px) {
    /* Systems: cards join into a bordered grid panel; crawler rides on top of it */
    .systems-grid-panel {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      padding-top: 0;
      background: var(--line);
      border: 1px solid var(--line);
      box-shadow: 0 8px 32px rgba(7, 10, 22, 0.5);
    }
    .console-card { padding: 36px; border: 0; }
    #system-overview { margin-bottom: 100px; }
    .bg-vector-rover {
      top: 10px;
      width: 86px;
      height: 58px;
      animation: crawlerPatrol 22s linear infinite;
    }

    .hud-terminal-display { grid-template-columns: repeat(2, 1fr); gap: 20px 48px; padding: 36px 48px 24px; }
    .hud-node { border-left-color: rgba(95, 211, 181, 0.15); padding-left: 10px; text-align: inherit; }
    .hud-label { letter-spacing: 0.1em; margin-bottom: 4px; }
    .hud-value { font-size: 0.88rem; line-height: inherit; word-break: normal; }

    /* Section text returns to left alignment */
    .head,
    .fam,
    .terminal-text-block,
    .dark-copy,
    #visor-telemetry-section > div { text-align: left; }
    .visor-callout { order: 0; margin-top: 16px; padding-top: 0; padding-left: 16px; border-left: 2px solid var(--aurora); }
    #visor-telemetry-section { display: grid; align-items: start; gap: 24px; }
    .visor-intro { display: block; }
    .visor-readout { display: grid; gap: 24px; align-content: start; }
    .visor-readout > p { margin-top: 0; }
    .visor-readout .hud-terminal-display { order: 0; margin-top: 0; }
    .visor-callout::before { content: none; }
    .dark-copy { justify-items: normal; }
  }
  
  /* 4. Large Tablets (Landscape) / Laptops */
  @media (min-width: 1024px) {
    /* Nav: menu button hides, links sit inline in the bar */
    .nav-toggle { display: none; }
    .nav {
      display: flex;
      position: static;
      flex-direction: row;
      align-items: stretch;
      background: none;
      border-bottom: 0;
      box-shadow: none;
    }
    .nav a { justify-content: normal; padding: 0 16px; border-top: 0; }
    .nav .navnotes { margin-left: 6px; border-left: 1px solid var(--line); padding: 0 18px; background: none; }
    .nav .navnotes:hover { background: rgba(95, 211, 181, 0.06); }

    /* Story: vertical timeline becomes a 5-step horizontal track */
    .story { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .story li {
      display: grid;
      padding: 22px 22px 4px 0;
      border-top: 2px solid var(--line);
    }
    .story li::before { margin-bottom: 0; }
    .story li:not(:last-child) h3::before { content: none; }
    .story li::after { top: -6px; left: 0; z-index: auto; }

    .families { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .classes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
    /* Visor: intro and description side by side, HUD readout as a full-width strip below */
    #visor-telemetry-section { gap: 40px 48px; align-items: center; }
    .visor-readout { display: contents; }
    .visor-intro { grid-column: 1; grid-row: 1; }
    .visor-readout > p { grid-column: 2; grid-row: 1; }
    .visor-readout .hud-terminal-display {
      grid-column: 1 / -1;
      grid-row: 2;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px 24px;
      padding: 36px 24px 24px;
    }

    .systems-grid-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .console-card svg { display: inline; } /* rocket above card 03 */

    /* Imaging terminal: split layout with the pull-out swivel monitor */
    #terminal-station { padding-block: 100px; }
    .terminal-layout-wrapper {
      /* Wide enough for the monitor's handle (64px) to sit in it with room to spare */
      --term-gap: 80px;
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: var(--term-gap);
      text-align: inherit;
    }
    .terminal-spacer-desktop { display: block; }

    /* Channel index fills the right column while the monitor is stowed */
    .channel-index {
      position: relative;
      align-self: center;
      display: grid;
      gap: 14px;
      padding: 22px 24px;
      border: 1px dashed var(--line);
      border-radius: 6px;
      background: rgba(18, 24, 41, 0.45);
      font-family: var(--mono);
      transition: opacity 0.3s ease;
    }
    #terminal-station:has(.monitor-deployed) .channel-index { opacity: 0; pointer-events: none; }
    .channel-index-head {
      display: flex; justify-content: space-between; gap: 12px;
      font-size: 0.68rem; letter-spacing: 0.14em; color: var(--steel);
      padding-bottom: 10px; border-bottom: 1px solid var(--line);
    }
    .channel-index-status { color: var(--lamp); display: inline-flex; align-items: center; gap: 8px; }
    .channel-index-status i {
      width: 6px; height: 6px; border-radius: 50%; background: var(--lamp);
      animation: blink 2s steps(1) infinite;
    }
    #channel-index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .channel-row {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 14px 16px;
      background: var(--ink-2);
      border: 1px solid var(--line);
      border-radius: 4px;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .channel-row:hover, .channel-row:focus-visible { border-color: var(--lamp); background: var(--ink-3); }
    .channel-id { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--aurora); }
    .channel-title { font-size: 0.78rem; letter-spacing: 0.06em; }
    .channel-go { color: var(--lamp); font-size: 1.1rem; line-height: 1; transition: transform 0.15s ease; }
    .channel-row:hover .channel-go { transform: translateX(3px); }
    .channel-index-foot { font-size: 0.64rem; letter-spacing: 0.14em; color: var(--steel); opacity: 0.7; }
    #terminal-toggle-btn { display: inline-flex; }
    #terminal-next-btn {
      order: 0;
      margin-top: 0;
      width: auto;
      max-width: none;
      justify-content: normal;
    }
    #swivel-arm-monitor {
      /* Distance from .wrap's right edge to the screen's right edge,
         so the docked monitor can hide fully off screen with just its tab showing */
      --term-gutter: calc((100vw - min(100vw, 1160px)) / 2);
      --handle-w: 64px;
      order: 0;
      position: absolute;
      top: 50%; right: calc(-1 * var(--term-gutter));
      margin-top: 0;
      transform: translateY(-50%);
      /* Sized from .wrap (the positioned parent, 100% here): the right grid column is
         (100% - 64px padding - gap) / 2.2, plus the handle. Deployed, the screen fills the
         right column and the handle sits in the column gap, so the copy stays clear. */
      width: calc((100% - 64px - var(--term-gap)) / 2.2 + var(--handle-w));
      max-width: none;
      height: 380px;
      display: grid;
      grid-template-columns: auto 1fr;
    }
    .monitor-docked { transform: translateY(-50%) translateX(calc(100% - var(--handle-w))) !important; }
    /* Anchored by its right edge: deployed, the monitor sits 48px in from the screen edge,
       using the empty margin on wide screens. min() stops it at the content edge (where the
       nav ends) on narrow ones, where 48px from the screen would push it into the copy. */
    .monitor-deployed { transform: translateY(-50%) translateX(calc(-1 * min(var(--term-gutter) + 32px, 48px))) !important; }
    #monitor-handle { display: flex; width: var(--handle-w); }
    .monitor-docked #monitor-handle { animation: handlePulse 2.4s ease-in-out infinite; }

    /* After dark: copy and stage side by side */
    .dark-layout-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
    .dark-copy { padding-block: 80px; }
    .stage { min-height: 480px; }
    #night-beast { width: min(620px, 100%); }

    /* Footer: 3-column action split and single-row baseline */
    .footer-action-split {
      grid-template-columns: 1fr auto 1fr;
      justify-items: normal;
      text-align: inherit;
      gap: 56px;
      margin-bottom: 48px;
    }
    .footer-central-deck {
      flex-direction: row;
      align-items: center;
      justify-content: normal;
      gap: 20px;
      width: auto;
      max-width: none;
      padding: 12px 24px;
    }
    .footer-central-deck .btn { width: auto; justify-content: normal; }
    .footer-label-anchor { font-size: 0.68rem; }
    .footer-label-anchor.left { text-align: left; }
    .footer-label-anchor.right { text-align: right; }
    .footer-baseline-row { flex-direction: row; text-align: inherit; gap: 16px; padding-top: 24px; }
    .footer-links-group { justify-content: normal; width: auto; gap: 20px; }
    .footer-tech-badges { justify-content: normal; width: auto; gap: 16px; }
    .footer-scroll-top-link { order: 3; font-weight: inherit; margin-bottom: 0; }
  }
  
  /* Input-based (not a width breakpoint): the After Dark flashlight shroud
     only shows for a mouse or trackpad, since a finger can't hover to steer it */
  @media (hover: hover) and (pointer: fine) {
    #visor-night-shroud { display: block; }
  }
  
  /* 5. Large Desktops */
  @media (min-width: 1200px) {
    .pot-backdrop-shield,
    .crawler-track-gutter,
    .bg-vector-fauna {
      display: block;
    }
  }
  





/* BREAKPOINT TRACKER: COMMENTED OUT
   To restore: delete this note and the closing "END BREAKPOINT TRACKER" line,
   then remove the space in every "* /" inside (CSS comments can't nest).

/* =========================================================================
   🛠️ HUD TELEMETRY RANGED BREAKPOINT TRACKER (TESTING ONLY)
   ========================================================================= * /

/* 1. Base Setup: This anchors the telemetry tag to the bottom-left corner * /
body::after {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 999999 !important; /* Forces it to stay float above everything else * /
  padding: 6px 12px !important;
  background: #060a14 !important;
  border: 1px solid var(--aurora, #5fd3b5) !important;
  border-radius: 4px !important;
  font-family: var(--mono, monospace) !important;
  font-size: 0.68rem !important;
  font-weight: bold !important;
  letter-spacing: 0.08em;
  pointer-events: none !important; /* Prevents it from blocking clicks on buttons underneath * /
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8) !important;
  
  /* Default Mobile text string display * /
  content: "📡 BREAKPOINT: BASE MOBILE (320px+)" !important;
  color: var(--text, #e8ecf3) !important;
}

/* 2. Updates text label for Large Mobile / Phablets * /
@media (min-width: 480px) {
  body::after {
    content: "📡 BREAKPOINT: LARGE MOBILE (480px+)" !important;
    color: var(--lamp, #f2a641) !important;
    border-color: var(--lamp, #f2a641) !important;
  }
}

/* 3. Updates text label for Portrait Tablets * /
@media (min-width: 768px) {
  body::after {
    content: "📡 BREAKPOINT: TABLET PORTRAIT (768px+)" !important;
    color: var(--aurora, #5fd3b5) !important;
    border-color: var(--aurora, #5fd3b5) !important;
  }
}

/* 4. Updates text label for Laptops / Landscape Monitors * /
@media (min-width: 1024px) {
  body::after {
    content: "📡 BREAKPOINT: LAPTOP / LANDSCAPE (1024px+)" !important;
    color: #38bdf8 !important; /* Electric Blue tint * /
    border-color: #38bdf8 !important;
  }
}

/* 5. Updates text label for Ultra-wide Desktop Monitors * /
@media (min-width: 1200px) {
  body::after {
    content: "📡 BREAKPOINT: LARGE DESKTOP (1200px+)" !important;
    color: #a855f7 !important; /* Deep Cyber Purple tint * /
    border-color: #a855f7 !important;
  }
}

END BREAKPOINT TRACKER */

/* Small laptops: seven links and the button have to share ~840px, so they sit
   closer and the version tag waits for a wider screen. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav a { padding: 0 9px; font-size: 0.8rem; letter-spacing: 0.08em; }
  .nav .navnotes { padding: 0 11px; margin-left: 4px; }
  .nav .navnotes .navnotes-ver { display: none; }
  .nav .navcta { padding-inline: 14px; font-size: 0.78rem; }
}


/* ---------- header: "The Game" dropdown ---------- */
.navgroup { position: relative; display: flex; flex-direction: column; }
.navdrop {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 16px 20px;
  background: none; border: 0; border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel);
  cursor: pointer;
}
.navdrop i {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.navdrop:hover { color: var(--text); }
.navgroup.open .navdrop { color: var(--lamp); }
.navgroup.open .navdrop i { transform: translateY(2px) rotate(-135deg); }
/* On a phone the sections are just listed in the open menu. */
.navdrop { display: none; }
.navmenu { display: flex; flex-direction: column; }
.nav .navmenu a { color: var(--steel); }
.nav .navmap { color: var(--lamp); }

@media (min-width: 1024px) {
  /* The button fills the bar the way the links beside it do, so its label
     sits on the same line as theirs. */
  .navgroup { flex-direction: row; align-items: stretch; }
  .navdrop { display: flex; align-items: center; align-self: stretch; height: 100%; border-top: 0; padding: 0 16px; line-height: 1; }
  .navmenu {
    display: none;
    position: absolute; top: 100%; left: 0;
    min-width: 230px;
    background: #070a12;
    border: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
    padding: 6px 0;
  }
  .navgroup.open .navmenu { display: flex; }
  .nav .navmenu a {
    padding: 11px 18px; border-top: 0;
    font-size: 0.82rem; justify-content: flex-start;
  }
  .nav .navmenu a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
}

/* ---------- section dots ---------- */
.section-dots { display: none; }
@media (min-width: 1100px) {
  .section-dots {
    display: flex; flex-direction: column; gap: 14px;
    position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
    z-index: 900;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .section-dots.shown { opacity: 1; pointer-events: auto; }
  .section-dots a {
    position: relative; display: block;
    width: 10px; height: 10px;
    border: 1px solid var(--steel); border-radius: 50%;
    background: transparent;
    transition: background .2s, border-color .2s, transform .2s;
  }
  .section-dots a:hover { border-color: var(--text); transform: scale(1.25); }
  .section-dots a.on { background: var(--lamp); border-color: var(--lamp); }
  .section-dots a span {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    white-space: nowrap;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text); background: rgba(7, 10, 18, 0.92);
    border: 1px solid var(--line); padding: 4px 9px;
    opacity: 0; pointer-events: none; transition: opacity .15s;
  }
  .section-dots a:hover span, .section-dots a:focus-visible span { opacity: 1; }
}

/* ---------- map links ---------- */
.map-cta {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--aurora); text-decoration: none;
  border-bottom: 1px solid rgba(95, 211, 181, 0.4); padding-bottom: 2px;
}
.map-cta:hover { color: #8ff0d6; border-bottom-color: #8ff0d6; }

/* ---------- gallery ---------- */
.gallery-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 24px; border-bottom: 1px solid var(--line);
}
.gallery-tabs [role=tab] {
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 10px 14px;
  font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--steel); cursor: pointer;
}
.gallery-tabs [role=tab]:hover { color: var(--text); }
.gallery-tabs [role=tab][aria-selected=true] { color: var(--lamp); border-bottom-color: var(--lamp); }
.gallery-panel { display: grid; gap: 18px; }
.gallery-panel[hidden] { display: none; }
.gallery-copy { display: grid; gap: 6px; max-width: 62ch; }
.gallery-copy p { color: var(--steel); }
.shot-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.shot-grid img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border: 1px solid var(--line);
}
@media (min-width: 700px) { .shot-grid { grid-template-columns: 1fr 1fr; } }

  .brand .brand-logo { width: 32px; height: 32px; display: block; }