/* ECHO styles. Colours come from the planet.png reference: paper white, ink navy and
   the planets' own oranges, teals and blues. */

:root {
  --paper: #f5f4f5;
  --card: #ffffff;
  --ink: #1f2440;
  --ink-2: #474c68;
  --ink-3: #7b8098;
  --line: #e7e5ec;
  --soft: #f1f0f5;

  --teal: #1fa59c;
  --teal-soft: #e2f6f3;
  --violet: #7a5fd6;
  --violet-soft: #efeafd;
  --gold: #c98a1c;
  --gold-soft: #fcf1da;
  --green: #23905a;
  --green-soft: #e0f4e8;
  --red: #dd4b37;
  --red-soft: #fde8e4;
  --amber: #e58a12;
  --orange: #f3801f;

  --shadow: 0 22px 60px -22px rgba(31, 36, 64, 0.38), 0 3px 10px rgba(31, 36, 64, 0.07);
  --shadow-sm: 0 6px 18px -8px rgba(31, 36, 64, 0.35), 0 1px 3px rgba(31, 36, 64, 0.08);
  --radius: 24px;
  --pad: max(24px, 4vw);
  --card-w: min(436px, 34vw);
  --top: 76px;

  --display: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--paper);
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
p, h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }
svg { display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- stage ---------- */

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); contain: strict; }
.scene { position: absolute; inset: 0; visibility: hidden; }
.scene-svg, .scene-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* a haze of Martian dust that covers a cut in time (the long walk to InSight) */
.scene-veil { position: absolute; inset: 0; background: #f4d8bd; opacity: 0; pointer-events: none; }
.art-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40; pointer-events: none; }
.progress span {
  display: block; height: 100%; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #ffb21e, #f3641c 22%, #1fa59c 55%, #3b5fd9 85%, #7a5fd6);
}

/* ---------- top bar ---------- */

.topbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30;
  height: var(--top);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px 0 8px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow-sm); text-decoration: none;
}
.brand-mark { width: 32px; height: 32px; }
.brand-arc { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; opacity: 0.55; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0.16em; }

