/* GP Passes and GPKit: one stylesheet, no framework, no external requests. The "Deep space" tokens of gpconf-site's
   site.css (design-direction.md). Every colour is a token with a value in each scheme; no rule below names a colour.
   Green, amber and red are kept for outcomes and visibility states only. */
:root {
  --bg: #f7f7fc; --bg-alt: #ffffff; --fg: #14152b; --fg-strong: #0b0c1d; --fg-muted: #565a78;
  --line: rgba(20, 21, 60, .13); --rule-strong: rgba(20, 21, 60, .6);
  --accent: #4a50d8; --accent-fg: #ffffff; --link: #3d44c9;
  --ok: #177a48; --warn: #8a5a00; --bad: #c2372d; --info-bg: rgba(74, 80, 216, .1);
  --code-bg: rgba(20, 21, 60, .06); --header-bg: rgba(247, 247, 252, .88);
  --glow-1: rgba(120, 128, 255, .2); --glow-2: rgba(150, 120, 255, .12);
  --pending-bg: rgba(123, 63, 224, .08); --pending-line: rgba(123, 63, 224, .55); --pending-fg: #5a2db0;
  --mark: #4a50d8;
  --rule: rgba(20, 21, 60, .28); --accent-2: #7b3fe0; --grad-a: #4a50d8; --grad-b: #8a3fe0; --btn-fg: #ffffff;
  --pane-a: #ffffff; --pane-b: #ffffff; --shadow: rgba(74, 80, 216, .28); --line-glow: none; --cell-bg: rgba(74, 80, 216, .09); --cell-fg: #2a2e8c;
  --sky-a: #eef0ff; --sky-b: #dfe2fb; --phone-edge: #1b1d2e;
  color-scheme: light;
  --radius: 10px; --maxw: 72rem; --measure: 42rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #05060b; --bg-alt: rgba(255, 255, 255, .05); --fg: #eceefb; --fg-strong: #ffffff; --fg-muted: #a1a7c0;
    --line: rgba(255, 255, 255, .14); --rule-strong: rgba(255, 255, 255, .5);
    --accent: #9099ff; --accent-fg: #0b0c18; --link: #aab1ff;
    --ok: #58d6a1; --warn: #f2c14e; --bad: #ff7d7d; --info-bg: rgba(144, 153, 255, .13);
    --code-bg: rgba(255, 255, 255, .07); --header-bg: rgba(5, 6, 11, .82);
    --glow-1: rgba(78, 72, 200, .36); --glow-2: rgba(40, 62, 160, .24);
    --pending-bg: rgba(185, 140, 255, .1); --pending-line: rgba(185, 140, 255, .6); --pending-fg: #d2b6ff;
    --mark: #9099ff;
    --rule: rgba(255, 255, 255, .24); --accent-2: #b98cff; --grad-a: #8f98ff; --grad-b: #c58cff; --btn-fg: #0b0c18;
    --pane-a: rgba(255, 255, 255, .07); --pane-b: rgba(255, 255, 255, .02); --shadow: rgba(110, 100, 255, .55); --line-glow: drop-shadow(0 0 4px rgba(150, 140, 255, .5)); --cell-bg: rgba(144, 153, 255, .13); --cell-fg: #dcd8ff;
    --sky-a: #141a3f; --sky-b: #070914; --phone-edge: #2a2d45;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #05060b; --bg-alt: rgba(255, 255, 255, .05); --fg: #eceefb; --fg-strong: #ffffff; --fg-muted: #a1a7c0;
  --line: rgba(255, 255, 255, .14); --rule-strong: rgba(255, 255, 255, .5);
  --accent: #9099ff; --accent-fg: #0b0c18; --link: #aab1ff;
  --ok: #58d6a1; --warn: #f2c14e; --bad: #ff7d7d; --info-bg: rgba(144, 153, 255, .13);
  --code-bg: rgba(255, 255, 255, .07); --header-bg: rgba(5, 6, 11, .82);
  --glow-1: rgba(78, 72, 200, .36); --glow-2: rgba(40, 62, 160, .24);
  --pending-bg: rgba(185, 140, 255, .1); --pending-line: rgba(185, 140, 255, .6); --pending-fg: #d2b6ff;
  --mark: #9099ff;
  --rule: rgba(255, 255, 255, .24); --accent-2: #b98cff; --grad-a: #8f98ff; --grad-b: #c58cff; --btn-fg: #0b0c18;
  --pane-a: rgba(255, 255, 255, .07); --pane-b: rgba(255, 255, 255, .02); --shadow: rgba(110, 100, 255, .55); --line-glow: drop-shadow(0 0 4px rgba(150, 140, 255, .5)); --cell-bg: rgba(144, 153, 255, .13); --cell-fg: #dcd8ff;
  --sky-a: #141a3f; --sky-b: #070914; --phone-edge: #2a2d45;
  color-scheme: dark;
}
/* both sites share one accent, the mark's indigo (R-11): #4a50d8 in light, #9099ff in dark */

