/*
  GenAv CoPilot website: the one shared stylesheet.

  Colours come from the app icon (navy #022E69, wordmark #053C93) and from the app's
  ThemeColor.swift: the five tab colours mark feature sections, and the night palette
  is used as it is in the cockpit. Type is the system font stack only, so nothing loads
  from another site. Everything that moves is progressive enhancement and switches off
  under prefers-reduced-motion.
*/

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Light palette (default) */
  --ground: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #e8eef6;
  --ink: #0b1b33;
  --ink-2: #46566e;
  --line: #d2dbe7;
  --line-strong: #74859e;
  --brand: #022e69;
  --link: #053c93;
  --focus: #0a5bd6;
  --caution: #b23000;
  --caution-ground: #fff1e6;
  --glass: rgb(243 246 250 / 0.78);
  --shadow: 0 1px 2px rgb(11 27 51 / 0.06), 0 12px 32px -12px rgb(11 27 51 / 0.22);
  --trace: #d1281f;

  /* The app icon's navy, for the home page's hero and Watch chapter in both themes */
  --deep: #04122b;
  --on-deep: #eef3fb;
  --on-deep-2: #b4c4dc;

  /* The app's tab colours, Apple's higher-contrast variants */
  --sec-aircraft: #0040dd;
  --sec-plan: #1f7f38;
  --sec-fly: #c93400;
  --sec-tools: #8944ab;
  --sec-logbook: #0071a4;
  --sec-neutral: #46566e;

  /* Night cockpit lighting, the same in both themes (ThemeColor night palette) */
  --night-ground: #000000;
  --night-card: #1a0505;
  --night-red: #d93326;
  --night-amber: #f27333;
  --night-line: #3a0d08;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --step-3: clamp(1.875rem, 1.4rem + 2.3vw, 3rem);
  --step-4: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);

  /* Space and shape */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --measure: 65ch;
  --page: 72rem;
  --radius: 0.875rem;
  --radius-small: 0.5rem;
  --header-h: 3.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #07101e;
    --surface: #0e1a2c;
    --surface-2: #15243b;
    --ink: #e8eef7;
    --ink-2: #a3b2c9;
    --line: #24354f;
    --line-strong: #5d7193;
    --brand: #e8eef7;
    --link: #8db8ff;
    --focus: #8db8ff;
    --caution: #ffb340;
    --caution-ground: #2a1a07;
    --glass: rgb(7 16 30 / 0.74);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
    --trace: #ff6b5e;

    --sec-aircraft: #409cff;
    --sec-plan: #30db5b;
    --sec-fly: #ffb340;
    --sec-tools: #da8fff;
    --sec-logbook: #5de6ff;
    --sec-neutral: #a3b2c9;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-2: var(--ink);
    --line: var(--line-strong);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--step-3);
  font-weight: 750;
}

h3 {
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.01em;
}

p,
li {
  text-wrap: pretty;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--link);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.wrap {
  inline-size: 100%;
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-2);
  max-inline-size: 38ch;
}

.measure {
  max-inline-size: var(--measure);
}

/* Small capitals in SF Mono, for labels the app itself shows in caps. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.icao {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border-block-end: 1px solid transparent;
  view-transition-name: site-header;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--ground);
  }
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  min-block-size: var(--header-h);
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.brand img {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
  view-transition-name: brand-icon;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--surface-2);
}

/* The header is identical on every page; the body says which page this is. */
body[data-page="features"] .site-nav a[href="features.html"],
body[data-page="data"] .site-nav a[href="data.html"],
body[data-page="support"] .site-nav a[href="support.html"],
body[data-page="privacy"] .site-nav a[href="privacy.html"] {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- Footer ---------- */

.site-footer {
  margin-block-start: clamp(4rem, 3rem + 4vw, 7rem);
  padding-block: 2.5rem;
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.site-footer .wrap {
  display: grid;
  gap: 1.25rem;
}

.footer-notice {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 650;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-meta a {
  color: inherit;
}

/* ---------- Shared pieces ---------- */

/* "Situational awareness only" and other cautions, with the app's warning triangle. */
.caution {
  display: inline-flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-small);
  background: var(--caution-ground);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  justify-self: start;
}

.caution svg,
.footer-notice svg {
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  translate: 0 0.15em;
  color: var(--caution);
}

.caution.on-dark {
  background: rgb(255 179 64 / 0.12);
  color: var(--on-deep);
}

.caution.on-dark svg {
  color: #ffb340;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
}

.pill::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--sec-plan);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.75rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ground);
  font-weight: 650;
  text-decoration: none;
}

.button:hover {
  text-decoration: underline;
}

.button.on-dark {
  background: #ffffff;
  color: #04122b;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* A link to more on a subject: a short line with an arrow. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 650;
  text-decoration: none;
}

.more::after {
  content: "→";
  transition: translate 0.2s ease;
}

.more:hover {
  text-decoration: underline;
}

.more:hover::after {
  translate: 0.2rem 0;
}

/* A screenshot from the app, with the iPhone screen's corner radius. */
.shot {
  margin: 0;
  inline-size: min(100%, var(--shot-w, 18rem));
}

.shot img {
  inline-size: 100%;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  border-radius: 13.7% / 6.3%;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}

.shot figcaption {
  margin-block-start: 0.75rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* Apple Watch screens: black, with the watch screen's rounded corners. */
.shot.watch img {
  aspect-ratio: 416 / 496;
  border-radius: 24% / 20%;
  background: #000;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 0 6px #15181d, 0 0 0 7px var(--line), var(--shadow);
}

/* A cropped piece of a screen, such as a widget, a card or a Live Activity. */
.shot.crop img {
  aspect-ratio: auto;
  border-radius: var(--radius);
}

/* iPad screens: the screen's rounded corners in a thin dark bezel. */
.shot.ipad {
  inline-size: min(100%, var(--shot-w, 46rem));
}

.shot.ipad img,
.ipad-figure img {
  inline-size: 100%;
  aspect-ratio: auto;
  border-radius: 2.2% / 1.5%;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 0 clamp(3px, 0.9vw, 7px) #15181d,
    0 0 0 clamp(4px, calc(0.9vw + 1px), 8px) var(--line), var(--shadow);
}

/* A cropped iPad screen, wider than it is tall. */
.shot.ipad:not(.portrait) img,
.ipad-figure img.wide {
  border-radius: 2.2% / 2.8%;
}

/* iPad screens below a section, one or two side by side. */
.ipad-figure {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  padding: 8px;
  max-inline-size: 40rem;
}

.ipad-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  inline-size: 100%;
}

.ipad-figure img {
  flex: 0 1 17rem;
  min-inline-size: 0;
  inline-size: 17rem;
  max-inline-size: 100%;
  block-size: auto;
}

.ipad-figure img.wide {
  flex-basis: 26rem;
  inline-size: 26rem;
}

.ipad-figure figcaption {
  max-inline-size: 60ch;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-align: center;
}

/* The top of an iPhone screen, cut off below what it shows. */
.shot.part img {
  aspect-ratio: auto;
  border-radius: 13.7% 13.7% var(--radius) var(--radius) / 9% 9% var(--radius) var(--radius);
}