.chapters {
  display: flex; align-items: center; gap: 2px;
  height: 46px; padding: 4px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow-sm);
  min-width: 0;
}
.chapter {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-3);
  font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden;
  transition: background-color 0.35s, color 0.35s;
}
.chapter:hover { color: var(--ink); background: var(--soft); }
.chapter-num {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; background: var(--soft); color: var(--ink-2); transition: background-color 0.35s, color 0.35s;
}
.chapter-bar {
  position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
  transform-origin: 0 50%; transform: scaleX(0); background: currentColor; opacity: 0.6;
}
.chapter.is-current { background: var(--ink); color: #fff; }
.chapter.is-current .chapter-num { background: rgba(255, 255, 255, 0.18); color: #fff; }

.tools { display: flex; gap: 8px; }
.tool {
  position: relative; display: inline-grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink);
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.tool:hover { transform: translateY(-1px); }
.tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tool svg .fill { fill: currentColor; stroke: none; }
.tool svg .dot { fill: currentColor; stroke-width: 2.4; }
.tool[aria-pressed="true"] { background: var(--ink); color: #fff; }
#btn-sound .wave { display: none; }
#btn-sound[aria-pressed="true"] .wave { display: inline; }
#btn-sound[aria-pressed="true"] .mute { display: none; }
#btn-motion .still { display: none; }
#btn-motion[aria-pressed="true"] .still { display: inline; }
#btn-motion[aria-pressed="true"] .moving { display: none; }
.tool-label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px);
  padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.tool:hover .tool-label, .tool:focus-visible .tool-label { opacity: 1; transform: translate(-50%, 0); }
.tools .tool:last-child .tool-label { left: auto; right: 0; transform: translate(0, -4px); }
.tools .tool:last-child:hover .tool-label, .tools .tool:last-child:focus-visible .tool-label { transform: none; }

/* ---------- pager ---------- */

.pager {
  position: fixed; right: var(--pad); bottom: 22px; z-index: 30;
  display: flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm);
}
.pager-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); transition: background-color 0.2s;
}
.pager-btn:hover { background: var(--soft); }
.pager-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.pager-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pager-count { min-width: 64px; text-align: center; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pager-btn.pager-play svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.pager-btn.pager-play[aria-pressed="true"] { background: var(--ink); color: #fff; }
[data-play] .i-pause, [data-play][aria-pressed="true"] .i-play { display: none; }
[data-play][aria-pressed="true"] .i-pause { display: inline; }

/* while Play waits for the reader to do what a card asks */
.turn {
  position: fixed; right: var(--pad); bottom: 78px; z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px;
  border-radius: 999px; background: var(--ink); color: #fff; box-shadow: var(--shadow-sm);
  font-weight: 800; font-size: 14px;
}
.turn[hidden] { display: none; }
.turn-skip {
  min-height: 34px; padding: 4px 14px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 800; font-size: 14px;
}
.turn-skip:hover { background: rgba(255, 255, 255, 0.26); }
html:not(.reduced) .turn:not([hidden]) { animation: turn-in 0.35s ease-out; }
@keyframes turn-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* the short story passes the other beats without their cards; its text version leaves them out */
html.short .beat:not(.in-short) .caption { visibility: hidden; }
html.short.text-mode .beat:not(.in-short) { display: none; }
html:not(.short) .finale-full { display: none; }

/* ---------- beats & caption cards ---------- */

main { position: relative; z-index: 10; }
.beat { position: relative; }

.caption {
  position: fixed; z-index: 20;
  left: var(--pad); top: 50%;
  width: var(--card-w);
  max-height: calc(100vh - var(--top) - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  transform: translate3d(0, calc(-50% + var(--drift, 0px)), 0);
  opacity: 0;
  pointer-events: none;
  padding: 28px 30px 26px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  will-change: opacity, transform;
}
.caption.is-live { pointer-events: auto; }
.caption[data-side="right"] { left: auto; right: var(--pad); }

/* As each card arrives, its contents rise in one after another. */
html:not(.reduced) .caption > * { transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); }
html:not(.reduced) .caption:not(.is-live) > * { opacity: 0; transform: translate3d(0, 18px, 0); }
html:not(.reduced) .caption.is-live > :nth-child(2) { transition-delay: 0.07s; }
html:not(.reduced) .caption.is-live > :nth-child(3) { transition-delay: 0.14s; }
html:not(.reduced) .caption.is-live > :nth-child(4) { transition-delay: 0.21s; }
html:not(.reduced) .caption.is-live > :nth-child(5) { transition-delay: 0.28s; }
html:not(.reduced) .caption.is-live > :nth-child(6) { transition-delay: 0.35s; }
html:not(.reduced) .caption.is-live > :nth-child(n + 7) { transition-delay: 0.42s; }

.caption > * + * { margin-top: 12px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  background: var(--soft); color: var(--ink-2);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge--history { background: var(--gold-soft); color: #9a6406; }
.badge--fiction { background: var(--violet-soft); color: #5a40b8; }
.badge--teaching { background: var(--teal-soft); color: #0f766e; }
.badge--real { background: var(--green-soft); color: #18734a; }

.kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.badge + .kicker { margin-top: 16px; }
.caption :is(h1, h2) {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 2.3vw, 36px); line-height: 1.12; letter-spacing: -0.005em;
  color: var(--ink); text-wrap: balance;
}
.kicker + :is(h1, h2) { margin-top: 6px; }
.caption p { color: var(--ink-2); text-wrap: pretty; }

.line {
  position: relative; padding: 12px 14px 12px 16px; border-radius: 16px;
  background: var(--soft); color: var(--ink) !important; font-style: italic;
}
.line .who {
  display: block; margin-bottom: 2px; font-style: normal; font-weight: 800;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.line--maya { background: var(--teal-soft); }
.line--maya .who { color: #0f766e; }
.line--adam { background: var(--violet-soft); }
.line--adam .who { color: #5a40b8; }
.line + .line { margin-top: 8px; }

.quote {
  padding-left: 16px; border-left: 3px solid var(--line);
  font-style: italic; color: var(--ink-2);
}
.fact {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 16px; background: var(--gold-soft);
  color: #6b4a10 !important; font-size: 15px; line-height: 1.45;
}
.fact::before {
  content: "!"; flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: #f2b84b; color: #fff; font-weight: 900; font-size: 13px; font-style: normal;
}
.fact .link { font-size: inherit; white-space: nowrap; }

/* a real quote in its speaker's own words (InSight's goodbye) */
.voice { margin: 0; padding: 14px 16px 12px; border-radius: 16px; background: #fdeee2; }
.voice blockquote { margin: 0; }
.voice blockquote p { font-family: var(--display); font-size: 19px; line-height: 1.35; color: var(--ink) !important; }
.voice figcaption { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #a3542e; }

/* a card's real photo: a thumbnail that opens full size */
.photo-chip {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px;
  border: 2px solid var(--line); border-radius: 16px; background: #fff; text-align: left;
  transition: border-color 0.2s;
}
.photo-chip:hover { border-color: #cfccda; }
.photo-chip img { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--soft); }
.photo-chip span { display: grid; gap: 1px; min-width: 0; }
.photo-chip b { font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--ink); }
.photo-chip small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #18734a; }
.photo-chip-open {
  flex: none; width: 20px; height: 20px; margin-left: auto;
  fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* title, chapter title and closing statement float over the art without a card */
.caption[data-side="top"] {
  left: 50%; top: max(var(--top), 10vh);
  width: min(860px, 90vw);
  transform: translate3d(-50%, var(--drift, 0px), 0);
  background: none; box-shadow: none; text-align: center; padding: 8px 0 22px;
  /* room for the Play button's ring and the rising text; no scrollbar over the art */
  scrollbar-width: none;
}
.caption[data-side="top"]::-webkit-scrollbar { display: none; }
.caption[data-side="top"] :is(h1, h2) { font-size: clamp(34px, 4vw, 60px); }
.caption[data-side="top"] p { font-size: 19px; max-width: 34em; margin-left: auto; margin-right: auto; }
.caption[data-side="top"] > * + * { margin-top: 14px; }

/* The title's colours (the planets' oranges, teals and blues) drift slowly back and forth
   through the letters. */
.caption.caption--title h1 {
  display: inline-block;   /* the gradient spans the letters, not the whole card */
  font-size: clamp(76px, 12.5vw, 178px);
  line-height: 0.95; letter-spacing: 0.14em; margin-right: -0.14em; font-weight: 700;
  background: linear-gradient(100deg, #f8a21b 0%, #f2622b 24%, #c94f3c 40%, #1fa59c 64%, #3466e0 84%, #2a3fb0 100%) 0% 50% / 145% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: title-flow 7s ease-in-out infinite alternate;
}
@keyframes title-flow { to { background-position: 100% 50%; } }
html:not(.reduced) .caption--title:not(.is-live) h1 { transform: translate3d(0, 34px, 0) scale(0.92); }
.caption--title .kicker { color: var(--ink-2); }
.caption--title p { font-size: clamp(18px, 1.6vw, 22px) !important; color: var(--ink) !important; font-weight: 600; }
.title-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px;
  margin-top: 26px !important;
}
.title-actions > * { margin: 0 !important; }
.caption--title .hint { font-size: 15px !important; color: var(--ink-3) !important; font-weight: 700; }
.btn.btn--play {
  position: relative; min-height: 52px; padding: 12px 24px 12px 18px; font-size: 17px;
  box-shadow: 0 16px 32px -14px rgba(31, 36, 64, 0.6);
}
.btn.btn--play svg { width: 20px; height: 20px; }
/* a soft ring keeps inviting a first press */
.btn.btn--play::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--ink);
  opacity: 0; pointer-events: none; animation: ping 2.6s ease-out 1.4s infinite;
}
.btn.btn--play[aria-pressed="true"]::after { animation: none; }
/* ---------- the choose page: the short or the full story, as two big game-style buttons ---------- */

.caption.caption--choose { width: min(1040px, 96vw); }
.caption--choose .kicker { color: var(--ink-2); }
.caption--choose h2 { font-size: clamp(30px, 3.2vw, 46px) !important; }
.modes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  margin: 22px 0 0 !important; padding: 8px 6px 4px;
}
.mode {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 20px 20px; border: 0; border-radius: 30px; color: #fff; text-align: center;
  /* a chunky game-button edge; a soft blurred shadow here draws a pale box over the 3D planets */
  box-shadow: 0 8px 0 rgba(31, 36, 64, 0.18), inset 0 -7px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
/* a glossy highlight along the upper left, like the planets' */
.mode::before {
  content: ""; position: absolute; left: -24%; top: -58%; width: 92%; height: 108%;
  border-radius: 50%; background: rgba(255, 255, 255, 0.15); transform: rotate(-18deg); pointer-events: none;
}
.mode > * { position: relative; }
.mode--short { background: linear-gradient(155deg, #ffb21e 0%, #f3641c 55%, #c94f3c 100%); }
.mode--full { background: linear-gradient(155deg, #23b8ad 0%, #3466e0 58%, #2a3fb0 100%); }
.mode:hover, .mode:focus-visible { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 0 rgba(31, 36, 64, 0.14), inset 0 -7px 0 rgba(0, 0, 0, 0.15); }
.mode:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(31, 36, 64, 0.2), inset 0 -4px 0 rgba(0, 0, 0, 0.15); }
.mode:focus-visible { outline-offset: 5px; border-radius: 30px; }
.mode-art { width: 84px; height: 84px; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mode-art svg { width: 100%; height: 100%; }
.mode:hover .mode-art { transform: translateY(-4px) rotate(-6deg); }
.mode-name { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.1; }
.mode-time { padding: 3px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); font-weight: 800; font-size: 15px; }
.mode-stats { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; opacity: 0.92; }
.mode-what { max-width: 25em; font-size: 14.5px; line-height: 1.42; opacity: 0.96; }
.mode-go {
  position: relative; margin-top: auto; padding: 10px 26px; border-radius: 999px;
  background: #fff; font-weight: 900; font-size: 16px; letter-spacing: 0.02em;
}
.mode--short .mode-go { color: #c4580c; }
.mode--full .mode-go { color: #2a3fb0; }
/* the Start pill keeps inviting a press, like the title's Play button */
.mode-go::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid #fff;
  opacity: 0; pointer-events: none; animation: ping 2.6s ease-out 1s infinite;
}
.mode--full .mode-go::after { animation-delay: 2.3s; }
/* the reader's last pick wears a tag */
.mode-tag {
  position: absolute !important; top: 14px; right: 14px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.95); color: var(--ink); font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; display: none;
}
html.picked .mode[aria-pressed="true"] .mode-tag { display: block; }
.caption[data-side="top"].caption--choose p { font-size: 17px; color: var(--ink-3); font-weight: 700; }
@keyframes ping { 0% { opacity: 0.45; transform: scale(0.96); } 80%, 100% { opacity: 0; transform: scale(1.14); } }
.hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--ink-3);
}
.hint-mouse {
  position: relative; width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 12px;
}
.hint-mouse::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px;
  border-radius: 2px; background: currentColor; animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.hint kbd { margin-left: 2px; }

.caption.caption--chapter-title h2 { font-size: clamp(42px, 5.6vw, 84px); }
.caption.caption--statement h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.14; }

kbd {
  display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: #fff;
  font: 800 13px/1.5 var(--body); text-align: center; color: var(--ink);
}

/* ---------- widgets ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--soft { background: var(--soft); color: var(--ink); }
.btn--soft:hover { background: #e8e6ef; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn .i-stop, .btn.is-playing .i-play { display: none; }
.btn.is-playing .i-stop { display: inline; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* .btn's display would otherwise beat the hidden attribute (the quiz's "Next question") */
.btn[hidden] { display: none; }
.link { font-weight: 800; font-size: 15px; text-underline-offset: 4px; }
.link-btn { padding: 0; border: 0; background: none; text-align: left; text-decoration: underline; }

.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.part {
  display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 12px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff;
  font-weight: 800; font-size: 14px; line-height: 1.2; text-align: left;
  transition: border-color 0.2s, background-color 0.2s;
}
.part:hover { border-color: #cfccda; }
.part i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.part[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.part-info { min-height: 3.1em; font-size: 15px; line-height: 1.45; }

.quake { margin: 14px 0 0; }
.quake-plot {
  width: 100%; height: auto; border-radius: 14px; background: #f7f6fa;
  aspect-ratio: 640 / 170; overflow: hidden;
}
.quake-wave { fill: #3555b8; }
.quake-axis { stroke: #d9d6e2; stroke-width: 1; }
.quake-tick { fill: #8b8fa6; font: 700 12px var(--body); }
.quake-head { stroke: var(--red); stroke-width: 2; }
.quake figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.quake .btn-row { margin-top: 12px; }
.caption > .quake-tabs + .quake-panel { margin-top: 10px; }
.quake-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); }
.quake-tab {
  min-height: 36px; padding: 6px 15px; border: 0; border-radius: 999px; background: transparent;
  font-weight: 800; font-size: 14px; color: var(--ink-2);
}
.quake-tab[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.quake-panel[hidden] { display: none; }

/* find the waves: drag the P and S markers to where each wave arrives */
.pick-intro { font-size: 15px; line-height: 1.45; }
.pick-p { color: #0f766e; }
.pick-s { color: #c4580c; }
.pick-plot { margin-top: 10px; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.pick-flag line { stroke-width: 3; }
.pick-flag text { font: 800 13px var(--body); text-anchor: middle; fill: #fff; }
.pick-flag--p line { stroke: var(--teal); }
.pick-flag--p rect { fill: var(--teal); }
.pick-flag--s line { stroke: var(--orange); }
.pick-flag--s rect { fill: var(--orange); }
.picks { display: grid; gap: 4px; margin-top: 8px; }
.pick { display: grid; grid-template-columns: 58px 1fr 64px; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; }
.pick input { width: 100%; min-height: 32px; margin: 0; }
.pick--p input { accent-color: var(--teal); }
.pick--s input { accent-color: var(--orange); }
.pick output { font-size: 13px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.pick-note { margin-top: 8px; font-size: 15px; line-height: 1.45; }
.pick-panel.is-found .pick-note { padding: 12px 14px; border-radius: 16px; background: var(--green-soft); color: #135c3a; }
.pick-panel .btn-row { margin-top: 10px; }

/* the guess before the archive answers it */
.guess { display: grid; gap: 8px; }
.guess-opt[aria-pressed="true"] { border-color: var(--violet); background: var(--violet-soft); }
.guess-note { font-size: 15px; }

/* more quiet explorers */
.explorers-world { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3) !important; }
.explorers-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.explorer {
  min-height: 38px; padding: 6px 13px; border: 2px solid var(--line); border-radius: 999px; background: #fff;
  font-weight: 800; font-size: 14px; line-height: 1.2; transition: border-color 0.2s, background-color 0.2s;
}
.explorer:hover { border-color: #cfccda; }
.explorer[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.explorer-info { min-height: 6.5em; padding: 12px 14px; border-radius: 16px; background: var(--soft); font-size: 15px; line-height: 1.45; }
.explorer-info > * + * { margin-top: 6px; }
.explorer-name { color: var(--ink) !important; }
.explorer-end { color: var(--ink-3) !important; }

.meter-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 14px; }
.meter-val { font-family: var(--display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter-track { height: 14px; margin-top: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.meter-fill {
  height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #f3a01f, #f6c64c); transform-origin: 0 50%;
}
.meter-years { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--ink-3); }
.meter-note { font-size: 13px !important; color: var(--ink-3) !important; }

/* "Your turn": a card asks the reader to do something (and Play waits for them) */
.your-turn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 800; font-size: 15px; line-height: 1.4; color: var(--ink) !important; }
.turn-tag {
  padding: 2px 10px; border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 11.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}

/* what to keep on as the power runs out; once chosen, each shows what really happened to it */
.keep { display: grid; gap: 6px; }
.keep-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff; text-align: left;
  font-weight: 800; font-size: 15px; line-height: 1.25; transition: border-color 0.2s, background-color 0.4s, color 0.4s;
}
.keep-opt:hover { border-color: #cfccda; }
.keep-opt small { display: none; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.keep.is-done small { display: inline; }
.keep.is-done .keep-opt { background: var(--soft); color: #9a9db0; }
.keep.is-done .keep-opt.is-on { background: var(--green-soft); color: #18734a; }
.keep-opt[aria-pressed="true"] { border-color: var(--violet); }
.keep-note { font-size: 15px; line-height: 1.45; }
.keep-note:empty { display: none; }

.status { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.status li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  background: var(--soft); font-size: 15px; font-weight: 700;
}
.status b { margin-left: auto; font-weight: 900; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.status .bad { color: var(--red); background: var(--red-soft); }
.status .warn { color: #b8610a; background: #fdf0dc; }
.status .ok { color: #18734a; background: var(--green-soft); }
.status .bad .lamp { animation: blink 1.1s steps(2, jump-none) infinite; }

.checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: step; }
.checklist li {
  display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--ink-3);
  transition: color 0.3s;
}
.checklist li::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #d4d1de;
  background: #fff center / 14px no-repeat; transition: background-color 0.3s, border-color 0.3s;
}
.checklist li.is-done { color: var(--ink); }
.checklist li.is-done::before {
  border-color: var(--teal); background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.console {
  margin-top: 14px; padding: 14px 16px; border-radius: 16px;
  background: #18203b; color: #d8fff6; font: 700 14px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.console-meta { display: flex; justify-content: space-between; color: #7f8bb3; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.console-text { margin-top: 8px; min-height: 4.65em; white-space: pre-wrap; color: inherit !important; }
.console-text::after { content: "▌"; color: #63d2c7; animation: blink 1s steps(2, jump-none) infinite; }
.console.is-sent .console-text::after { content: ""; }
.console-state { margin-top: 8px; color: #63d2c7 !important; }

@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.15; } }

.quiz { margin-top: 14px; }
.quiz-q[hidden] { display: none; }
.quiz-ask { font-weight: 800; color: var(--ink) !important; font-size: 17px; }
.quiz-count { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.quiz-opts { display: grid; gap: 8px; margin-top: 10px; }
.quiz-opt, .guess-opt {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 14px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff; text-align: left;
  font-weight: 700; font-size: 15px; line-height: 1.3; transition: border-color 0.2s, background-color 0.2s;
}
.quiz-opt:hover:not(:disabled), .guess-opt:hover { border-color: #cfccda; }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-right { border-color: var(--green); background: var(--green-soft); }
.quiz-opt.is-wrong { border-color: var(--red); background: var(--red-soft); }
.quiz-why { margin-top: 10px; font-size: 15px; line-height: 1.45; min-height: 0; }
.quiz-why:empty { display: none; }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.quiz-score { font-weight: 800; font-size: 14px; color: var(--ink-2); }
.quiz-recall { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--violet-soft); color: #4a3596 !important; font-size: 15px; line-height: 1.45; }
.quiz-recall[hidden] { display: none; }
.finale-links { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- about sheet ---------- */

.sheet {
  width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 900px);
  padding: 0; border: 0; border-radius: 26px; background: var(--card); color: var(--ink);
  box-shadow: 0 40px 120px -30px rgba(15, 20, 50, 0.55);
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(31, 36, 64, 0.42); }
.sheet-inner { position: relative; padding: 36px 40px 40px; }
.sheet h2 { font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.15; margin-top: 6px; }
.sheet h3 { font-family: var(--display); font-weight: 600; font-size: 21px; margin-top: 28px; }
.sheet p { margin-top: 10px; color: var(--ink-2); }
.sheet .small { font-size: 15px; line-height: 1.55; }
.sheet ul, .sheet ol { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); }
.sheet li + li { margin-top: 6px; }
.sheet-close {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink);
}
.sheet-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.legend { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.legend li { display: flex; gap: 12px; align-items: baseline; margin: 0 !important; }
.legend .badge { flex: none; }
.sources a { font-weight: 700; }
.sources span { display: block; font-size: 14px; color: var(--ink-3); }
.photo-sheet { width: min(980px, calc(100vw - 24px)); }
.photo-figure { margin: 16px 0 0; }
.photo-figure img { display: block; width: 100%; height: auto; max-height: min(56vh, 640px); object-fit: contain; border-radius: 16px; background: #1f2440; }
.photo-figure figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.photo-credit { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.photo-credit a { font-weight: 700; }

.noscript { position: fixed; inset: auto 16px 16px; z-index: 50; padding: 16px; border-radius: 16px; background: var(--ink); color: #fff; }

/* Asked at the start when the computer asks for less motion and the reader hasn't chosen, so
   nobody gets the still version without knowing there is an animated one. (It only shows on a
   computer that asked for less motion, so it doesn't animate itself.) */
.motion-ask {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(20, 26, 56, 0.55); overscroll-behavior: contain;
}
.motion-ask[hidden] { display: none; }
.motion-card {
  width: min(760px, 100%); max-height: calc(100svh - 32px); overflow-y: auto;
  padding: 30px 32px 24px; border-radius: 32px; background: var(--paper); color: var(--ink);
  text-align: center; box-shadow: 0 10px 0 rgba(31, 36, 64, 0.18);
}
.motion-card .kicker { color: var(--ink-2); }
.motion-card h2 { margin: 6px 0 10px; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; }
.motion-card > p { max-width: 34em; margin: 0 auto; font-size: 17px; line-height: 1.5; color: var(--ink-3); font-weight: 700; }
.motion-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0 18px; padding: 4px 4px 8px; }
.motion-choices .mode { padding: 22px 18px 18px; }
.motion-choices .mode-name { font-size: 26px; }
.mode--still { background: linear-gradient(155deg, #8d93ad 0%, #5d6488 60%, #474d70 100%); }
.mode--still .mode-go { color: #474d70; }
.mode--still .mode-go::after { animation: none; }
.motion-card .motion-later { font-size: 14px; font-weight: 700; color: var(--ink-3); opacity: 0.85; }
@media (max-width: 560px) {
  .motion-card { padding: 24px 18px 18px; border-radius: 26px; }
  .motion-choices { grid-template-columns: 1fr; gap: 14px; }
  .motion-choices .mode-name { font-size: 23px; }
}

/* ---------- the film (Watch it) ---------- */

/* the cards and the controls step aside: the scenes take the whole screen, with subtitles */
/* (the closing statement stays: "Its signal has ended. Its discoveries continue.") */
html.film .caption:not(.caption--statement) { visibility: hidden !important; }
html.film :is(.topbar, .pager, .progress, .turn) { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.film-curtain {
  position: fixed; inset: 0; z-index: 25; background: #0f1533;
  opacity: 0; pointer-events: none; transition: opacity 0.55s ease;
}
.film-curtain.is-on { opacity: 1; }
.film-sub {
  position: fixed; left: 50%; bottom: max(26px, 4.5vh); z-index: 30;
  width: min(940px, calc(100vw - 32px)); transform: translate(-50%, 10px);
  display: grid; justify-items: center; gap: 8px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.film-sub.is-in { opacity: 1; transform: translate(-50%, 0); }
.film-badge[hidden] { display: none; }
.film-sub .film-badge { box-shadow: var(--shadow-sm); }
.film-line {
  display: inline; padding: 6px 14px; border-radius: 12px;
  background: rgba(15, 21, 51, 0.84); color: #fff;
  font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.55;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.film-insert {
  position: fixed; left: var(--pad); top: 24px; z-index: 30; margin: 0;
  width: min(330px, 30vw); padding: 8px 8px 10px; border-radius: 18px;
  background: #fff; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translate3d(0, -10px, 0); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.film-insert.is-in { opacity: 1; transform: none; }
.film-insert img { display: block; width: 100%; height: auto; max-height: 34vh; object-fit: cover; border-radius: 12px; background: var(--soft); }
.film-insert figcaption { margin-top: 7px; padding: 0 4px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.film-insert figcaption b { color: #18734a; }
.film-insert--quake { width: min(620px, 52vw); padding: 12px 14px 12px; }
.film-insert .quake-head { stroke: #f3641c; stroke-width: 3; }
.film-stop {
  position: fixed; top: 16px; right: var(--pad); z-index: 40;
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px 6px 16px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--ink);
  font-weight: 800; font-size: 14px; box-shadow: var(--shadow-sm);
}
.film-stop[hidden] { display: none; }
.film-stop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* the film needs the animated story, and isn't part of the text version */
html.text-mode .mode--watch { display: none; }
.mode--watch { background: linear-gradient(155deg, #b996ff 0%, #7a5fd6 55%, #5a40b8 100%); }
.mode--watch .mode-go { color: #5a40b8; }
.mode--watch .mode-go::after { animation-delay: 1.6s; }

/* ---------- phones and portrait screens: captions go to the bottom ---------- */

@media (max-width: 1180px) {
  .chapter-label { display: none; }
  .chapter { padding: 0 9px; }
  .chapter.is-current .chapter-label { display: inline; }
}

@media (max-width: 899px), (max-aspect-ratio: 115/100) {
  :root { --top: 64px; --pad: 12px; }
  body { font-size: 16px; }
  .chapters { display: none; }
  .brand { height: 42px; }
  .tool { width: 42px; height: 42px; }
  .tool-label { display: none; }
  .tools { gap: 6px; }
  /* cards sit just above the step buttons */
  .caption, .caption[data-side="right"] {
    left: 12px; right: 12px; top: auto; width: auto;
    bottom: calc(66px + env(safe-area-inset-bottom));
    max-height: 44svh; overflow-y: auto; overscroll-behavior: contain;
    transform: translate3d(0, var(--drift, 0px), 0);
    padding: 20px 20px 18px; border-radius: 22px;
  }
  .caption[data-side="top"] {
    left: 12px; right: 12px; width: auto; top: calc(var(--top) + 8px); bottom: auto;
    transform: translate3d(0, var(--drift, 0px), 0); max-height: 38svh;
  }
  .caption.caption--title h1 { font-size: clamp(64px, 22vw, 120px); }
  /* the title card shows whole: kicker, title, line and the Play button (the planets go below it) */
  .caption.caption--title { max-height: calc(100svh - var(--top) - 150px); }
  .caption[data-side="top"] p { font-size: 17px; }
  /* phones swipe; the Play button is the only hint the title needs */
  .title-actions { margin-top: 16px !important; }
  .title-actions .hint { display: none; }
  /* the choose page takes most of the screen, with smaller buttons side by side */
  .caption.caption--choose { max-height: calc(100svh - var(--top) - 84px); }
  .caption--choose h2 { font-size: 26px !important; }
  .modes { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px !important; padding: 6px 2px 2px; }
  /* the film is a slim button across the top, the two stories side by side below it */
  .mode--watch { grid-column: 1 / -1; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px 12px; }
  .mode--watch .mode-art { width: 40px; height: 40px; }
  .mode--watch .mode-stats { display: none; }
  .mode--watch .mode-go { margin-top: 0; }
  .caption--choose > p { display: none; }
  /* the film: a smaller photo at the top left, the recording across the top (see filmRoom) */
  .film-insert { left: 12px; top: 12px; width: min(220px, 46vw); }
  .film-insert--quake { top: 58px; width: calc(100vw - 24px); }
  .film-stop { top: 12px; }
  .film-line { font-size: 17px; }
  .mode { padding: 16px 10px 14px; border-radius: 24px; gap: 4px; }
  .mode-art { width: 58px; height: 58px; }
  .mode-name { font-size: 21px; }
  .mode-time { font-size: 13px; padding: 2px 10px; }
  .mode-stats { font-size: 11.5px; }
  .mode-what { display: none; }
  .mode-go { padding: 7px 18px; font-size: 14px; margin-top: 6px; }
  .mode-tag { top: 8px; right: 8px; font-size: 10px; padding: 2px 7px; }
  .caption[data-side="top"].caption--choose p { font-size: 14px; }
  .caption :is(h1, h2) { font-size: 25px; }
  /* phones swipe too, but the step buttons and Play stay, centred at the bottom */
  .pager { left: 50%; right: auto; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .turn { left: 12px; right: 12px; top: calc(var(--top) + 4px); bottom: auto; justify-content: space-between; }
  .parts { grid-template-columns: 1fr 1fr; }
  .sheet-inner { padding: 28px 22px 30px; }
  /* while the reader is working with a card, it may take more of the screen than the art */
  .caption:has(.pick-panel:not([hidden])) { max-height: 74svh; }
  .caption:has(.explorers), .caption:has(.keep) { max-height: 60svh; }
}

@media (max-width: 420px) {
  .brand-name { display: none; }
  .brand { padding-right: 8px; }
}

/* ---------- text version ---------- */

html.text-mode .stage, html.text-mode .pager, html.text-mode .progress, html.text-mode .turn { display: none; }
html.text-mode main { padding: calc(var(--top) + 24px) 16px 64px; }
html.text-mode .beat { height: auto !important; }
html.text-mode .caption,
html.text-mode .caption[data-side] {
  position: static; opacity: 1 !important; transform: none !important; pointer-events: auto;
  width: min(680px, 100%); max-height: none; overflow: visible; margin: 0 auto 20px;
  background: var(--card); box-shadow: var(--shadow-sm); text-align: left; padding: 28px 30px;
}
html.text-mode .caption--title h1 { font-size: 64px; }
html.text-mode .title-actions, html.text-mode .motion-ask { display: none; }
html.text-mode .caption.caption--choose { width: min(680px, 100%); }
html.text-mode .mode-go::after { animation: none; }
html.text-mode .caption > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- reduced motion ----------
   The page's own setting decides (it starts from the system preference and the reader can
   change it), so these rules follow html.reduced rather than the media query. */

html.reduced .hint-mouse::after,
html.reduced .status .bad .lamp,
html.reduced .console-text::after,
html.reduced .btn.btn--play::after,
html.reduced .caption.caption--title h1 { animation: none; }
html.reduced .mode-go::after { animation: none; }
html.reduced .btn, html.reduced .tool, html.reduced .chapter,
html.reduced .mode, html.reduced .mode-art { transition: none; }

/* ---------- short desktop screens (laptops with browser bars, 125% scaling) ---------- */

@media (max-height: 760px) and (min-width: 900px) and (min-aspect-ratio: 115/100) {
  body { font-size: 15.5px; line-height: 1.5; }
  :root { --top: 68px; }
  .caption { padding: 20px 22px 18px; }
  .caption > * + * { margin-top: 9px; }
  .badge + .kicker { margin-top: 12px; }
  .caption :is(h1, h2) { font-size: clamp(22px, 2vw, 28px); }
  .caption.caption--title h1 { font-size: clamp(64px, 9vw, 124px); }
  .caption.caption--chapter-title h2 { font-size: clamp(36px, 4.2vw, 60px); }
  .caption.caption--statement h2 { font-size: clamp(30px, 3.6vw, 50px); }
  .line { padding: 9px 12px; }
  .fact { font-size: 14px; padding: 10px 12px; }
  .status li { padding: 7px 10px; font-size: 14px; }
  .console-text { min-height: 3.2em; }
  .title-actions { margin-top: 14px !important; }
  .btn.btn--play { min-height: 46px; padding: 10px 20px 10px 16px; font-size: 16px; }
  /* the choose page: smaller buttons without their descriptions, so the planets still show */
  .modes { margin-top: 10px !important; gap: 18px; }
  .mode { padding: 14px 18px 16px; gap: 4px; }
  .mode-art { width: 58px; height: 58px; }
  .mode-name { font-size: 26px; }
  .mode-what { display: none; }
}