@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Night: the Hail Mary's lab in deep space. Day: Tau Ceti light on a printed mission log. */
:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --bg-deep: #07080c;
  --surface: #141720;
  --surface-hi: #1c202b;
  --ink: #e8e6e1;
  --muted: #a9a59d;
  --line: rgba(232, 230, 225, 0.11);
  --line-strong: rgba(255, 122, 69, 0.38);
  --accent: #ff7a45;
  --accent-ink: #1a0b05;
  --gold: #ffd58a;
  --teal: #9fc9c4;
  --danger: #ff5c45;
  --carapace: #8a7f72;
  --carapace-edge: #cfc5b6;
  --stars: rgba(232, 230, 225, 0.5);
  --shadow: rgba(0, 0, 0, 0.5);
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 10px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f0e8; --bg-deep: #e9e2d4; --surface: #fbf8f2; --surface-hi: #ffffff; --ink: #1e2026; --muted: #57534c;
    --line: rgba(30, 32, 38, 0.13); --line-strong: rgba(168, 63, 22, 0.4); --accent: #a83f16; --accent-ink: #fffaf3;
    --gold: #7d5a12; --teal: #2b655f; --danger: #b3261e; --carapace: #8a7f72; --carapace-edge: #4a433c; --stars: rgba(30, 32, 38, 0.16); --shadow: rgba(70, 55, 30, 0.16);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f0e8; --bg-deep: #e9e2d4; --surface: #fbf8f2; --surface-hi: #ffffff; --ink: #1e2026; --muted: #57534c;
  --line: rgba(30, 32, 38, 0.13); --line-strong: rgba(168, 63, 22, 0.4); --accent: #a83f16; --accent-ink: #fffaf3;
  --gold: #7d5a12; --teal: #2b655f; --danger: #b3261e; --carapace: #8a7f72; --carapace-edge: #4a433c; --stars: rgba(30, 32, 38, 0.16); --shadow: rgba(70, 55, 30, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  background-color: var(--bg);
  /* A sparse star field: three offset dot grids tinted by the theme. */
  background-image:
    radial-gradient(ellipse at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(circle at 20% 30%, var(--stars) 0.8px, transparent 1.4px),
    radial-gradient(circle at 70% 80%, var(--stars) 0.6px, transparent 1.2px),
    radial-gradient(circle at 45% 55%, var(--stars) 0.5px, transparent 1px);
  background-size: auto, 173px 173px, 241px 241px, 97px 97px;
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  overflow-x: hidden;
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }
code { font: 0.86em/1.4 var(--mono); background: color-mix(in srgb, var(--surface-hi) 80%, transparent); border: 1px solid var(--line); color: var(--ink); padding: 0.05em 0.35em; border-radius: 4px; }
cite { font-style: italic; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--accent); color: var(--accent-ink); padding: 0.5rem 1rem; border-radius: 6px; }
.skip:focus { top: 1rem; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

h1, h2, h3, .footer-brand, .brand, .unit-name { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.05; margin: 0.2rem 0 1rem; }
.eyebrow { font: 600 0.78rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
.eyebrow::before { content: ""; width: 10px; height: 10px; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); background: currentColor; }
.fineprint { color: var(--muted); font-size: 0.92rem; }

/* Masthead and fuel gauge */
.masthead { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.masthead-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; flex-wrap: wrap; padding-block: 0.4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-size: 1.25rem; }
.sigil { width: 34px; height: 34px; }
.sigil.big { width: 88px; height: 88px; }
.sigil.huge { width: min(200px, 60%); height: auto; aspect-ratio: 1; }
.resources { display: flex; gap: 0.35rem; margin-left: auto; }
.resource { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.25rem 0.7rem; font: 400 0.9rem/1.4 var(--mono); font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; position: relative; }
.resource .glyph { color: var(--accent); }
.resource .unit { color: var(--muted); }
.resource.spent::after { content: attr(data-delta); position: absolute; right: 0.6rem; top: -0.3rem; color: var(--accent); font-size: 0.78rem; animation: rise 0.9s ease-out forwards; pointer-events: none; }
.resource.empty { animation: shake 0.4s; border-color: var(--danger); }
@keyframes rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-18px); } }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
nav { display: flex; align-items: center; gap: 1.1rem; font-weight: 600; font-size: 0.95rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--ink); }
.theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font: 600 0.8rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.75rem; cursor: pointer; }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.theme-toggle svg circle { fill: var(--gold); }
.theme-toggle[aria-pressed="true"] .night-label, .theme-toggle[aria-pressed="false"] .day-label { display: none; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(3rem, 7vw, 5.5rem) 3.5rem; }
.hero h1 { font-size: clamp(3.1rem, 8vw, 6rem); line-height: 0.95; margin: 0 0 1.25rem; }
.hero h1 em { display: inline-block; animation: chord 0.7s ease-out both; }
.hero h1 em.third { color: var(--gold); animation-delay: 0.18s; }
@keyframes chord { from { opacity: 0; transform: translateY(0.25em); } to { opacity: 1; transform: none; } }
.intro { font: 500 clamp(1.3rem, 2.4vw, 1.65rem)/1.3 var(--display); margin: 0 0 1rem; }
.description { color: var(--muted); max-width: 38rem; }
.description strong { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1.75rem 0 0.75rem; }
.button { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 1rem/1 var(--body); padding: 0.9rem 1.35rem; border-radius: 999px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.button.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent); }
.button.primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.button.secondary:hover { border-color: var(--accent); }
.text-link { color: var(--teal); font-weight: 600; }

