/* The bare embed frame (no family.css) is dark. A demo page, the builder included, takes the family's light or dark tokens; the stage, the lineup and the part tiles stay a dark panel. */
:root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body:not(.demo), .stage-box, uchusen-lineup, .tile, .code {
  --ground: #070c17;
  --raised: #0e1626;
  --card: #131d31;
  --line: #27344c;
  --ink: #e4ebf5;
  --muted: #9dacc2;
  --accent: #7cc7ff;
  --warm: #ffc47a;
  color: var(--ink);
}
body.demo { --ground: var(--page); --raised: var(--surface); --card: var(--surface); --line: var(--rule); --accent: #1d5f9e; --warm: #8a4b00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.demo { --accent: #7cc7ff; --warm: #ffc47a; }
}
:root[data-theme="dark"] body.demo { --accent: #7cc7ff; --warm: #ffc47a; }
* { box-sizing: border-box; }
body:not(.demo) { margin: 0; background: radial-gradient(1200px 700px at 30% -10%, #16263f 0%, transparent 70%), var(--ground); color: var(--ink); line-height: 1.5; }
a { color: var(--accent); }
body.demo main > header a, body.demo footer a { color: inherit; }
body:not(.demo) .top { max-width: 1240px; margin: 0 auto; padding: 2rem 1rem 0.5rem; }
body:not(.demo) h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 650; letter-spacing: -0.01em; }
.jp { color: var(--muted); font-weight: 400; font-size: 0.7em; margin-left: 0.3em; }
body:not(.demo) .lede { margin: 0.4rem 0 0; color: var(--muted); max-width: 62ch; }
main { max-width: 1240px; margin: 0 auto; padding: 0 1rem 3rem; }
section { margin-top: 2.5rem; }
section > h2 { font-size: 1.35rem; margin: 0 0 0.4rem; font-weight: 600; }
section > p { color: var(--muted); margin: 0 0 1rem; max-width: 70ch; }
.stage-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 1.5rem; align-items: start; margin-top: 1rem; }
.stage-box { background: linear-gradient(180deg, #0d1729, #070c17); border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem; position: sticky; top: 0.75rem; }
/* An un-upgraded rocket is an empty inline box until its picture arrives. The page reserves that box before any script runs. The embed fills its frame by flex, so it is left out. */
body:not(.embed) uchusen-rocket { display: block; aspect-ratio: var(--uchusen-aspect, 3 / 4); }
.stage-box uchusen-rocket { max-width: min(620px, calc((100vh - 18.5rem) * 0.75)); margin: 0 auto; }
.turn-row { justify-content: center; margin-top: 0.3rem; }
.view-space { position: relative; isolation: isolate; overflow: hidden; border-radius: 10px; }
.earth-back { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.earth-back[hidden] { display: none; }
.earth-back svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.55; }
#sky-back > svg { width: min(88%, 760px); height: auto; }
#sky-back wakusei-body { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.92; z-index: 1; background: none; }
#sky-back .sun-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 236, 180, 0.55) 0%, rgba(255, 170, 60, 0.22) 28%, rgba(255, 90, 20, 0) 62%);
  pointer-events: none;
}
.sky-moons wakusei-body { position: absolute; height: auto; }
.earth-back chikyu-earth-realistic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0.9; }
.sky-moons { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky-moons[hidden] { display: none; }
.sky-moons svg { position: absolute; opacity: 0.85; }
.earth-credit { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.8rem; }
.thumb { width: 4.5rem; min-height: 44px; padding: 0.2rem 0.15rem 0.3rem; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.thumb-dot { display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #101418; }
.thumb-dot svg { display: block; width: 100%; height: 100%; }
.thumb-name { font-size: 0.68rem; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-none .thumb-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.moon-heading, .moon-row { margin-left: 1.25rem; }
.moon-heading { margin: 0.15rem 0 0.2rem 1.25rem; color: var(--muted); font-size: 0.85rem; }
.hint { margin: 0.3rem 0.5rem 0.2rem; color: var(--muted); font-size: 0.82rem; text-align: center; }
.panel { display: flex; flex-direction: column; gap: 0.9rem; }
.panel-tabs { margin: 0; }
.panel-tabs .chip[aria-selected="true"] { background: #1c3556; border-color: var(--accent); color: #fff; }
.panel-group { display: flex; flex-direction: column; gap: 0.9rem; }
.panel-group[hidden] { display: none; }
.field h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.35rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.docked-port { align-self: center; min-width: 9rem; color: var(--muted); font-size: 0.85rem; }
.chip { min-height: 44px; padding: 0.35rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; font-size: 0.92rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: #1c3556; border-color: var(--accent); color: #fff; }
.chip:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .chip:hover { border-color: var(--accent); } }
.field-pair { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; }
.field-pair > p { flex-basis: 100%; margin: 0; }
.field-pair .note { color: var(--muted); font-size: 0.82rem; }
.field .note { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; }
.slider { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; }
.slider input { flex: 1 1 10rem; min-width: 8rem; accent-color: var(--accent); }
.slider output { min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; }
.switch input { width: 1.2rem; height: 1.2rem; }
#facts { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.9rem; font-size: 0.9rem; }
#facts h3 { margin: 0 0 0.3rem; font-size: 1.02rem; }
#facts .note { color: var(--muted); font-size: 0.82rem; margin: 0.45rem 0 0; }
.sizes { width: 100%; border-collapse: collapse; }
.sizes th { text-align: left; font-weight: 500; color: var(--muted); padding: 0.18rem 0.6rem 0.18rem 0; vertical-align: top; }
.sizes td { padding: 0.18rem 0; vertical-align: top; }
.sizes .value { font-variant-numeric: tabular-nums; font-weight: 600; }
.sizes .brief { color: var(--warm); font-weight: 500; }
.sizes .src { display: block; font-size: 0.76rem; color: var(--muted); }
.sizes .other { display: block; font-size: 0.76rem; color: var(--warm); }
.credit { font-size: 0.82rem; color: var(--muted); margin: 0; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; }
.one-credit { display: block; }
.one-credit + .one-credit { margin-top: 0.4rem; }
.table-wrap { overflow-x: auto; margin-top: 1rem; }
#compare-table { border-collapse: collapse; min-width: 34rem; font-size: 0.88rem; }
#compare-table th, #compare-table td { border-bottom: 1px solid var(--line); padding: 0.4rem 0.8rem 0.4rem 0; text-align: left; font-variant-numeric: tabular-nums; vertical-align: top; }
#compare-table thead th { color: var(--muted); font-weight: 500; }
#compare-table .blank { color: var(--muted); }
#compare-picks { margin-bottom: 0.8rem; }
uchusen-lineup { background: linear-gradient(180deg, #0d1729, #070c17); border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1.5rem; align-items: start; }
.builder-picks label { display: block; margin-bottom: 0.7rem; color: var(--muted); font-size: 0.9rem; }
select { display: block; width: 100%; min-height: 44px; margin-top: 0.2rem; padding: 0.3rem 0.5rem; font: inherit; color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: 10px; }
.report { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 0.9rem; }
.builder-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.2rem 0.8rem; }
.builder-only { display: flex; align-items: center; min-height: 44px; margin-top: 0.2rem; color: var(--ink); }
.code { margin: 0; padding: 0.7rem 0.8rem; background: #060a13; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font-size: 0.82rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.8rem; }
.tile { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem; margin: 0; }
.tile img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.tile figcaption { font-size: 0.85rem; margin-top: 0.3rem; }
.tile small { display: block; color: var(--muted); }
#planned-list, .sources { padding-left: 1.1rem; color: var(--muted); font-size: 0.9rem; }
#planned-list li, .sources li { margin-bottom: 0.35rem; }
#planned-list strong, .sources strong { color: var(--ink); font-weight: 600; }
.embed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 0.6rem; }
#embed-note { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0; max-width: 70ch; }
#embed-credit { color: var(--muted); font-size: 0.82rem; margin: 0.6rem 0 0; max-width: 90ch; }
#embed-code { white-space: pre-wrap; word-break: break-word; }
#embed-status { color: var(--muted); font-size: 0.85rem; }
body.embed { margin: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--ground); overflow: hidden; }
body.embed uchusen-rocket { flex: 1; min-height: 0; width: min(100%, calc((100vh - 6.5rem) * 0.75)); }
body.embed:has(uchusen-flight) { overflow: auto; height: auto; min-height: 100vh; }
body.embed:has(uchusen-flight) uchusen-rocket { flex: none; width: min(100%, calc((100vh - 21rem) * 0.75)); }
body.embed uchusen-flight { flex: none; width: 100%; box-sizing: border-box; padding: 0.4rem 0.75rem 0; }
body.embed .embed-credit { flex: none; width: 100%; box-sizing: border-box; margin: 0; padding: 0.45rem 0.75rem 0.55rem; color: var(--muted); font-size: 0.78rem; line-height: 1.35; max-height: 6.2rem; overflow: auto; }
body.embed .embed-open { flex: none; margin: 0.55rem 0.75rem; font-size: 0.9rem; }
body.embed .embed-open a { color: var(--ink, #e4ebf5); }
uchusen-flight { --uchusen-accent: var(--accent); }
.more-tabs { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.more-tabs .chip[aria-selected="true"] { background: #1c3556; border-color: var(--accent); color: #fff; }
.more-tabs ~ section { margin-top: 1.2rem; }
.foot { max-width: 1240px; margin: 0 auto; padding: 1rem 1rem 3rem; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); }
.legal { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.legal p { margin: 0; max-width: 90ch; }
/* At a desk the view is limited by the window's height, so the choices have the width, and a mouse needs no finger's room: the choices stay on one screen. */
@media (min-width: 1100px) {
  body:not(.demo) .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.2rem; padding-top: 0.6rem; padding-bottom: 0.2rem; }
  body:not(.demo) h1 { font-size: 1.6rem; }
  body:not(.demo) .lede { flex: 1 1 24rem; margin: 0; font-size: 0.85rem; max-width: none; }
  /* the family's header on one row, so the choices stay on one screen */
  body.demo main > header { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
  body.demo main > header .intro p { display: none; }
  body.demo main > header .intro { min-height: 0; }
  body.demo main { padding-top: 8px; }
  body.demo:not(.compare):not(.journey):not(.swarm):not(.poster):not(.beam) main { max-width: none; }
  body.demo main > header { margin-bottom: 6px; }
  body.demo:not(.code-builder) .hint { display: none; }
  .stage-row { grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); margin-top: 0.4rem; }
  body.demo:not(.compare):not(.journey):not(.swarm):not(.poster):not(.beam):not(.code-builder) .stage-row { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); }
  .stage-box uchusen-rocket { max-width: min(620px, max(10rem, calc((100vh - 28rem) * 0.75))); }
  /* the flight's words on the left and its engine charts on the right */
  uchusen-flight::part(flight-body) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-content: start; }
  uchusen-flight::part(flight-charts) { grid-column: 2; grid-row: 2 / span 3; margin: 0; align-content: start; }
  uchusen-flight::part(flight-row) { grid-column: 1 / -1; }
  uchusen-flight::part(flight-now), uchusen-flight::part(flight-what), uchusen-flight::part(flight-about) { grid-column: 1; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  .panel, .panel-group { gap: 0; }
  .field-pair { gap: 0.2rem 0.6rem; }
  .panel .chip { min-height: 32px; padding: 0.15rem 0.6rem; font-size: 0.85rem; }
  .panel .chips { gap: 0.3rem; }
  .panel .field h2 { margin-bottom: 0.2rem; }
}
@media (max-width: 820px) {
  .stage-row, .builder { grid-template-columns: minmax(0, 1fr); }
  .stage-box { position: static; }
  /* a flight stands still out of sight: where there is one to play, its controls are right under the view */
  .flight-field.has-flight { order: -1; }
}
#credit-list li, #source-list li { overflow-wrap: anywhere; }

/* the comparison: a frame the lineup is fitted to, panned and zoomed by the family's view controls */
.compare-frame { position: relative; overflow: hidden; height: min(60vh, 560px); display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.5rem; touch-action: none; }
.compare-frame:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.compare-frame uchusen-lineup { overflow: visible; transform-origin: 50% 50%; flex: none; }
/* on a phone the drawing of many craft may be wider than its frame: the frame scrolls it sideways, by itself, and the page never does */
@media (max-width: 640px) {
  .compare-frame { overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; justify-content: flex-start; }
  .compare-frame uchusen-lineup { margin: 0 auto; }
}
/* a ship with its panel under the picture gives the picture less of the window, so both fit */
.stage-box uchusen-rocket[data-panel] { max-width: min(620px, calc((100vh - 28rem) * 0.75)); }
@media (min-width: 1100px) {
  .stage-box uchusen-rocket[data-panel] { max-width: min(620px, max(10rem, calc((100vh - 36rem) * 0.75))); }
}
a.chip { display: inline-flex; align-items: center; text-decoration: none; }

/* The builder has its own title, and the same theme switch as the other pages. Its caption stays; a desk hides the other pages' hint. */
body.code-builder > header.top { max-width: 1240px; margin: 0 auto; padding: 1.25rem 1rem 0.25rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
body.code-builder > header.top h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 650; letter-spacing: -0.01em; }
body.code-builder > header.top .lede { margin: 0.4rem 0 0; max-width: 62ch; }
body.code-builder > .page-links { box-sizing: border-box; max-width: 1240px; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; }

/* One row of page links under the family's header. Help in this row is the only Help switch. */
.page-links { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0 0 4px; overflow-x: auto; }
.page-links a, .page-links button { text-decoration: none; color: inherit; border: 1px solid transparent; border-radius: 999px; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 600; white-space: nowrap; background: transparent; }
.page-links a:hover, .page-links a:focus { border-color: transparent; }
.page-links a[aria-current="page"] { background: var(--ink, #e4ebf5); color: var(--page, #070c17); border-color: var(--ink, #e4ebf5); }
body.demo main > header [data-help-switch] { display: none; }
@media (min-width: 1440px) { .page-links { overflow: visible; } }

/* The ship picker. Browser is three columns. Card stacks the same parts. The window is the Card frame. */
.picker-host { position: relative; }
.picker-frame { z-index: 6; }
.pk { display: grid; gap: 8px; min-width: 0; background: #141820; color: #e8eef8; border-radius: 8px; padding: 4px; font: 500 13px/1.35 system-ui, sans-serif; }
.pk-browser { grid-template-columns: 7.5rem minmax(0, 1fr) 9.5rem; }
.pk-card, .pk-grid { grid-template-columns: minmax(0, 1fr); }
.pk-side, .pk-kinds { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-kinds { flex-direction: row; flex-wrap: wrap; }
.pk-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-search { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #4a4d58); border-radius: 999px; background: transparent; color: inherit; padding: 6px 10px; min-height: 44px; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 6px; max-height: 16rem; overflow: auto; }
.pk-grid .pk-craft { display: flex; flex-direction: column; gap: 2px; align-items: center; border: 1px solid var(--line, #4a4d58); border-radius: 8px; background: transparent; color: inherit; padding: 4px; min-height: 44px; font: inherit; text-align: center; }
.pk-grid .pk-craft[aria-selected="true"] { outline: 2px solid currentColor; }
.pk-grid .craft-pic { width: 2.2rem; height: 3rem; display: block; }
.pk-grid .craft-pic svg { width: 100%; height: 100%; }
.pk-grid .pk-craft span { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 700px) {
  .pk-browser { grid-template-columns: minmax(0, 1fr); }
  .pk-side { flex-direction: row; flex-wrap: wrap; }
}
.pk-pill { border: 1px solid var(--line, #4a4d58); border-radius: 8px; background: transparent; color: inherit; text-align: left; padding: 4px 8px; min-height: 44px; font: inherit; }
.pk-pill[aria-pressed="true"] { background: #e8eef8; color: #12141a; }
.pk-facts { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-top: 1px solid var(--line, #4a4d58); padding-top: 6px; }
.pk-browser .pk-facts { border-top: 0; padding-top: 0; }
.pk-facts strong { font-weight: 650; }
.pk-variants { display: flex; flex-direction: column; gap: 4px; max-height: 8rem; overflow: auto; margin-top: 4px; }
.pk-empty { margin: 0; }