/* Space Grotesk, headings only, served from this site (SIL OFL 1.1, its text beside the file). The app's own file. */
@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-latin-500-700.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: optional; }

* { box-sizing: border-box; }
html { font-family: var(--font); line-height: 1.6; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--fg); font-size: 1.125rem; overflow-wrap: break-word;
  background: radial-gradient(70rem 40rem at 85% -12rem, var(--glow-1), transparent 62%) no-repeat,
              radial-gradient(48rem 30rem at -8rem 6rem, var(--glow-2), transparent 60%) no-repeat, var(--bg); }
:root[data-site="gpkit"] body { font-size: 1.0625rem; }
@media (max-width: 40rem) { body { font-size: 1.0625rem; } }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-fg); padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
[id] { scroll-margin-top: 6rem; }

.preview-banner { font-size: .8125rem; text-align: center; padding: .35rem 1rem; color: var(--pending-fg); background: var(--pending-bg); border-bottom: 1px dashed var(--pending-line); }

.site-header { border-bottom: 1px solid var(--line); background: var(--header-bg); position: sticky; top: 0; z-index: 20; }
@media (min-width: 40.01rem) { .site-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.header-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; padding: .25rem 1rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 700; text-decoration: none; color: var(--fg); font-size: 1.125rem; letter-spacing: -.02em; }
/* the shared mark of GP Passes, GPKit and gpconf (R-10, R-11): the indigo ring and dot, #4a50d8 in light and #9099ff
   in dark, as the app icon's dark variant. The same drawing as favicon.svg. */
.brand-mark { width: 1.35em; height: 1.35em; flex: none; margin-right: .45em; color: var(--mark); }
.site-nav { order: 3; width: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 1rem; }
.site-nav li { margin: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-muted); text-decoration: none; font-size: .9375rem; }
.site-nav a:hover { color: var(--fg); }
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .4em; }
.theme-toggle { margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); color: var(--fg); cursor: pointer; font-size: 1.1rem; line-height: 1; }
@media (min-width: 64rem) { .header-row { flex-wrap: nowrap; } .site-nav { order: 0; width: auto; } .theme-toggle { order: 1; } }
@media (max-width: 40rem) { .site-header { position: static; } }

main.wrap { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) 1rem 4rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; color: var(--fg-strong); }
h1 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 3.25rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.025em; margin: 3.25rem 0 1rem; }
h3 { font-size: clamp(1.1875rem, 1rem + .6vw, 1.3125rem); line-height: 1.3; letter-spacing: -.015em; margin: 2.25rem 0 .6rem; }
p, ul, ol, dl { margin: .75rem 0 1rem; }
li { margin: .3rem 0; }
main :is(p, ul, ol, dl, h1, h2, h3, blockquote, .pending) { max-width: var(--measure); }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
code { font-family: var(--mono); font-size: .9em; background: var(--code-bg); padding: .1em .3em; border-radius: 4px; }
pre { font-family: var(--mono); font-size: .875rem; line-height: 1.5; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; max-width: 100%; }
pre code { background: none; padding: 0; font-size: inherit; }
.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { font-family: var(--display); font-weight: 600; }
nav:not(.site-nav) { color: var(--fg-muted); font-size: .9375rem; }