/* Eridian spectrum and command card. The viewport stays dark in both themes, like a lab instrument. */
.spectrum-panel {
  margin: 0;
  --mood-greet: #9fc9c4; --mood-work: #ff7a45; --mood-alarm: #ff5c45; --mood-question: #ffd58a;
  --mood-hum: #6fa39d; --mood-success: #ffd58a; --mood-warn: #ffb36b;
}
.frame { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 0.9rem; padding: 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: 0 18px 44px var(--shadow); }
.spectrum { position: relative; padding: 0; border: 1px solid #2a3040; border-radius: var(--radius); background: #06080d; cursor: pointer; aspect-ratio: 16 / 10; overflow: hidden; transition: transform 0.12s, box-shadow 0.2s; }
.spectrum:active { transform: scale(0.99); }
.spectrum canvas { display: block; width: 100%; height: 100%; }
.notes { position: absolute; left: 0.6rem; top: 0.55rem; display: flex; gap: 0.35rem; pointer-events: none; }
.notes span { font: 400 0.75rem/1 var(--mono); color: #e8e6e1; background: rgba(6, 8, 13, 0.75); border: 1px solid rgba(159, 201, 196, 0.35); border-radius: 999px; padding: 0.25rem 0.5rem; }
.spectrum-panel.live .spectrum { box-shadow: 0 0 28px color-mix(in srgb, var(--mood-question) 30%, transparent); }
.spectrum-panel[data-mood="alarm"] .spectrum { box-shadow: 0 0 28px color-mix(in srgb, var(--mood-alarm) 45%, transparent); border-color: var(--mood-alarm); }
.spectrum-panel[data-mood="success"] .spectrum { box-shadow: 0 0 32px color-mix(in srgb, var(--mood-success) 40%, transparent); }
.spectrum-panel.annoyed .spectrum { animation: shake 0.35s; }
.unit-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0.25rem 0.5rem; }
.unit-name { font-size: 1.6rem; margin: 0; color: var(--accent); }
.unit-line { margin: 0.3rem 0; font: 500 1.15rem/1.3 var(--display); min-height: 3em; }
.unit-meta { margin: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; color: var(--muted); font: 0.78rem/1.4 var(--mono); }
.spectrum-panel figcaption { color: var(--muted); font-size: 0.9rem; margin: 0.7rem 0.2rem 1rem; }
.command-card { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; padding: 0.55rem; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); }
.cmd { aspect-ratio: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.3rem; cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-hi); color: var(--ink); transition: border-color 0.15s, transform 0.08s; }
.cmd:hover { border-color: var(--accent); }
.cmd:active, .cmd.playing { transform: translateY(1px); border-color: var(--gold); box-shadow: inset 0 0 14px color-mix(in srgb, var(--gold) 35%, transparent); }
.cmd b { font: 700 clamp(1.2rem, 2.6vw, 1.6rem)/1 var(--display); color: var(--accent); }
.cmd span { font: 600 0.6rem/1.15 var(--body); text-align: center; color: var(--muted); max-width: 100%; overflow-wrap: anywhere; }

/* Platform strip */
.platform-strip { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); padding-block: 0.9rem; }
.platform-strip .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; color: var(--muted); font-size: 0.95rem; }
.platform-strip strong { font: 700 1.05rem/1 var(--display); color: var(--ink); }
.platform-strip .os { margin-left: auto; font: 0.85rem var(--mono); }