/* Section key: the app's tab colour beside the section's name. */
.key {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.key::before {
  content: "";
  flex: none;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: 0.2rem;
  background: var(--key, var(--sec-neutral));
}

[data-section="aircraft"] { --key: var(--sec-aircraft); }
[data-section="plan"] { --key: var(--sec-plan); }
[data-section="fly"] { --key: var(--sec-fly); }
[data-section="tools"] { --key: var(--sec-tools); }
[data-section="logbook"] { --key: var(--sec-logbook); }
[data-section="watch"],
[data-section="widgets"],
[data-section="data"],
[data-section="support"],
[data-section="features"] { --key: var(--link); }

.ticks {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-inline-start: 1.5rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1rem;
  inset-block-start: 0.62em;
  inline-size: 0.6rem;
  block-size: 2px;
  background: var(--key, var(--line-strong));
}

.note {
  font-size: var(--step--1);
  color: var(--ink-2);
  max-inline-size: var(--measure);
}

/* Readouts in SF Pro Rounded, as the app shows its numbers. */
.readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}

.readout {
  flex: 1 1 7rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
}

.readout dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.readout dd {
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-rounded);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.readout dd small {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
}

.readouts-caption {
  margin-block-start: 0.6rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* ---------- Home: the launch hero ---------- */

/* The hero is the app icon's navy in both themes, like the app's own launch screen. */
.launch {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) 0;
  background:
    radial-gradient(60rem 36rem at 85% 0%, rgb(5 60 147 / 0.6), transparent 70%),
    radial-gradient(44rem 30rem at 0% 100%, rgb(0 113 164 / 0.28), transparent 70%),
    var(--deep);
  color: var(--on-deep);
  color-scheme: dark;
}

.launch-grid {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
  align-items: center;
  padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem);
}

@media (min-width: 58rem) {
  .launch-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.launch-copy {
  display: grid;
  gap: 1.35rem;
  justify-items: start;
}

.launch .eyebrow {
  color: var(--on-deep-2);
}

.launch h1 {
  font-size: clamp(3rem, 1.6rem + 6vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  view-transition-name: page-title;
}

.launch-line {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #bcd4ff;
  text-wrap: balance;
}

.launch-sub {
  max-inline-size: 40ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--on-deep-2);
}

.launch .pill {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.18);
  color: var(--on-deep);
}

.launch .pill::before {
  background: #30db5b;
}

/* The iPad behind, with the iPhone and the Watch in front, all on the same flight. */
.launch-devices {
  position: relative;
  inline-size: 100%;
  max-inline-size: 32rem;
  justify-self: center;
  padding: 0 9% 12% 17%;
}

.launch-devices .shot {
  margin: 0;
}

.launch-devices .shot.ipad {
  --shot-w: 100%;
}

.launch-devices .shot.ipad img {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 0 0 7px #0d1016, 0 0 0 8px rgb(255 255 255 / 0.14), 0 50px 90px -40px rgb(0 0 0 / 0.8);
}

.launch-devices .shot:not(.ipad, .watch) {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 31%;
  z-index: 2;
}

.launch-devices .shot:not(.ipad, .watch) img {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 80px -30px rgb(0 0 0 / 0.75);
}

.launch-devices .shot.watch {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 2%;
  inline-size: 24%;
  z-index: 3;
}

.launch-devices .shot.watch img {
  box-shadow: 0 0 0 5px #15181d, 0 0 0 6px rgb(255 255 255 / 0.16), 0 30px 50px -20px rgb(0 0 0 / 0.7);
}

/* A heading tape along the foot of the hero, as on a moving map in Track Up. */
.tape {
  overflow: hidden;
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.tape-track {
  display: flex;
  inline-size: max-content;
  padding-block: 0.4rem 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--on-deep-2);
  font-variant-numeric: tabular-nums;
}

.tape-track span {
  inline-size: 5rem;
  padding-block-end: 0.85rem;
  text-align: center;
  background:
    linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)) 50% 100% / 1px 0.6rem no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 1px, transparent 1px 1rem) 0 100% / 100% 0.3rem no-repeat;
}

/* ---------- Home: chapters ---------- */

/* One idea a chapter: a large headline, a line or two, one picture. */
.chapter {
  padding-block: clamp(4rem, 2.5rem + 6vw, 8.5rem);
}

.chapter + .chapter:not(.chapter-dark, .chapter-night) {
  border-block-start: 1px solid var(--line);
}

.chapter-dark + .chapter,
.chapter-night + .chapter {
  border-block-start: 0;
}

.chapter-grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}

@media (min-width: 58rem) {
  .chapter-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .chapter-grid.flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .chapter-grid.flip > .chapter-copy {
    order: 2;
  }
}

.chapter-copy {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  align-content: center;
}

.chapter .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--key, var(--ink-2));
}

.chapter h2 {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.chapter-sub {
  max-inline-size: 36ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-2);
}

.chapter-visual {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  min-inline-size: 0;
}

.chapter-visual > .explain {
  inline-size: 100%;
}

.chapter-visual .readout-block {
  inline-size: 100%;
}

/* Two screens, the second a little lower, as if laid on a table. */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  inline-size: min(100%, 32rem);
}

.duo .shot {
  --shot-w: 100%;
}

.duo .shot:nth-child(2) {
  translate: 0 8%;
}

.solo-shot {
  inline-size: min(68%, 17rem);
}

.solo-shot .shot {
  --shot-w: 100%;
}

/* The POH, defined like an entry in a glossary. */
.chapter-poh .wrap {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .chapter-poh .wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.define {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.definition {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 1rem 0 1rem 1.25rem;
  border-inline-start: 3px solid var(--key);
}

.definition dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.85rem;
}

.definition dfn {
  font-family: var(--font-rounded);
  font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--key);
}

.definition .say {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.definition dd {
  margin: 0;
  max-inline-size: 38ch;
  font-size: var(--step-1);
  line-height: 1.45;
}

/* The Watch chapter: navy, with four Watch screens in a row. */
.chapter-dark {
  background:
    radial-gradient(50rem 30rem at 15% 0%, rgb(5 60 147 / 0.5), transparent 70%),
    var(--deep);
  color: var(--on-deep);
  color-scheme: dark;
  --link: #8db8ff;
  --line: #24354f;
}

.chapter-dark .eyebrow,
.chapter-dark .chapter-sub {
  color: var(--on-deep-2);
}

.watch-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.25rem + 1.5vw, 1.5rem);
  inline-size: 100%;
}

.watch-row .shot {
  --shot-w: 100%;
}

.watch-row .shot:nth-child(even) {
  translate: 0 14%;
}

.chapter-dark .shot.watch img {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 0 5px #15181d, 0 0 0 6px rgb(255 255 255 / 0.14), 0 30px 50px -24px rgb(0 0 0 / 0.8);
}

/* Night lighting, shown in its own colours. */
.chapter-night {
  background:
    radial-gradient(60rem 30rem at 85% 20%, rgb(217 51 38 / 0.14), transparent 70%),
    var(--night-ground);
  color: var(--night-amber);
  color-scheme: dark;
}

.chapter-night h2 {
  color: var(--night-red);
}

.chapter-night .eyebrow,
.chapter-night .chapter-sub {
  color: var(--night-amber);
}

.chapter-night .shot img {
  box-shadow: 0 0 0 1px var(--night-line), 0 30px 80px -30px rgb(217 51 38 / 0.45);
  background: var(--night-card);
}

/* Every feature page, one tile each. */
.chapter-index h2 {
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-grid a {
  display: grid;
  gap: 0.35rem;
  block-size: 100%;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--step--1);
  text-decoration: none;
  transition: border-color 0.2s ease, translate 0.2s ease;
}

.index-grid a .key {
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 700;
}

.index-grid a:hover {
  border-color: var(--key, var(--line-strong));
  translate: 0 -2px;
}

/* ---------- Feature pages ---------- */

/* The feature pages' own navigation, under the site header. */
.feature-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border-block: 1px solid var(--line);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .feature-nav {
    background: var(--ground);
  }
}