/* claim markers: a small link to the page's Sources list */
sup.claim { font-size: .65em; line-height: 0; margin-left: .1em; white-space: nowrap; }
sup.claim a { text-decoration: none; color: var(--fg-muted); font-family: var(--mono); }
sup.claim a:hover { color: var(--link); text-decoration: underline; }
sup.claim.unchecked a { color: var(--pending-fg); }
sup.claim + sup.claim { margin-left: .35em; }

/* Pending: what the build, a run or an answer still has to fill. Never a results colour. */
.pending { border: 1.5px dashed var(--pending-line); background: var(--pending-bg); color: var(--pending-fg); border-radius: var(--radius); padding: .75rem 1rem; margin: 1.25rem 0; font-size: .9375rem; }
span.pending { display: inline; padding: .05rem .4rem; margin: 0; border-radius: 6px; border-width: 1px; font-size: .875em; }
pre span.pending { font-family: var(--font); }
.pending-tag, .pending > b:first-child { font-family: var(--display); font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.pending-tag { color: var(--pending-fg); border: 1px dashed var(--pending-line); border-radius: 5px; padding: 0 .35rem; }

/* screenshots: the light shot in light, the dark shot in dark */
figure.shot { margin: 1.5rem 0; max-width: 22rem; }
figure.shot img, figure.shot picture { width: 100%; height: auto; display: block; border-radius: 1.4rem; }
figure.shot img { border: 1px solid var(--line); }
figure.shot figcaption { font-size: .875rem; color: var(--fg-muted); margin-top: .5rem; }
.shot-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot-dark { display: block !important; } :root:not([data-theme="light"]) .shot-light { display: none !important; } }
:root[data-theme="dark"] .shot-dark { display: block !important; }
:root[data-theme="dark"] .shot-light { display: none !important; }

/* diagrams: drawn inline, coloured by the tokens, so they follow the theme */
svg.diagram { display: block; width: 100%; max-width: 30rem; height: auto; margin: 1.5rem 0; font-family: var(--mono); font-size: 12.5px; }
svg.diagram text { fill: var(--fg); }
svg.diagram .d-small { fill: var(--fg-muted); font-size: 11px; }
svg.diagram .d-box { fill: var(--bg-alt); stroke: var(--line); stroke-width: 1.25; }
svg.diagram .d-key { stroke: var(--accent); stroke-width: 1.75; }
svg.diagram .d-quiet { stroke-dasharray: 4 3; }
svg.diagram .d-arrow { fill: none; stroke: var(--fg-muted); stroke-width: 1.25; }
svg.diagram .d-headfill { fill: var(--fg-muted); }

.sources { font-size: .875rem; color: var(--fg-muted); }
.sources li { margin: .4rem 0; }
.sources code { font-size: .85em; }
.status-unchecked { color: var(--pending-fg); font-weight: 600; }

.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0 2.5rem; font-size: .9375rem; color: var(--fg-muted); }
.site-footer p { max-width: var(--measure); margin: .4rem 0; }