/* Event map */
section { scroll-margin-top: 90px; }
.listen-section, .compatibility, .fuel-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-heading { max-width: 46rem; margin-bottom: 2rem; }
.section-heading > p:last-child { color: var(--muted); }
.patchbay { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: 0 14px 36px var(--shadow); }
.patch-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 13rem) minmax(0, 1fr) 4.5rem; gap: 1rem; align-items: center; padding: 0.85rem 1.1rem; border-top: 1px solid var(--line); }
.patch-row:nth-child(even) { background: color-mix(in srgb, var(--bg) 40%, transparent); }
.patch-head { border-top: 0; background: var(--bg-deep) !important; color: var(--gold); font: 600 0.72rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.patch-row > code { background: none; border: 0; padding: 0; color: var(--teal); font-size: 0.85rem; overflow-wrap: anywhere; }
.patch-row > span:nth-child(2) { color: var(--muted); font-size: 0.95rem; }
.patch-row.priority { box-shadow: inset 4px 0 0 var(--accent); }
.patch-row.fuel { box-shadow: inset 4px 0 0 var(--gold); }
.patch-row.egg { box-shadow: inset 4px 0 0 var(--teal); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.chip { font: 600 0.9rem/1.25 var(--body); color: var(--ink); background: var(--surface-hi); border: 1px solid var(--line); border-radius: 8px; padding: 0.42rem 0.7rem; cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; transition: border-color 0.15s, background 0.15s; }
.chip small { font: 400 0.62rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.chip:hover { border-color: var(--accent); }
.chip.playing { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.chip.danger { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.chip.danger small { color: var(--danger); }
.state { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.state.on { color: var(--teal); }

/* Codex pet */
.pet-section { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--line); background: radial-gradient(ellipse at 75% 40%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 60%); }
.pet-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pet-copy > p:not(.eyebrow) { color: var(--muted); }
.pet-stage { margin: 0; display: grid; gap: 0.8rem; }
.stage-frame { display: grid; place-items: center; gap: 1rem; min-height: 320px; padding: 2rem 1rem; border: 1px dashed var(--line-strong); border-radius: calc(var(--radius) + 6px); background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface); }
.sprite { --scale: 1.2; display: block; width: calc(192px * var(--scale)); height: calc(208px * var(--scale)); background: url("pet/spritesheet.webp") 0 0 / calc(1536px * var(--scale)) calc(2288px * var(--scale)) no-repeat; }
.pet-stage figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.state-group, .look-group > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.state-group button, .look-group button { font: 600 0.85rem/1.2 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 0.42rem 0.7rem; cursor: pointer; }
.state-group button[aria-pressed="true"], .look-group button[aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 18%, var(--surface)); }
.look-group summary { cursor: pointer; color: var(--muted); font-weight: 600; margin-bottom: 0.5rem; }
#motion-toggle:disabled { opacity: 0.6; cursor: default; }

/* Destructive alarm */
.alarm-section { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 12%, var(--bg)), var(--bg)); border-block: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); padding-block: clamp(3.5rem, 8vw, 6rem); }
.alarm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.alarm-grid h2 em { color: var(--danger); }
.alarm-grid > div > p { color: var(--muted); }
.radar-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.radar { position: relative; border: 1px solid #2a3040; border-radius: var(--radius); background: repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(159, 201, 196, 0.14) 22px 23px), #06080d; min-height: 150px; overflow: hidden; }
.radar::after { content: ""; position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); width: 10px; height: 10px; background: #ff5c45; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.ping { position: absolute; left: calc(50% - 31px); top: calc(50% - 31px); width: 62px; height: 62px; border: 2px solid #ff5c45; border-radius: 50%; animation: ping 1.8s ease-out infinite; }
.ping.late { animation-delay: 0.9s; }
@keyframes ping { from { transform: scale(0.15); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.terminal { background: #06080d; border: 1px solid #2a3040; border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; min-width: 0; }
.terminal pre { margin: 0; color: #e8e6e1; font: 0.9rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal code { background: none; border: 0; padding: 0; color: inherit; }
.terminal .dim { color: #8d8a84; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: #e8e6e1; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.terminal .chip { color: #e8e6e1; background: #1c1012; }
.terminal .chip.danger small { color: #ff8a77; }

/* Usage alarms */
.fuel-section { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.fuel-copy > p { color: var(--muted); }
.ledger { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 36px var(--shadow); padding: 1rem; border-radius: calc(var(--radius) + 4px); }
.statusline { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font: 0.88rem/1.4 var(--mono); background: #06080d; color: #ffd58a; padding: 0.55rem 0.8rem; border-radius: 6px; border: 1px solid #2a3040; }
.statusline .dim { color: #8d8a84; }
.statusline b { color: #ff5c45; }
.ledger-rows { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ledger-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.8rem; align-items: center; padding: 0.65rem 0.2rem; border-top: 1px solid var(--line); }
.ledger-rows li:first-child { border-top: 0; }
.ledger-rows code { font-size: 0.8rem; overflow-wrap: anywhere; }
.ledger-rows span { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-align: right; }
.ledger-rows .chip { grid-column: 1 / -1; justify-self: start; }

/* Install */
.install-section { padding-block: clamp(3.5rem, 8vw, 6rem); background: color-mix(in srgb, var(--surface) 60%, transparent); border-block: 1px solid var(--line); }
.install-choices { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 1.2rem; background: var(--surface); }
.install-choices button { font: 600 0.9rem/1 var(--body); padding: 0.7rem 1.1rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.install-choices button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.command-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.command { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; min-width: 0; box-shadow: 0 10px 26px var(--shadow); }
.command-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.command h3 { margin: 0; font-size: 1.2rem; }
.command pre, .install-panel pre { margin: 0; background: #06080d; color: #e8e6e1; border-radius: 6px; padding: 0.8rem; font: 0.82rem/1.6 var(--mono); overflow-x: auto; }
.command pre code, .install-panel pre code { background: none; border: 0; padding: 0; color: inherit; }
.copy { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-hi); color: var(--ink); cursor: pointer; }
.copy.copied { color: var(--teal); border-color: var(--teal); }
.pet-install { margin-top: 1.25rem; }
.install-extra { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1rem; margin-top: 1.25rem; }
.install-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.install-panel summary { font: 700 1.2rem/1.2 var(--display); cursor: pointer; }
.install-panel pre { margin-block: 0.8rem; }
.install-panel p { color: var(--muted); margin-bottom: 0; }
.install-panel h3 { margin: 0; font-size: 1.4rem; }

/* Compatibility */
.compatibility { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.compatibility-copy > p { color: var(--muted); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { text-align: left; padding: 0.8rem 1rem; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; background: var(--bg-deep); color: var(--gold); font: 600 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
tbody th { font-weight: 600; }
td { color: var(--muted); }
td.yes { color: var(--teal); font-weight: 600; }
td.some { color: var(--gold); font-weight: 600; }

/* Closing and footer */
.closing { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); display: flex; flex-direction: column; align-items: center; }
.closing h2 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin-top: 1rem; }
.closing p { color: var(--muted); margin-top: 0; }
footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding-block: 2rem 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.footer-brand { font-size: 1.25rem; color: var(--ink); margin: 0 0 0.3rem; }
footer p { margin: 0.3rem 0; }

/* 404 */
.lost { padding-block: clamp(4rem, 12vw, 9rem); max-width: 44rem; }
.lost h1 { font-size: clamp(2.8rem, 7vw, 4.8rem); line-height: 1; margin: 0 0 1rem; }
.lost > p { color: var(--muted); font-size: 1.15rem; }

@media (max-width: 960px) {
  .hero, .alarm-grid, .fuel-section, .compatibility, .install-extra, .pet-grid { grid-template-columns: minmax(0, 1fr); }
  .command-grid { grid-template-columns: minmax(0, 1fr); }
  .patch-row { grid-template-columns: minmax(0, 1fr) auto; }
  .patch-row > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .patch-row > .chips { grid-column: 1 / -1; grid-row: 3; }
  .patch-row > .state { grid-column: 2; grid-row: 1; }
  .patch-head > span:nth-child(2), .patch-head > span:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  /* Three wrapped rows are too tall to pin on a phone. */
  .masthead { position: static; }
  .resources { order: 3; margin-left: 0; width: 100%; justify-content: flex-start; }
  nav { margin-left: auto; gap: 0.8rem; }
  nav a:not(:last-of-type) { display: none; }
  .frame { grid-template-columns: minmax(0, 1fr); }
  .command-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .radar-card { grid-template-columns: minmax(0, 1fr); }
  .radar { min-height: 110px; }
  .platform-strip .os { margin-left: 0; width: 100%; }
  footer { grid-template-columns: minmax(0, 1fr); }
  .stage-frame { min-height: 240px; }
}