.feature-nav ul {
  display: flex;
  gap: 0.25rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.45rem var(--gutter);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.feature-nav ul::-webkit-scrollbar {
  display: none;
}

.feature-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.25rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.feature-nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.feature-nav a[data-section]::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 0.15rem;
  background: var(--key);
}

.feature-nav a[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* A feature page's opening: which tab, what it is for, and where to jump to. */
.fp-head .wrap {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}

.fp-head h1 {
  font-size: var(--step-4);
  view-transition-name: page-title;
}

.fp-head .eyebrow {
  color: var(--ink-2);
}

.fp-head .lead {
  max-inline-size: 46ch;
}

.jumps ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.jumps a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.jumps a:hover {
  border-color: var(--key, var(--line-strong));
}

/* A feature section: what it does beside how it works, then the steps. */
.fsec {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  border-block-start: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 3.5rem);
}

.fsec-intro {
  display: grid;
  gap: 0.75rem;
  max-inline-size: 46rem;
}

.fsec-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-2);
}

.fsec-intro .eyebrow::before {
  content: "";
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: 0.2rem;
  background: var(--key, var(--sec-neutral));
}

.fsec-intro .lead {
  max-inline-size: 52ch;
}

.fsec-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-block-start: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .fsec-grid:not(.solo) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.fsec-grid.solo {
  max-inline-size: 48rem;
}

.fsec-what,
.fsec-how {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-inline-size: 0;
}

/* "What it does" and "How it works": small labels over their content. */
.fsec-what > h3,
.fsec-how > h3,
.tool-how > h3,
.tool-use > h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.fsec-what h4 {
  margin: 0.5rem 0 0;
  font-size: var(--step-0);
  font-weight: 650;
}

.fsec-screens {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block-start: 2rem;
}

.fsec-screens .shot {
  --shot-w: 15rem;
}

.fsec-screens .shot.watch {
  --shot-w: 11rem;
}

.fsec-screens .shot.crop {
  --shot-w: 20rem;
}

.fsec-note {
  margin-block-start: 1.5rem;
}

/* The next page in the features, at the foot of each. */
.next-page {
  display: grid;
  gap: 0.25rem;
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.next-page:hover {
  border-color: var(--key, var(--line-strong));
}

.next-page .eyebrow {
  color: var(--ink-2);
}

.np-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.np-title::after {
  content: "→";
  color: var(--key, var(--link));
  transition: translate 0.2s ease;
}

.next-page:hover .np-title::after {
  translate: 0.3rem 0;
}

.np-line {
  color: var(--ink-2);
}

/* ---------- Features overview ---------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each card is one link, stretched over the whole card from its heading. */
.hub-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 1rem;
  align-items: start;
  overflow: hidden;
  padding: 1.35rem 0 0 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hub-card:hover {
  border-color: var(--key);
  box-shadow: var(--shadow);
}

.hub-card:has(a:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.hub-text {
  display: grid;
  gap: 0.55rem;
  padding-block-end: 1.35rem;
}

.hub-card h2 {
  font-size: var(--step-1);
}

.hub-card h2 a {
  color: var(--ink);
  text-decoration: none;
}

.hub-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hub-card h2 a:focus-visible {
  outline: none;
}

.hub-line {
  color: var(--ink-2);
}

.hub-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.hub-list li {
  position: relative;
  padding-inline-start: 1rem;
}

.hub-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 0.45rem;
  block-size: 2px;
  background: var(--key);
}

/* The screen peeks in from the card's lower edge. */
.hub-pic {
  align-self: end;
  translate: 0 1.5rem;
  transition: translate 0.3s ease;
}

.hub-pic img {
  inline-size: 100%;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  object-position: top;
  border-radius: 13.7% / 6.3%;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  max-block-size: 12rem;
}

.hub-pic[data-kind="watch"] img {
  aspect-ratio: 416 / 496;
  border-radius: 24% / 20%;
  background: #000;
  translate: 0 -1rem;
}

.hub-pic[data-kind="crop"] img {
  aspect-ratio: auto;
  border-radius: var(--radius-small);
  translate: 0 -1rem;
}

.hub-card:hover .hub-pic {
  translate: 0 0.75rem;
}

.credits .wrap {
  display: grid;
  gap: 1rem;
  padding-block-start: clamp(3rem, 2rem + 3vw, 5rem);
}

.credit-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  max-inline-size: var(--measure);
}

.credit-list dt {
  font-weight: 650;
}

.credit-list dd {
  margin: 0.2rem 0 0;
  color: var(--ink-2);
}

/* ---------- Step-through ---------- */

/*
  A list of steps beside the screen for the step chosen. Each step is a radio button,
  so it works with no script, by keyboard (the arrow keys move between steps) and by
  touch; only the chosen step's panel is visible, and to assistive technology. The
  rules that show the chosen panel are generated at the end of this file.
*/
.stepper {
  display: grid;
  gap: 1rem;
  margin-block-start: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  container-type: inline-size;
}

.stepper-title {
  font-size: var(--step-1);
}

.stepper-body {
  display: grid;
  gap: 1.25rem;
}

.stepper-nav {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.stepper-nav ol {
  display: flex;
  gap: 0.5rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter) 0.6rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.stepper-nav li {
  position: relative;
  flex: none;
  scroll-snap-align: start;
}

/* The radio itself is out of sight but still takes focus. */
.stepper-nav input {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: 50%;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.stepper-nav label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 2.75rem;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.stepper-nav label:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.sn {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.85rem;
  block-size: 1.85rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-rounded);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.st {
  display: grid;
}

.ss {
  display: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}

.stepper-nav input:checked + label {
  border-color: var(--key, var(--link));
  box-shadow: inset 0 0 0 1px var(--key, var(--link));
  color: var(--ink);
}

.stepper-nav input:checked + label .sn {
  background: var(--key, var(--link));
  color: var(--surface);
}

.stepper-nav input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* All the panels share one cell, so the step-through keeps its height from step to step. */
.stepper-panels {
  display: grid;
  min-inline-size: 0;
  container-type: inline-size;
}

.step-panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  justify-items: center;
  min-inline-size: 0;
  visibility: hidden;
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity 0.35s ease, translate 0.35s ease, visibility 0s linear 0.35s;
  --gate: none;
}

.step-copy {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  justify-self: stretch;
  max-inline-size: 40rem;
}

.step-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.step-copy h4 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.step-how {
  color: var(--ink-2);
}

.step-how strong {
  color: var(--ink);
  font-weight: 650;
}

.step-screen {
  inline-size: min(100%, 14rem);
}

.step-screen .shot {
  --shot-w: 100%;
}

.step-screen[data-kind="watch"] {
  inline-size: min(100%, 11rem);
  padding: 7px;
}

.step-screen[data-kind="crop"] {
  inline-size: min(100%, 22rem);
}

@container (min-width: 34rem) {
  .step-panel:has(> .step-screen) {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: clamp(1.5rem, 1rem + 3cqi, 3rem);
  }

  .step-panel > .step-screen {
    inline-size: 100%;
  }

  .step-panel > .step-screen[data-kind="watch"] {
    inline-size: 11rem;
    justify-self: center;
  }

  .step-panel > .step-screen[data-kind="crop"] {
    inline-size: 100%;
    max-inline-size: 22rem;
  }
}

/* With room, the steps run down the left beside the panel, joined by a line. */
@container (min-width: 46rem) {
  .stepper-body {
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 1rem + 3cqi, 3.5rem);
    align-items: start;
  }

  .stepper-nav ol {
    position: relative;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .stepper-nav ol::before {
    content: "";
    position: absolute;
    inset-block: 1.4rem;
    inset-inline-start: calc(0.45rem + 0.925rem - 1px);
    inline-size: 2px;
    background: var(--line);
  }

  .stepper-nav label {
    position: relative;
    border-color: transparent;
    border-radius: var(--radius-small);
    background: transparent;
  }

  .stepper-nav label:hover {
    border-color: transparent;
    background: var(--surface-2);
  }

  .stepper-nav input:checked + label {
    border-color: transparent;
    box-shadow: none;
    background: color-mix(in srgb, var(--key, var(--link)) 11%, transparent);
  }

  .sn {
    box-shadow: 0 0 0 3px var(--ground);
  }

  .ss {
    display: block;
  }
}

/* The tools picker: the same pattern, a tool to each step. */
.picker {
  margin-block-start: 0;
}

.picker > .stepper-body > .stepper-panels > .step-panel {
  justify-items: stretch;
}

.picker > .stepper-body > .stepper-panels > .step-panel > .step-copy {
  max-inline-size: none;
  gap: 0.85rem;
}

.picker > .stepper-body > .stepper-panels > .step-panel > .step-copy > h2 {
  font-size: var(--step-3);
}

.picker > .stepper-body > .stepper-panels > .step-panel > .step-copy > p {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-2);
  max-inline-size: 46ch;
}