/* ===== The gpconf look (gpconf-site's site.css, S-090): a large display headline whose second line is in the
   accents' gradient, pills, a glowing card, gradient buttons. Every figure below is built as its last frame in real
   text and drawing; motion.js plays it once, when it is first seen, and only where motion is allowed (html.motion) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main .hero h1 { font-size: clamp(2.375rem, 1.1rem + 5.2vw, 4.5rem); line-height: 1.02; letter-spacing: -.035em; max-width: 60rem; }
.hero h1 .q { display: block; color: var(--accent); background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
.lede { font-size: clamp(1.1875rem, 1rem + .9vw, 1.375rem); line-height: 1.5; color: var(--fg-muted); }
main .hero .lede { margin: 0 0 1.5rem; max-width: 44rem; }
main .status { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0 0 1.5rem; max-width: none; padding: 0; list-style: none; font-size: .8125rem; color: var(--fg-muted); }
.status li { margin: 0; padding: .2rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); }
.status b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.status sup.claim { display: none; } /* pills stay clean; their sources are in the page's list */
@media (max-width: 40rem) { main .status { gap: .3rem .35rem; font-size: .75rem; } .status li { padding: .12rem .55rem; } }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; } .hero-grid h1 { font-size: clamp(2.375rem, 1rem + 3.6vw, 4rem); } }
.hero-text .pending { margin-top: 1.25rem; }
.phone-fig { margin: 0; }
.phone-fig .fig-note { text-align: center; max-width: 18rem; margin: 1rem auto 0; }
.pane { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); box-shadow: 0 2.5rem 5rem -3rem var(--shadow); padding: 1.1rem 1.1rem .9rem; margin: 0; }
.pane figcaption, .fig-note { font-size: .875rem; color: var(--fg-muted); margin: .6rem 0 0; max-width: none; }
main .cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin: 1.5rem 0 0; max-width: none; }
.cta a.primary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); color: var(--btn-fg); font-family: var(--display); font-weight: 600; text-decoration: none; }
.cta a.primary:hover { filter: brightness(1.1); }
.cta .pending { margin: 0; }
.replay { display: none; min-height: 44px; padding: 0 .25rem; border: 0; background: none; color: var(--link); font: inherit; font-size: .875rem; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
html.motion .replay { display: inline-flex; align-items: center; }
.kicker { font-family: var(--display); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .4rem; }
section.band { margin-top: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
section.band > h2 { margin-top: 0; }

/* the sky view (site A): the dome above you, as the app draws it (A-19) */
.sky svg { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 auto; overflow: visible; }
.sky .dome { fill: url(#sky-fill); stroke: var(--rule); }
.sky .ring { fill: none; stroke: var(--line); stroke-dasharray: 3 4; }
.sky .axis { stroke: var(--line); }
.sky .compass, .sky .ring-label { font-family: var(--display); font-size: 12px; fill: var(--fg-muted); }
.sky .compass { font-weight: 600; fill: var(--fg); }
.sky .ghost { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 2 5; }
.sky .track { fill: none; stroke: url(#sky-track); stroke-width: 3.5; stroke-linecap: round; filter: var(--line-glow); }
.sky .sat { fill: var(--fg-strong); stroke: var(--accent); stroke-width: 3; }
.sky .halo { fill: var(--accent); opacity: .22; }
.sky .ev circle { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.sky .ev text { font-family: var(--display); font-size: 12.5px; font-weight: 600; fill: var(--fg-strong); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.sky .ev .sub { font-family: var(--font); font-weight: 400; font-size: 11.5px; fill: var(--fg-muted); }
.sky stop.a { stop-color: var(--sky-a); } .sky stop.b { stop-color: var(--sky-b); }
.sky stop.t1 { stop-color: var(--grad-a); } .sky stop.t2 { stop-color: var(--grad-b); }

/* "from data to your sky": four steps, each a small figure */
.story { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; max-width: none; counter-reset: step; }
@media (min-width: 48rem) { .story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .story { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.story > li { margin: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); counter-increment: step; position: relative; }
.story h3 { margin: .2rem 0 .5rem; font-size: 1.125rem; }
.story h3::before { content: counter(step); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .5rem; border-radius: 999px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); color: var(--btn-fg); font-size: .8125rem; vertical-align: .1em; }
.story p { font-size: .9375rem; margin: .5rem 0 0; }
.story .viz { height: 7.5rem; display: grid; place-items: center; margin: 0 0 .25rem; }
.story svg { display: block; width: auto; height: 7rem; max-width: 100%; overflow: visible; }
.tle-mini { margin: 0; width: 100%; font-family: var(--mono); font-size: clamp(.5rem, 1.6vw, .62rem); line-height: 1.7; white-space: pre; overflow: hidden; color: var(--fg-muted); background: var(--code-bg); border-radius: 8px; padding: .6rem; }
@media (min-width: 72rem) { .tle-mini { font-size: .5rem; } }
.tle-mini b { color: var(--cell-fg); background: var(--cell-bg); font-weight: 600; border-radius: 3px; }
.mini-orbit .earth { fill: var(--cell-bg); stroke: var(--accent); stroke-width: 1.5; }
.mini-orbit .orbit { fill: none; stroke: var(--rule); stroke-dasharray: 3 4; }
.mini-orbit .sat, .mini-sky .sat { fill: var(--accent); }
.events-mini { width: 100%; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.events-mini li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .5rem; padding: .3rem 0; margin: 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.events-mini li:last-child { border-bottom: 0; }
.events-mini b { font-family: var(--display); }
.events-mini span:last-child { color: var(--fg-muted); }
.mini-sky .dome { fill: var(--cell-bg); stroke: var(--rule); }
.mini-sky .track { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.mini-sky text { font-family: var(--display); font-size: 9px; font-weight: 600; fill: var(--fg-muted); }

/* the phone: the app's own screens, one after the other */
.phone-band { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .phone-band { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 4rem; } }
.phone-points li { font-size: 1rem; color: var(--fg-muted); }
.phone-points b { margin-bottom: .15rem; }
.phone { position: relative; width: min(16rem, 72vw); margin: 0 auto; aspect-ratio: 300 / 652; border: 9px solid var(--phone-edge); border-radius: 2.6rem; background: var(--phone-edge); box-shadow: 0 2.5rem 5rem -2.5rem var(--shadow); overflow: hidden; }
.phone::before { content: ""; position: absolute; z-index: 2; top: .45rem; left: 50%; width: 32%; height: 1.1rem; margin-left: -16%; border-radius: 999px; background: var(--phone-edge); }
.phone picture, .phone img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 1.9rem; }
.phone .second { opacity: 0; }
.phone-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.phone-points li { margin: 0; padding-left: 1rem; border-left: 2px solid var(--accent); }
.phone-points b { display: block; font-family: var(--display); font-size: 1.125rem; color: var(--fg-strong); }

/* tiles: an icon, a few words, and the way to the detail */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 1.5rem 0 0; padding: 0; list-style: none; max-width: none; }
.tiles > li { margin: 0; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); display: flex; flex-direction: column; }
.tiles h3 { margin: .6rem 0 .35rem; font-size: 1.125rem; }
.tiles p { font-size: .9375rem; margin: 0 0 .6rem; flex: 1; }
.tiles .more { font-size: .875rem; }
.icon { width: 2.5rem; height: 2.5rem; padding: .45rem; border-radius: 12px; background: var(--cell-bg); color: var(--accent); }
.icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* site B's figure: a TLE's catalog field read into an Int, then propagated (K-23, K-24) */
.a5card { display: grid; gap: .9rem; align-items: center; }
@media (min-width: 46rem) { .a5card { grid-template-columns: auto auto auto auto minmax(0, 1fr); } }
.pane.a5 { margin-top: 2.25rem; padding: 1.4rem 1.4rem 1rem; }
.a5step { text-align: center; }
.a5step .lab { display: block; font-size: .75rem; color: var(--fg-muted); margin: 0 0 .35rem; font-family: var(--mono); }
.a5cells { display: inline-grid; grid-template-columns: repeat(5, 2.2rem); }
.a5cells span { height: 2.9rem; line-height: 2.8rem; border: 1px solid var(--rule); margin-right: -1px; font-family: var(--mono); font-size: 1.6rem; font-weight: 600; color: var(--cell-fg); background: var(--cell-bg); }
.a5cells span.lead { color: var(--btn-fg); background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); border-color: transparent; }
.a5int { font-family: var(--display); font-size: clamp(2.2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 600; letter-spacing: -.02em; color: var(--fg-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.a5int .from-a { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.a5int-type { display: block; font-family: var(--mono); font-size: .75rem; color: var(--fg-muted); margin-top: .2rem; }
.a5arrow { color: var(--fg-muted); font-size: 1.4rem; text-align: center; }
@media (max-width: 45.99rem) { .a5arrow { transform: rotate(90deg); } }
.a5orbit svg { width: 100%; max-width: 13rem; height: auto; display: block; margin: 0 auto; overflow: visible; }
.a5orbit .earth { fill: var(--cell-bg); stroke: var(--accent); stroke-width: 1.5; }
.a5orbit .orbit { fill: none; stroke: url(#a5-orbit-grad); stroke-width: 2.5; filter: var(--line-glow); }
.a5orbit .sat { fill: var(--fg-strong); stroke: var(--accent); stroke-width: 2.5; }
.a5orbit .eq { fill: none; stroke: var(--line); stroke-dasharray: 3 4; }
.a5orbit stop.t1 { stop-color: var(--grad-a); } .a5orbit stop.t2 { stop-color: var(--grad-b); }

/* code that types itself, and the words it prints */
.typed { margin: 0; }
.typed pre { margin: 0; border-radius: 14px 14px 0 0; }
.typed .tl { display: inline-block; white-space: pre; }
.typed .out { margin: 0; padding: .75rem 1rem; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; font-family: var(--mono); font-size: .875rem; color: var(--fg-strong); background: var(--bg-alt); overflow-x: auto; white-space: pre; max-width: none; }
.typed .out::before { content: "› "; color: var(--fg-muted); }

/* key figures as large numbers */
.counters { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: none; }
.counters li { margin: 0; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); }
.counters .n { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.03em; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.counters .n small { font-size: .5em; letter-spacing: 0; color: var(--accent); margin-left: .15em; }
.counters .what { display: block; margin-top: .35rem; font-size: .9375rem; }
.counters .vs { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--fg-muted); }

/* figures and grids take the page's width, not the text's measure (that rule names `main`, so these do too) */
main :is(ol.story, ul.tiles, ul.counters, ul.status, .cta) { max-width: none; }

/* the flow diagram's arrows carry data while it's on screen */
svg.diagram .d-flow { stroke: var(--accent); stroke-width: 1.75; stroke-dasharray: 2 6; opacity: 0; }

/* ===== motion, only where it is allowed (motion.js sets html.motion) ===== */
@media (prefers-reduced-motion: no-preference) {
  html.settle :is(.hero .hero-grid, .hero .lede, .hero .status) { animation: settle .8s cubic-bezier(.16, 1, .3, 1) both; }
  html.settle .hero .hero-grid { animation-delay: .12s; }
  html.motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
  html.motion .reveal.in { opacity: 1; transform: none; }
  html.motion .reveal-group > .reveal:nth-child(2) { transition-delay: .1s; }
  html.motion .reveal-group > .reveal:nth-child(3) { transition-delay: .2s; }
  html.motion .reveal-group > .reveal:nth-child(4) { transition-delay: .3s; }
  html.motion .reveal-group > .reveal:nth-child(n+5) { transition-delay: .4s; }
  html.motion .in .mini-orbit .sat { animation: orbit 5s linear infinite; transform-origin: 60px 60px; }
  html.motion .in .events-mini li { animation: settle .6s cubic-bezier(.16, 1, .3, 1) both; }
  html.motion .in .events-mini li:nth-child(2) { animation-delay: .35s; } html.motion .in .events-mini li:nth-child(3) { animation-delay: .7s; }
  html.motion .phone.in { animation: float 7s ease-in-out infinite; }
  html.motion .phone.in .second { animation: crossfade 10s ease-in-out infinite; }
  html.motion .in .icon svg { animation: nudge 1.4s cubic-bezier(.16, 1, .3, 1) .3s both; }
  html.motion .a5orbit.in .sat { animation: orbit 6s linear infinite; transform-origin: 100px 70px; }
  html.motion svg.diagram.in .d-flow { opacity: .9; animation: flow 1.2s linear infinite; }
}
/* waiting to be seen (motion.js sets html.armed): each figure's first frame. On screens only, so a page printed
   before a figure was seen prints its last frame */
@media screen and (prefers-reduced-motion: no-preference) {
  html.armed .sky .track { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.armed .sky :is(.ev, .sat-g) { opacity: 0; }
  html.armed [data-fig="a5"] :is(.a5cells span, .from-a, .rest, .a5orbit) { opacity: 0; }
  html.armed .typed .tl { clip-path: inset(0 100% 0 0); }
  html.armed .typed .out { opacity: 0; }
}
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes crossfade { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nudge { 0% { transform: scale(.8) rotate(-8deg); opacity: .4; } 60% { transform: scale(1.06) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@keyframes flow { to { stroke-dashoffset: -16; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }