:root {
  /* Type scale: headings 16px and 14px, body 12pt (16px), small 10pt (≈13.3px).
     Every text size on the site uses one of these. */
  --text-xl: 16px;
  --text-lg: 14px;
  --text-md: 12pt;
  --text-sm: 10pt;
  /* Primary buttons: light blue to light teal-chartreuse. */
  --button-start: #bfe1f8;
  --button-end: #c6f3d6;
  --button-start-hover: #a7d4f3;
  --button-end-hover: #b0eac4;
  --button-ink: #16344a;
  --button-border: rgb(52 118 150 / 35%);
  /* Header bars (title, nav, playback, background picker) share one shape. */
  --header-bar-height: 40px;
  --header-bar-radius: 14px;
  --header-bar-bg: rgb(247 249 235 / 90%);
  /* Page margin, widened to clear the notch on landscape phones. */
  --page-gutter: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  color-scheme: light;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: var(--text-md);
  background: #edf1de;
  color: #24322b;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  /* Keep iOS from enlarging text when a phone turns to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
:is(a, button, input, select):focus-visible { outline: 2px solid #3b6552; outline-offset: 3px; }

/* The synchronous preference bootstrap sets the holding colour before CSS is
   parsed and keeps the body out of the first paint. The chosen engine reveals
   the complete page only after it has rendered its first frame. */
html.is-background-booting[data-background-choice="compass-topography"] { background: #8bdcd2; }
html.is-background-booting[data-background-choice="nautical"] { background: #d9edf0; }
html.is-background-booting[data-background-choice="desert-terrain"] { background: #f0e5d0; }
html.is-background-booting body { visibility: hidden; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100vh;
  min-height: 100svh;
}

.site-header {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  pointer-events: none;
}

.header-center {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  gap: inherit;
}

.background-options {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.background-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--header-bar-height);
  padding: 0 12px;
  border-radius: var(--header-bar-radius);
  background: var(--header-bar-bg);
  font-size: var(--text-sm);
  pointer-events: auto;
}
.background-picker select {
  min-height: 32px;
  max-width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
/* iOS zooms into a focused form field whose text is smaller than 16px. */
@supports (-webkit-touch-callout: none) {
  .background-picker select { font-size: var(--text-md); }
}

.site-title {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--header-bar-height);
  margin: 0;
  padding: 0 16px;
  border-radius: var(--header-bar-radius);
  background: var(--header-bar-bg);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.2;
  white-space: nowrap;
}

.site-title-link {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.site-title-link:hover { background: #f7f9eb; }

.store-links {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.store-links a { display: grid; place-items: center; min-height: 44px; border-radius: 6px; }
.store-links img { display: block; height: 40px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 20px);
  height: var(--header-bar-height);
  padding: 0 12px;
  border-radius: var(--header-bar-radius);
  background: var(--header-bar-bg);
  pointer-events: auto;
}

.site-nav a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--header-bar-height) - 4px);
  padding: 0 12px;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .025em;
  text-decoration: none;
  border-radius: 6px;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 12px 5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current]::after { transform: scaleX(1); }

.site-nav a:focus-visible {
  outline: 2px solid #3b6552;
  outline-offset: 2px;
}

.animation-scene,
#topography-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.animation-scene {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 15% 20%, #f6f7e9, transparent 65%),
    linear-gradient(140deg, #edf1de, #c8dcc8);
}

/* Do not paint the fallback scene while the saved background is starting. */
.animation-scene:not(.is-background-ready) { opacity: 0; }

#topography-scene { z-index: 0; }

.compass-topography-sheet,
.special-animation-nautical-sheet,
.special-animation-topo-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: strict;
}

.compass-topography-stage-layer,
.compass-topography-paper,
.compass-topography-ink,
.special-animation-topo-stage,
.special-animation-topo-paper,
.special-animation-topo-ink,
.special-animation-nautical-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Phone toolbars change the visible height as they slide in and out, and the
   engines are not rebuilt for that (see backgrounds.js). The map is sized to
   the tallest viewport instead (100vh on phones), so it keeps covering the
   screen; any part behind a toolbar is simply out of view. */
#topography-scene { bottom: auto; height: 100vh; }
.compass-topography-sheet { width: 100% !important; height: 100% !important; }
/* Scale rather than stretch whenever a drawing and its box differ in shape. */
.compass-topography-paper,
.compass-topography-ink,
.special-animation-topo-ink,
.special-animation-nautical-chart { object-fit: cover; }

.transport {
  --transport-button-width: 28px;
  --transport-padding-x: 6px;
  --transport-gap: 6px;
  position: relative;
  flex-shrink: 0;
  color: #24322b;
  pointer-events: none;
  font-size: var(--text-sm);
}
.transport-controls {
  display: flex;
  align-items: center;
  gap: var(--transport-gap);
  height: var(--header-bar-height);
  padding: 0 var(--transport-padding-x);
  border-radius: var(--header-bar-radius);
  background: var(--header-bar-bg);
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0s;
}
.transport[data-expanded="false"] .transport-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s 220ms;
}
.transport .transport-reveal {
  position: absolute;
  top: 50%;
  right: calc(var(--transport-padding-x) + var(--transport-button-width));
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s 220ms;
}
.transport[data-expanded="false"] .transport-reveal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s;
}
/* Remove the number's 32px plus its 7px gap; retain the existing slider track. */
.transport-speed { display: flex; align-items: center; flex-shrink: 0; gap: 7px; width: 111px; padding-left: 6px; }
.transport-speed input {
  width: 56px;
  min-width: 0;
  height: 16px;
  flex: 1;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
/* Speed slider uses the button gradient in place of the old green accent color. */
.transport-speed input::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--button-start), var(--button-end));
}
.transport-speed input::-moz-range-track {
  height: 6px;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--button-start), var(--button-end));
}
.transport-speed input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 1px solid rgb(52 118 150 / 65%);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--button-start-hover), var(--button-end-hover));
  -webkit-appearance: none;
  appearance: none;
}
.transport-speed input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid rgb(52 118 150 / 65%);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--button-start-hover), var(--button-end-hover));
}
.transport-buttons { display: flex; align-items: center; }
.icon-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--transport-button-width, 28px);
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: inherit;
  background: transparent;
}
.icon-button:hover:not(:disabled) { background: rgb(52 118 150 / 14%); }
.transport button:focus { outline: none; }
.transport button:focus-visible { color: #17668e; }
.icon-button:disabled { opacity: .3; cursor: default; }
/* A 14.5px box with a 2.4-unit stroke draws each glyph about 9.9px tall, the
   cap height of the 10pt nav text. */
.icon-button svg { width: 14.5px; height: 14.5px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#background-play { background: linear-gradient(135deg, var(--button-start), var(--button-end)); }
#background-play[aria-pressed="true"] .play-icon,
#background-play[aria-pressed="false"] .pause-icon { display: none; }
/* Presentation mode (every page): the checkbox sits beside the background picker.
   While presenting, it fades out until hovered or focused, lingering for one
   second after the pointer leaves. Keep its layout space in the header. */
.presentation-toggle {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: var(--header-bar-height);
  border-radius: 6px;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 400ms ease 1s;
}
.presentation-toggle input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: #3f8fbf; }
body.is-presenting .presentation-toggle { opacity: 0; }
body.is-presenting .presentation-toggle:hover,
body.is-presenting .presentation-toggle:focus-within { opacity: 1; transition-delay: 0s; }
.site-header :is(.site-title, .site-nav, .transport, .background-picker, .store-links) { transition: opacity 400ms ease; }
body.is-presenting [data-presentation-hidden] { opacity: 0 !important; pointer-events: none !important; }
/* Content keeps its layout and scroll position while all UI is hidden. The
   mobile header stays fixed so the return control cannot scroll off screen. */
html.is-presenting { overflow: hidden; scrollbar-gutter: auto; }
body.is-presenting .site-header { position: fixed; width: var(--presentation-header-width, 100%); }
body.is-presenting.content-page::before { opacity: 0; }
body.is-presenting .content-page-background { opacity: 1; }
/* While presenting, a tap anywhere plays or pauses (backgrounds.js), so two quick
   taps must not zoom the page or flash a tap highlight. */
body.is-presenting { overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* About page */
.content-page-root {
  min-width: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.content-page {
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
  background: #dfe8d4;
}

.content-page::before {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(237 241 222 / 18%), rgb(237 241 222 / 42%) 34%, rgb(230 237 218 / 52%)),
    radial-gradient(circle at 50% 12%, transparent 0 18%, rgb(230 237 218 / 16%) 58%);
}

.content-page-background {
  opacity: .72;
}

.content-page-header {
  z-index: 20;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: #24322b;
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.about-main,
.site-footer {
  position: relative;
  z-index: 2;
}

.about-main {
  width: min(1180px, calc(100% - 2 * var(--page-gutter)));
  margin: 0 auto;
  padding: calc(var(--site-header-height, 110px) + 14px) 0 24px;
}

.about-hero,
.about-section,
.about-closing,
.about-toc {
  border: 1px solid rgb(255 255 244 / 70%);
  background: rgb(247 249 235 / 65%);
  box-shadow: 0 10px 30px rgb(31 54 40 / 7%);
}

.about-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 18px;
  overflow: hidden;
}

.eyebrow,
.section-number,
.card-kicker,
.note-card-label {
  margin: 0;
  color: #52705f;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The hero title and introduction fill the hero's width, like the label above them. */
.about-hero h1 {
  margin: 4px 0 6px;
  color: #1f3027;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.about-hero-lede {
  margin: 0;
  color: #3f5148;
  font-size: var(--text-md);
  line-height: 1.6;
}

/* Match the paragraph spacing used by the site's body text. */
#home .about-hero-lede + .about-hero-lede {
  margin-top: 10px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Every button uses the blue-to-mint gradient, so .button-link-primary, which
   marks a page's main action, needs no styles of its own. */
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Flex drops the space between an arrow and its words; the gap restores it. */
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--button-border);
  border-radius: 100px;
  color: var(--button-ink);
  background: linear-gradient(135deg, var(--button-start), var(--button-end));
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.button-link:hover {
  border-color: rgb(52 118 150 / 55%);
  background: linear-gradient(135deg, var(--button-start-hover), var(--button-end-hover));
  transform: translateY(-1px);
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid rgb(69 100 83 / 17%);
  border-radius: 18px;
  background: rgb(69 100 83 / 17%);
}

.fact-strip div {
  padding: 8px 12px;
  background: rgb(251 252 242 / 75%);
}

.fact-strip dt {
  color: #284b3a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.fact-strip dd {
  margin: 5px 0 0;
  color: #5a6a61;
  font-size: var(--text-sm);
  line-height: 1.35;
}

/* Three facts: the example spreadsheet and column pages. */
.fact-strip-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.about-toc {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 12px 0;
  padding: 4px;
  border-radius: 18px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.about-toc span {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #617067;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-toc a {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 10px;
  color: #33483d;
  font-size: var(--text-sm);
  text-decoration: none;
}

.about-toc a:hover { background: rgb(49 92 72 / 9%); }

.about-section {
  margin-top: 12px;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 18px;
  scroll-margin-top: calc(var(--site-header-height, 110px) + 20px);
}

.section-heading {
  margin-bottom: 10px;
}

.section-heading h2,
.about-closing h2 {
  margin: 4px 0 0;
  color: #203229;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  align-items: end;
  gap: clamp(12px, 2vw, 24px);
}

.section-heading-split > p {
  margin: 0 0 4px;
  color: #506158;
  font-size: var(--text-md);
  line-height: 1.6;
}

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr);
  gap: calc(clamp(12px, 2vw, 20px) + 4px) clamp(12px, 2vw, 20px);
  align-items: start;
}

.prose-large p {
  margin: 0 0 10px;
  color: #3c4e44;
  font-size: var(--text-md);
  line-height: 1.65;
}

/* Headings and lists used by the Privacy and Support pages. Text across the
   site fills the width of its card or column; nothing caps its line length. */
.prose-large h3 { margin: 14px 0 6px; font-size: var(--text-lg); }
.prose-large h3:first-child { margin-top: 0; }
.prose-large ul {
  margin: 0 0 10px;
  padding-left: 1.2em;
  color: #3c4e44;
  font-size: var(--text-md);
  line-height: 1.6;
}
.prose-large li + li { margin-top: 6px; }
.prose-large code { overflow-wrap: anywhere; }

.note-card {
  padding: 14px;
  border: 1px solid rgb(77 111 91 / 22%);
  border-radius: 20px;
  color: #3c5045;
  background: rgb(221 233 213 / 75%);
}

.note-card p:not(.note-card-label) {
  margin: 8px 0 0;
  line-height: 1.6;
}

.note-card p:nth-child(2) {
  color: #274737;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  line-height: 1.35;
}

.feature-grid {
  display: grid;
  gap: 12px 8px;
}

.feature-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.about-section-intro .feature-grid { margin-top: 16px; }

.perfect-for {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px 16px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgb(72 102 85 / 16%);
  border-radius: 18px;
  background: rgb(232 239 220 / 75%);
}

.perfect-for > span {
  color: #365443;
  font-size: var(--text-sm);
  font-weight: 750;
}

.perfect-for ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  color: #596a61;
  font-size: var(--text-sm);
  list-style: none;
}

.perfect-for li::before { content: "·"; margin-right: 7px; color: #60806e; }

.feature-card,
.mini-card {
  padding: 12px;
  border: 1px solid rgb(72 102 85 / 16%);
  border-radius: 14px;
  background: rgb(255 255 250 / 75%);
}

.feature-card h3,
.mini-card h4 {
  margin: 4px 0;
  color: #263d31;
  font-size: var(--text-lg);
  line-height: 1.3;
}

.feature-card p,
.mini-card p {
  margin: 0;
  color: #53645b;
  font-size: var(--text-md);
  line-height: 1.6;
}

/* Link cards on the Support landing page. */
.resource-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

a.resource-card:hover {
  border-color: rgb(60 91 74 / 40%);
  background: #fffef7;
  transform: translateY(-1px);
}

.resource-card-action {
  margin-top: auto;
  padding-top: 8px;
  color: #315c48;
  font-size: var(--text-sm);
  font-weight: 650;
}

.resource-card-muted { opacity: .72; }

.map-stack {
  display: grid;
  gap: 12px;
}

.map-card {
  display: grid;
  grid-template-columns: 44px minmax(190px, .7fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgb(74 103 87 / 18%);
  border-radius: 14px;
  background: rgb(255 255 250 / 75%);
}

.map-card-feature { background: rgb(228 236 210 / 75%); }
.map-card-content { background: rgb(217 232 219 / 75%); }

.map-index {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(42 75 58 / 25%);
  border-radius: 50%;
  color: #315a46;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
}

.map-card h3 {
  margin: 5px 0 2px;
  color: #20382c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
}

.map-question {
  margin: 0;
  color: #617168;
  font-size: var(--text-sm);
}

.map-card > p {
  margin: 0;
  color: #46594f;
  font-size: var(--text-md);
  line-height: 1.6;
}

.connection-card {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 18px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--button-border);
  border-radius: 14px;
  color: var(--button-ink);
  /* The primary button's blue-to-mint gradient. */
  background: linear-gradient(135deg, var(--button-start), var(--button-end));
}

/* A lighter shade of the button ink keeps the small label readable (about 5:1). */
.connection-card .card-kicker { color: #2f5e7a; }

.connection-card h3 {
  margin: 6px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
}

.trace-list p {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid rgb(22 52 74 / 14%);
  line-height: 1.6;
}

.trace-list p:first-child { padding-top: 0; }
.trace-list p:last-child { padding-bottom: 0; border-bottom: 0; }

.curation-panel {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
  gap: 12px 18px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgb(58 89 72 / 18%);
}

.curation-panel h3 {
  margin: 6px 0 10px;
  color: #243a2f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
}

.curation-panel > div > p:last-child {
  color: #52635a;
  line-height: 1.7;
}

.definition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(65 96 79 / 14%);
  border-radius: 16px;
  background: rgb(65 96 79 / 14%);
}

.definition-grid div {
  padding: 8px 10px;
  background: rgb(255 255 250 / 75%);
}

.definition-grid dt { color: #2f4c3d; font-size: var(--text-md); font-weight: 700; }
.definition-grid dd { margin: 4px 0 0; color: #65736b; font-size: var(--text-sm); line-height: 1.45; }
.panel-footnote { grid-column: 1 / -1; margin: 0; color: #52635a; font-size: var(--text-md); font-style: italic; }

.workflow-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.workflow-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgb(55 87 69 / 14%);
}

.workflow-list li:first-child { border-top: 1px solid rgb(55 87 69 / 14%); }
.workflow-list li > span { color: #6c8175; font-family: Georgia, "Times New Roman", serif; font-size: var(--text-lg); }
.workflow-list h3 { margin: 0 0 4px; color: #274034; font-size: var(--text-lg); }
.workflow-list p { margin: 0; color: #53645b; line-height: 1.6; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 8px;
}

.metric-card {
  padding: 12px 14px;
  border: 1px solid rgb(65 96 79 / 16%);
  border-radius: 14px;
  background: rgb(255 255 250 / 75%);
}

.metric-card h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgb(65 96 79 / 14%);
  color: #274034;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 400;
}

.metric-card dl { margin: 0; }
.metric-card dl div { margin-top: 7px; }
.metric-card dt { color: #365442; font-size: var(--text-md); font-weight: 750; }
.metric-card dd { margin: 4px 0 0; color: #5b6b62; font-size: var(--text-sm); line-height: 1.55; }

.explainer-list {
  display: grid;
  gap: 10px;
}

.explainer {
  overflow: hidden;
  border: 1px solid rgb(60 92 74 / 18%);
  border-radius: 12px;
  background: rgb(255 255 250 / 75%);
}

.explainer summary {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
}

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

.explainer summary::after {
  content: "+";
  grid-column: 3;
  color: #476653;
  font-size: var(--text-lg);
  font-weight: 300;
}

.explainer[open] summary::after { content: "−"; }
.explainer summary:hover { background: rgb(48 89 68 / 5%); }

.explainer-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(50 83 65 / 25%);
  font-size: var(--text-sm);
  border-radius: 50%;
  color: #315941;
  font-family: Georgia, "Times New Roman", serif;
}

.explainer summary strong {
  display: block;
  color: #263d31;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 400;
}

.explainer summary small {
  display: block;
  margin-top: 2px;
  color: #67766d;
  font-size: var(--text-sm);
}

.explainer-body {
  padding: 2px 14px 12px 56px;
  border-top: 1px solid rgb(62 94 76 / 12%);
}

.explainer-body > p,
.explainer-subsection > p,
.caution-card p,
.two-column-list p,
.automation-details p {
  color: #506158;
  line-height: 1.7;
}

.explainer-lede {
  color: #31493d !important;
  font-size: var(--text-md);
}

.explainer-body .feature-grid { margin: 14px 0; }
.explainer-body code { padding: 1px 5px; border-radius: 4px; background: rgb(45 79 62 / 8%); font-size: var(--text-sm); }

.explainer-subsection {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgb(62 94 76 / 14%);
  border-radius: 16px;
  background: rgb(229 237 216 / 75%);
}

.explainer-subsection h4,
.two-column-list h4,
.prompt-layout h4,
.automation-details h4 {
  margin: 0 0 8px;
  color: #2b4939;
  font-size: var(--text-md);
}

.explainer-subsection p:first-of-type { margin-top: 0; }
.explainer-subsection p:last-child { margin-bottom: 0; }

.compact-list {
  margin: 0;
  padding-left: 20px;
  color: #506158;
}

.compact-list li { margin: 8px 0; line-height: 1.55; }

.caution-card {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 4px solid #a48732;
  border-radius: 4px 14px 14px 4px;
  background: rgb(246 237 201 / 75%);
}

.caution-card strong { color: #5d4a19; }
.caution-card p { margin: 8px 0 0; }

.two-column-list,
.prompt-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 8px;
  margin-top: 14px;
}

.two-column-list > div,
.prompt-layout > div {
  padding: 10px 12px;
  border: 1px solid rgb(62 94 76 / 14%);
  border-radius: 16px;
}

.two-column-list ul,
.prompt-layout ul,
.prompt-layout ol {
  margin: 0;
  padding-left: 20px;
  color: #506158;
}

.two-column-list li,
.prompt-layout li { margin: 8px 0; line-height: 1.55; }
.fine-print { color: #6b786f !important; font-size: var(--text-sm); }

.automation-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid rgb(53 87 68 / 18%);
  border-radius: 16px;
  background: rgb(53 87 68 / 18%);
}

.automation-flow div {
  padding: 10px;
  background: rgb(245 248 235 / 75%);
}

.automation-flow span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 50%;
  color: #fff;
  background: #315c48;
  font-size: var(--text-sm);
}

.automation-flow strong { display: block; color: #2e493b; font-size: var(--text-md); }
.automation-flow small { display: block; margin-top: 6px; color: #637269; font-size: var(--text-sm); line-height: 1.5; }

.automation-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 8px;
}

.automation-details article {
  padding: 10px 12px;
  border: 1px solid rgb(62 94 76 / 13%);
  border-radius: 14px;
}

.automation-details p { margin: 0; font-size: var(--text-md); }

.inline-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.inline-flow span {
  padding: 8px 11px;
  border: 1px solid rgb(50 82 65 / 19%);
  border-radius: 8px;
  color: #385243;
  background: rgb(255 255 250 / 75%);
  font-size: var(--text-sm);
  font-weight: 700;
}

.inline-flow i { color: #718278; font-style: normal; }

/* Four columns, then two, then one: 12, 16 or 20 cards always fill whole rows. */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
}

.use-case-grid article {
  padding: 12px;
  border: 1px solid rgb(60 92 74 / 15%);
  border-radius: 14px;
  background: rgb(255 255 250 / 75%);
}

.use-case-grid article > span { color: #718278; font-family: Georgia, "Times New Roman", serif; }
.use-case-grid h3 { margin: 6px 0 4px; color: #294336; font-size: var(--text-lg); }
.use-case-grid p { margin: 0; color: #58685f; font-size: var(--text-md); line-height: 1.6; }

/* A card with details opens its popup from anywhere on the card: the button's
   ::after covers the whole card. */
.use-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.use-case-card:hover {
  border-color: rgb(60 91 74 / 40%);
  background: #fffef7;
  transform: translateY(-1px);
}

.use-case-card:has(.use-case-open:focus-visible) { outline: 2px solid #3b6552; outline-offset: 3px; }

.use-case-open {
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 0 0;
  border: 0;
  color: #315c48;
  background: none;
  font-size: var(--text-sm);
  font-weight: 650;
  text-align: left;
}

.use-case-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.use-case-open:focus-visible { outline: none; }

/* Popups (About page use cases). The page behind stays still while one is open. */
html:has(dialog.site-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }

.site-dialog {
  /* Room for the notch and the home indicator on phones. */
  --dialog-inset-x: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  --dialog-inset-y: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  /* Space kept above and below the popup; smaller on phones and short screens. */
  --dialog-margin-y: 48px;
  width: min(860px, calc(100% - 32px - var(--dialog-inset-x)));
  max-width: none;
  max-height: calc(100vh - var(--dialog-margin-y) - var(--dialog-inset-y));
  max-height: calc(100svh - var(--dialog-margin-y) - var(--dialog-inset-y));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 244 / 80%);
  border-radius: 18px;
  color: #24322b;
  background: rgb(250 251 243 / 97%);
  box-shadow: 0 30px 100px rgb(12 28 19 / 28%);
}

.site-dialog::backdrop {
  background: rgb(23 40 31 / 45%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.site-dialog-frame {
  display: flex;
  flex-direction: column;
  /* The popup's height less its 1px top and bottom borders. */
  max-height: calc(100vh - var(--dialog-margin-y) - var(--dialog-inset-y) - 2px);
  max-height: calc(100svh - var(--dialog-margin-y) - var(--dialog-inset-y) - 2px);
}

.site-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgb(62 94 76 / 14%);
}

.site-dialog-header h2 {
  margin: 4px 0 0;
  color: #1f3027;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
}

/* The close button is round, in the same gradient as every other button. */
.site-dialog-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1px solid var(--button-border);
  border-radius: 50%;
  color: var(--button-ink);
  background: linear-gradient(135deg, var(--button-start), var(--button-end));
  font-size: 22px;
  line-height: 1;
}

.site-dialog-close:hover { background: linear-gradient(135deg, var(--button-start-hover), var(--button-end-hover)); }

.site-dialog-body {
  flex: 1;
  min-height: 0;
  padding: 14px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-dialog-lede {
  margin: 0;
  color: #31493d;
  font-size: var(--text-md);
  line-height: 1.65;
}

.site-dialog-section {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgb(62 94 76 / 14%);
  border-radius: 16px;
  background: rgb(229 237 216 / 75%);
}

.site-dialog h3 {
  margin: 0 0 8px;
  color: #2b4939;
  font-size: var(--text-md);
}

.site-dialog-section p {
  margin: 0 0 8px;
  color: #506158;
  line-height: 1.7;
}

.site-dialog-section p:last-child { margin-bottom: 0; }
.site-dialog-body a:not([class]) { color: #2f5a45; text-underline-offset: 2px; }
.site-dialog .two-column-list > section {
  padding: 10px 12px;
  border: 1px solid rgb(62 94 76 / 14%);
  border-radius: 16px;
  background: rgb(255 255 250 / 75%);
}

.site-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgb(62 94 76 / 14%);
}

.site-dialog-footer [data-dialog-step="1"] { margin-right: auto; }

.about-closing {
  margin-top: 12px;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 18px;
  text-align: center;
}

.about-closing h2 { margin-inline: auto; }
.about-closing > p:not(.eyebrow) { margin: 8px 0 0; color: #596a60; }
.about-closing .hero-actions { justify-content: center; }

.site-footer {
  width: min(1180px, calc(100% - 2 * var(--page-gutter)));
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding: 0 8px max(18px, env(safe-area-inset-bottom));
  color: #4c6055;
  font-size: var(--text-sm);
}

/* Text links inside page content use the site green instead of browser blue. */
.about-main :is(p, li) a:not([class]) { color: #2f5a45; text-underline-offset: 2px; }
.about-main :is(p, li) a:not([class]):hover { color: #1f3f30; }

/* Headings are capped at 16px, no larger than body text, so serif headings use
   bold weight to stay distinct from the body copy. */
.about-hero h1,
.section-heading h2,
.about-closing h2,
.map-card h3,
.connection-card h3,
.curation-panel h3,
.metric-card h3,
.explainer summary strong,
.help-group-heading,
.screenshots-main h1 { font-weight: 700; }

.site-footer p { margin: 0; }
.site-footer a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 1700px) {
  .site-header { padding-inline: max(20px, env(safe-area-inset-left)); gap: 8px; }
  .site-title { padding-inline: 12px; }
  .site-nav { gap: 8px; padding-inline: 12px; }
  .site-nav a { padding-inline: 10px; }
}
@media (max-width: 1400px) {
  .transport-speed { width: 75px; }
  .speed-label { display: none; }
}
@media (max-width: 1560px) {
  .site-header { padding-inline: max(16px, env(safe-area-inset-left)); }
  .store-links { gap: 10px; }
  .store-links img { height: 30px; }
  .background-picker { padding-inline: 8px; }
  .background-picker > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}
@media (max-width: 1280px) {
  .site-nav { gap: 4px; padding-inline: 8px; }
  .site-nav a { padding-inline: 8px; }
  .transport { --transport-padding-x: 4px; --transport-gap: 4px; }
}
@media (max-width: 1180px) {
  .site-header { justify-content: center; }
  .header-center { display: contents; }
}
@media (max-width: 1100px) {
  .use-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fact-strip { grid-template-columns: repeat(2, 1fr); }
  .fact-strip-three div:last-child { grid-column: 1 / -1; }
  .feature-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading-split,
  .prose-grid,
  .curation-panel { grid-template-columns: 1fr; }
  .section-heading-split { align-items: start; }
  .map-card { grid-template-columns: 58px 1fr; }
  .map-card > p { grid-column: 2; }
  .connection-card { grid-template-columns: 1fr; gap: 26px; }
  .definition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-flow div { min-height: 145px; }
}
@media (max-width: 700px) {
  .site-header { padding: max(12px, env(safe-area-inset-top)) 8px 0; gap: 8px 6px; }
  .background-picker { padding-inline: 4px; }
  .site-title { padding-inline: 14px; }
  .store-links { gap: 10px; }
  .site-nav { gap: 2px; padding-inline: 4px; }
  .site-nav a { padding-inline: 4px; }
  .transport { --transport-padding-x: 2px; --transport-gap: 2px; }
  .transport-speed { width: 69px; }
  .content-page .store-links { max-width: calc(100vw - 16px); }
  .about-main {
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px);
  }
  .about-hero,
  .about-section,
  .about-closing { border-radius: 16px; }
  .about-hero { padding: 14px 12px; }
  .about-hero h1 { overflow-wrap: break-word; }
  .about-hero .eyebrow { line-height: 1.65; }
  .about-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .fact-strip { margin-top: 12px; }
  .fact-strip div { padding: 8px 10px; }
  .about-toc { border-radius: 14px; }
  .about-section { padding: 14px 12px; }
  .feature-grid-three,
  .metric-grid,
  .use-case-grid,
  .two-column-list,
  .prompt-layout,
  .automation-details { grid-template-columns: 1fr; }
  .perfect-for { grid-template-columns: 1fr; }
  .map-card { grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; }
  .map-card > p { grid-column: 1 / -1; }
  .connection-card { padding: 12px; }
  .definition-grid { grid-template-columns: 1fr; }
  .workflow-list li { grid-template-columns: 32px 1fr; gap: 8px; }
  .metric-card { padding: 10px 12px; }
  .explainer summary { grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 12px; }
  .explainer summary small { line-height: 1.45; }
  .explainer-body { padding: 2px 12px 10px; }
  .automation-flow { grid-template-columns: 1fr; }
  .automation-flow div { min-height: 0; }
  .inline-flow { align-items: stretch; flex-direction: column; }
  .inline-flow i { align-self: center; transform: rotate(90deg); }
  .site-footer { width: calc(100% - 28px); flex-direction: column; align-items: center; text-align: center; }
  .site-footer a { display: inline-block; padding-block: 6px; }
  .site-dialog {
    --dialog-margin-y: 16px;
    width: calc(100% - 16px - var(--dialog-inset-x));
    border-radius: 16px;
  }
  .site-dialog-header { padding: 14px 14px 10px; }
  .site-dialog-body { padding: 12px 14px 14px; }
  .site-dialog-footer { padding: 10px 14px; }
  .site-dialog-footer .button-link { flex: 1 1 auto; }
}
/* Short screens, such as a phone held sideways: the whole popup scrolls as one
   page under its pinned title bar, so the text is not squeezed between a fixed
   header and footer. Previous, Next and Close follow the text. */
@media (max-height: 500px) {
  .site-dialog { --dialog-margin-y: 16px; }
  .site-dialog-frame { overflow-y: auto; overscroll-behavior: contain; }
  .site-dialog-body { flex: none; overflow: visible; }
  .site-dialog-header {
    position: sticky;
    z-index: 1;
    top: 0;
    align-items: center;
    padding: 8px 14px 6px;
    background: rgb(250 251 243 / 97%);
  }
  .site-dialog-header > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .site-dialog-header h2 { margin: 0; }
}
/* Touch screens: buttons and links grow to about a fingertip (44px tall). The
   header's playback buttons and speed slider get a larger touch area without
   changing how the header looks or wraps. */
@media (pointer: coarse) {
  .button-link { min-height: 44px; }
  .site-dialog-close { width: 40px; height: 40px; }
  .about-toc a { padding-block: 12px; }
  .icon-button::after { content: ""; position: absolute; inset: -8px 0; }
  .icon-button:not(.transport-reveal) { position: relative; }
  .transport-speed input { height: 32px; }
  .background-picker select { min-height: 36px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-height: 540px) and (min-width: 600px) {
  .site-header { padding-top: 8px; }
}
/* A header wrapped onto several rows would cover a third of a phone screen,
   so content pages let it scroll away instead of floating over the text. */
@media (max-width: 700px), (max-height: 540px) and (max-width: 1180px) {
  .content-page-header { position: absolute; }
  .about-section { scroll-margin-top: 12px; }
}
@media (max-width: 400px) {
  /* A shorter speed track lets playback and the picker share a row at 360px. */
  .site-header { column-gap: 4px; }
  .transport-speed { width: 58px; }
  /* Popup text keeps more of a small screen's width. */
  .site-dialog-body { padding-inline: 10px; }
  .site-dialog-section { padding: 10px; }
}
@media (max-width: 360px) {
  .site-nav { gap: 0; padding-inline: 2px; }
  .site-nav a { padding-inline: 2px; letter-spacing: 0; }
  .store-links { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after { transition: none; }
  .content-page-root { scroll-behavior: auto; }
  .button-link, .skip-link, .resource-card, .use-case-card { transition: none; }
  .site-header :is(.site-title, .site-nav, .transport, .background-picker, .store-links) { transition: none; }
  .presentation-toggle { transition: opacity 0s linear 1s; }
  .transport-controls, .transport .transport-reveal { transition: none; }
}