.tool-body {
  display: grid;
  gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  margin-block-start: 1rem;
}

.tool-how,
.tool-use {
  display: grid;
  gap: 0.9rem;
  min-inline-size: 0;
}

.tool-use .stepper {
  margin-block-start: 0;
}

/* A one-screen guide: numbered steps beside the screen. */
.howto-single {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}

@container (min-width: 34rem) {
  .howto-single {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    justify-items: start;
    align-items: center;
  }

  .howto-single .step-screen {
    inline-size: 100%;
  }
}

.howto-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding-inline-start: 1.5rem;
}

.howto-list li::marker {
  color: var(--key, var(--link));
  font-family: var(--font-rounded);
  font-weight: 700;
}

/* With no :has(), every panel shows, one after another. */
@supports not selector(:has(*)) {
  .stepper-nav {
    display: none;
  }

  .step-panel {
    grid-area: auto;
    visibility: visible;
    opacity: 1;
    translate: none;
  }

  .stepper-panels {
    gap: 2.5rem;
  }
}

/* ---------- Explainers ---------- */

/* How a feature works, drawn to scale in the page's own colours. */
.explain {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  min-inline-size: 0;
  padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  view-timeline-name: --ex;
}

.explain figcaption {
  font-size: var(--step--1);
  color: var(--ink-2);
  max-inline-size: 72ch;
}

/* The drawing keeps a readable size; on a phone it scrolls sideways in its own frame. */
.ex-canvas {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  border-radius: var(--radius-small);
}

.ex-canvas svg {
  display: block;
  inline-size: 100%;
  min-inline-size: 31rem;
  block-size: auto;
  overflow: visible;
  font-family: var(--font-sans);
}

.ex-canvas[data-w="360"] svg {
  min-inline-size: 21rem;
}

.ex-canvas:focus-visible {
  outline-offset: 2px;
}

.ex-hint {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
}

.ex-hint::after {
  content: " →";
}

/* Shown where a drawing is wider than the screen. */
@media (max-width: 38rem) {
  .ex-hint {
    display: block;
    margin-block-start: -0.35rem;
  }

  .explain:has(.ex-canvas[data-w="360"]) .ex-hint {
    display: none;
  }
}

@media (max-width: 23rem) {
  .explain:has(.ex-canvas[data-w="360"]) .ex-hint {
    display: block;
  }
}

.dg-text { fill: currentColor; font-size: 12px; }
.dg-small { fill: var(--ink-2); font-size: 11px; }
.dg-label { fill: currentColor; font-size: 12px; font-weight: 650; }
.dg-mono { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; fill: var(--ink-2); }
.dg-mono-ink { font-family: var(--font-mono); font-size: 11px; fill: currentColor; }
.dg-big { font-family: var(--font-rounded); font-size: 22px; font-weight: 700; fill: currentColor; }
.dg-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.dg-grid-dash { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.dg-axis { stroke: var(--line-strong); stroke-width: 1.25; fill: none; }
.dg-line { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-muted { stroke: var(--ink-2); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.dg-key { stroke: var(--key, var(--link)); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-key-faint { stroke: var(--key, var(--link)); stroke-width: 2; fill: none; stroke-dasharray: 4 5; opacity: 0.55; }
.dg-key-fill { fill: var(--key, var(--link)); }
.dg-area { fill: color-mix(in srgb, var(--key, var(--link)) 14%, transparent); stroke: var(--key, var(--link)); stroke-width: 2; }
.dg-area-line { fill: color-mix(in srgb, var(--key, var(--link)) 12%, transparent); stroke: var(--key, var(--link)); stroke-width: 2.5; stroke-linejoin: round; }
.dg-dot { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.dg-caution { stroke: var(--caution); stroke-width: 2.5; fill: none; stroke-dasharray: 5 4; stroke-linecap: round; }
.dg-caution-ring { fill: var(--surface); stroke: var(--caution); stroke-width: 2.5; stroke-dasharray: 3 3; }
.dg-band { fill: var(--surface-2); }
.dg-cross-path { stroke: var(--ink-2); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.dg-ink-fill { fill: currentColor; }
.dg-wind { stroke: var(--ink-2); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.dg-wind-faint { stroke: var(--ink-2); stroke-width: 2; fill: none; stroke-dasharray: 4 5; opacity: 0.55; }
.dg-wind-fill { fill: var(--ink-2); }
.dg-runway { stroke: var(--surface); stroke-width: 2; stroke-dasharray: 10 8; }
.dg-cell { fill: var(--surface-2); }
.dg-cell-key { fill: color-mix(in srgb, var(--key, var(--link)) 14%, var(--surface)); }
.dg-cell-caution { fill: var(--caution-ground); stroke: var(--caution); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg-cell-muted { fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-dasharray: 3 4; }
.dg-plane-dot { fill: var(--key, var(--link)); stroke: var(--surface); stroke-width: 3; }
.dg-node { fill: var(--surface-2); stroke: var(--line); }
.dg-node-key { fill: color-mix(in srgb, var(--key, var(--link)) 13%, var(--surface)); stroke: var(--key, var(--link)); stroke-width: 1.5; }
.dg-node-off { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 4; }
.dg-flowline { stroke: currentColor; stroke-width: 1.75; fill: none; stroke-dasharray: 6 6; }
.dg-paper { fill: color-mix(in srgb, var(--ink) 3%, var(--surface)); stroke: var(--line-strong); stroke-width: 1; }
.dg-ocr { fill: color-mix(in srgb, var(--key, var(--link)) 16%, var(--surface)); stroke: var(--key, var(--link)); stroke-width: 1; }
.dg-step { fill: var(--key, var(--link)); }
.dg-step-n { fill: var(--surface); font-size: 11px; font-weight: 700; }
.dg-trace { stroke: var(--trace); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-trace-fill { fill: var(--trace); }
.dg-guide { stroke: var(--line-strong); stroke-width: 1; fill: none; stroke-dasharray: 2 3; }
.dg-device { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.dg-tick { stroke: var(--surface); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-file { fill: var(--surface-2); stroke: var(--key, var(--link)); stroke-width: 2; stroke-linejoin: round; }
.dg-map { fill: color-mix(in srgb, var(--sec-plan) 9%, var(--surface)); stroke: var(--line); }
.dg-road { stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 3; fill: none; stroke-linecap: round; }
.dg-radius { fill: color-mix(in srgb, var(--key, var(--link)) 9%, transparent); stroke: var(--key, var(--link)); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dg-runway-mark { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.dg-aerodrome { fill: none; stroke: currentColor; stroke-width: 2; }
.dg-ripple { fill: none; stroke: var(--key, var(--link)); stroke-width: 2; opacity: 0.6; }
.dg-route { stroke: var(--link); stroke-width: 3; fill: none; stroke-dasharray: 9 6; opacity: 0.75; }
.dg-wp { fill: var(--surface); stroke: var(--link); stroke-width: 3; }
.dg-track { stroke: var(--trace); stroke-width: 3; fill: none; stroke-linecap: round; }
.dg-frame { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-bar { fill: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.dg-bar-2 { fill: color-mix(in srgb, var(--key, var(--link)) 38%, var(--surface)); }
.dg-key-bar { fill: var(--key, var(--link)); }
.dg-bar-text { fill: var(--ink); font-size: 12px; font-weight: 650; }
.dg-bar-text-key { fill: var(--surface); font-size: 12px; font-weight: 650; }
.dg-seg-1 { fill: var(--key, var(--link)); }
.dg-seg-2 { fill: color-mix(in srgb, var(--key, var(--link)) 70%, var(--surface)); }
.dg-seg-3 { fill: color-mix(in srgb, var(--key, var(--link)) 48%, var(--surface)); }
.dg-seg-4 { fill: color-mix(in srgb, var(--key, var(--link)) 28%, var(--surface)); }
.dg-card { fill: var(--surface-2); stroke: var(--line); }
.dg-ok { fill: var(--sec-plan); }
.dg-warn { fill: var(--caution-ground); stroke: var(--caution); stroke-width: 1.25; }
.dg-warn-text { fill: var(--ink); font-size: 12px; font-weight: 650; }
.dg-arc { stroke: currentColor; stroke-width: 1.5; fill: none; }
.dg-arc-key { stroke: var(--key, var(--link)); stroke-width: 2; fill: none; }
.dg-air { fill: color-mix(in srgb, var(--link) 45%, transparent); }
.dg-cloud { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.dg-tape { fill: var(--surface-2); stroke: var(--line); }
.dg-display { fill: var(--surface-2); stroke: var(--line); }
.dg-key-cap { fill: color-mix(in srgb, var(--key, var(--link)) 22%, var(--surface)); stroke: var(--key, var(--link)); }
.dg-day { fill: color-mix(in srgb, #e8a700 22%, var(--surface)); }
.dg-nightband { fill: #0b1b33; }
.dg-night-text { fill: #c5d2e4; font-size: 11px; font-weight: 650; }
.dg-window { fill: color-mix(in srgb, var(--key, var(--link)) 13%, transparent); stroke: var(--key, var(--link)); stroke-width: 1.5; }
.dg-bubble { fill: var(--surface-2); }
.dg-bubble-me { fill: var(--link); }
.dg-bubble-me-t { fill: var(--surface); font-size: 12px; font-weight: 600; }
.dg-switch { fill: var(--surface-2); stroke: var(--line-strong); }
.dg-switch-on { fill: var(--sec-plan); }
.dg-knob { fill: #ffffff; stroke: rgb(0 0 0 / 0.15); }
.dg-strike { stroke: var(--caution); stroke-width: 2; }
.dg-halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* The day and night cards keep the app's own colours in both themes. */
.dg-d-card { fill: #ffffff; stroke: #d2dbe7; }
.dg-d-ink { fill: #0b1b33; font-size: 12px; font-weight: 650; }
.dg-d-ink2 { fill: #46566e; font-size: 11px; }
.dg-d-big { fill: #0b1b33; font-family: var(--font-rounded); font-size: 26px; font-weight: 700; }
.dg-d-pill { fill: #e3f5e8; }
.dg-d-pill-t { fill: #1a6b30; font-size: 10px; font-weight: 650; }
.dg-d-btn { fill: #0a5bd6; }
.dg-d-btn-t { fill: #ffffff; font-size: 10px; font-weight: 650; }
.dg-n-card { fill: #1a0505; stroke: #3a0d08; }
.dg-n-ink { fill: #f27333; font-size: 12px; font-weight: 650; }
.dg-n-ink2 { fill: #f27333; font-size: 11px; }
.dg-n-big { fill: #d93326; font-family: var(--font-rounded); font-size: 26px; font-weight: 700; }
.dg-n-pill { fill: #3a0d08; }
.dg-n-pill-t { fill: #f27333; font-size: 10px; font-weight: 650; }
.dg-n-btn { fill: #4a0f09; }
.dg-n-btn-t { fill: #f27333; font-size: 10px; font-weight: 650; }

/* ---------- Support page ---------- */

.contact-card {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.email {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tips {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
  list-style: none;
}

.tips li {
  flex: 1 1 19rem;
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 1.25rem;
  background: var(--surface);
}

.tips h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

.note {
  font-size: var(--step--1);
  color: var(--ink-2);
  max-inline-size: var(--measure);
}

.faq {
  display: grid;
  border-block-start: 1px solid var(--line);
}

.faq details {
  border-block-end: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  font-weight: 650;
  font-size: var(--step-1);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  margin-block-start: 0.45em;
  border-inline-end: 2px solid var(--ink-2);
  border-block-end: 2px solid var(--ink-2);
  rotate: 45deg;
  transition: rotate 0.2s ease;
}

.faq details[open] summary::after {
  rotate: 225deg;
}

.faq .answer {
  display: grid;
  gap: 0.75rem;
  padding-block-end: 1.25rem;
  max-inline-size: var(--measure);
  color: var(--ink-2);
}

.faq details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
}

/* ---------- Data Policy ---------- */

.policy {
  max-inline-size: 48rem;
  margin-inline: auto;
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 0;
  display: grid;
  gap: 1.1rem;
}

.policy h1 {
  font-size: var(--step-4);
}

.policy h1 + h2 {
  margin-block-start: -0.25rem;
  padding: 0;
  border: 0;
  font-size: var(--step-1);
  color: var(--ink-2);
}

.policy h2 {
  margin-block-start: 1.5rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--step-2);
}

.policy ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-inline-start: 1.25rem;
}

.policy li::marker {
  color: var(--ink-2);
}

.policy .highlight {
  display: grid;
  gap: 0.6rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.policy .contact-info {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.policy .contact-info h2 {
  margin: 0;
  padding: 0;
  border: 0;
}

.policy .last-updated {
  margin-block-start: 1rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* Reading progress on long pages: a hairline under the header. */
.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  block-size: 3px;
  background: var(--link);
  transform-origin: 0 50%;
  transform: scaleX(0);
  display: none;
}

.policy-card {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.policy-card h2 {
  font-size: var(--step-2);
}

/* ---------- Motion (progressive enhancement) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Pages cross-fade and the header stays put when moving between pages. */
  @view-transition {
    navigation: auto;
  }

  main {
    view-transition-name: page;
  }

  ::view-transition-old(page) {
    animation: 160ms ease-in both page-out;
  }

  ::view-transition-new(page) {
    animation: 320ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both page-in;
  }

  @keyframes page-out {
    to {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  @keyframes page-in {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
  }

  .feature-nav {
    view-transition-name: feature-nav;
  }

  /*
    Explainers. Each part names how it appears (data-anim), when in the sequence
    (data-at) and for how long (data-span). At rest, and without motion, every
    drawing is complete. With motion:
    - on the page, a drawing builds as it scrolls into view, where scroll-linked
      animation is supported, and plays once on load where it isn't;
    - in a step-through, it plays when its step is chosen;
    - with a pointer, hovering over it plays it again.
  */
  .explain [data-anim="draw"] { stroke-dasharray: 1; --kf: ex-draw; --kf-h: ex-draw-h; }
  .explain [data-anim="fade"] { --kf: ex-fade; --kf-h: ex-fade-h; }
  .explain [data-anim="pop"] { --kf: ex-pop; --kf-h: ex-pop-h; transform-box: fill-box; transform-origin: center; }
  .explain [data-anim="grow"] { --kf: ex-grow; --kf-h: ex-grow-h; transform-box: fill-box; transform-origin: 0 50%; }
  .explain [data-anim="rise"] { --kf: ex-rise; --kf-h: ex-rise-h; transform-box: fill-box; transform-origin: 50% 100%; }

  .explain [data-anim] {
    animation-name: var(--gate, var(--kf));
    animation-duration: calc(var(--span, 0.7) * 1s);
    animation-delay: calc(var(--at, 0) * 0.55s);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
    animation-fill-mode: both;
  }

  @supports (animation-timeline: view()) {
    .explain [data-anim] {
      animation-timeline: --ex;
      animation-duration: auto;
      animation-delay: 0s;
      animation-timing-function: linear;
    }

    /* In a step-through the drawing is already in view, so it plays in time instead. */
    .stepper-panels .step-panel .explain [data-anim] {
      animation-timeline: auto;
      animation-range: normal;
      animation-duration: calc(var(--span, 0.7) * 1s);
      animation-delay: calc(var(--at, 0) * 0.55s);
      animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
    }
  }

  @media (hover: hover) {
    .explain:hover .ex-canvas [data-anim] {
      animation-name: var(--gate, var(--kf-h));
      animation-timeline: auto;
      animation-range: normal;
      animation-duration: calc(var(--span, 0.7) * 1s);
      animation-delay: calc(var(--at, 0) * 0.55s);
      animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
    }
  }

  @keyframes ex-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes ex-draw-h { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes ex-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ex-fade-h { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ex-pop { from { opacity: 0; scale: 0.5; } to { opacity: 1; scale: 1; } }
  @keyframes ex-pop-h { from { opacity: 0; scale: 0.5; } to { opacity: 1; scale: 1; } }
  @keyframes ex-grow { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes ex-grow-h { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes ex-rise { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes ex-rise-h { from { scale: 1 0; } to { scale: 1 1; } }

  /* A chosen step's panel fades and rises into place. */
  .step-panel {
    transition: opacity 0.35s ease, translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.35s;
  }

  @supports (animation-timeline: scroll()) {
    /* The header gains its edge once the page scrolls. */
    .site-header {
      animation: header-edge linear both;
      animation-timeline: scroll(root);
      animation-range: 0 6rem;
    }

    @keyframes header-edge {
      to {
        border-block-end-color: var(--line);
      }
    }

    /* The heading tape turns as you scroll, like a moving map in Track Up. */
    .tape-track {
      animation: tape-turn linear both;
      animation-timeline: scroll(root);
    }

    @keyframes tape-turn {
      to {
        transform: translateX(-40rem);
      }
    }

    /* As the page scrolls on, the iPhone and the Watch draw out from the iPad. */
    .launch-devices .shot:not(.ipad, .watch) {
      animation: device-left linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }

    .launch-devices .shot.watch {
      animation: device-right linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }

    @keyframes device-left {
      to {
        translate: -6% 4%;
      }
    }

    @keyframes device-right {
      to {
        translate: 8% 6%;
      }
    }

    /* Each chapter's picture rises into place; it is fully visible throughout. */
    .chapter-visual > *,
    .define-visual > *,
    .fsec-screens .shot {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes rise {
      from {
        transform: translateY(2.5rem) scale(0.97);
      }
    }

    /* The chapter headline tightens as it arrives. */
    .chapter h2 {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    @keyframes settle {
      from {
        letter-spacing: -0.015em;
      }
    }

    .progress {
      display: block;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }

    @keyframes progress {
      to {
        transform: scaleX(1);
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq details::details-content,
  .faq summary::after,
  .step-panel,
  .stepper-nav label,
  .sn,
  .more::after,
  .np-title::after,
  .hub-pic,
  .index-grid a {
    transition: none;
  }
}

/* ---------- Narrow screens ---------- */

/* On phones the navigation wraps under the name, so the header scrolls away
   rather than taking two rows of the screen; the feature pages' bar sticks instead. */
@media (max-width: 34rem) {
  html {
    scroll-padding-top: 4rem;
  }

  .site-header {
    position: relative;
  }

  .feature-nav {
    top: 0;
  }

  .fsec {
    scroll-margin-top: 4rem;
  }
}

@media (max-width: 30rem) {
  .site-header .wrap {
    padding-block: 0.4rem;
  }

  .site-nav a {
    padding-inline: 0.6rem;
  }

  .readout dd {
    font-size: 1.4rem;
  }

  .hub-card {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
  }

  .watch-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .watch-row .shot:nth-child(even) {
    translate: none;
  }
}

/* ---------- Print ---------- */

@media print {
  :root {
    --ground: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --ink: #000;
    --ink-2: #222;
    --line: #999;
    --link: #000;
    color-scheme: light;
  }

  body {
    font-size: 11pt;
    line-height: 1.45;
  }

  .site-header,
  .site-nav,
  .skip-link,
  .feature-nav,
  .jumps,
  .stepper-nav,
  .progress,
  .tape,
  .launch-devices {
    display: none !important;
  }

  .launch,
  .chapter-dark,
  .chapter-night {
    background: #fff;
    color: #000;
  }

  .step-panel {
    grid-area: auto;
    visibility: visible;
    opacity: 1;
    translate: none;
    break-inside: avoid;
  }

  .stepper-panels {
    gap: 1.5rem;
  }

  .site-footer {
    margin-block-start: 2rem;
    padding-block: 1rem 0;
    border-block-start: 1px solid #999;
  }

  .policy {
    max-inline-size: none;
    padding: 0;
  }

  .policy h1 {
    font-size: 22pt;
  }

  .policy h2 {
    font-size: 14pt;
    break-after: avoid;
  }

  .policy .highlight,
  .policy .contact-info {
    border: 1px solid #999;
    break-inside: avoid;
  }

  .policy a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  .shot img {
    box-shadow: none;
    border: 1px solid #999;
  }
}

/* ---------- Generated: the chosen step in each step-through ---------- */

.stepper:has(> .stepper-body > .stepper-nav input[data-k="1"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="1"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="2"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="2"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="3"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="3"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="4"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="4"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="5"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="5"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="6"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="6"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="7"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="7"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="8"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="8"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="9"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="9"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="10"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="10"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="11"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="11"],
.stepper:has(> .stepper-body > .stepper-nav input[data-k="12"]:checked) > .stepper-body > .stepper-panels > .step-panel[data-k="12"] {
  visibility: inherit;
  opacity: 1;
  translate: none;
  transition-delay: 0s;
  --gate: initial;
}

/* ---------- Generated: explainer timings and movements ---------- */

/* Generated with the explainers: timings and movements. */
[data-at="0"] { --at: 0; }
[data-at="0.1"] { --at: 0.1; }
[data-at="0.2"] { --at: 0.2; }
[data-at="0.25"] { --at: 0.25; }
[data-at="0.3"] { --at: 0.3; }
[data-at="0.35"] { --at: 0.35; }
[data-at="0.4"] { --at: 0.4; }
[data-at="0.5"] { --at: 0.5; }
[data-at="0.6"] { --at: 0.6; }
[data-at="0.7"] { --at: 0.7; }
[data-at="0.75"] { --at: 0.75; }
[data-at="0.8"] { --at: 0.8; }
[data-at="0.9"] { --at: 0.9; }
[data-at="1"] { --at: 1; }
[data-at="1.05"] { --at: 1.05; }
[data-at="1.1"] { --at: 1.1; }
[data-at="1.2"] { --at: 1.2; }
[data-at="1.25"] { --at: 1.25; }
[data-at="1.3"] { --at: 1.3; }
[data-at="1.4"] { --at: 1.4; }
[data-at="1.45"] { --at: 1.45; }
[data-at="1.5"] { --at: 1.5; }
[data-at="1.6"] { --at: 1.6; }
[data-at="1.7"] { --at: 1.7; }
[data-at="1.75"] { --at: 1.75; }
[data-at="1.8"] { --at: 1.8; }
[data-at="1.9"] { --at: 1.9; }
[data-at="2"] { --at: 2; }
[data-at="2.1"] { --at: 2.1; }
[data-at="2.2"] { --at: 2.2; }
[data-at="2.25"] { --at: 2.25; }
[data-at="2.3"] { --at: 2.3; }
[data-at="2.4"] { --at: 2.4; }
[data-at="2.45"] { --at: 2.45; }
[data-at="2.5"] { --at: 2.5; }
[data-at="2.55"] { --at: 2.55; }
[data-at="2.6"] { --at: 2.6; }
[data-at="2.7"] { --at: 2.7; }
[data-at="2.8"] { --at: 2.8; }
[data-at="2.9"] { --at: 2.9; }
[data-at="3"] { --at: 3; }
[data-at="3.1"] { --at: 3.1; }
[data-at="3.2"] { --at: 3.2; }
[data-at="3.3"] { --at: 3.3; }
[data-at="3.4"] { --at: 3.4; }
[data-at="3.6"] { --at: 3.6; }
[data-at="3.7"] { --at: 3.7; }
[data-at="3.8"] { --at: 3.8; }
[data-at="4"] { --at: 4; }
[data-at="4.1"] { --at: 4.1; }
[data-at="4.2"] { --at: 4.2; }
[data-at="4.6"] { --at: 4.6; }
[data-at="4.7"] { --at: 4.7; }
[data-span="0.4"] { --span: 0.4; }
[data-span="0.6"] { --span: 0.6; }
[data-span="0.8"] { --span: 0.8; }
[data-span="1"] { --span: 1; }
[data-span="1.2"] { --span: 1.2; }
[data-span="1.5"] { --span: 1.5; }
[data-span="2"] { --span: 2; }
[data-span="3"] { --span: 3; }
[data-span="3.2"] { --span: 3.2; }
[data-span="3.5"] { --span: 3.5; }
[data-span="4"] { --span: 4; }
[data-move="cs-out"] { --kf: mv-cs-out; --kf-h: mv-cs-out-h; }
@keyframes mv-cs-out { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(176px); opacity: 0; } }
@keyframes mv-cs-out-h { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(176px); opacity: 0; } }

[data-move="cs-back"] { --kf: mv-cs-back; --kf-h: mv-cs-back-h; }
@keyframes mv-cs-back { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(-176px); opacity: 0; } }
@keyframes mv-cs-back-h { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(-176px); opacity: 0; } }

[data-move="snap"] { --kf: mv-snap; --kf-h: mv-snap-h; }
@keyframes mv-snap { from { transform: translate(40px, 36px); } to { transform: none; } }
@keyframes mv-snap-h { from { transform: translate(40px, 36px); } to { transform: none; } }

[data-move="wb-land"] { --kf: mv-wb-land; --kf-h: mv-wb-land-h; }
@keyframes mv-wb-land { from { transform: translate(12.3px, -10.0px); } to { transform: none; } }
@keyframes mv-wb-land-h { from { transform: translate(12.3px, -10.0px); } to { transform: none; } }

[data-move="passage"] { --kf: mv-passage; --kf-h: mv-passage-h; }
@keyframes mv-passage { from { transform: translateX(-430px); } to { transform: none; } }
@keyframes mv-passage-h { from { transform: translateX(-430px); } to { transform: none; } }

[data-move="trackup"] { --kf: mv-trackup; --kf-h: mv-trackup-h; transform-box: view-box; transform-origin: 410px 110px; }
@keyframes mv-trackup { from { transform: rotate(96deg); } to { transform: none; } }
@keyframes mv-trackup-h { from { transform: rotate(96deg); } to { transform: none; } }

[data-move="gps-plane"] { --kf: mv-gps-plane; --kf-h: mv-gps-plane-h; }
@keyframes mv-gps-plane { from { transform: translateX(0); opacity: 1; } 22% { transform: translateX(120px); } 40% { transform: translateX(120px); } 82% { transform: translateX(436px); opacity: 1; } to { transform: translateX(436px); opacity: 0; } }
@keyframes mv-gps-plane-h { from { transform: translateX(0); opacity: 1; } 22% { transform: translateX(120px); } 40% { transform: translateX(120px); } 82% { transform: translateX(436px); opacity: 1; } to { transform: translateX(436px); opacity: 0; } }

[data-move="knob"] { --kf: mv-knob; --kf-h: mv-knob-h; }
@keyframes mv-knob { from { transform: translateX(-16px); } to { transform: none; } }
@keyframes mv-knob-h { from { transform: translateX(-16px); } to { transform: none; } }

[data-move="wb-land-home"] { --kf: mv-wb-land-home; --kf-h: mv-wb-land-home-h; }
@keyframes mv-wb-land-home { from { transform: translate(12.3px, -10.0px); } to { transform: none; } }
@keyframes mv-wb-land-home-h { from { transform: translate(12.3px, -10.0px); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .explain [data-at="0"] { animation-range: cover 3.0% cover 9.3%; }
    .explain [data-at="0"][data-span="0.8"] { animation-range: cover 3.0% cover 10.2%; }
    .explain [data-at="0"][data-span="1"] { animation-range: cover 3.0% cover 12.0%; }
    .explain [data-at="0"][data-span="1.2"] { animation-range: cover 3.0% cover 13.8%; }
    .explain [data-at="0"][data-span="1.5"] { animation-range: cover 3.0% cover 16.5%; }
    .explain [data-at="0"][data-span="2"] { animation-range: cover 3.0% cover 21.0%; }
    .explain [data-at="0"][data-span="3.5"] { animation-range: cover 3.0% cover 34.5%; }
    .explain [data-at="0"][data-span="4"] { animation-range: cover 3.0% cover 39.0%; }
    .explain [data-at="0.1"] { animation-range: cover 3.5% cover 9.8%; }
    .explain [data-at="0.2"] { animation-range: cover 3.9% cover 10.2%; }
    .explain [data-at="0.25"] { animation-range: cover 4.1% cover 10.4%; }
    .explain [data-at="0.3"] { animation-range: cover 4.3% cover 10.6%; }
    .explain [data-at="0.3"][data-span="1"] { animation-range: cover 4.3% cover 13.3%; }
    .explain [data-at="0.35"] { animation-range: cover 4.6% cover 10.9%; }
    .explain [data-at="0.4"] { animation-range: cover 4.8% cover 11.1%; }
    .explain [data-at="0.4"][data-span="3"] { animation-range: cover 4.8% cover 31.8%; }
    .explain [data-at="0.5"] { animation-range: cover 5.2% cover 11.6%; }
    .explain [data-at="0.6"] { animation-range: cover 5.7% cover 12.0%; }
    .explain [data-at="0.6"][data-span="1.5"] { animation-range: cover 5.7% cover 19.2%; }
    .explain [data-at="0.7"] { animation-range: cover 6.2% cover 12.4%; }
    .explain [data-at="0.75"] { animation-range: cover 6.4% cover 12.7%; }
    .explain [data-at="0.8"][data-span="0.4"] { animation-range: cover 6.6% cover 10.2%; }
    .explain [data-at="0.8"] { animation-range: cover 6.6% cover 12.9%; }
    .explain [data-at="0.8"][data-span="3.2"] { animation-range: cover 6.6% cover 35.4%; }
    .explain [data-at="0.9"] { animation-range: cover 7.0% cover 13.3%; }
    .explain [data-at="1"][data-span="0.6"] { animation-range: cover 7.5% cover 12.9%; }
    .explain [data-at="1"] { animation-range: cover 7.5% cover 13.8%; }
    .explain [data-at="1"][data-span="1"] { animation-range: cover 7.5% cover 16.5%; }
    .explain [data-at="1.05"] { animation-range: cover 7.7% cover 14.0%; }
    .explain [data-at="1.1"] { animation-range: cover 8.0% cover 14.2%; }
    .explain [data-at="1.2"][data-span="0.4"] { animation-range: cover 8.4% cover 12.0%; }
    .explain [data-at="1.2"] { animation-range: cover 8.4% cover 14.7%; }
    .explain [data-at="1.2"][data-span="1"] { animation-range: cover 8.4% cover 17.4%; }
    .explain [data-at="1.2"][data-span="1.5"] { animation-range: cover 8.4% cover 21.9%; }
    .explain [data-at="1.25"] { animation-range: cover 8.6% cover 14.9%; }
    .explain [data-at="1.3"][data-span="0.4"] { animation-range: cover 8.9% cover 12.5%; }
    .explain [data-at="1.3"][data-span="0.6"] { animation-range: cover 8.9% cover 14.2%; }
    .explain [data-at="1.3"] { animation-range: cover 8.9% cover 15.2%; }
    .explain [data-at="1.3"][data-span="0.8"] { animation-range: cover 8.9% cover 16.1%; }
    .explain [data-at="1.4"][data-span="0.6"] { animation-range: cover 9.3% cover 14.7%; }
    .explain [data-at="1.4"] { animation-range: cover 9.3% cover 15.6%; }
    .explain [data-at="1.45"] { animation-range: cover 9.5% cover 15.8%; }
    .explain [data-at="1.5"] { animation-range: cover 9.8% cover 16.1%; }
    .explain [data-at="1.6"][data-span="0.4"] { animation-range: cover 10.2% cover 13.8%; }
    .explain [data-at="1.6"] { animation-range: cover 10.2% cover 16.5%; }
    .explain [data-at="1.7"][data-span="0.4"] { animation-range: cover 10.6% cover 14.2%; }
    .explain [data-at="1.7"][data-span="0.6"] { animation-range: cover 10.6% cover 16.0%; }
    .explain [data-at="1.7"] { animation-range: cover 10.6% cover 16.9%; }
    .explain [data-at="1.75"] { animation-range: cover 10.9% cover 17.2%; }
    .explain [data-at="1.8"] { animation-range: cover 11.1% cover 17.4%; }
    .explain [data-at="1.9"][data-span="0.4"] { animation-range: cover 11.5% cover 15.1%; }
    .explain [data-at="1.9"] { animation-range: cover 11.5% cover 17.8%; }
    .explain [data-at="2"][data-span="0.4"] { animation-range: cover 12.0% cover 15.6%; }
    .explain [data-at="2"] { animation-range: cover 12.0% cover 18.3%; }
    .explain [data-at="2.1"][data-span="0.4"] { animation-range: cover 12.5% cover 16.1%; }
    .explain [data-at="2.1"] { animation-range: cover 12.5% cover 18.8%; }
    .explain [data-at="2.1"][data-span="1"] { animation-range: cover 12.5% cover 21.5%; }
    .explain [data-at="2.1"][data-span="1.5"] { animation-range: cover 12.5% cover 26.0%; }
    .explain [data-at="2.2"] { animation-range: cover 12.9% cover 19.2%; }
    .explain [data-at="2.25"] { animation-range: cover 13.1% cover 19.4%; }
    .explain [data-at="2.3"] { animation-range: cover 13.3% cover 19.6%; }
    .explain [data-at="2.4"][data-span="0.4"] { animation-range: cover 13.8% cover 17.4%; }
    .explain [data-at="2.4"][data-span="0.6"] { animation-range: cover 13.8% cover 19.2%; }
    .explain [data-at="2.4"] { animation-range: cover 13.8% cover 20.1%; }
    .explain [data-at="2.45"] { animation-range: cover 14.0% cover 20.3%; }
    .explain [data-at="2.5"][data-span="0.4"] { animation-range: cover 14.2% cover 17.9%; }
    .explain [data-at="2.5"] { animation-range: cover 14.2% cover 20.6%; }
    .explain [data-at="2.5"][data-span="1"] { animation-range: cover 14.2% cover 23.2%; }
    .explain [data-at="2.55"] { animation-range: cover 14.5% cover 20.8%; }
    .explain [data-at="2.6"] { animation-range: cover 14.7% cover 21.0%; }
    .explain [data-at="2.6"][data-span="0.8"] { animation-range: cover 14.7% cover 21.9%; }
    .explain [data-at="2.7"] { animation-range: cover 15.2% cover 21.4%; }
    .explain [data-at="2.8"][data-span="0.6"] { animation-range: cover 15.6% cover 21.0%; }
    .explain [data-at="2.8"] { animation-range: cover 15.6% cover 21.9%; }
    .explain [data-at="2.8"][data-span="1.2"] { animation-range: cover 15.6% cover 26.4%; }
    .explain [data-at="2.9"] { animation-range: cover 16.0% cover 22.3%; }
    .explain [data-at="3"] { animation-range: cover 16.5% cover 22.8%; }
    .explain [data-at="3"][data-span="0.8"] { animation-range: cover 16.5% cover 23.7%; }
    .explain [data-at="3.1"][data-span="0.4"] { animation-range: cover 17.0% cover 20.6%; }
    .explain [data-at="3.1"] { animation-range: cover 17.0% cover 23.3%; }
    .explain [data-at="3.2"] { animation-range: cover 17.4% cover 23.7%; }
    .explain [data-at="3.2"][data-span="1"] { animation-range: cover 17.4% cover 26.4%; }
    .explain [data-at="3.3"][data-span="0.4"] { animation-range: cover 17.9% cover 21.5%; }
    .explain [data-at="3.3"] { animation-range: cover 17.9% cover 24.2%; }
    .explain [data-at="3.4"] { animation-range: cover 18.3% cover 24.6%; }
    .explain [data-at="3.6"] { animation-range: cover 19.2% cover 25.5%; }
    .explain [data-at="3.7"][data-span="0.4"] { animation-range: cover 19.7% cover 23.3%; }
    .explain [data-at="3.7"] { animation-range: cover 19.7% cover 26.0%; }
    .explain [data-at="3.8"][data-span="0.4"] { animation-range: cover 20.1% cover 23.7%; }
    .explain [data-at="3.8"] { animation-range: cover 20.1% cover 26.4%; }
    .explain [data-at="4"] { animation-range: cover 21.0% cover 27.3%; }
    .explain [data-at="4.1"] { animation-range: cover 21.4% cover 27.8%; }
    .explain [data-at="4.2"] { animation-range: cover 21.9% cover 28.2%; }
    .explain [data-at="4.6"] { animation-range: cover 23.7% cover 30.0%; }
    .explain [data-at="4.7"][data-span="0.4"] { animation-range: cover 24.2% cover 27.8%; }
  }
}