/* ==========================================================================
   MARS!platz — the "aura" dress of the landing page.

   Loaded after station.css on the landing page only (src/views/pages/public.js
   passes it to L.page as `styles`). It changes how the page looks — drafting
   paper, cobalt ink, frosted glass, the colour under the dome, one section a
   screen — and nothing about what the page does: every id, every hook the
   page scripts use (board.js, composer.js, habitat.js, hardware.js, cloud.js,
   the ticker's and the dome's own scripts) is left as it is. Remove the
   stylesheet and the station looks as it did.

   The landing page's layout — the header's two rows, the four pages of the
   design handoff, the foot by day and by night — is public/sheet.css, loaded
   after this one in the same dress. Some rules here were written for the
   earlier layout of the landing page — the masthead's two doors, the hero
   grid, the four-step slowest chat, the stops of public/section-scroll.js —
   and where their markup is gone they draw nothing.
   ========================================================================== */

/* ------------------------------------------------------------ the palette */
:root {
  --paper: #e9edf0;
  --ink: #0f1540;
  --dim: #4a5280;
  --faint: #7d84ad;
  --cobalt: #2f45e8;
  --cobalt-rgb: 47,69,232;
  --cobalt-fill: #2f45e8;
  --mars: #ff5a1f;
  --mars-ink: #c23600;
  --tile: rgba(255,255,255,.55);
  --glass: linear-gradient(140deg, rgba(255,255,255,.74), rgba(255,255,255,.46));
  --glass-soft: linear-gradient(140deg, rgba(255,255,255,.60), rgba(255,255,255,.30));
  --glass-solid: linear-gradient(140deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  --glass-edge: rgba(255,255,255,.8);
  --glass-shadow: 0 40px 70px -40px rgba(30,40,120,.35), 0 2px 6px rgba(30,40,120,.06), inset 0 1px 0 rgba(255,255,255,.95);
  --hair: rgba(47,69,232,.16);

  /* the station's own tokens, re-tuned: everything drawn from them follows */
  --ground: var(--paper);
  --ground-2: #e2e6ea;
  --raise: rgba(255,255,255,.62);
  --raise-2: rgba(255,255,255,.42);
  --well: rgba(255,255,255,.72);
  --rule: rgba(47,69,232,.14);
  --rule-hard: rgba(47,69,232,.30);
  --edge: rgba(255,255,255,.95);
  --orange: #ff5a1f;
  --orange-deep: #e24a12;
  --orange-soft: rgba(255,90,31,.12);
  --sh-raise: var(--glass-shadow);
  --sh-raise-lg: var(--glass-shadow);
  --sh-raise-sm: 0 8px 22px -12px rgba(15,21,64,.35);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(47,69,232,.10);
  --sh-orange: 0 14px 30px -10px rgba(255,70,0,.55);
  --r: 22px;
  --r-lg: 32px;
  --r-sm: 14px;
  --gutter: clamp(20px, 7.64vw, 147px);              /* the mock-up's margin (100 px of 1440) plus a tenth: 110 px at 1440, 147 px from 1920 */
}
:root[data-theme="dark"] {
  /* night: the station's own dark set — near-black surfaces, grey type — with the cobalt kept for the accents */
  --paper: #121214;
  --ink: #ececea;
  --dim: #a4a4ab;
  --faint: #6b6b73;
  --cobalt: #b3baff;
  --cobalt-rgb: 179,186,255;
  --cobalt-fill: #4f63ff;
  --mars: #ff6a2e;
  --mars-ink: #ff9d70;
  --tile: rgba(255,255,255,.04);
  --glass: linear-gradient(140deg, rgba(46,46,52,.80), rgba(26,26,30,.74));
  --glass-soft: linear-gradient(140deg, rgba(46,46,52,.62), rgba(26,26,30,.52));
  --glass-solid: linear-gradient(140deg, rgba(40,40,46,.985), rgba(24,24,28,.985));
  --glass-edge: rgba(255,255,255,.11);
  --glass-shadow: 0 40px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  --hair: rgba(255,255,255,.10);
  --ground: var(--paper);
  --ground-2: #0d0d0f;
  --raise: rgba(42,42,48,.72);
  --raise-2: rgba(28,28,32,.72);
  --well: rgba(10,10,12,.62);
  --rule: rgba(255,255,255,.08);
  --rule-hard: rgba(255,255,255,.18);
  --edge: rgba(255,255,255,.09);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.08);
  --screen: #0d0d10;
  --screen-2: #060607;
  --on-screen: #f2f2ef;
  --on-screen-dim: rgba(242,242,239,.6);
}

/* ------------------------------------------------------------ the type sizes
   Read first, then everything else: the small capitals that name things (a section's code, a meta line, the name of a figure),
   the second lines, the names in a list, the reading text — set here once and used through the pages. A phone gets each a
   little larger (the phones block). Nothing a visitor is meant to read is drawn smaller than --fs-tag. */
body.landing {
  --fs-tag: 11px;      /* the smallest thing written: a ruler's numbers, a stamp over a picture, a chart's ticks */
  --fs-label: 12px;    /* small capitals: a code, a meta line, the name of a figure, a badge */
  --fs-note: 14px;     /* a second line: a verdict, a note, a description under a name */
  --fs-name: 15.5px;   /* the name of a thing in a list or on a tile */
  --fs-read: 16.5px;   /* reading text: the lead, a step of the slowest chat, a post, a pop-up */
}

/* ------------------------------------------------------------- the ground */
body.landing {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(var(--cobalt-rgb),.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--cobalt-rgb),.06) 1px, transparent 1px),
    linear-gradient(rgba(var(--cobalt-rgb),.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--cobalt-rgb),.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--ink); font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] body.landing { background-color: var(--paper); background-image:
    radial-gradient(circle at 291px 136px, rgba(232,238,255,.6) 0, rgba(232,238,255,.6) 1px, transparent 1.8px),
    radial-gradient(circle at 482px 329px, rgba(232,238,255,.45) 0, rgba(232,238,255,.45) .8px, transparent 1.5px),
    radial-gradient(circle at 120px 420px, rgba(232,238,255,.5) 0, rgba(232,238,255,.5) .7px, transparent 1.4px),
    radial-gradient(circle at 640px 90px, rgba(232,238,255,.35) 0, rgba(232,238,255,.35) 1px, transparent 1.8px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 743px 743px, 557px 557px, 389px 389px, 911px 911px, 24px 24px, 24px 24px; }
body.landing .shell { max-width: 1920px; padding: 0 var(--gutter) 0; position: relative; }
/* every section is drawn to fit a 900 px window; in a shorter window the panel heights, dials and charts follow --u down with it,
   so a turn of the wheel still lands heading on heading (public/section-scroll.js) */
body.landing { --u: min(1vh, 9px); }
/* one warm light behind the habitat, one cool light at the foot of the page */
body.landing::before, body.landing::after { content: ""; position: absolute; left: 50%; z-index: 0; pointer-events: none; border-radius: 50%; }
body.landing::before { top: -40px; width: 1000px; height: 900px; margin-left: -560px; background: radial-gradient(circle at 50% 50%, rgba(255,122,0,.26) 0%, rgba(255,122,0,.12) 34%, rgba(255,122,0,0) 66%); }
body.landing::after { bottom: 200px; width: 1100px; height: 1100px; margin-left: -1000px;  background: radial-gradient(circle at 50% 50%, rgba(47,69,232,.16) 0%, rgba(47,69,232,.07) 36%, rgba(47,69,232,0) 66%); }
body.landing { position: relative; overflow-x: clip; }
html:has(body.landing) { overflow-x: clip; }
body.landing > * { position: relative; z-index: 1; }
html:has(body.landing)::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; background-image: url("/grain.png"); background-size: 110px 110px; opacity: .22; mix-blend-mode: multiply; }   /* the mock-up's film grain */
:root[data-theme="dark"]:has(body.landing)::after { mix-blend-mode: overlay; opacity: .3; }
:root[data-theme="dark"] body.landing::before { opacity: .55; }
:root[data-theme="dark"] body.landing::after { background: radial-gradient(circle at 50% 50%, rgba(120,140,255,.14) 0%, rgba(120,140,255,.06) 36%, rgba(120,140,255,0) 66%); }

/* ------------------------------------------------------------ glass, pills */
.dpanel, .device, .screen.board, .glance-link, .kpi, .run-strip, .dome-popup, dialog.popup {
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-lg);
  color: var(--ink);
}
body.landing .btn, body.landing .chip, body.landing .tags label, body.landing .status .theme button, body.landing .status .lang button, body.landing .feed-filter .chip {
  font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  border-radius: 999px; border: 1px solid rgba(var(--cobalt-rgb),.45); background: rgba(255,255,255,.5); color: var(--cobalt);
  box-shadow: none; min-height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .15s, color .15s;
}
:root[data-theme="dark"] body.landing .btn, :root[data-theme="dark"] body.landing .chip, :root[data-theme="dark"] body.landing .tags label, :root[data-theme="dark"] body.landing .status button, :root[data-theme="dark"] body.landing .feed-filter .chip { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.30); }
body.landing .btn:hover, body.landing .chip:hover, body.landing .tags label:hover { color: var(--ink); background: rgba(255,255,255,.8); box-shadow: none; transform: none; }
body.landing .chip.active, body.landing .tags label:has(input:checked), body.landing .status .lang button.on,
:root[data-theme="dark"] body.landing .chip.active, :root[data-theme="dark"] body.landing .tags label:has(input:checked), :root[data-theme="dark"] body.landing .status .lang button.on { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; box-shadow: none; }
body.landing .feed-filter .chip.mine { color: var(--mars-ink); border-color: var(--mars); background: rgba(255,255,255,.5); box-shadow: none; }
body.landing .feed-filter .chip.mine.active { background: var(--mars); color: #fff; }
body.landing .feed-filter .chip .chip-count { background: var(--mars); color: #fff; }
body.landing .tags label:has(input:disabled) { opacity: .45; }
.lab { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); font-weight: 500; }

/* ----------------------------------------------------------- the ticker */
/* a glass band across the whole width of the window, at its very top; what it carries — the three links, the clock, the running
   line, the switches — is set in from the edges as far as the page's content is */
body.landing .ticker {
  --tk-inset: max(var(--gutter), calc((100% - 1920px) / 2 + var(--gutter)));
  position: relative; z-index: 40; display: flex; align-items: center; gap: 4px;
  width: 100%; max-width: none; height: 60px; margin: 0; padding: 0 var(--tk-inset); box-sizing: border-box;
  border-radius: 0; overflow: visible;
  background: var(--glass-soft); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 0; border-bottom: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  color: var(--dim); font-family: var(--display); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
:root[data-theme="dark"] body.landing .ticker { background: var(--glass-soft); }
body.landing .tk-window { flex: 1 1 auto; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 36px), transparent 100%); }
body.landing .tk-track { animation-duration: 46s; }
body.landing .tk-cell { padding: 0; font-size: 12.5px; letter-spacing: .1em; color: var(--dim); }
body.landing .tk-cell b { color: var(--ink); font-weight: 600; }
body.landing .tk-sep { padding: 0 18px; opacity: .5; }
body.landing .tk-right { flex: none; display: flex; align-items: center; padding: 0 2px 0 8px; }
body.landing .tk-right .status { gap: 6px; }
body.landing .status .theme button { min-height: 34px; padding: 0 13px; font-size: var(--fs-label); }
body.landing .status .lang { display: inline-flex; gap: 4px; background: transparent; box-shadow: none; padding: 0; }
body.landing .status .lang button { min-height: 34px; min-width: 42px; padding: 0 10px; font-size: var(--fs-label); justify-content: center; }
body.landing .status .lang button:hover { color: var(--ink); background: rgba(255,255,255,.8); }
body.landing .status .lang button.on:hover { color: #fff; background: var(--cobalt-fill); }
body.landing .theme-mark { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: none; }
/* the language switch as a drop-down (layout.js): the current language on top, as the filled pill; a press lists the other two
   beneath it, one under the other, on a small glass card — the same form as before, so a press on a language still switches */
body.landing .status .lang-menu { position: relative; display: inline-block; }
body.landing .status .lang-menu > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; min-width: 42px; padding: 0 11px 0 13px; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1px solid var(--cobalt-fill); background: var(--cobalt-fill); color: #fff;
  font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; line-height: 1; transition: background .15s, color .15s;
}
body.landing .status .lang-menu > summary::-webkit-details-marker { display: none; }
body.landing .status .lang-menu > summary::marker { content: ""; }
body.landing .status .lang-menu > summary:focus-visible { outline: 2px solid var(--cobalt-fill); outline-offset: 2px; }
body.landing .status .lang-menu .lang-chev { flex: none; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
body.landing .status .lang-menu[open] .lang-chev { transform: translateY(2px) rotate(-135deg); }
body.landing .status .lang-menu > .lang {
  position: absolute; top: calc(100% + 6px); right: -5px; left: auto; z-index: 60; min-width: calc(100% + 10px); display: flex; flex-direction: column; gap: 4px; padding: 4px;   /* the card 5 px wider each side: the pills inside are as wide as the one on top */
  background: var(--glass-solid); border: 1px solid var(--glass-edge); border-radius: 22px; box-shadow: var(--glass-shadow);
}
body.landing .status .lang-menu > .lang button { width: 100%; min-width: 0; justify-content: center; }
body.landing .status .lang-menu > .lang button.on { display: none; }                                  /* the current language is the pill on top */

/* ------------------------------------------------------------- the hero */
/* the first screen: the masthead and the habitat, and nothing else — the hero fills the window under the ticker (60 px),
   so the portal begins below the fold; the dome is as large as the width allows, but never taller than the window has room for */
body.landing .hero-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; align-items: center; align-content: start; margin: 0; padding: 0 20px 0 0; min-height: calc(100vh - 60px); box-sizing: border-box; }   /* the frame's corners end at the content's edge, level with the ticker */
body.landing:not(.inner) .masthead { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 56px 0 0 40px; margin: 0; }   /* a little in from the content's left edge, nearer the habitat; centred on its frame */
body.landing .masthead > div { display: flex; flex-direction: column; }
body.landing:not(.inner) .masthead .status { display: none; }                       /* on wide screens the ticker carries the switches */
body.landing .wordmark { margin: 0; font-family: var(--display); font-size: clamp(56px, 5.5vw, 79px); line-height: .95; letter-spacing: -.035em; font-weight: 600; color: var(--ink); }
body.landing .wordmark .bang { color: var(--mars); }
body.landing .tagline { margin: 18px 0 0; font-size: 16px; line-height: 1.4; color: var(--dim); }
body.landing .tagline b { color: var(--ink); font-weight: 500; }
body.landing .run-dates { margin: 12px 0 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; color: var(--dim); white-space: normal; }
body.landing .run-dates b { color: var(--mars-ink); font-weight: 500; }
body.landing .masthead .lead { margin: 22px 0 0; max-width: 440px; font-size: var(--fs-read); line-height: 1.55; color: var(--ink); }
/* two doors under the lead: the orange button to the composer, beside it a glass one to the Mission dashboard, with the live dot the
   dashboard's panels carry; where the column is too narrow for both in a row the second stands under the first */
body.landing .masthead-cta { margin: 27px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
body.landing .masthead-btn, body.landing button.primary, body.landing .btn.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 0 34px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ff8a3d, #ff5a1f); color: #0f1540; font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 18px 40px -14px rgba(255,70,0,.75), 0 1px 0 rgba(255,255,255,.55) inset; transition: transform .15s ease, box-shadow .15s ease; text-decoration: none;
}
body.landing .masthead-btn:hover, body.landing button.primary:hover { transform: translateY(-1px); color: #0f1540; box-shadow: 0 22px 44px -14px rgba(255,70,0,.85), 0 1px 0 rgba(255,255,255,.55) inset; }
:root[data-theme="dark"] body.landing .masthead-btn, :root[data-theme="dark"] body.landing .btn.primary, :root[data-theme="dark"] body.landing button.primary { background: linear-gradient(180deg, #ff8a3d, #ff5a1f); color: #1a0a02; border: 0; }
:root[data-theme="dark"] body.landing .masthead-btn:hover, :root[data-theme="dark"] body.landing button.primary:hover { color: #1a0a02; background: linear-gradient(180deg, #ff9a55, #ff6a2e); }
body.landing .masthead-btn span { font-size: 16px; }
body.landing .masthead-btn.masthead-btn-live { background: rgba(255,255,255,.55); color: var(--cobalt); border: 1px solid rgba(var(--cobalt-rgb),.45); box-shadow: 0 18px 40px -18px rgba(30,40,120,.4); }
body.landing .masthead-btn.masthead-btn-live:hover { background: rgba(255,255,255,.85); color: var(--ink); box-shadow: 0 22px 44px -18px rgba(30,40,120,.5); }
:root[data-theme="dark"] body.landing .masthead-btn.masthead-btn-live { background: rgba(255,255,255,.06); color: #e6e6ec; border: 1px solid rgba(255,255,255,.30); box-shadow: none; }
:root[data-theme="dark"] body.landing .masthead-btn.masthead-btn-live:hover { background: rgba(255,255,255,.14); color: #fff; }
body.landing .masthead-btn .live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mars); box-shadow: 0 0 10px 2px rgba(255,90,31,.7); animation: live 2.4s ease-in-out infinite; margin-right: -4px; }

/* ---- the desk's first screen: the habitat at the centre of the page. A band across the top — the wordmark, its line and the
   run at the left, the lead and the two doors at the right — and under it the habitat the whole width of the page: its sheet
   from edge to edge, the dome in the middle of it, as large as the window leaves room for — the picture takes what is left
   of the window's height under the band and the room above the dome, never more than the width asks (50cqw: the dome is
   twice as wide as it is high). The hero is one window high, so the wheel's next stop is the next section's heading. */
@media (min-width: 761px) and (min-height: 521px) {
  body.landing:not(.inner) .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: 64px; align-items: start; padding: 0 20px; height: max(640px, calc(100vh - 60px)); min-height: 0;
  }
  body.landing:not(.inner) .masthead, body.landing:not(.inner) .masthead > div { display: contents; }
  body.landing:not(.inner) .wordmark { grid-column: 1; grid-row: 1; margin-top: 30px; font-size: clamp(56px, 5vw, 76px); }
  body.landing:not(.inner) .tagline { grid-column: 1; grid-row: 2; margin-top: 12px; }
  body.landing:not(.inner) .run-dates { grid-column: 1; grid-row: 3; margin-top: 10px; text-wrap: balance; }
  body.landing:not(.inner) .masthead .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 30px 0 0; max-width: 62ch; }
  body.landing:not(.inner) .masthead-cta { grid-column: 2; grid-row: 3; align-self: end; margin: 18px 0 0; flex-wrap: wrap; }
  body.landing:not(.inner) .masthead-cta .masthead-btn { white-space: nowrap; min-height: 52px; padding: 0 24px; gap: 12px; font-size: 12.5px; letter-spacing: .13em; }   /* each door's name on one line */
  body.landing:not(.inner) .dome-panel { --room: clamp(96px, 13vh, 132px); grid-column: 1 / -1; grid-row: 4; align-self: stretch; margin: 16px -20px 0; display: flex; flex-direction: column; min-height: 0; }
  body.landing:not(.inner) .dome-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; container-type: inline-size; }
  body.landing:not(.inner) .dome-stage { flex: 1 1 auto; min-height: 220px; max-height: 50cqw; aspect-ratio: auto; }
}

/* a narrower desk (a small laptop, a tablet held sideways): the two doors one above the other under the run, at the left, so the
   band stays low and the habitat keeps the room; the lead alone at the right */
@media (min-width: 761px) and (max-width: 1239px) and (min-height: 521px) {
  body.landing:not(.inner) .hero-grid { grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 48px; }
  body.landing:not(.inner) .wordmark { font-size: clamp(48px, 5vw, 60px); }
  body.landing:not(.inner) .masthead .lead { grid-row: 1 / span 4; align-self: center; margin: 26px 0 0; font-size: 16px; }
  body.landing:not(.inner) .masthead-cta { grid-column: 1; grid-row: 4; flex-direction: column; align-items: stretch; gap: 10px; margin: 18px 0 0; max-width: 360px; }
  body.landing:not(.inner) .masthead-cta .masthead-btn { min-height: 48px; justify-content: space-between; }
  body.landing:not(.inner) .dome-panel { grid-row: 5; }
}

/* the habitat: its heading, the corners, the room above the picture for the pop-up, the picture, the caption */
body.landing .dome-panel {
  --pop-room: 1;                                     /* dome.js: the pop-up opens in the room above the picture */
  --dome-crop: 1;                                    /* dome.js: the picture is the dome alone, close up (no side labels) */
  position: relative; margin: 0 -20px; padding: 0 20px 6px; background: none; box-shadow: none; border-radius: 0;   /* the frame's corners sit 20 px outside the dome, as in the mock-up */
  /* the four corners of one square frame: ┌ top left, ┐ top right, └ bottom left, ┘ bottom right — each an L that opens towards the dome */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M0 22V0H22' fill='none' stroke='%232f45e8' stroke-width='1.5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M0 0H22V22' fill='none' stroke='%232f45e8' stroke-width='1.5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M0 0V22H22' fill='none' stroke='%232f45e8' stroke-width='1.5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M22 0V22H0' fill='none' stroke='%232f45e8' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: 0 42px, 100% 42px, 0 100%, 100% 100%; background-size: 22px 22px;
}
:root[data-theme="dark"] body.landing .dome-panel { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M0 22V0H22' fill='none' stroke='%23a3adff' stroke-width='1.5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M0 0H22V22' fill='none' stroke='%23a3adff' stroke-width='1.5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M0 0V22H22' fill='none' stroke='%23a3adff' stroke-width='1.5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M22 0V22H0' fill='none' stroke='%23a3adff' stroke-width='1.5'/></svg>"); }
body.landing .dome-panel { --room: 170px; }                                           /* the room above the picture: the pop-up's, and the sky's */
body.landing .dome-head { margin: 12px 0 var(--room); padding: 0 20px; align-items: baseline; }   /* the heading at the panel's top, the frame's top corners just under it; the room beneath holds the pop-up */
body.landing .dome-title { gap: 12px; }
body.landing .dome-title h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
body.landing .dome-meta { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; color: var(--dim); }
body.landing .dome-meta-hint { display: none; }
body.landing .dome-panel { --dome-aura: radial-gradient(ellipse 46% 62% at 50% 78%, rgba(255,141,62,.85) 0%, rgba(239,134,184,.7) 38%, rgba(171,214,241,.55) 66%, rgba(171,214,241,0) 100%); }
:root[data-theme="dark"] body.landing .dome-panel { --dome-aura: radial-gradient(ellipse 46% 62% at 50% 78%, rgba(255,120,40,.55) 0%, rgba(160,80,200,.45) 38%, rgba(70,110,255,.35) 66%, rgba(70,110,255,0) 100%); }
body.landing .dome-screen {
  padding: 0; border-radius: 0; box-shadow: none; overflow: visible; isolation: auto;
  background: none;
}
body.landing .dome-screen::before { display: none; }
body.landing .dome-screen::after { display: none; }
body.landing .dome-stage { aspect-ratio: 700 / 350; max-height: calc(100vh - 344px); }             /* the mock-up's 700 × 350 box; the SVG letterboxes inside and stays centred */
body.landing .dome-svg { overflow: hidden; }                                                       /* the half-disc ends at the base line: nothing of the 3-D floor below it */
body.landing .dome-floor, body.landing .dome-faces { display: none; }                              /* the mock-up's dome is flat: its own colour and its own few lines */
body.landing .dome-mesh path { fill: none; stroke: rgba(var(--cobalt-rgb),.22); stroke-width: 1; }
body.landing .dome-shell { stroke: rgba(255,255,255,.9); stroke-width: 1; }
:root[data-theme="dark"] body.landing .dome-mesh path { stroke: rgba(200,205,255,.22); }
:root[data-theme="dark"] body.landing .dome-shell { stroke: rgba(255,255,255,.25); }
/* the shell: glass, the colour showing through; the facets a fine cobalt wireframe */
body.landing #dome-pearl .s1 { stop-color: #ffffff; stop-opacity: .60; }
body.landing #dome-pearl .s2 { stop-color: #ffffff; stop-opacity: .45; }
body.landing #dome-pearl .s3 { stop-color: #ffffff; stop-opacity: .22; }
body.landing .dome-shell { stroke: rgba(var(--cobalt-rgb),.35); stroke-width: 1.2; }
body.landing .dome-faces polygon { fill: rgba(255,255,255,.10) !important; stroke: rgba(var(--cobalt-rgb),.20); stroke-width: .8; }
body.landing .dome-floor { opacity: .35; }
:root[data-theme="dark"] body.landing #dome-pearl .s1 { stop-color: #dfe3ff; stop-opacity: .18; }
:root[data-theme="dark"] body.landing #dome-pearl .s2 { stop-color: #aab2e6; stop-opacity: .12; }
:root[data-theme="dark"] body.landing #dome-pearl .s3 { stop-color: #5b66b0; stop-opacity: .08; }
:root[data-theme="dark"] body.landing .dome-faces polygon { fill: rgba(200,205,255,.04) !important; stroke: rgba(200,205,255,.20); }
/* the keys: white discs with the pictogram in cobalt, the name on a tag beneath */
body.landing .dome-hex polygon { fill: #fff; stroke: rgba(var(--cobalt-rgb),.30); stroke-width: 1; filter: drop-shadow(0 8px 14px rgba(15,21,64,.22)); }
body.landing .dome-ic path { fill: var(--cobalt); }
body.landing .dome-hex:hover polygon, body.landing .dome-hex.lit polygon, body.landing .dome-hex:focus-visible polygon { fill: var(--cobalt-fill); stroke: var(--cobalt-fill); }
body.landing .dome-hex:hover .dome-ic path, body.landing .dome-hex.lit .dome-ic path, body.landing .dome-hex:focus-visible .dome-ic path { fill: #fff; }
body.landing .dome-tag rect { fill: rgba(255,255,255,.88); stroke: rgba(var(--cobalt-rgb),.18); stroke-width: 1; }
body.landing .dome-tag text { font-family: var(--display); font-size: 11.5px; font-weight: 600; fill: #0f1540; letter-spacing: .01em; }
body.landing .dome-hex:hover .dome-tag rect, body.landing .dome-hex.lit .dome-tag rect { fill: var(--cobalt-fill); stroke: var(--cobalt-fill); }
body.landing .dome-hex:hover .dome-tag text, body.landing .dome-hex.lit .dome-tag text { fill: #fff; }
:root[data-theme="dark"] body.landing .dome-hex polygon { fill: #2a2a31; stroke: rgba(255,255,255,.22); }
:root[data-theme="dark"] body.landing .dome-ic path { fill: #ececea; }
/* the keys as the mock-up draws them: a soft white disc, the icon a cobalt line (dome.js renders these when the page asks for `pods`) */
body.landing .dome-pod { fill: rgba(255,255,255,.9); stroke: rgba(255,255,255,.95); stroke-width: 1; filter: drop-shadow(0 8px 12px rgba(30,40,120,.32)); transition: fill .2s; }
body.landing .dome-ic-line { fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
body.landing .dome-ic-line path, body.landing .dome-ic-line circle, body.landing .dome-ic-line rect { fill: none; }
body.landing .dome-hex:hover .dome-pod, body.landing .dome-hex.lit .dome-pod, body.landing .dome-hex:focus-visible .dome-pod { fill: var(--cobalt-fill); stroke: rgba(var(--cobalt-rgb),.35); stroke-width: 5; }
body.landing .dome-hex:hover .dome-ic-line, body.landing .dome-hex.lit .dome-ic-line, body.landing .dome-hex:focus-visible .dome-ic-line { stroke: #fff; }
:root[data-theme="dark"] body.landing .dome-pod { fill: #2a2a31; stroke: rgba(255,255,255,.22); filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
:root[data-theme="dark"] body.landing .dome-ic-line { stroke: #ececea; }
:root[data-theme="dark"] body.landing .dome-hex:hover .dome-pod, :root[data-theme="dark"] body.landing .dome-hex.lit .dome-pod, :root[data-theme="dark"] body.landing .dome-hex:focus-visible .dome-pod { fill: var(--cobalt-fill); stroke: rgba(var(--cobalt-rgb),.35); }
:root[data-theme="dark"] body.landing .dome-hex:hover .dome-ic-line, :root[data-theme="dark"] body.landing .dome-hex.lit .dome-ic-line, :root[data-theme="dark"] body.landing .dome-hex:focus-visible .dome-ic-line { stroke: #fff; }
body.landing .dome-mark .dome-pod { filter: none; stroke: rgba(var(--cobalt-rgb),.25); }
:root[data-theme="dark"] body.landing .dome-tag rect { fill: rgba(34,34,40,.94); stroke: rgba(255,255,255,.18); }
:root[data-theme="dark"] body.landing .dome-tag text { fill: #f1f3ff; }
body.landing .dome-labels { display: none; }
body.landing .dome-caption { margin: 0; max-width: none; text-align: center; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
body.landing .dome-caption::before { content: ""; display: block; height: 1px; margin: 0 -20px 16px; background: var(--cobalt-fill); }
:root[data-theme="dark"] body.landing .dome-caption::before { background: var(--cobalt-fill); }
body.landing .dome-legend { display: none; }

/* the pop-up about a part of the habitat: one small glass card in the room above the picture */
body.landing dialog.popup { padding: 0; border-radius: 26px; max-width: min(1040px, calc(100vw - 32px)); max-height: min(86vh, 900px); background: var(--glass-solid); }
body.landing dialog.popup:not(.dome-popup) { background: #f7f8fc; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* About · What this is · Who we are: solid paper, nothing shows through the text */
:root[data-theme="dark"] body.landing dialog.popup:not(.dome-popup) { background: #1d1d22; }
body.landing dialog.popup::backdrop { background: rgba(15,21,64,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.landing dialog.dome-popup { position: fixed; margin: 0; width: 740px; max-width: calc(100vw - 16px); border-radius: 20px; }
body.landing dialog.dome-popup::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.landing .dome-popup .popup-head { padding: 8px 10px 0 16px; border-bottom: 0; gap: 10px; }
body.landing .dome-popup .dome-mark { width: 30px; height: 30px; }
body.landing .dome-popup .popup-head > div { flex-direction: row; align-items: baseline; gap: 12px; flex: 1 1 auto; }
body.landing .popup-head .fold-title { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
body.landing .popup-head .fold-sub { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; color: var(--dim); }
body.landing .popup-close { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(var(--cobalt-rgb),.45); background: rgba(255,255,255,.5); color: var(--cobalt); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; }
body.landing .dome-popup .popup-body { padding: 0 16px 8px; overflow: auto; }
body.landing .dome-popup .popup-body p { margin: 0 0 3px; font-size: 15px; line-height: 1.45; max-width: none; }
body.landing .dome-popup .dome-now { margin: 0 0 5px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 400; color: var(--ink); }
body.landing .dome-now-k { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--mars-ink); margin-right: 8px; }
body.landing .dome-popup .popup-body p:last-child { margin: 2px 0 0; }
body.landing .dome-popup .popup-body .btn { min-height: 0; padding: 0; border: 0; background: none; font-size: var(--fs-label); letter-spacing: .12em; color: var(--cobalt); border-bottom: 1px solid rgba(var(--cobalt-rgb),.35); border-radius: 0; }
body.landing .popup-body .prose h3 { font-size: 16px; }

/* ------------------------------------------------------------ the portal */
/* the portal is the composer's pop-up on the Write page (public.js, portal; public/write.js): the composer in a box over
   the wall of notes — on a wider screen a column at the foot of the window, at the left, as tall as the window under the
   header (the rules under the wall of notes, below); on a phone the dock at the foot of the screen (the block at the end
   of this file). The base here is what both start from. */
body.landing .portal { position: relative; margin: 0; padding: 0; background: none; box-shadow: none; min-height: 0; box-sizing: border-box; scroll-margin-top: 28px; display: block; }
body.landing .portal-head { display: none; }
body.landing .portal-grid { display: block; margin: 0; min-height: 0; }
/* the two cards take the screen's height (56 px of air above and below); inside the composer the writing box grows to fill it */
body.landing .composer-device .dev-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.landing .composer-device .dev-body > form.composer, body.landing .composer-device .dev-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.landing .composer-device form.composer .msgfield { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.landing .composer-device form.composer .msgbox { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative; }
body.landing .composer-device form.composer .msgbox textarea { flex: 1 1 auto; min-height: 190px; height: auto; resize: none; }
body.landing .portal-letters, body.landing .day-rail { display: none; }
/* the Write page's Write key stands in the wall's bar, under the header all the way down (the wall of notes, below) */
body.landing .device { padding: 28px; border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--glass-shadow); }
:root[data-theme="dark"] body.landing .device { background: var(--glass); }
body.landing .dev-led, body.landing .dev-grip, body.landing .dev-vents { display: none; }
.dev-close { display: none; }                                                        /* the pop-up's close key: only where the composer is a pop-up (a phone's messages page, below) */
body.landing .dev-title { margin: 0 0 14px; font-size: 23.5px; line-height: 1.1; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
body.landing .dev-head { margin: 0 0 14px; gap: 10px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; color: var(--cobalt); font-weight: 500; }
body.landing .dev-chip { font-family: var(--display); font-size: 13px; letter-spacing: .12em; font-weight: 600; color: var(--paper); background: var(--ink); border-radius: 999px; padding: 7px 13px; box-shadow: none; }
body.landing .dev-chan { color: var(--dim); }
body.landing .dev-chip.dev-chip-later { background: transparent; color: var(--dim); border: 1px dashed rgba(var(--cobalt-rgb),.45); font-weight: 500; }   /* no callsign yet: one comes with the first message */
/* the day's question from the habitat over the writing box (public.js, composerPrompt): the question for the community
   hour on the day's mission sheet, on a tinted band with a bar of Mars at its left, and a line inviting an answer */
body.landing .dev-prompt { display: grid; gap: 4px; margin: 0 0 14px; padding: 12px 14px 12px 16px; border-radius: 14px; background: rgba(255,90,31,.08); border-left: 3px solid var(--mars); }
:root[data-theme="dark"] body.landing .dev-prompt { background: rgba(255,90,31,.1); }
body.landing .dev-prompt-k { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mars-ink); }
body.landing .dev-prompt-q { margin: 0; font-family: var(--display); font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
body.landing .dev-prompt-n { font-size: 13px; line-height: 1.4; color: var(--dim); }
body.landing .composer-device.sending .dev-prompt { display: none; }                  /* the dial has the box to itself while a message crosses */

/* the cookie question (layout.js, consent()): a small card at the foot of the window, at the right, until it is answered
   — the page opens as it is behind it, nothing dimmed or blurred, nothing held still (12 October: "on opening the website
   do not have accept cookies in the centre; have a pop-up on the bottom right and open the website as is" — it had stood
   in the middle over a blurred page since October); on a phone (below) a sheet above the bar of keys */
body.landing .consent-veil { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: min(380px, calc(100vw - 40px)); max-height: calc(100vh - 40px); pointer-events: none; }
body.landing .consent-veil > .consent { pointer-events: auto; }
body.landing .consent { position: relative; z-index: 91; width: 100%; max-height: calc(100vh - 40px); overflow: auto; padding: 18px 20px 16px; border-radius: 22px; background: var(--glass-solid); border: 1px solid var(--glass-edge); box-shadow: 0 24px 60px -24px rgba(15,21,64,.45), 0 2px 6px rgba(30,40,120,.08); color: var(--ink); }
:root[data-theme="dark"] body.landing .consent { background: var(--glass-solid); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); }
body.landing .consent .consent-cs { color: var(--mars-ink, #ff5a1f); font-weight: 700; letter-spacing: .08em; }
body.landing .consent h2 { margin: 0 0 8px; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
body.landing .consent p { margin: 0 0 14px; font-family: var(--display); font-size: 14px; line-height: 1.5; color: var(--dim); }
body.landing .consent-keys { display: flex; gap: 8px; }
body.landing .consent-keys .btn { flex: 1 1 0; min-height: 42px; padding: 0 12px; font-size: 12px; letter-spacing: .1em; }
body.landing .consent-keys a.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
body.landing .consent-keys .btn:not(.primary) { background: rgba(255,255,255,.5); color: var(--cobalt); border: 1px solid rgba(var(--cobalt-rgb),.45); box-shadow: none; }
:root[data-theme="dark"] body.landing .consent-keys .btn:not(.primary) { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.3); }
/* the card's sky: a strip of night with a slow field of stars, Mars rising at the edge, and a crew member in a helmet
   floating in it — a space suit and a visor, no face, nobody in particular; the card rises into view once */
body.landing .consent { overflow: hidden; padding-top: 0; animation: consent-in .5s cubic-bezier(.2,.8,.2,1) both; }
body.landing .consent-sky { position: relative; height: 150px; margin: 0 -20px 14px; overflow: hidden; background: radial-gradient(120% 140% at 80% 120%, #3a2a8a 0%, #15185a 45%, #070a26 100%); }
body.landing .consent-stars { position: absolute; inset: -40px; background-image:
  radial-gradient(1.2px 1.2px at 12% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 28% 68%, #fff 99%, transparent),
  radial-gradient(1.4px 1.4px at 44% 14%, #fff 99%, transparent), radial-gradient(1px 1px at 58% 52%, rgba(255,255,255,.7) 99%, transparent),
  radial-gradient(1.3px 1.3px at 72% 30%, #fff 99%, transparent), radial-gradient(1px 1px at 86% 76%, rgba(255,255,255,.8) 99%, transparent),
  radial-gradient(1px 1px at 92% 12%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 6% 84%, rgba(255,255,255,.7) 99%, transparent),
  radial-gradient(1px 1px at 36% 40%, rgba(255,255,255,.6) 99%, transparent), radial-gradient(1.1px 1.1px at 66% 88%, #fff 99%, transparent);
  animation: consent-drift 40s linear infinite; }
body.landing .consent-planet { position: absolute; right: -60px; bottom: -130px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb07a, #ff5a1f 45%, #9c2a07 80%); box-shadow: 0 0 60px 10px rgba(255,90,31,.35); }
body.landing .consent-orbit { position: absolute; left: 50%; top: 50%; width: 260px; height: 90px; margin: -45px 0 0 -130px; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%; transform: rotate(-12deg); }
body.landing .consent-astro { position: absolute; left: 50%; top: 14px; width: 128px; height: 136px; margin-left: -64px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); transform-origin: 50% 60%; animation: consent-float 6s ease-in-out infinite; }
body.landing .consent-astro .consent-blink { animation: consent-blink 1.6s steps(2) infinite; }
body.landing .consent h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 21px; letter-spacing: -.02em; text-transform: none; }
body.landing .consent .consent-cs { font-size: 14px; letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; background: rgba(255,90,31,.12); border: 1px solid rgba(255,90,31,.35); align-self: center; }
body.landing .consent-keys .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* (the card's privacy link under the keys went on 13 October: "remove the Datenschutz button from cookies" — the foot
   of every page links the privacy policy) */
@keyframes consent-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes consent-drift { to { transform: translate(-40px, 20px); } }
@keyframes consent-blink { 50% { opacity: .2; } }
@keyframes consent-in { from { transform: translateY(24px) scale(.98); opacity: 0; } }
body.landing .composer .msgbox textarea { min-height: 190px; padding: 18px 20px 34px; border-radius: 18px; background: var(--well); border: 1px solid rgba(var(--cobalt-rgb),.18); box-shadow: var(--sh-inset); font-family: var(--display); font-size: 16px; color: var(--ink); }
body.landing .composer .msgbox textarea::placeholder { color: var(--faint); }
body.landing .composer .msgbox .counter { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .08em; color: var(--dim); right: 16px; bottom: 12px; }
body.landing .composer .tagbar { margin: 14px 0 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
body.landing .composer .tagbar .lbl { flex: none; }
body.landing .composer .tagbar .lbl { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; color: var(--dim); line-height: 1.4; }
body.landing .composer .tags-note { display: none; }
body.landing .composer .tags { gap: 6px; flex: none; width: 100%; min-width: 0; }                  /* the tagbar is a column here: the row keeps its own height */
body.landing .composer hr { margin: 14px 0; border: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--mars), rgba(255,90,31,.15)); }
body.landing .composer .dev-foot { justify-content: stretch; }
body.landing .composer button.primary { width: 100%; padding: 0 34px; border-radius: 999px; }
/* the Transmit key stands still under the pointer (9 October, the writing screen at the venue: "the button lifts when the
   cursor is over it, but the click is not registered" — it rose a pixel under the pointer and sank two when pressed, so a
   press near its edge began on the key and ended beside it, and no click came): it brightens under the pointer and
   darkens while pressed, in place — and it takes a press a little beyond its edge, an invisible margin round it
   (composer.js catches the release there too) */
body.landing .composer button.primary, body.landing .composer button.primary:hover, body.landing .composer button.primary:active { transform: none !important; }
body.landing .composer button.primary { position: relative; transition: filter .12s ease, box-shadow .12s ease; }
body.landing .composer button.primary:hover { filter: brightness(1.08); }
body.landing .composer button.primary:active { filter: brightness(.88); }
body.landing .composer button.primary::after { content: ""; position: absolute; inset: -12px -8px; border-radius: inherit; }
/* the key while its message leaves (composer.js): held, dimmed a little, a slow pulse — pressed, and heard (8 October) */
body.landing .composer button.primary.is-sending { opacity: .72; cursor: progress; animation: key-sending 1.1s ease-in-out infinite; }
@keyframes key-sending { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { body.landing .composer button.primary.is-sending { animation: none; } }
body.landing .flash.err { border-radius: 14px; }
/* while a message crosses: the dial as the station draws it, on the glass */
body.landing .transit-block { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(224px, .66fr); grid-template-rows: auto; align-items: center; align-content: center; }   /* the dial large at the left — the crossing is the box's picture while it lasts (8 October: "bigger and more prominent") — its readings beside it
body.landing .transit .state { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; color: var(--cobalt); }
body.landing .transit .state b { color: var(--ink); }
body.landing .transit .clock { font-family: var(--display); color: var(--ink); margin: 6px 0 12px; }
@supports (font-size: 1cqi) { body.landing .transit .clock { font-size: clamp(30px, 15cqi, 48px); } }
body.landing .transit .tbar { background: rgba(var(--cobalt-rgb),.14); box-shadow: none; height: 6px; margin-bottom: 12px; }
body.landing .transit .honesty { margin-top: 12px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .08em; color: var(--dim); }
body.landing .transit .honesty b { color: var(--ink); }
body.landing .xdial { max-width: 380px; width: 100%; margin: 0 auto; }

/* the board */
body.landing .feed-wrap { min-height: 520px; }                                     /* the board fills the row the composer sets; its cards scroll inside */
body.landing .screen.board { background: var(--glass); color: var(--ink); padding: 28px 30px 24px; border-radius: var(--r-lg); box-shadow: var(--glass-shadow); border: 1px solid var(--glass-edge); }
body.landing .board-head { padding-bottom: 14px; border-bottom: 1px solid var(--hair); align-items: center; }
body.landing .board-head h2 { font-size: 23.5px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
body.landing .board .live { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; color: var(--mars-ink); }
body.landing .board .live::before { background: var(--mars); box-shadow: 0 0 10px 2px rgba(255,90,31,.7); }
/* under the composer's key: that every message is beamed into space as well (communicate.js, spaceRelayOn) */
body.landing .composer .dev-foot { flex-wrap: wrap; align-items: center; gap: 8px 14px; }
body.landing .composer .dev-space { flex: 1 1 100%; text-align: center; font-family: var(--display); font-size: 12px; line-height: 1.45; color: var(--dim); }
/* the exchanges (messageCard in src/views/pages/public.js): a card per exchange — the visitor's message in a shaded box, a
   line of small print over it (the callsign, Earth, the time it was sent; the reference number at the right) and its tags
   under the text; beneath the box CREW ANSWER and the crew's reply, large. A message not yet answered shows its state where
   the answer will stand. On the board (the mission page, the messages page) and, after the run, among the last exchanges
   on the closing page. */
body.landing .card.xc { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 20px; background: rgba(255,255,255,.72); border: 1px solid rgba(var(--cobalt-rgb),.1); box-shadow: 0 10px 30px -20px rgba(15,21,64,.35); overflow: visible; }
:root[data-theme="dark"] body.landing .card.xc { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
body.landing .card.xc .card-post { padding: 12px 14px 14px; border-radius: 14px; background: rgba(var(--cobalt-rgb),.07); }
:root[data-theme="dark"] body.landing .card.xc .card-post { background: rgba(255,255,255,.06); }
body.landing .card.xc .card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0; margin: 0 0 8px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
body.landing .card.xc .card-meta { flex: 1 1 auto; min-width: 0; line-height: 1.55; }
body.landing .card.xc .card-meta .cs { font-family: inherit; font-size: inherit; letter-spacing: inherit; color: var(--ink); font-weight: 600; }
body.landing .card.xc .card-meta time { white-space: nowrap; }                                     /* the day and the time stay together */
body.landing .card.xc .card-ref { flex: none; color: var(--faint); }
body.landing .card.xc .card-body { padding: 0; font-family: var(--display); font-size: 17px; line-height: 1.45; color: var(--ink); }
body.landing .card.xc .card-tags { margin: 8px 0 0; padding: 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); line-height: 1.55; }   /* its tags, under the text */
body.landing .card.xc .card-reply { margin: 0; padding: 0 2px; background: transparent; }
body.landing .card.xc .card-reply .who { display: block; margin: 0 0 6px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mars-ink); }
body.landing .card.xc .card-reply p { margin: 0; padding: 0; font-family: var(--display); font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); position: static; }
body.landing .card.xc .card-reply p::before { content: none; }
body.landing .card.xc .card-reply-meta { margin: 8px 0 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); line-height: 1.55; }
body.landing .card.xc .card-state-line { padding: 0 2px; }
body.landing .card.xc .badge.new, body.landing .card.xc .card-state { display: inline-block; margin: 0; padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--display); font-size: var(--fs-tag); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--dim); background: transparent; box-shadow: none; }
body.landing .card.xc .badge.new { margin-left: 8px; align-self: center; }
body.landing .card.xc .card-state.warn, body.landing .card.xc .card-state.mars, body.landing .card.xc .card-state.ok, body.landing .card.xc .badge.new { color: var(--mars-ink); }
body.landing .card.xc .card-state.earth { color: var(--cobalt); }
body.landing .card.xc .card-day, body.landing .card.xc .card-sent, body.landing .card.xc .card-when, body.landing .card.xc .tagrow, body.landing .card.xc .card-foot { display: none; }
/* the card's line into space (spaceLine in public.js, run by board.js): how far the message has got since it was launched —
   the figures in Mars orange, running (no longer how long ago it was launched: 8 October) */
body.landing .card.xc .card-space { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; font-family: var(--display); font-size: 13.5px; line-height: 1.45; color: var(--dim); }
body.landing .card.xc .card-space-line b { font-weight: 600; color: var(--mars-ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
body.landing .card.xc .card-space-more { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; }
/* a tap on the card opens its journey (board.js): the card says so at the right, quietly */
body.landing .card.xc:has(.card-space[data-launched]) { cursor: pointer; }
body.landing .card.xc .card-space-go { color: var(--cobalt); white-space: nowrap; transition: color .15s ease; }
body.landing .card.xc:hover .card-space-go { color: var(--mars-ink); }
body.screen .card.xc { cursor: default; }
body.screen .card.xc .card-space-go { display: none; }                                             /* nothing to tap on a screen */
/* where the message is (board.js): a panel over the page with the one thing the message has just passed — how many
   times farther the message is, then the object's own distance and a line about it; nothing on it is a link */
body.landing > .journey, .journey { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 9, 18, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.landing > .journey.is-open, .journey.is-open { display: flex; }
body.journey-open { overflow: hidden; }
.jr-panel { position: relative; width: min(560px, 100%); max-height: min(88vh, 88dvh); overflow: auto; overscroll-behavior: contain; padding: 26px 28px 26px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); color: var(--ink); font-family: var(--display); }
:root[data-theme="dark"] .jr-panel { background: rgba(14, 16, 30, .92); }
.jr-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--glass-edge); background: transparent; color: var(--dim); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: none; min-height: 0; }
.jr-close:hover { color: var(--ink); background: rgba(var(--cobalt-rgb), .1); transform: none; box-shadow: none; }
/* the cross in the middle of its round (October: "center the cross in the circle, it's off center"): drawn (board.js), set
   in the middle by the flex box, the round kept square — a phone's 44 px for a finger, no button's letter-spacing */
body .journey .jr-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-height: 40px; padding: 0; letter-spacing: 0; text-indent: 0; }
body .journey .jr-close .jr-x { display: block; width: 14px; height: 14px; flex: none; }
.jr-line { margin: 0 40px 0 0; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.jr-line .jr-r { color: var(--mars-ink); font-variant-numeric: tabular-nums; }
.jr-line .jr-what { color: var(--cobalt); }                                    /* the object's name — a word, not a link */
:root[data-theme="dark"] .jr-line .jr-what { color: #b3baff; }
.jr-fact { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--glass-edge); font-size: 16px; line-height: 1.55; color: var(--dim); }
@media (max-width: 600px) {
  /* on a phone the panel floats in the middle of the screen, a card with room around it — not a sheet at the foot */
  body.landing > .journey, .journey { padding: 24px 16px; align-items: center; }
  .jr-panel { width: 100%; max-height: 84vh; max-height: 84dvh; border-radius: 22px; padding: 22px 18px 24px; }
  body .journey .jr-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-height: 44px; top: 12px; right: 12px; }
  .jr-line { font-size: 21px; }
}
/* on the board: the cards in one sequence, the newest first, one under the other — the column scrolls — the viewer's own
   with a rule of Mars at the left (the board screen in the square stands them three across: screen.css) */
body.landing .board .card { border-bottom: 0; margin: 0 0 12px; padding: 14px 16px 16px; }
body.landing .board .card[data-mine] { box-shadow: inset 3px 0 0 var(--mars), 0 10px 30px -20px rgba(15,21,64,.35); padding-left: 19px; }
:root[data-theme="dark"] body.landing .board .card[data-mine] { box-shadow: inset 3px 0 0 var(--mars); }
body.landing .board .card .badge.new { display: none; }
body.landing .feed-more { display: none; }
body.landing .feed .card.is-more { display: none; }
body.landing .board .badge.new { display: none; }
body.landing .board .feed-filter { border-top: 1px solid var(--hair); padding-top: 16px; gap: 6px; }
body.landing .board .feed-filter .chip { padding: 0 10px; font-size: var(--fs-label); letter-spacing: .08em; }
body.landing .board .empty, body.landing .dpanel .empty, body.landing .empty { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px dashed rgba(var(--cobalt-rgb),.35); border-radius: 18px; background: transparent; }

/* ------------------------------------------------------ the wall of notes */
/* The Write page's board (public.js, boardWall, noteCard), after the reference handed over: the exchanges as notes on
   the page's ground — flat cards with a folded corner, three across on a wide screen, two on a narrower one, one on a
   phone, every row starting level — never in a box, flowing with the page, the older pages laid on as the reader
   scrolls (board.js). Over them a bar that stays under the header: the board's name with its LIVE mark and the count,
   the chips that narrow the wall, and at the right the key back up to the composer — the page's Write key, there all
   the way down. Each note: a disc with the writer's initials in a colour of the callsign's own, the callsign and Earth,
   the reference number; the message as the title; CREW ANSWER and the answer under it, or the message's state where
   the answer will stand; a foot with the distance the message has travelled (ticking) and the day and time it was sent;
   a band naming its tags, each a key. The viewer's own notes carry their fold in Mars. */
/* the shade behind a note: by day a soft shadow of ink, close under the card and wider and fainter further down, so the
   white note stands off the white page; by night a faint halo of light about the card and a deep shadow under it, since a
   shadow of black would vanish on the black ground */
/* a note's ground is a grey — a cool light grey by day on the white page, a grey of the dark by night — so the words
   stand on a card and the crew's answer, on the page's own paper inside it, stands off the card */
/* a note's own colour, set apart from the ground (October: the notes were a shade too close to the page): a note is
   paper — warm, the sand of the brand's gradient thinned to a sheet — on the cool drafting paper by day, and by night a
   warm graphite, a good step lighter than the near-black ground, so the cobalt chips and the Mars discs sit on something
   that is not the page */
:root { --note-bg: #fbf6ee; --note-edge: #e4dac8; --note-shadow: 0 1px 2px rgba(15,21,64,.08), 0 8px 20px -8px rgba(15,21,64,.18), 0 26px 50px -22px rgba(15,21,64,.34); }
:root[data-theme="dark"] { --note-bg: #2f2b29; --note-edge: #4a4440; --note-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 36px rgba(255,200,160,.06), 0 24px 48px -18px rgba(0,0,0,.95); }
body.landing .wall-sec { position: relative; margin: 0; padding: 8px 0 72px; scroll-margin-top: 124px; }
body.landing .wall-wrap { min-height: 0; }                                            /* no box: the wall is as tall as its notes */
body.landing .wall-wrap .feed-scroll { position: static; display: block; }
body.landing .board.wall { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
/* the bar under the header */
body.landing .wall-bar { position: sticky; top: 113px; z-index: 6; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px 22px; margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) 12px;
  border-bottom: 1px solid var(--hair); background: var(--glass-solid); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
body.landing .wall-bar .board-head { flex: none; display: grid; grid-template-columns: auto auto; grid-template-areas: "h live" "count count"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 0; border: 0; }
body.landing .wall-bar .board-head h2 { grid-area: h; font-size: 19px; margin: 0; }
body.landing .wall-bar .board-head .live { grid-area: live; }
body.landing .wall-bar .wall-count { grid-area: count; font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
body.landing .wall-bar .feed-filter { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
body.landing .wall-bar .feed-filter[hidden] { display: none; }
body.landing .wall-bar .feed-filter .chip { padding: 0 10px; font-size: var(--fs-label); letter-spacing: .08em; }
/* the notes, three across — each row starting level, a note as tall as what it holds */
body.landing .wall .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; padding: 22px 0 0; }
body.landing .wall .cards > .empty { grid-column: 1 / -1; }
body.landing .card.xc.note, :root[data-theme="dark"] body.landing .card.xc.note { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border-radius: 4px;
  background: var(--note-bg); border: 1px solid var(--note-edge); box-shadow: var(--note-shadow); color: var(--ink); overflow: hidden; }
body.landing .board .card.note[data-mine] { padding-left: 0; box-shadow: inset 3px 0 0 var(--mars), var(--note-shadow); }   /* the viewer's own: a Mars edge at the left */
/* a note the filter has put aside is gone from the wall — whatever the theme: the dark theme's rule for the note
   (above, :root[data-theme="dark"] …) outweighs a plain .is-hidden, which left every note standing under a chosen
   tag (October: "it's not filtering messages by tag on the /write page") */
body.landing .card.note.is-hidden, :root[data-theme="dark"] body.landing .card.xc.note.is-hidden, body.landing .card.is-hidden { display: none !important; }
/* the message's round trip, in the corner where the folded corner was (October): Earth (cobalt, lower left) to Mars
   (upper right) and back. Answered — the loop closed in Mars orange and Mars lit: the signal went and came back. Still
   out — the way out alone, dashed, the message a dot flying along it (the way back a ghost), Mars hollow; arrived, the
   dot rests inside Mars and Mars pulses until the crew answer. The viewer's own notes keep a Mars edge at the left. */
body.landing .card.note .note-mark { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; z-index: 2; color: var(--mars); pointer-events: none; }
body.landing .card.note .note-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.landing .card.note .note-mark .nm-loop, body.landing .card.note .note-mark .nm-out, body.landing .card.note .note-mark .nm-back { fill: none; stroke-linecap: round; }
body.landing .card.note .note-mark .nm-earth { fill: var(--cobalt); }
body.landing .card.note .note-mark .nm-loop { stroke: var(--mars); stroke-width: 1.8; }
body.landing .card.note .note-mark .nm-mars { fill: var(--mars); }
body.landing .card.note .note-mark.is-waiting { color: var(--faint); }
body.landing .card.note .note-mark.is-waiting .nm-out { stroke: currentColor; stroke-width: 1.8; stroke-dasharray: 2.8 2.6; }
body.landing .card.note .note-mark.is-waiting .nm-back { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 1 3.2; opacity: .4; }
body.landing .card.note .note-mark.is-waiting .nm-mars { fill: none; stroke: var(--mars); stroke-width: 1.6; }
body.landing .card.note .note-mark.is-waiting .nm-ship { display: none; }
@supports (offset-path: path('M0 0L1 1')) {
  body.landing .card.note .note-mark.is-waiting .nm-ship { display: block; fill: currentColor; offset-path: path('M7 25A12.73 12.73 0 0 1 25 7'); animation: nm-fly 6s linear infinite; }
  body.landing .card.note .note-mark.is-arrived .nm-ship { animation: none; offset-distance: 100%; fill: var(--mars); }
}
body.landing .card.note .note-mark.is-arrived .nm-mars { transform-origin: 25px 7px; animation: nm-pulse 2.8s ease-in-out infinite; }
@keyframes nm-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes nm-pulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.22); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.landing .card.note .note-mark.is-waiting .nm-ship { animation: none; offset-distance: 50%; }
  body.landing .card.note .note-mark.is-arrived .nm-ship { offset-distance: 100%; }
  body.landing .card.note .note-mark.is-arrived .nm-mars { animation: none; }
}
body.landing .card.note[data-mine] { box-shadow: inset 3px 0 0 var(--mars), var(--note-shadow); }
/* the head */
body.landing .card.note .note-head { display: flex; align-items: center; gap: 10px; padding: 12px 44px 12px 16px; border-bottom: 1px solid var(--note-edge); }   /* room at the right for the signal mark */
body.landing .card.note .note-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.2; }
body.landing .card.note .note-who .cs { font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
body.landing .card.note .note-role { font-family: var(--display); font-size: 12px; color: var(--faint); }
/* the body: the message as the title, its tags right after it — each a key that narrows the wall to it, in the
   message's own colour on a faint tint — and under them the crew's answer as a quoted card (the second reference): a
   rounded card of its own with a hairline edge, its head who answered and where (no disc before it, 8 October), the day
   and time of the answer at the right, the answer beneath; or the message's state where the answer will stand */
body.landing .card.note .note-main { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px; }
body.landing .card.note .card-body.note-title { margin: 0; padding: 0; font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; }
body.landing .card.note .note-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 0; }
body.landing .card.note .note-tag { margin: 0; padding: 4px 9px; border: 0; min-height: 0; border-radius: 7px; background: rgba(var(--cobalt-rgb),.09); font-family: var(--display); font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: lowercase; cursor: pointer; color: var(--ink); box-shadow: none; }
body.landing .card.note .note-tag:hover { background: rgba(var(--cobalt-rgb),.14); color: var(--ink); text-decoration: none; transform: none; box-shadow: none; }
body.landing .card.note .card-reply.note-answer { margin: 2px 0 0; padding: 10px 12px 11px; background: #fff; border: 1px solid var(--note-edge); border-radius: 12px; }   /* the answer, a white card on the paper */
body.landing .card.note .note-ahead { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; line-height: 1.2; }
body.landing .card.note .note-awho { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }   /* the officer over the line, always */
body.landing .card.note .note-awho .cs { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
body.landing .card.note .note-awho .note-role { font-size: 11.5px; }
body.landing .card.note .note-awhen { flex: none; font-family: var(--display); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.landing .card.note .card-reply p { margin: 0; font-family: var(--display); font-size: 14.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
body.landing .card.note .card-reply .who { display: none; }
body.landing .card.note .card-state-line { padding: 0; }
body.landing .card.note .card-state { font-size: 10px; }
/* the foot: the distance into space, ticking, and the day and time it was sent */
body.landing .card.note .note-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--note-edge); font-family: var(--display); font-size: 12px; color: var(--faint); }
body.landing .card.note .card-space-compact { display: flex; align-items: center; gap: 6px; padding: 0; flex-direction: row; min-width: 0; font-size: 12px; color: var(--faint); }
body.landing .card.note .card-space-compact .card-space-line b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.landing .card.note .card-space-compact .card-space-go { color: var(--cobalt); font-size: 15px; line-height: 1; margin-left: 2px; }
body.landing .card.note .note-when { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.landing .card.note .card-foot, body.landing .card.note .card-tags, body.landing .card.note .card-top { display: none; }
body.landing .card.note:has(.card-space[data-launched]) { cursor: pointer; }
/* under the pointer a note that can be opened lifts and lights up — an orange edge and glow, the key brightening,
   and a band sliding up over its foot that says what a click does — so nobody wonders whether a note is for
   clicking (board.js opens its journey). Hover only: a finger gets the band's words from the key's title */
body.landing .card.note { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.landing .card.note .note-hint { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 9px 16px; background: var(--mars); color: #fff;
  font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-align: center; transform: translateY(100%); opacity: 0;
  transition: transform .2s ease, opacity .2s ease; pointer-events: none; }
body.landing .card.note:has(.card-space[data-launched]):hover { transform: translateY(-3px); border-color: var(--mars);
  box-shadow: 0 0 0 2px rgba(255,90,31,.28), 0 18px 36px -16px rgba(255,90,31,.55), var(--note-shadow); }
body.landing .card.note:has(.card-space[data-launched]):hover .note-hint { transform: none; opacity: 1; }
body.landing .card.note:has(.card-space[data-launched]):hover .card-space-compact { color: var(--mars-ink); }
body.landing .card.note:has(.card-space[data-launched]):hover .card-space-compact .card-space-go { color: var(--mars); }
body.landing .card.note:has(.card-space[data-launched]):hover .note-mark.is-waiting { color: var(--mars); }
@media (hover: none) { body.landing .card.note .note-hint { display: none; } body.landing .card.note:has(.card-space[data-launched]):hover { transform: none; } }
body.screen .card.note .note-hint { display: none; }
body.landing .card.note.is-sought { border-color: var(--mars); outline: 2px solid var(--mars); outline-offset: 2px; }   /* the note a link led to (board.js) */
/* the end of the wall: loading the page before, then the beginning of the correspondence */
body.landing .feed-end { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px 0 8px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
body.landing .feed-end[hidden] { display: none; }
body.landing .feed-end::before, body.landing .feed-end::after { content: ""; flex: 1 1 auto; max-width: 120px; height: 1px; background: var(--hair); }
body.landing .feed-end:not(.is-done) span::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 10px; border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--cobalt); vertical-align: -1px; animation: wall-spin .9s linear infinite; }
@keyframes wall-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.landing .feed-end:not(.is-done) span::after { animation: none; } }
@media (max-width: 1100px) { body.landing .wall .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* the wall by night: the notes lifted off the black — a lighter surface with a clear edge, the small print brighter than
   the dress's faint, the bar a solid band with a rule under it, the chips with an edge of their own */
:root[data-theme="dark"] body.landing .card.xc.note { --dim: #cdcdd4; --faint: #a0a0aa; }
:root[data-theme="dark"] body.landing .card.note .card-body.note-title { color: #f6f6f3; }
:root[data-theme="dark"] body.landing .card.note .note-head, :root[data-theme="dark"] body.landing .card.note .note-foot { border-color: #30303a; }
:root[data-theme="dark"] body.landing .card.note .note-tag { background: rgba(255,255,255,.08); color: #f6f6f3; }
:root[data-theme="dark"] body.landing .card.note .note-tag:hover { background: rgba(255,255,255,.14); color: #fff; }
:root[data-theme="dark"] body.landing .card.note .card-reply.note-answer { background: #1a1716; border-color: #46403b; }
:root[data-theme="dark"] body.landing .card.note .card-reply p, :root[data-theme="dark"] body.landing .card.note .note-awho .cs { color: #f6f6f3; }
:root[data-theme="dark"] body.landing .card.note .note-head { background: #282321; }   /* the warm note's head, a shade deeper */
:root[data-theme="dark"] body.landing .card.note:has(.card-space[data-launched]):hover { border-color: var(--mars); }
:root[data-theme="dark"] body.landing .wall-bar { background: #141418; border-bottom-color: #2c2c35; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="dark"] body.landing .wall-bar .board-head h2 { color: #f6f6f3; }
:root[data-theme="dark"] body.landing .wall-bar .wall-count { color: #a0a0aa; }
:root[data-theme="dark"] body.landing .wall-bar .feed-filter .chip { background: #202027; border-color: #41414c; color: #e9e9ee; }
:root[data-theme="dark"] body.landing .wall-bar .feed-filter .chip:hover { background: #2b2b34; color: #fff; }
:root[data-theme="dark"] body.landing .wall-bar .feed-filter .chip.active { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; }
:root[data-theme="dark"] body.landing .wall-bar .feed-filter .chip.mine { color: var(--mars-ink); border-color: rgba(255,106,46,.6); }
:root[data-theme="dark"] body.landing .wall-bar .feed-filter .chip.mine.active { background: var(--mars); color: #1a0a02; }
:root[data-theme="dark"] body.landing .feed-end { color: #a0a0aa; }
:root[data-theme="dark"] body.landing .feed-end::before, :root[data-theme="dark"] body.landing .feed-end::after { background: #30303a; }

/* ------------------------------------------------- the composer's pop-up */
/* The composer in a window in the middle of the screen, the page blurred and dimmed behind it, on every public page
   (layout.js, writeKit; public.js, portal; public/write.js): 640px wide, on the notes' surface, a rule of Mars along
   its top — an eyebrow with Transmit, the one-way signal and the distance, the title with its cross, your callsign, the
   crew's question for the day, the writing box, the tags, Transmit across the whole width. Hidden until the floating
   Write key (or a #write door, or /write#write) opens it; its cross, Escape or a click on the blur close it. Once a
   message is sent the crossing plays in it — the dial, the read-out — with a Message Board key under it. A phone has
   the box as the Write page's dock at the foot of the screen (the block at the end of this file) and nothing of it
   elsewhere; a short window gets the window too, scrolling inside. */
body.landing .portal-pop { display: none; }
@media (min-width: 761px) {
  body.landing .portal-pop { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px; box-sizing: border-box; min-height: 0;
    visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }
  body.landing .portal-pop::before { content: ""; position: absolute; inset: 0; background: rgba(233,237,240,.55); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
  :root[data-theme="dark"] body.landing .portal-pop::before { background: rgba(0,0,0,.6); }
  body.landing .portal-pop.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .22s ease, visibility 0s; }
  body.landing .portal-pop .portal-grid { position: relative; display: block; width: min(640px, 100%); max-height: calc(100vh - 48px); margin: 0; transform: translateY(14px) scale(.985); transition: transform .26s cubic-bezier(.2,.7,.2,1); }
  body.landing .portal-pop.is-open .portal-grid { transform: none; }
  body.landing .portal-pop .portal-main { margin: 0; max-height: calc(100vh - 48px); display: flex; flex-direction: column; min-height: 0; }
  body.landing .portal-pop .device { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 24px 28px 26px; border-radius: 20px; border: 1px solid var(--note-edge); border-top: 3px solid var(--mars);
    background: var(--note-bg); box-shadow: 0 40px 90px -30px rgba(15,21,64,.5), 0 2px 8px rgba(15,21,64,.08); -webkit-backdrop-filter: none; backdrop-filter: none; overflow: auto; overscroll-behavior: contain; }
  :root[data-theme="dark"] body.landing .portal-pop .device { background: #1b1b21; border-color: #34343e; border-top-color: var(--mars); box-shadow: 0 40px 100px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
  body.landing .composer-device { position: relative; }
  html.js body.landing .portal-pop .dev-close { display: grid; place-items: center; position: absolute; top: 18px; right: 20px; z-index: 2; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(15,21,64,.08); color: var(--ink); cursor: pointer; box-shadow: none; transition: background .15s; }
  html.js body.landing .portal-pop .dev-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  html.js body.landing .portal-pop .dev-close:hover { background: rgba(15,21,64,.14); transform: none; box-shadow: none; }
  html.js[data-theme="dark"] body.landing .portal-pop .dev-close { background: rgba(255,255,255,.1); color: #f1f1ef; }
  html.js[data-theme="dark"] body.landing .portal-pop .dev-close:hover { background: rgba(255,255,255,.18); }
  /* the head: the eyebrow — Transmit and its one-way signal — over the title; your callsign under it */
  body.landing .portal-pop .dev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--note-edge); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  body.landing .portal-pop .dev-chip { font-size: 12.5px; padding: 6px 12px; }
  body.landing .portal-pop .dev-signal { order: -1; flex: 1 1 100%; margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mars-ink); font-weight: 600; white-space: nowrap; }
  body.landing .portal-pop .dev-signal b { color: var(--ink); font-weight: 700; letter-spacing: .04em; }
  body.landing .portal-pop .dev-title { order: -2; margin: 0 56px 6px 0; font-size: 27px; line-height: 1.05; letter-spacing: -.025em; }
  body.landing .portal-pop .dev-prompt { margin: 0 0 16px; padding: 12px 16px 12px 18px; border-radius: 12px; }
  body.landing .portal-pop .composer-device .dev-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.landing .portal-pop .composer-device .dev-body > form.composer { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 0; }
  body.landing .portal-pop .composer-device form.composer .msgfield { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; }
  body.landing .portal-pop .composer-device form.composer .msgbox { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative; }
  body.landing .portal-pop .composer-device form.composer .msgbox textarea { flex: 1 1 auto; min-height: 200px; height: auto; max-height: 44vh; resize: none; box-sizing: border-box; padding: 16px 18px 34px; border-radius: 12px; border: 1px solid var(--note-edge); background: rgba(47,69,232,.04); font-size: 17px; line-height: 1.5; color: var(--ink); }
  body.landing .portal-pop .composer-device form.composer .msgbox textarea:focus { outline: 2px solid var(--cobalt-fill); outline-offset: -1px; border-color: transparent; }
  :root[data-theme="dark"] body.landing .portal-pop .composer-device form.composer .msgbox textarea { background: #121217; border-color: #34343e; color: #f1f1ef; }
  body.landing .portal-pop .composer .msgbox .counter { right: 14px; bottom: 10px; font-size: 12px; color: var(--dim); }
  body.landing .portal-pop .composer .tagbar { margin: 14px 0 0; }
  body.landing .portal-pop .composer .tagbar .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  body.landing .portal-pop .composer .tagbar .tags-note { display: none; }
  body.landing .portal-pop .composer .tags label { min-height: 34px; }
  body.landing .portal-pop .composer hr { margin: 16px 0; border-color: var(--note-edge); }
  body.landing .portal-pop .composer .dev-foot { margin: 0; }
  body.landing .portal-pop .composer button.primary { width: 100%; min-height: 52px; font-size: 13px; letter-spacing: .14em; }
  body.landing .portal-pop .composer .dev-space { font-size: 12px; }
  /* the crossing in the window: the dial, the read-out, and under them the key to the Message Board */
  body.landing .portal-pop .composer-device .dev-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  body.landing .portal-pop .composer-device .dev-stage .transit-block { position: static; overflow: visible; margin: 0; }   /* in the window the crossing flows: the window takes its height, the key under it shows */
  body.landing .portal-pop .composer-device .dev-stage .composer.ghost { display: none; }
  body.landing .portal-pop .transit-board { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 50px; margin: 18px 0 0; border-radius: 999px; font-size: 13px; letter-spacing: .1em; white-space: nowrap; padding: 0 16px; text-decoration: none; }
  /* the closed station's notice and the countdown, in the same window */
  body.landing .portal-pop .transit.closed { margin: 0; }
}
/* (the Write key that floated at the foot of the window, at the right, is gone — October: "remove the floating Write to
   the crew button"; the header's Write key and the phone's bar remain) */

/* --------------------------------------------------------- the dashboard */
body.landing .dash { margin: 0; padding: calc(8 * var(--u)) 0 0; background: none; box-shadow: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: min(20px, calc(2.2 * var(--u))); scroll-margin-top: calc(28px - 8 * var(--u)); }   /* a link to #mission (the masthead's button, the foot) lands the heading where the wheel does: 28 px under the top, the section's own air above it discounted */
body.landing .dash > * { grid-column: 1 / -1; }
body.landing .dash-head { margin: 0; align-items: flex-end; }
body.landing .dash-head .bigsec, body.landing .portal-head .bigsec, body.landing .dash-subhead .bigsec { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -.025em; font-weight: 600; color: var(--ink); }
body.landing .dash-sub { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 10px; }
body.landing .dash-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
body.landing .dash-clock-label { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
body.landing .dash-clock b { font-family: var(--display); font-size: 27px; line-height: 1; letter-spacing: .02em; color: var(--cobalt); font-weight: 500; font-variant-numeric: tabular-nums; }
/* the headline figures — the sol (the countdown before the run), the crew — set small in one line under the heading */
body.landing .dash-figs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin: 12px 0 0; font-family: var(--display); font-size: 14px; color: var(--dim); }
body.landing .dash-fig { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
body.landing .dash-fig-k { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); font-weight: 500; }
body.landing .dash-fig b { font-size: 19px; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
body.landing .dash-fig b em { font-style: normal; font-size: 14px; font-weight: 400; color: var(--dim); letter-spacing: 0; margin-left: 4px; }
body.landing .dash-fig-s { color: var(--dim); }
body.landing .dash-fig-s::before { content: "· "; color: var(--faint); }
/* the two doors as small pills, side by side, and beside them the run as a strip of sols */
body.landing .dash-links { grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; margin: 0; align-items: center; }
body.landing .glance-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 18px 0 22px; min-height: 44px; border-radius: 999px; white-space: nowrap; }
body.landing .glance-link-title { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
body.landing .glance-link-arrow { color: var(--mars); font-size: 16px; flex: none; }
body.landing .glance-link:hover { transform: translateY(-1px); }
body.landing .run-strip { grid-column: auto; margin: 0; padding: 9px 20px; border-radius: 999px; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; align-content: center; background: var(--glass-soft); }
body.landing .run-strip > div { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
body.landing .run-strip i { flex: none; width: 100%; height: 5px; border-radius: 3px; background: rgba(var(--cobalt-rgb),.18); }
body.landing .run-strip .past i { background: var(--cobalt-fill); }
body.landing .run-strip .now i { background: var(--mars); box-shadow: 0 0 10px 2px rgba(255,90,31,.5); }
body.landing .run-n, body.landing .run-strip .run-n { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-align: center; order: 2; }
body.landing .run-strip .now .run-n { color: var(--mars-ink); font-weight: 600; }
body.landing .run-d { display: none; }
body.landing .dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
body.landing .dash-grid > .span-12 { grid-column: 1 / -1; }                                       /* the folder the whole width at every desk width (station.css narrows span-12 to half its six-column grid under 1100px, which this grid never becomes) */
body.landing .dash-subhead { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 52px 0 6px; }

/* the panels */
body.landing .dpanel { padding: min(24px, calc(2.7 * var(--u))) 28px; display: flex; flex-direction: column; }
body.landing .dpanel.h-3, body.landing .dpanel.h-4 { height: auto; max-height: none; }   /* Today's Schedule, Meal, Crew, the blogs: as tall as what is in them — nothing scrolls inside a panel */
body.landing .dpanel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 12px; padding: 0; border-bottom: 0; }
body.landing .dpanel-title { display: flex; align-items: center; gap: 12px; }
body.landing .dpanel-title h3 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
body.landing .dpanel-title h3 a { color: inherit; text-decoration: none; border: 0; }
body.landing .dpanel-meta { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: right; line-height: 1.7; max-width: 60%; }
body.landing .dpanel.span-4 .dpanel-head { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
body.landing .dpanel.span-4 .dpanel-meta { text-align: left; max-width: none; }
body.landing .cloud-live { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; color: var(--mars-ink); border: 1px solid var(--mars); border-radius: 999px; padding: 5px 12px; margin-left: 4px; }
body.landing .cloud-live i { background: var(--mars); box-shadow: 0 0 10px 2px rgba(255,90,31,.7); animation: live 2.4s ease-in-out infinite; }
body.landing .cloud-fail, body.landing.inner .count.cloud-fail { color: var(--mars-ink); margin-left: 8px; }                                     /* the latest read of the folder failed: said in orange, with the time */
@keyframes live { 50% { opacity: .35; } }
body.landing .dpanel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.landing .dpanel.scroll .dpanel-body { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--mars) transparent; }
/* the schedule and the day's rows */
body.landing .rows { border-top: 0; }
body.landing .row { padding: 12px 0; border-bottom: 1px solid var(--hair); }
body.landing .row .t { font-family: var(--display); font-size: 14px; color: var(--cobalt); min-width: 52px; }
body.landing .row .m b { font-size: var(--fs-name); font-weight: 500; color: var(--ink); }
body.landing .row .m span { font-size: var(--fs-note); color: var(--dim); }
body.landing .row.done .m b { color: var(--dim); text-decoration: none; font-weight: 400; }
body.landing .row.done .t { color: var(--dim); }
body.landing .row.active { background: rgba(255,90,31,.12); border-radius: 14px; margin: 4px -14px; padding: 12px 14px; }
body.landing .row.active .m b, body.landing .row.active .t { color: var(--mars-ink); font-weight: 600; }
/* the meals */
body.landing .meals { display: flex; flex-direction: column; }
body.landing .meal { padding: 12px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 3px; }
body.landing .meal-slot { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--mars-ink); }
body.landing .meal b { font-size: 16.5px; font-weight: 600; color: var(--ink); }
body.landing .meal-figs { font-size: var(--fs-note); color: var(--dim); }
body.landing .meal-hours { margin: 10px 0 0; font-size: var(--fs-note); color: var(--dim); line-height: 1.5; }
/* the crew */
body.landing .officers { display: flex; flex-direction: column; }
body.landing .officer { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "orb id badge" "orb note badge"; gap: 2px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); background: transparent; box-shadow: none; border-radius: 0; }
/* beside each name, the face mission control filed (the same five faces as on the control page), on a glass disc; its line takes the mood's colour */
body.landing .officer-face { grid-area: orb; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.7); border: 1px solid rgba(var(--cobalt-rgb),.25); box-shadow: 0 8px 18px -10px rgba(15,21,64,.35); color: var(--cobalt); display: inline-flex; align-items: center; justify-content: center; }
body.landing .officer-face svg { width: 34px; height: 34px; display: block; }
body.landing .officer-face.band-0 { color: #12a370; }
body.landing .officer-face.band-1 { color: #2f9e6b; }
body.landing .officer-face.band-3 { color: #d9900b; }
body.landing .officer-face.band-4 { color: var(--mars-ink); }
body.landing .officer-face.band-none { color: var(--faint); }
:root[data-theme="dark"] body.landing .officer-face { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #dfe3ff; }
:root[data-theme="dark"] body.landing .officer-face.band-0 { color: #4fd6a5; }
:root[data-theme="dark"] body.landing .officer-face.band-1 { color: #7fd6b0; }
:root[data-theme="dark"] body.landing .officer-face.band-3 { color: #ffb84d; }
body.landing .officer-id { grid-area: id; display: flex; flex-direction: column; gap: 2px; }
body.landing .officer-id b { font-family: var(--display); font-size: var(--fs-name); font-weight: 600; letter-spacing: .02em; color: var(--ink); }
body.landing .officer-role { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
body.landing .officer .badge { grid-area: badge; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); border: 1px solid rgba(var(--cobalt-rgb),.45); border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,.5); }
:root[data-theme="dark"] body.landing .officer .badge { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.30); }
body.landing .officer-note { grid-area: note; font-size: var(--fs-note); color: var(--ink); }

/* today's scientific mission, at the head of the dashboard over the index of folders (public.js, missionPanel): the
   mission's number and title with its central question as the lead, the three parts of the day side by side — Morning,
   Afternoon, EVA, each under its name with a dot in its colour (cobalt, violet, Mars) — the question for the community
   hour on a tinted band at the foot, and the key to the sheet */
body.landing .mission-today { padding: min(24px, calc(2.7 * var(--u))) 28px 26px; }
body.landing .mission-body { display: grid; gap: 22px; }
body.landing .mission-lead { display: grid; gap: 8px; max-width: 78ch; }
body.landing .mission-no { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--mars-ink); }
body.landing .mission-title { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
body.landing .mission-q { margin: 4px 0 0; font-size: var(--fs-read); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
body.landing .mission-k { display: block; margin: 0 0 3px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--dim); }
body.landing .mission-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.landing .mission-part { --mp: var(--cobalt-fill); display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; border-radius: 18px; background: var(--tile); border: 1px solid rgba(var(--cobalt-rgb),.12); min-width: 0; }
body.landing .mission-part.is-afternoon { --mp: #8b5cf6; }
body.landing .mission-part.is-eva { --mp: var(--mars); }
/* the evening — the first day's only part (9 October: "in the habitat after touchdown only have evening, nothing in the
   morning": the crew go in at five in the evening): in the colour of the hour, and, standing alone, the parts' whole
   width, its lines in two columns rather than one long narrow one (one on a narrow screen) */
body.landing .mission-part.is-evening { --mp: #b7791f; }
:root[data-theme="dark"] body.landing .mission-part.is-evening { --mp: #f0b54a; }
body.landing .mission-parts > .mission-part:only-child { grid-column: 1 / -1; display: block; columns: 2 280px; column-gap: 44px; }
body.landing .mission-parts > .mission-part:only-child > * + * { margin-top: 8px; }
body.landing .mission-parts > .mission-part:only-child > h4 { column-span: all; margin-bottom: 18px; }
body.landing .mission-parts > .mission-part:only-child > h4 + * { margin-top: 0; }   /* both columns' first lines on one line */
body.landing .mission-parts > .mission-part:only-child > ul, body.landing .mission-parts > .mission-part:only-child > ol,
body.landing .mission-parts > .mission-part:only-child > p { break-inside: avoid; }
body.landing .mission-parts > .mission-part:only-child > .mission-sub { break-after: avoid; }
body.landing .mission-part h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
body.landing .mission-part h4::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp) 22%, transparent); }
body.landing .mission-part p, body.landing .mission-part li { margin: 0; font-size: var(--fs-note); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
body.landing .mission-part ul, body.landing .mission-part ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; }
body.landing .mission-part li::marker { color: var(--mp); }
body.landing .mission-part .mission-sub { display: block; margin: 6px 0 0; font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mp); }
body.landing .mission-part .mission-sub:first-child { margin-top: 0; }
body.landing .mission-part .mission-arrow { padding-left: 18px; text-indent: -18px; color: var(--dim); }
body.landing .mission-part .mission-arrow::before { content: "→ "; color: var(--mp); }
body.landing .mission-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
body.landing .mission-blog { flex: none; align-self: flex-end; }                                    /* the key to the Mission Report, under the day's mission (public.js, missionPanel) */
body.landing .mission-community { flex: 1 1 420px; margin: 0; padding: 14px 18px; border-radius: 16px; background: rgba(var(--cobalt-rgb),.07); border-left: 3px solid var(--cobalt-fill); }
:root[data-theme="dark"] body.landing .mission-community { background: rgba(255,255,255,.05); }
body.landing .mission-cq { display: block; font-family: var(--display); font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
body.landing .mission-cq.is-de { margin-top: 5px; font-size: var(--fs-note); font-weight: 400; color: var(--dim); }
body.landing .mission-sheet { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(var(--cobalt-rgb),.45); background: rgba(255,255,255,.5); color: var(--cobalt); font-family: var(--display); font-size: 13.5px; font-weight: 600; }
:root[data-theme="dark"] body.landing .mission-sheet { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.3); }
body.landing .mission-sheet:hover { border-color: var(--cobalt-fill); }
@media (max-width: 1100px) { body.landing .mission-parts { grid-template-columns: minmax(0, 1fr); } }

/* the habitat's Sensors panel (8 October): the instruments on four tracks, two rows — the oxygen, the carbon dioxide, the
   temperature, the humidity; the air pressure, the air quality, the light and Karlsruhe (in the volatile organic
   compounds' place) — each a tile of one make, its sign in a disc at its top right (public.js, SENSOR_ICON) and a meter
   under its figure; then the steps and the stores (two tracks each); then the power (two), the volatile organic
   compounds and the astronauts (one each); the
   hardware's charts after the tiles, two across. The gaps stand between the tiles only (October: "increase the gap
   between boxes to have a clearer layout"). A narrower panel (under 740 px: a tablet, a small window) lays the tiles on
   two tracks, under 400 px on one (the container queries below); a phone has its own column further down. */
body.landing #habitat.dpanel { padding: 22px 28px; }
body.landing .hbt { margin: 0; container: hbt / inline-size; }
body.landing .hbt .bento, body.landing .dpanel.compact .hbt .bento { gap: min(22px, calc(2.4 * var(--u))); }
body.landing #hbt-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: none; }
body.landing #hbt-bento > * { grid-column: span 1; grid-row: auto; min-width: 0; }
body.landing #hbt-bento > .t-fig { grid-column: span 2; }                                     /* the steps two tracks wide: a five-figure count beside every officer's title (8 October) */
body.landing #hbt-bento > .t-bike { grid-column: span 2; }                                    /* the power generated beside them (8 October) */
body.landing #hbt-bento > .t-res { grid-column: 1 / -1; }                                     /* the stores under them, the panel's width */
body.landing #hbt-bento > .t-pwr { grid-column: span 2; }
body.landing #hbt-bento > .hbt-notes { grid-column: 1 / -1; }
body.landing #hbt-bento > .hbt-notes:empty { display: none; }
@container hbt (max-width: 739px) {
  body.landing #hbt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.landing #hbt-bento > .t-fig { order: 20; grid-column: 1 / -1; }                          /* the steps the width of the panel: room for five figures */
  body.landing #hbt-bento > .t-bike { order: 21; grid-column: 1 / -1; }
  body.landing #hbt-bento > .t-voc { order: 22; }
  body.landing #hbt-bento > .t-viz-radar { order: 23; }
  body.landing #hbt-bento > .t-res { order: 24; grid-column: 1 / -1; }
  body.landing #hbt-bento > .t-pwr { order: 25; grid-column: 1 / -1; }
}
@container hbt (max-width: 399px) {
  body.landing #hbt-bento { grid-template-columns: minmax(0, 1fr); }
  body.landing #hbt-bento > * { grid-column: 1 / -1; }
}
body.landing .hbt .tile { position: relative; padding: min(14px, calc(1.5 * var(--u))) 16px; border-radius: 18px; background: var(--tile); border: 1px solid rgba(var(--cobalt-rgb),.12); box-shadow: none; display: flex; flex-direction: column; gap: 4px; }
body.landing .dpanel.compact .hbt .tile { padding: min(18px, calc(2 * var(--u))) 18px; border-radius: 18px; }   /* the compact panel's tight dress (station.css) let out: air in each tile as between them */
body.landing .hbt .tile h3, body.landing .dpanel.compact .hbt .tile h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-name); letter-spacing: -.005em; color: var(--ink); margin: 0; }
body.landing .hbt .sub, body.landing .dpanel.compact .hbt .sub { font-family: var(--display); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--dim); line-height: 1.4; }   /* a sentence, not a label: plain case */
/* the sign: a disc at the tile's top right, its drawing in the tile's own ground — white on the night's black, the ink by
   day — red while the reading is past its limit; the name and its scale keep clear of it */
body.landing { --ic-disc: #262b48; --ic-glyph: #f4f5fa; --meter-off: rgba(38,43,72,.13); }
:root[data-theme="dark"] body.landing { --ic-disc: #f1f1ee; --ic-glyph: #121214; --meter-off: rgba(255,255,255,.12); }
body.landing .t-ic { position: absolute; top: min(16px, calc(1.8 * var(--u))); right: min(16px, calc(1.8 * var(--u))); z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ic-disc); color: var(--ic-glyph); }
body.landing .t-ic svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
body.landing .hbt .tile.is-hot .t-ic, body.landing .hbt .tile:has(.big.hot) .t-ic { background: #e0322b; color: #fff; }
body.landing .hbt .tile > .t-ic ~ h3, body.landing .hbt .tile > .t-ic ~ .sub, body.landing .hbt .t-pwr #pwr-live > .sub { padding-right: 52px; }
/* the reading at the foot of the tile: the figure, its meter, a word on it — level across a row whatever the names' length */
body.landing .hbt .t-sens .t-read { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
body.landing .hbt .t-sens .big { font-size: 34px; }
body.landing .hbt .t-sens .verdict { min-height: 1.4em; margin: 0; }
/* the meter: segments, thin bars or dots, lit in Mars up to the reading on its scale, red past the instrument's limit */
/* the instruments' drawings (8 October: "more than just the horizontal filling line — varied but beautiful"; public.js
   o2Ring, habitat.js drawSpark … drawCols): a round one at the right of the figure, spanning its line and the word under
   it; a wide one under the figure across the tile. Mars for what is lit, cobalt for a range that is normal, red past a
   limit; the unlit parts the meters' dark (--meter-off); still where less motion is asked for. */
body.landing .hbt .t-sens .t-read.has-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "big viz" "verdict viz"; column-gap: 10px; row-gap: 8px; align-items: end; }
body.landing .hbt .t-sens .t-read.has-side .big { grid-area: big; }
body.landing .hbt .t-sens .t-read.has-side .verdict { grid-area: verdict; }
body.landing .hbt .t-sens .t-read.has-side .viz { grid-area: viz; align-self: center; }
body.landing .viz { display: block; position: relative; }
body.landing .viz svg { display: block; width: 100%; height: 100%; overflow: visible; }
body.landing .viz.is-wide { width: 100%; height: 50px; }
body.landing .viz.is-side { width: 78px; height: 78px; }
body.landing .viz.viz-thermo { width: 32px; height: 80px; }
/* the oxygen's ring */
body.landing .viz .vz-track { fill: none; stroke: var(--meter-off); stroke-width: 9; stroke-linecap: round; }
body.landing .viz .vz-normal { fill: none; stroke: var(--cobalt-fill); stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; }
body.landing .viz .vz-arc { fill: none; stroke: var(--mars); stroke-width: 9; stroke-linecap: round; }
body.landing .viz .vz-dot { fill: #fff; stroke: var(--mars); stroke-width: 3; }
body.landing .viz .vz-arc.is-hot, body.landing .viz.is-hot .vz-line { stroke: #e0322b; }
body.landing .viz .vz-dot.is-hot, body.landing .viz.is-hot .vz-dot { stroke: #e0322b; }
body.landing .viz .vz-mid { font-family: var(--display); font-size: 17px; font-weight: 600; fill: var(--dim); }
:root[data-theme="dark"] body.landing .viz .vz-arc { filter: drop-shadow(0 0 4px rgba(255,90,31,.55)); }
/* the carbon dioxide's day */
body.landing .viz .vz-base { stroke: var(--meter-off); stroke-width: 1; }
body.landing .viz .vz-limit { stroke: var(--dim); stroke-opacity: .7; stroke-width: 1; stroke-dasharray: 3 4; }
body.landing .viz .vz-line { fill: none; stroke: var(--mars); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
body.landing .viz .vz-stop-a { stop-color: var(--mars); stop-opacity: .38; }
body.landing .viz .vz-stop-b { stop-color: var(--mars); stop-opacity: 0; }
body.landing .viz.is-hot .vz-stop-a, body.landing .viz.is-hot .vz-stop-b { stop-color: #e0322b; }
body.landing .viz .vz-halo { fill: var(--mars); fill-opacity: .22; }
body.landing .viz.viz-spark .vz-dot { fill: var(--mars); stroke: #fff; stroke-width: 1.5; }
/* the temperature's thermometer */
body.landing .viz .vz-glass { fill: var(--meter-off); stroke: var(--ink); stroke-opacity: .28; stroke-width: 1.2; }
body.landing .viz .vz-fill { fill: var(--mars); }
body.landing .viz .vz-empty { fill: var(--meter-off); }
body.landing .viz .vz-band { fill: var(--cobalt-fill); fill-opacity: .45; }
body.landing .viz .vz-tick { stroke: var(--dim); stroke-opacity: .6; stroke-width: 1.2; stroke-linecap: round; }
:root[data-theme="dark"] body.landing .viz .vz-fill { filter: drop-shadow(0 0 3px rgba(255,90,31,.6)); }
/* the humidity's vessel */
body.landing .viz .vz-vessel { fill: none; stroke: var(--cobalt-fill); stroke-opacity: .45; stroke-width: 2; }
body.landing .viz .vz-inside { fill: var(--meter-off); }
body.landing .viz .vz-wave { fill: var(--cobalt-fill); fill-opacity: .82; animation: vz-drift 5.5s linear infinite; }
body.landing .viz .vz-wave.is-back { fill-opacity: .38; animation-duration: 8s; animation-direction: reverse; }
@keyframes vz-drift { to { transform: translateX(-50px); } }
/* the air pressure's barometer */
body.landing .viz .vz-rim { fill: none; stroke: var(--meter-off); stroke-width: 3; stroke-linecap: round; }
body.landing .viz.viz-dial .vz-normal { stroke-width: 3.5; }
body.landing .viz.viz-dial .vz-tick.is-long { stroke-width: 1.6; stroke-opacity: .9; }
body.landing .viz .vz-needle { stroke: var(--mars); stroke-width: 2.6; stroke-linecap: round; }
body.landing .viz .vz-hub { fill: var(--ink); }
body.landing .viz .vz-k { font-family: var(--display); font-size: 9.5px; fill: var(--dim); }
/* the air quality's bands: excellent to extreme, the one read lit */
body.landing .viz .vz-iaq { opacity: .28; }
body.landing .viz .vz-iaq.is-on { opacity: 1; }
body.landing .viz .vz-iaq-0 { fill: #2bb673; } body.landing .viz .vz-iaq-1 { fill: #8cc63f; } body.landing .viz .vz-iaq-2 { fill: #f2c94c; }
body.landing .viz .vz-iaq-3 { fill: #f2994a; } body.landing .viz .vz-iaq-4 { fill: #eb5757; } body.landing .viz .vz-iaq-5 { fill: #a855f7; } body.landing .viz .vz-iaq-6 { fill: #7a2e57; }
body.landing .viz .vz-caret { fill: var(--ink); }
body.landing .viz .vz-caret.is-hot { fill: #e0322b; }
/* the light's sun */
body.landing .viz .vz-ray { stroke: var(--meter-off); stroke-width: 5.5; stroke-linecap: round; }
body.landing .viz .vz-ray.is-on { stroke: #ffa63d; }
body.landing .viz .vz-core { fill: var(--meter-off); }
body.landing .viz .vz-core.is-on { fill: #ffb347; }
:root[data-theme="dark"] body.landing .viz .vz-ray.is-on, :root[data-theme="dark"] body.landing .viz .vz-core.is-on { filter: drop-shadow(0 0 4px rgba(255,166,61,.7)); }
/* the compounds' hours */
body.landing .viz .vz-col { fill: var(--cobalt-fill); fill-opacity: .55; }
body.landing .viz .vz-col.is-now { fill: var(--mars); fill-opacity: 1; }
body.landing .viz .vz-later { fill: var(--meter-off); }
@media (prefers-reduced-motion: reduce) { body.landing .viz .vz-wave { animation: none; } }
/* the stores the panel's width (8 October): one ring a store, the four side by side across it — two to a line where the
   panel is narrow */
body.landing #hbt-bento > .t-res .gauges.rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 20px; }
body.landing #hbt-bento > .t-res { padding-bottom: 30px; }                                      /* the rounds' shadows fade out inside the tile, never cut at its foot */
body.landing #hbt-bento > .t-res .gauge.round { width: auto; min-width: 0; }

/* Power generated — the bicycle generator (8 October; public.js, bikeTile): two read-outs side by side under the name,
   a hairline between them. The rounds pedalled on a bicycle computer's odometer: five drums, dark in either theme as the
   counter is, a seam across each, the zeros before the count dim, the last drum in Mars. The battery charged as a
   battery: its outline in ink, ten cells lit cobalt to the charge, the next one pulsing while it charges (still where
   less motion is asked for), the per cent beside it. */
body.landing .hbt .t-bike { container: bike / inline-size; }
body.landing .hbt .t-bike .bike-viz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; margin-top: 12px; }
body.landing .hbt .t-bike .bike-part { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 4px 18px 4px 0; }
body.landing .hbt .t-bike .bike-part + .bike-part { padding: 4px 0 4px 18px; border-left: 1px solid var(--hair); }
body.landing .hbt .t-bike .bike-k { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
body.landing .hbt .t-bike .bike-u { font-family: var(--display); font-size: 13px; color: var(--dim); }
body.landing .hbt .odo { display: inline-flex; gap: 4px; }
body.landing .hbt .odo b { position: relative; display: grid; place-items: center; width: 1.12em; height: 1.5em; border-radius: 7px; overflow: hidden;
  background: linear-gradient(180deg, #2a2a30 0%, #101013 46%, #08080a 54%, #1e1e23 100%); color: #f4f4f1;
  font-family: var(--mono); font-size: clamp(26px, calc(3.4 * var(--u)), 40px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.25); }
body.landing .hbt .odo b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.55); box-shadow: 0 1px 0 rgba(255,255,255,.05); }   /* the drum's seam */
/* every drum's figure white — the leading zeros and the last drum too (9 October: "make sure the Power generated, Rounds
   pedalled is all white numbers"; until then the zeros were dim and the last drum Mars orange) */
body.landing .hbt .odo b.z, body.landing .hbt .odo b:last-child { color: #f4f4f1; }
body.landing .hbt .batt { display: flex; align-items: center; width: 100%; max-width: 270px; }
body.landing .hbt .batt-body { flex: 1 1 auto; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; height: clamp(36px, calc(4.6 * var(--u)), 52px); padding: 4px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 9px; }
body.landing .hbt .batt-body i { border-radius: 3px; background: rgba(var(--cobalt-rgb), .13); }
body.landing .hbt .batt-body i.on { background: var(--cobalt-fill); }
:root[data-theme="dark"] body.landing .hbt .batt-body i.on { box-shadow: 0 0 8px rgba(79,99,255,.55); }
body.landing .hbt .batt-body i.next { animation: batt-charge 1.8s ease-in-out infinite; }
body.landing .hbt .batt-cap { flex: none; width: 5px; height: 40%; margin-left: 2px; border-radius: 0 3px 3px 0; background: var(--ink); }
body.landing .hbt .bike-pc { font-family: var(--display); font-size: clamp(28px, calc(3.8 * var(--u)), 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
body.landing .hbt .bike-pc em { font-style: normal; font-size: .5em; font-weight: 400; color: var(--dim); margin-left: 3px; letter-spacing: 0; }
/* a narrow tile (a phone): the battery under the odometer, a hairline between them */
@container bike (max-width: 400px) {
  body.landing .hbt .t-bike .bike-viz { grid-template-columns: minmax(0, 1fr); }
  body.landing .hbt .t-bike .bike-part { padding-right: 0; }
  body.landing .hbt .t-bike .bike-part + .bike-part { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
}
body.landing .hbt .t-bike .verdict { margin-top: auto; padding-top: 12px; }                            /* the scale at the tile's foot, as the steps' average stands at theirs */
@keyframes batt-charge { 50% { background: rgba(var(--cobalt-rgb), .5); } }
@media (prefers-reduced-motion: reduce) { body.landing .hbt .batt-body i.next { animation: none; } }
body.landing .hbt .big { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
body.landing .hbt .big em { font-size: 14px; color: var(--dim); margin-left: 4px; font-weight: 400; }
body.landing .hbt .verdict, body.landing .dpanel.compact .hbt .verdict, body.landing .dpanel.compact .hbt .t-fig .verdict { font-size: var(--fs-note); color: var(--dim); margin-top: 4px; }
body.landing .hbt .hot { color: var(--mars-ink) !important; }
body.landing .hbt .fig-rows { display: flex; flex-direction: column; margin-top: 6px; }
body.landing .hbt .fig-r { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: min(5px, calc(.5 * var(--u))) 0; border-bottom: 1px solid var(--hair); }
/* the officer's title whole — and where the title and the count do not fit side by side (a long title, a five-figure
   count, a narrow tile) the count drops under the title, at the right: the two never overlap (8 October) */
body.landing .hbt .fig-who { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-size: var(--fs-label); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
body.landing .hbt .fig-v { flex: none; margin-left: auto; white-space: nowrap; font-family: var(--display); font-size: min(18px, calc(2 * var(--u))); font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
body.landing .hbt .fig-v em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--dim); margin-left: 3px; letter-spacing: 0; }
body.landing .hbt .fig-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 6px; }
body.landing .hbt .fig-total { font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--ink); }
body.landing .hbt .fig-spark { display: block; width: 100%; height: min(28px, calc(3 * var(--u))); max-width: none; }
body.landing .hbt .t-fig .verdict { margin-top: 4px; }
body.landing .hbt .t-fig .verdict:empty { display: none; }                                       /* nothing filed yet: the foot says so, once */
body.landing .gauges.rounds { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding-top: min(6px, calc(.6 * var(--u))); margin-top: 0; }
/* the stores' rounds large, their names large under them — no count of days (October: "remove the days count and make
   the layout bigger to show the text clearly") */
body.landing .gauge.round { display: flex; flex-direction: column; align-items: center; gap: min(8px, calc(.8 * var(--u))); padding: 14px 10px 16px; border-radius: 18px; text-align: center; }
body.landing .gauge.round svg { width: calc(10.6 * var(--u)); height: calc(10.6 * var(--u)); }
body.landing .round-track { stroke: rgba(var(--cobalt-rgb),.14); stroke-width: 5; fill: none; }
body.landing .round-arc { stroke: var(--cobalt-fill); stroke-width: 5; fill: none; stroke-linecap: butt; }
body.landing .gauge.round.low .round-arc { stroke: var(--mars); }
/* the count in a store's ring and its unit under it, in the ring's own units (60 across): 12 and 8 since 14 October
   ("make the font of the counting resources in the resources tab smaller"; 15 and 10 until then), the two lifted a
   little in the markup (public.js, inventoryGauges) so they stay in the middle of the ring */
body.landing .round-num { font-family: var(--display); font-size: 12px; font-weight: 600; fill: var(--ink); }
body.landing .round-unit { font-family: var(--display); font-size: 8px; letter-spacing: .06em; fill: var(--dim); text-transform: uppercase; }
body.landing .cell-name { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); text-transform: none; letter-spacing: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
/* a store with no figure yet: a dash in its ring */
body.landing .gauge-val .is-ph { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mars-ink); }
body.landing .gauge.round.is-ph .round-num { fill: var(--dim); font-weight: 400; }
body.landing .pwr { padding-top: 6px; margin-top: 0; gap: min(4px, calc(.4 * var(--u))); display: grid; }
body.landing .pwr-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 0; min-height: min(22px, calc(2.2 * var(--u))); }
body.landing .pwr-name { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.landing .pwr-track { height: 8px; border-radius: 4px; background: rgba(var(--cobalt-rgb),.12); box-shadow: none; }
body.landing .pwr-track i { background: #ff8a3d; border-radius: 4px; }
body.landing .pwr-val { font-family: var(--display); font-size: 15px; font-weight: 600; text-align: right; color: var(--ink); }
body.landing .pwr-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: min(6px, calc(.6 * var(--u))); padding-top: min(8px, calc(.8 * var(--u))); border-top: 1px solid var(--hair); font-family: var(--display); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
body.landing .pwr-total span { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .08em; }
body.landing .pwr-total b { font-family: var(--display); font-size: min(22px, calc(2.4 * var(--u))); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); text-transform: none; }
body.landing .hbt .note, body.landing .dpanel.compact .hbt .note { border-radius: 14px; background: var(--well); box-shadow: var(--sh-inset); font-size: var(--fs-note); line-height: 1.45; }
/* live images from the habitat: a glass strip of its own at the head of the dashboard — under its heading, above the two doors */
body.landing .cloud-latest {
  margin: 0; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; box-sizing: border-box;   /* wraps only for an opened picture's frame (cloud.js, .cloud-peek) */
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: 28px; color: var(--ink);
}
body.landing .cloud-latest-head { flex: none; width: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; margin: 0; padding-right: 4px; }
body.landing .cloud-latest-head .sub { font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body.landing .cloud-latest-head .sub .cloud-live { margin: 0; }
body.landing .cloud-strip { flex: 1 1 auto; min-width: 0; gap: 10px; padding: 0; overflow: hidden; }
body.landing .cloud-strip .mtile { flex: 1 1 0; min-width: 0; max-width: calc(18 * var(--u)); border-radius: 14px; background: #101012; box-shadow: 0 8px 22px -12px rgba(15,21,64,.5); }
body.landing .cloud-strip .mtile-visual { background: #101012; }
/* under each picture, the date and the time it was taken — read from its name (year_month_day-hour-minute, the venue's clock) */
body.landing .cloud-strip .mtile-stamp, body.landing .cloud-grid .mtile-stamp { display: block; padding: 6px 10px 7px; }
body.landing .mtile-when { display: block; font-family: var(--display); font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
body.landing .cloud-strip .mtile-when { color: rgba(255,255,255,.78); }                                /* the strip's tiles are dark */
/* a tile's picture opened in place (cloud.js): a small frame under the strip, no wider than the picture — the picture
   at a moderate size (no taller than 320px) on the dark ground, its time under it, the × on its corner; the open tile marked */
body.landing .cloud-peek { flex-basis: 100%; width: 100%; margin-top: 0; padding: 0; display: flex; justify-content: center; }
body.landing .cloud-peek-fig { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 12px 14px 10px; border-radius: 16px; background: #101012; box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); }
body.landing .cloud-peek-img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(36vh, 320px); border-radius: 10px; object-fit: contain; }
body.landing .cloud-peek-cap { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); }
body.landing .cloud-peek-x { position: absolute; top: 8px; right: 8px; }
body.landing .cloud-strip .mtile.is-open { outline: 2px solid var(--mars); outline-offset: 2px; }
/* the lightbox on the media page (media.js, lightbox; public/cloud.js): a small pop-up — the picture no wider than 760px
   nor taller than 62vh, its time under it, the arrows beside it and the cross on its corner — over the page, blurred
   behind it */
body.landing dialog.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
body.landing dialog.lightbox[open] { display: grid; place-items: center; }
body.landing dialog.lightbox::backdrop { background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.landing .lightbox .lb-box { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 100vw; padding: 20px 16px; box-sizing: border-box; }
body.landing .lightbox .lb-fig { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
body.landing .lightbox .lb-img { display: block; width: auto; height: auto; max-width: min(100vw - 150px, 760px); max-height: min(62vh, 560px); object-fit: contain; border-radius: 14px; background: #101012; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
body.landing .lightbox .lb-img:not([src]) { display: none; }
body.landing .lightbox .lb-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-family: var(--display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
body.landing .lightbox .lb-btn { box-sizing: border-box; flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); color: #fff; font-size: 0; line-height: 1; letter-spacing: 0; box-shadow: none; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
body.landing .lightbox .lb-btn svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.landing .lightbox .lb-btn:hover, body.landing .lightbox .lb-btn:active { transform: none; box-shadow: none; }
body.landing .lightbox .lb-btn:hover { background: rgba(255,255,255,.18); }
body.landing .lightbox .lb-btn[disabled] { opacity: .25; cursor: default; }
body.landing .lightbox .lb-close { position: absolute; z-index: 1; top: -12px; right: -12px; background: rgba(0,0,0,.7); }
@media (max-width: 760px) { body.landing .lightbox .lb-box { flex-wrap: wrap; } body.landing .lightbox .lb-fig { order: -1; width: 100%; } body.landing .lightbox .lb-img { max-width: calc(100vw - 32px); max-height: 60vh; } }
body.landing .cloud-latest > .empty { flex: 1 1 auto; }

/* the hardware: one day chart per quantity */
body.landing #hardware.dpanel { padding: 22px 28px; }
body.landing .hw-charts { grid-template-columns: repeat(auto-fit, minmax(max(300px, calc(50% - 8px)), 1fr)); gap: 16px; }   /* two across where the panel is wide enough, else one under the other */
/* the habitat's own hardware (Home Assistant), inside the Habitat panel under the tiles */
body.landing .hw-in-habitat { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
/* the one Sensors tab of the dashboard (public.js, dashboard: trendsInside): the instruments, then the hardware's charts
   (no heading of their own), then the trends under a head of their own — the charts drawn smaller than they were as
   tabs of their own. Inside this tab, and only here, the type is set larger: what each tile measures, its scale, the
   figure, the words beside it — Today's Mission and the other folders keep theirs. The panel is named (#habitat) so these
   outrank the dress's .dpanel.compact rules; the screens (no .folder-body) have their own sizes in screen.css. */
body.landing .folder-body .hbt-trends-in { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
body.landing .folder-body .hbt-trends-in .hbt-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
body.landing .folder-body .hbt-trends-in .hbt-sec h3 { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--ink); margin: 0; }
body.landing .folder-body .hbt-trends-in .hbt-sec .sub { font-family: var(--display); font-size: 15px; color: var(--dim); }
/* the trends as wide as the tab: drawn taller the more lines there are to name (habitat.js, drawAll — every line's name
   inside the drawing, 9 October), never squeezed narrower to a fixed height (300px until then) */
body.landing .folder-body .hbt-trends-in .tchart-svg { width: 100%; max-height: none; }
body.landing .folder-body #habitat .hw-chart svg { max-height: none; }                            /* the chart fills its tile: drawn for the tile's width (hardware.js) */
body.landing .folder-body #habitat .hbt .tile h3 { font-size: 20px; line-height: 1.15; margin: 0 0 4px; overflow-wrap: break-word; }
body.landing .folder-body #habitat .hbt .sub, body.landing .folder-body #habitat .hbt .t-pwr .sub { font-size: 14px; line-height: 1.35; }
body.landing .folder-body #habitat .hbt .t-sens .big { font-size: 38px; }
body.landing .folder-body #habitat .hbt .big em { font-size: 18px; }
body.landing .folder-body #habitat .hbt .verdict { font-size: 16px; margin-top: 4px; }
body.landing .folder-body #habitat .hbt .fig-who { font-size: 12px; }
body.landing .folder-body #habitat .hbt .fig-v { font-size: 20px; }
body.landing .folder-body #habitat .hbt .fig-v em { font-size: 14px; }
body.landing .folder-body #habitat .hbt .fig-total { font-size: 16px; }
body.landing .folder-body #habitat .hbt .viz-k { font-size: 20px; line-height: 1.15; }
body.landing .folder-body #habitat .cell-name { font-size: 17px; }
body.landing .folder-body #habitat .hbt .empty, body.landing .folder-body #habitat .hbt .note, body.landing .folder-body #habitat #hbt-notes .note { font-size: 15px; line-height: 1.45; }
body.landing .folder-body #habitat .dpanel-title h3 { font-size: 24px; }
body.landing .folder-body #habitat .dpanel-meta { font-size: 13px; }
body.landing .hw-in-habitat .hw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
body.landing .hw-in-habitat .hw-head h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-name); letter-spacing: -.005em; color: var(--ink); margin: 0; }
body.landing .hw-in-habitat .hw-head .sub { font-family: var(--display); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--dim); line-height: 1.4; }
body.landing .hw-chart { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--tile); border: 1px solid rgba(var(--cobalt-rgb),.12); box-shadow: none; }
body.landing .hw-chart svg { max-height: none; }                                                   /* the width of the tile, its height from its box (public.js, hwChart: drawn for the width the page asks for) */
body.landing .hw-title { font-family: var(--display); font-size: 13px; letter-spacing: .12em; color: var(--cobalt); }
/* each chart's sign before its name, as on the instruments' tiles (8 October): the bolt, the thermometer, the lungs, the wind */
body.landing .hw-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
body.landing .hw-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ic-disc); color: var(--ic-glyph); }
body.landing .hw-ic svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
body.landing .hw-unit { color: var(--dim); }
body.landing .hw-ax { font-family: var(--display); font-size: 10px; letter-spacing: .06em; fill: var(--dim); }
body.landing .hw-name { font-family: var(--display); font-size: 14px; letter-spacing: 0; }
body.landing .hw-val { font-family: var(--display); font-size: 14px; letter-spacing: .04em; }
body.landing .hw-chart svg line[stroke="var(--rule)"] { stroke: rgba(var(--cobalt-rgb),.12); }
body.landing .hw-chart svg line[stroke="var(--rule-hard)"] { stroke: rgba(var(--cobalt-rgb),.35); }
/* the charts made livelier: soft curves over a fading fill, the night shaded, the part of the day still ahead dimmed, the
   newest reading a pulsing dot with its value in a tag, the lines drawing themselves in when the panel arrives */
body.landing .hw-chart { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--tile), rgba(var(--cobalt-rgb),.035)); }
body.landing .hw-chart svg { overflow: visible; }
body.landing .hw-grid { stroke: rgba(var(--cobalt-rgb),.10); stroke-width: 1; stroke-dasharray: 2 4; }
body.landing .hw-night { fill: rgba(var(--cobalt-rgb),.055); }
body.landing .hw-ahead { fill: rgba(var(--cobalt-rgb),.03); }
/* a device's range of normal readings (public.js, hwChart, ok — the cricket terrarium's 25–35 °C, 15 October): the band
   in the cobalt of a normal range, its upper limit a fine red line; what lies above it red, the high in the legend too */
body.landing .hw-ok { fill: rgba(var(--cobalt-rgb),.09); }
body.landing .hw-limit { stroke: #e0322b; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .8; }
body.landing .hw-over-t { color: #e0322b; font-weight: 600; }
body.landing .hw-now { stroke: #ff6a1a; stroke-width: 1.2; stroke-dasharray: 3 3; }
body.landing .hw-now-t { fill: #ff6a1a; font-weight: 600; }
body.landing .hw-ax-unit { font-weight: 600; }
body.landing .hw-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: hw-draw 1.4s cubic-bezier(.3,.7,.2,1) both; }
body.landing .hw-line { filter: drop-shadow(0 4px 6px rgba(15,21,64,.18)); }
body.landing .hw-area { animation: hw-fade 1.6s ease-out both; }
body.landing .hw-dot { opacity: .45; }
body.landing .hw-end { stroke: #fff; stroke-width: 2; }
body.landing .hw-pulse { opacity: .35; transform-box: fill-box; transform-origin: center; animation: hw-pulse 2.2s ease-out infinite; }
body.landing .hw-tag text { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .02em; fill: #fff; }   /* the figure in its pill (public.js, hwChart, sizes the pill to it) */
body.landing .hw-tag { animation: hw-fade .8s ease-out 1s both; }
body.landing #hw-live.is-live .hw-line, body.landing #hw-live.is-live .hw-area, body.landing #hw-live.is-live .hw-tag { animation: none; }   /* a reading swapped in later is simply there (hardware.js) */
/* what the pointer reads (hardware.js — 9 October: "for all lines, when I hover show the current power rating"): a dashed
   line at the hour under the pointer, a dot on every line there, and beside it a card with every line's figure */
body.landing .hw-chart > svg { cursor: crosshair; touch-action: pan-y; }
body.landing .hw-hover { pointer-events: none; }
body.landing .hw-hover line { stroke: var(--ink); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 3 3; }
body.landing .hw-hover circle { stroke: #fff; stroke-width: 2; }
body.landing .hw-tip { position: absolute; z-index: 4; min-width: 150px; max-width: 240px; padding: 10px 12px 11px; border-radius: 14px; box-sizing: border-box;
  background: #fff; color: #1b2142; box-shadow: 0 14px 34px -12px rgba(15,21,64,.45), 0 0 0 1px rgba(15,21,64,.06); font-family: var(--display); font-size: 13px; line-height: 1.3; pointer-events: none; }
:root[data-theme="dark"] body.landing .hw-tip { background: #2a2d33; color: #f1f1ef; box-shadow: 0 14px 34px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
body.landing .hw-tip[hidden] { display: none; }
body.landing .hw-tip-t { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .65; font-variant-numeric: tabular-nums; }
body.landing .hw-tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.landing .hw-tip li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
body.landing .hw-tip li i { width: 8px; height: 8px; border-radius: 50%; }
body.landing .hw-tip-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.landing .hw-tip-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.landing .hw-legend { flex-direction: row; flex-wrap: wrap; gap: 6px 26px; margin-top: 10px; }    /* the lines named side by side under the plot */
body.landing .hw-legend li { flex: 0 1 auto; display: grid; grid-template-columns: 8px auto; column-gap: 10px; row-gap: 2px; align-items: baseline; min-width: 0; }   /* the dot, the name; the low and high under the name */
body.landing .hw-legend li i { grid-row: 1; align-self: center; }
body.landing .hw-legend .hw-name { color: var(--ink); }
body.landing .hw-legend .hw-val { font-weight: 600; font-size: 15px; }
body.landing .hw-range { grid-column: 2; margin-left: 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
:root[data-theme="dark"] body.landing .hw-end { stroke: #1d1d22; }
:root[data-theme="dark"] body.landing .hw-night { fill: rgba(255,255,255,.035); }
:root[data-theme="dark"] body.landing .hw-ok { fill: rgba(var(--cobalt-rgb),.12); }
:root[data-theme="dark"] body.landing .hw-limit { stroke: #ff5a52; }
:root[data-theme="dark"] body.landing .hw-over-t { color: #ff5a52; }
:root[data-theme="dark"] body.landing .hw-grid { stroke: rgba(255,255,255,.10); }
@keyframes hw-draw { from { stroke-dashoffset: 1; } }
@keyframes hw-fade { from { opacity: 0; } }
@keyframes hw-pulse { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1.8); opacity: 0; } }

/* the trends */
body.landing #trends.dpanel { padding: 22px 28px 14px; }
body.landing .tchart { background: transparent; box-shadow: none; padding: 0; }
body.landing .tchart-svg { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 250px); margin: 0 auto; }
body.landing .tgrid { stroke: rgba(var(--cobalt-rgb),.14); }
body.landing .tgrid.base { stroke: rgba(var(--cobalt-rgb),.5); }
body.landing .ttoday { fill: rgba(255,90,31,.14); }
body.landing .taxis-t { font-family: var(--display); font-size: 11px; letter-spacing: .12em; fill: var(--dim); }
body.landing .taxis-t.today { fill: var(--mars-ink); }
/* on a phone the names of the lines stand under the graph (habitat.js, renderTrends): a dot of the line's colour, the name */
body.landing .tlegend { list-style: none; margin: 16px 2px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 14px; align-items: start; }
body.landing .tlegend li { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-size: var(--fs-note); line-height: 1.3; color: var(--ink); cursor: pointer; transition: opacity .15s; }
body.landing .tlegend i { flex: none; width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); }

/* the three blogs: on the site and on the installation's screens alike the head is a heading like every other panel's —
   the blog's name and its day, no band of colour, no grain, no shade (8 October: "remove the card and the shading for
   Commander Log, Health Report, Daily Mission Report — just keep the headings"; that evening, for the screens too: "from
   /screen/blogs also remove the shading of the top tab with the name of the Commander Logbuch etc., for all the
   officers" — each stood under a head of colour of its own, purple and orange, blue, green and gold) */
body.landing .dpanel.blogp { padding: 0; overflow: hidden; }
body.landing.screen .dpanel.blogp .dpanel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta meta" "title title"; align-items: baseline; align-content: start; gap: 8px 12px; margin: 0; padding: 22px 28px 16px; box-sizing: border-box; color: var(--ink); background: none; border-bottom: 1px solid var(--hair); position: relative; }
body.landing.screen .dpanel.blogp .dpanel-title { display: contents; }
body.landing.screen .dpanel.blogp .dpanel-title h3 { grid-area: title; margin: 0; }
body.landing.screen .dpanel.blogp .dpanel-meta { grid-area: meta; }
body.landing.screen .dpanel.blogp .dpanel-title h3 { color: var(--ink); font-size: 23.5px; }
body.landing.screen .dpanel.blogp .dpanel-meta { color: var(--dim); text-align: left; max-width: none; }
body.landing .dpanel.blogp .dpanel-body { padding: 24px 28px 34px; }
body.landing .blog-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--mars) transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent); }
body.landing .blogp .card { background: transparent; box-shadow: none; border: 0; padding: 0; }
body.landing .blogp .card .card-body { padding: 0; font-family: var(--display); font-size: 17px; line-height: 1.65; color: var(--ink); }
body.landing .blogp .card .card-body p { margin: 0 0 14px; }
body.landing .blogp .empty { margin: 0; }
/* the posts with margins (October: "add margins to the blogs"): the words held off the card's edges and the card off the
   panel's — a page of its own, outlined (body.landing.inner .card) or, in the soft UI, sunk into the panel — on the
   screens; on the site the post stands on the panel itself, no card round it (neu.css, 8 October) */
body.landing .dpanel.blogp .card.log-entry { padding: clamp(18px, 2.4vw, 32px) clamp(18px, 2.8vw, 40px); border-radius: 20px; }

/* ------------------------------------------------------ the index of folders */
/* The dashboard's panels behind one index, on one glass panel: the keys in three tracks — the sensors' (Sensors), the day's
   (Today's Schedule, Today's Meal, Crew Moods), the blogs' — each track recessed and named, every key a sign and a name.
   The rules here draw the tracks as rows (the base: each track a row, its name at the left, its keys sharing the width);
   on a wider screen the block below turns the index into a rail at the left of the folder — the keys one under the other
   — with the open folder's panel beside it; a phone keeps the rows (the block at the end of this file). The key of the
   open folder in cobalt, as every pressed pill on the page. */
body.landing .folder {
  position: relative; margin: 0; scroll-margin-top: 28px; box-sizing: border-box; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: var(--r-lg); color: var(--ink);
}
body.landing .folder-tabs { display: grid; gap: 8px; padding: 16px 20px 14px; border-bottom: 1px solid var(--hair); }
body.landing .frows { display: grid; gap: 8px; }
/* what only a phone gets (the block at the end of this file): the top bar's wordmark and sol, the menu's head, signs and page
   rows, the peek tiles under the doors, the groups above the index, the bottom bar */
body.landing .tk-brand, body.landing .tk-sol, body.landing .peek, body.landing .fgroups, body.landing .tabbar, body.landing .masthead-btn.masthead-btn-page { display: none; }
body.landing .frow { display: grid; grid-template-columns: 96px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; padding: 4px; border-radius: 16px; background: rgba(var(--cobalt-rgb),.06); }
:root[data-theme="dark"] body.landing .frow { background: rgba(255,255,255,.05); }
body.landing .frow.n2 { grid-template-columns: 96px repeat(2, minmax(0, 1fr)); }                                        /* a row of two (the hardware without its bridge) */
body.landing .frow.n1 { grid-template-columns: 96px minmax(0, 1fr); }
body.landing .frow-k { align-self: center; padding: 0 6px 0 14px; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.landing .frow:has(.ftab.is-front) .frow-k { color: var(--cobalt); }                                              /* the row of the open folder: its name in cobalt too */
body.landing .ftab {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 16px; box-sizing: border-box; min-width: 0;
  border: 0; border-radius: 12px; cursor: pointer; text-align: left; background: transparent;
  color: var(--ink); font-family: var(--display); text-transform: none; letter-spacing: 0; box-shadow: none; transform: none; transition: background .15s, color .15s, box-shadow .15s;
}
body.landing .ftab:hover, body.landing .ftab:active { transform: none; box-shadow: none; }
body.landing .frow .ftab:hover { background: rgba(255,255,255,.72); color: var(--ink); }
:root[data-theme="dark"] body.landing .frow .ftab:hover { background: rgba(255,255,255,.09); color: var(--ink); }
body.landing .ftab:focus-visible { outline: 2px solid var(--cobalt-fill); outline-offset: -3px; }
body.landing .ftab .ftab-ic { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--cobalt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }   /* the key's sign, a line icon in the dome keys' hand */
:root[data-theme="dark"] body.landing .ftab .ftab-ic { stroke: #dfe3ff; }
body.landing .ftab .ftab-l { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the open folder's key: cobalt, as every pressed pill on the page */
body.landing .folder .frow .ftab.is-front, body.landing .folder .frow .ftab.is-front:hover, :root[data-theme="dark"] body.landing .folder .frow .ftab.is-front, :root[data-theme="dark"] body.landing .folder .frow .ftab.is-front:hover { background: var(--cobalt-fill); color: #fff; box-shadow: 0 10px 20px -12px rgba(47,69,232,.7); }
body.landing .folder .frow .ftab.is-front .ftab-ic, :root[data-theme="dark"] body.landing .folder .frow .ftab.is-front .ftab-ic { stroke: #fff; }
/* The index as a rail, on a wider screen: the keys one under the other at the left of the folder, in their three tracks —
   each track a recessed block with its name over its keys — and the open folder's panel beside them, the whole width that
   is left; a hairline between the two. The rail stays in view under the header while a long folder (the sensors, a blog)
   scrolls past it (the folder clips its corners with overflow: clip, which does not stop a sticky rail as hidden would).
   A key's name wraps to a second line rather than being cut. A phone keeps its bar of keys (the block at the end of this
   file); a short window too. */
@media (min-width: 761px) and (min-height: 521px) {
  body.landing .folder { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: stretch; overflow: clip; }
  body.landing .folder-tabs { display: block; min-width: 0; padding: 18px 14px 20px; border-bottom: 0; border-right: 1px solid var(--hair); }
  body.landing .frail { position: sticky; top: 124px; display: grid; gap: 12px; }
  body.landing .frows { display: grid; gap: 10px; }
  body.landing .folder-head { padding: 4px 6px 0; }
  body.landing .folder-title { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: var(--ink); text-wrap: balance; }
  body.landing .frow, body.landing .frow.n2, body.landing .frow.n1 { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px; border-radius: 16px; }
  body.landing .frow-k { align-self: auto; padding: 6px 10px 7px; }
  body.landing .ftab { min-height: 40px; padding: 8px 12px; align-items: center; }
  body.landing .ftab .ftab-l { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  body.landing .folder > .folder-body { min-height: calc(100vh - 150px); }        /* the box is a page tall at the least, whatever folder is open — the rail never stands over a stub */
}
/* The dashboard page: the row of the two doors and the strip of sols stays under the header while the page scrolls —
   a band the width of the window — and the rail sits under it; the open folder's head (its name, its line) stays at
   the top of the folder's content as the content scrolls past it, so only the content moves (the blogs' heads too, plain
   headings like the rest since 8 October). A phone keeps its own stops (the block at the end of this file). */
@media (min-width: 761px) and (min-height: 521px) {
  body.landing.dashboard .dash-links { position: sticky; top: 113px; z-index: 8; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 10px; background: var(--glass-solid); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--hair); }
  body.landing.dashboard .frail { top: 190px; }
  body.landing.dashboard .folder-body .dpanel > .dpanel-head { position: sticky; top: 178px; z-index: 4; margin: calc(-1 * min(24px, calc(2.7 * var(--u)))) -28px 12px; padding: min(24px, calc(2.7 * var(--u))) 28px 12px; background: var(--glass-solid); border-bottom: 1px solid var(--hair); }
  body.landing.dashboard .folder > .folder-body { min-height: calc(100vh - 190px); }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 521px) {
  body.landing .folder { grid-template-columns: 208px minmax(0, 1fr); }
  body.landing .folder-tabs { padding: 14px 10px 16px; }
  body.landing .ftab { padding: 8px 10px; }
  body.landing .ftab .ftab-l { font-size: 14.5px; }
}
/* the open folder's panel beside the index — as tall as that panel is: the Habitat's instruments, a day's whole list, a blog
   at its own height. Nothing in the folder scrolls inside itself: the whole of a panel is on the page, and the page scrolls
   (the day's lists and the blogs used to keep their own heights and scroll inside; a laptop's window showed half a panel) */
body.landing .folder-body {
  position: relative; box-sizing: border-box; height: auto; min-height: 400px; max-height: none; padding: min(24px, calc(2.7 * var(--u))) 28px 28px;
  overflow: visible;
}
body.landing .fpage { height: auto; }
body.landing .fpage[hidden] { display: none !important; }
body.landing .folder-body .dpanel, body.landing .folder-body #habitat.dpanel, body.landing .folder-body #hardware.dpanel, body.landing .folder-body #trends.dpanel { height: auto; max-height: none; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.landing .folder-body .dpanel.h-3, body.landing .folder-body .dpanel.h-4 { height: auto; max-height: none; }
body.landing .folder-body .dpanel.scroll .dpanel-body { overflow: visible; }
body.landing .folder-body .blog-scroll { overflow: visible; max-height: none; -webkit-mask-image: none; mask-image: none; margin: 0; padding: 0; }
body.landing .folder-body .blog-scroll > :last-child { margin-bottom: 0; }
body.landing .folder-body .blogp .card .card-body, body.landing .folder-body .blogp .entry-post p { max-width: none; }   /* a post spans the folder — its lines and its pictures */
body.landing .folder-body .blogp .entry-figure { width: fit-content; max-width: min(100%, 560px); }                   /* a picture no wider than 560px nor taller than 380px, the figure shrunk to it — the post's lines run on past */
body.landing .folder-body .blogp .entry-figure img, body.landing .folder-body .blogp .entry-figure video { width: auto; max-width: 100%; max-height: 380px; object-fit: contain; }
body.landing .folder-body #trends .dpanel-body { min-height: 0; }
body.landing .folder-body .tchart-svg { max-height: calc(100vh - 300px); }                                            /* the whole chart in the folder, under the panel's head */
body.landing .folder-body .dpanel.blogp { overflow: visible; }   /* nothing to clip since the band went (8 October): the head sticks like every panel's, its glass out to the folder's edges */
body.landing .folder-body .dpanel.blogp .dpanel-body { padding: 6px 0 8px; }   /* the post under its heading, at the folder's own margins */
/* Today's Mission, the first key of the Daily Life track (public.js, dashboard): inside its folder the panel wears the
   folder's head like the others — its mission number, title, question, the three parts and the community question at
   their own sizes (sheet.css) — on the folder's ground, no glass of its own */
body.landing .folder-body #mission-today.dpanel { padding: 0; }
body.landing .folder-body #mission-today .mission-body { padding: 0; }
/* the day's schedule uses the folder's width on a wider screen: its rows in two columns, so the whole day is in view at once
   (beside the rail of keys, from 1101px — narrower, the one column) */
@media (min-width: 1101px) {
  body.landing .folder-body #schedule .rows { columns: 2; column-gap: 56px; }
  body.landing .folder-body #schedule .row { break-inside: avoid; page-break-inside: avoid; }
}

/* ------------------------------------------------------------- the foot */
body.landing .foot {
  position: relative; width: calc(100% - 2 * var(--gutter)); max-width: calc(1920px - 2 * var(--gutter)); margin: 52px auto 40px; padding: 40px 44px 36px; min-height: 330px; box-sizing: border-box; border-radius: 44px; overflow: hidden;
  /* the mock-up's foot: a peach ground, a dark band across the top, a teal light at the right, the orange glow at the left foot */
  background:
    radial-gradient(ellipse 460px 250px at 90px 330px, #ff7a00 0, rgba(255,122,0,.92) 28%, rgba(255,122,0,.35) 68%, rgba(255,122,0,0) 100%),
    radial-gradient(ellipse 330px 190px at calc(100% - 110px) 150px, rgba(68,101,107,.95) 0, rgba(68,101,107,0) 100%),
    linear-gradient(180deg, #0d0302 0, #0d0302 130px, rgba(13,3,2,.55) 215px, rgba(13,3,2,0) 300px),
    #ffdcae;
  box-shadow: 0 50px 80px -40px rgba(30,20,10,.55); color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--display); text-transform: none; letter-spacing: 0;
}
body.landing .foot-brand-block { display: flex; flex-direction: column; gap: 6px; }
body.landing .foot-wordmark { font-family: var(--display); font-size: 56px; line-height: .95; letter-spacing: -.035em; font-weight: 600; color: #fff; }
body.landing .foot-wordmark .bang { color: var(--mars); }
body.landing .foot-tag { font-size: 15px; color: rgba(255,255,255,.9); text-transform: none; letter-spacing: 0; }
body.landing .foot .foot-links { position: absolute; right: 44px; top: 40px; justify-content: flex-end; gap: 8px; max-width: 620px; margin: 0; }
body.landing .foot .foot-links a { margin: 0; color: #fff; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.12); border-radius: 999px; min-height: 34px; padding: 0 13px; display: inline-flex; align-items: center; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; }
body.landing .foot .foot-links a:hover { background: rgba(255,255,255,.25); color: #fff; }
body.landing .foot .foot-base { border-top: 0; padding-top: 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: #3a1a05; }
body.landing .foot .foot-brand { color: #3a1a05; }
body.landing .foot .foot-base span:last-child { color: #3a1a05; }


/* ------------------------------------------------------- the inner pages */
/* Media, Crew log, At a Glance, the archive, the odd page: the wordmark as the way home, the switches at the right,
   the pages as pills, then the page's own panels on the same paper */
body.landing.inner .masthead {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(1920px - 2 * var(--gutter)); margin: 36px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px;
}
body.landing.inner .masthead > div { display: flex; flex-direction: column; }
body.landing.inner .wordmark { font-size: clamp(36px, 3.4vw, 50px); }
body.landing.inner .wordmark a { color: inherit; text-decoration: none; border: 0; }
body.landing.inner .wordmark a:hover { color: var(--cobalt); }
body.landing.inner .tagline { margin-top: 8px; font-size: 15px; }
body.landing.inner .run-dates { display: none; }
body.landing.inner .shell > div[style="padding:30px 0 10px"] { padding-top: 0 !important; }              /* At a Glance: its title block starts right under the wordmark */
body.landing.inner .shell > div[style="padding:30px 0 10px"] > .eyebrow { display: none; }
body.landing.inner .shell > div[style="padding:30px 0 10px"] > h1 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 36px); }
body.landing.inner .shell > div[style="padding:30px 0 10px"] > .daypick { margin-bottom: 14px; }
body.landing.inner .masthead .status { display: none; }                                    /* the ticker carries the switches; phones show these instead */
body.landing.inner .glance-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
body.landing.inner .glance-day .eyebrow { margin-bottom: 10px; }
body.landing.inner .page-nav {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(1920px - 2 * var(--gutter)); margin: 22px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
body.landing.inner .page-nav a {
  min-height: 34px; padding: 0 14px; gap: 0; border-radius: 999px; background: rgba(255,255,255,.5); box-shadow: none; border: 1px solid rgba(var(--cobalt-rgb),.45);
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); transition: background .15s, color .15s;
}
body.landing.inner .page-nav a::before { display: none; }
body.landing.inner .page-nav a:hover { transform: none; color: var(--ink); background: rgba(255,255,255,.8); }
body.landing.inner .page-nav a[aria-current="page"] { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; }
:root[data-theme="dark"] body.landing.inner .page-nav a { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.30); }
:root[data-theme="dark"] body.landing.inner .page-nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
:root[data-theme="dark"] body.landing.inner .page-nav a[aria-current="page"] { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; }
body.landing.inner .shell { padding-top: 28px; }
body.landing.inner .foot { margin-top: 52px; }

/* the small type: one voice on every page */
body.landing.inner .eyebrow, body.landing.inner .cs, body.landing.inner .count, body.landing.inner .secsub, body.landing.inner .card .card-top, body.landing.inner .log-day-head,
body.landing.inner .bk-counter, body.landing.inner .glance-spec, body.landing.inner .kv dt, body.landing.inner .lbl, body.landing.inner .sub, body.landing.inner .mtile-dur, body.landing.inner .media-kind,
body.landing.inner .filters a, body.landing.inner .badge { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; }
body.landing.inner .eyebrow { font-size: var(--fs-label); color: var(--cobalt); font-weight: 500; }
body.landing.inner .eyebrow::after { background: var(--hair); }
body.landing.inner .cs { color: var(--mars-ink); font-weight: 600; }
body.landing.inner .card .cs { color: var(--mars-ink); }
body.landing.inner .count, body.landing.inner .card-day { color: var(--dim); }
body.landing.inner .sechead, body.landing.inner .bigsec, body.landing.inner h1 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
body.landing.inner .lede { font-size: var(--fs-read); line-height: 1.55; color: var(--ink); }

/* the surfaces: the same glass as the home's panels */
body.landing.inner .logpage-top, body.landing.inner .logpage-day, body.landing.inner .log-day, body.landing.inner .cloud-gallery,
body.landing.inner .dl-card, body.landing.inner .mview, body.landing.inner .panel, body.landing.inner .slab {
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: var(--r-lg); color: var(--ink);
}
body.landing.inner .logpage-top { padding: 28px 32px; }
body.landing.inner .card { background: var(--tile); border: 1px solid rgba(var(--cobalt-rgb),.12); box-shadow: none; border-radius: 18px; }
body.landing.inner .card:hover { transform: none; box-shadow: none; }
body.landing.inner .card .card-reply { background: rgba(255,90,31,.08); }
body.landing.inner .card.xc .card-reply { background: transparent; }                      /* an exchange keeps its own shape here too */
body.landing.inner .card.xc .cs { color: var(--ink); }
body.landing.inner .empty { border-color: var(--hair); color: var(--dim); font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-label); }

/* the day strips (Crew log, At a Glance) and the filters: pills, the current one filled */
body.landing.inner .logpage-strip { gap: 8px; margin-bottom: 20px; }
body.landing.inner .logpage-strip a, body.landing.inner .logpage-strip > span { border-radius: 999px; padding: 5px 11px; min-width: 0; gap: 1px; background: rgba(255,255,255,.5); box-shadow: none; border: 1px solid rgba(var(--cobalt-rgb),.30); font-family: var(--display); letter-spacing: .12em; color: var(--dim); }
body.landing.inner .logpage-strip b { font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--cobalt); }
body.landing.inner .logpage-strip span { font-size: 10px; letter-spacing: .04em; }
body.landing.inner .logpage-strip a:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.8); }
body.landing.inner .logpage-strip a.now { box-shadow: none; background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: rgba(255,255,255,.8); }
body.landing.inner .logpage-strip a.now b { color: #fff; }
body.landing.inner .logpage-strip i { background: var(--mars); color: #fff; font-family: var(--display); }
body.landing.inner .logpage-strip .quiet i, body.landing.inner .logpage-strip a.quiet i { background: rgba(var(--cobalt-rgb),.35); color: #fff; }
:root[data-theme="dark"] body.landing.inner .logpage-strip a, :root[data-theme="dark"] body.landing.inner .logpage-strip > span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: var(--dim); }
:root[data-theme="dark"] body.landing.inner .logpage-strip b { color: #e6e6ec; }
:root[data-theme="dark"] body.landing.inner .logpage-strip a.now { background: var(--cobalt-fill); border-color: var(--cobalt-fill); }
body.landing.inner .logpage-filter { margin-bottom: 20px; }
body.landing.inner .logpage-day { padding: 22px 28px 24px; gap: 12px; }
body.landing.inner .logpage-day .log-day-head { border-bottom: 1px solid var(--hair); padding-bottom: 12px; font-size: var(--fs-label); color: var(--dim); }
body.landing.inner .logpage-day .log-day-head .cs { font-size: 12.5px; color: var(--ink); }
body.landing.inner .logpage-day .log-day-head .now { color: var(--mars-ink); }
body.landing.inner .filters a {
  flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-label); font-weight: 500; color: var(--cobalt);
  background: rgba(255,255,255,.5); box-shadow: none; border: 1px solid rgba(var(--cobalt-rgb),.45);
}
body.landing.inner .filters a:hover { color: var(--ink); background: rgba(255,255,255,.8); box-shadow: none; }
body.landing.inner .filters a.on, body.landing.inner .filters a[aria-current="page"], body.landing.inner .filters a[aria-current="true"] { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; box-shadow: none; }
body.landing.inner .filters a b, body.landing.inner .filters a.on b { color: inherit; }
:root[data-theme="dark"] body.landing.inner .filters a { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.30); }
:root[data-theme="dark"] body.landing.inner .filters a.on, :root[data-theme="dark"] body.landing.inner .filters a[aria-current="page"] { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; }
body.landing.inner .bk-arrow { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); color: var(--cobalt); }
body.landing.inner .bk-arrow:hover { color: var(--ink); }
body.landing.inner .bk-counter { font-size: var(--fs-label); color: var(--dim); }
body.landing.inner .btn { font-family: var(--display); }

/* the About page (/about, pages/info.js): About, What this is and Who we are one after another, each a sheet of the inner
   pages' glass under a head in the dress of the dashboard's — its channel code, its name, the line beneath — and at the top
   three pills that jump to them. The panels in a section are tiles on its sheet, not glass on glass. */
body.landing.about .about-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
body.landing.about .about-jump a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.5); border: 1px solid rgba(var(--cobalt-rgb),.45);
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); text-decoration: none; transition: background .15s, color .15s;
}
body.landing.about .about-jump a:hover { color: var(--ink); background: rgba(255,255,255,.8); }
:root[data-theme="dark"] body.landing.about .about-jump a { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.30); }
:root[data-theme="dark"] body.landing.about .about-jump a:hover { background: rgba(255,255,255,.14); color: #fff; }
body.landing.about .about-sec {
  --gutter: 18px;                                                                     /* the space between the panels in it: a sheet's, not the page's margin */
  margin: 0 0 28px; padding: 32px 36px 14px; scroll-margin-top: 28px; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: var(--r-lg);
}
body.landing.about .about-sec-head { margin: 0 0 24px; padding: 0 0 18px; border-bottom: 1px solid var(--hair); }
body.landing.about .about-sec-head .bigsec { margin: 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; }
body.landing.about .about-sec .g-hero { gap: 8px 44px; }
/* the reading matter across the whole width of its column or section: About keeps the mission's facts beside it at the
   right (the prose filling the rest of the width); What this is runs the whole width, the path of a message under it as
   a row of six steps */
body.landing.about .about-sec .about-wide .prose, body.landing.about .about-sec .about-wide .prose p { max-width: none; }
body.landing.about .about-sec .about-full { display: grid; gap: 22px; }
body.landing.about .about-sec .about-full .prose { max-width: none; }
body.landing.about .about-sec .about-full .prose p { max-width: none; }
body.landing.about .about-sec .about-full .panel { margin: 0; }
body.landing.about .about-sec .steps-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; border: 0; }
body.landing.about .about-sec .steps-row .row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--tile); min-width: 0; }
body.landing.about .about-sec .steps-row .row .t { min-width: 0; }
body.landing.about .about-sec .steps-row .row .m b { display: block; font-weight: 600; }
@media (max-width: 1100px) { body.landing.about .about-sec .steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { body.landing.about .about-sec .steps-row { grid-template-columns: minmax(0, 1fr); } }
body.landing.about .about-sec .prose h3 { margin: 26px 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; scroll-margin-top: 96px; }   /* a heading a link lands on (More than Human, from the habitat) stands clear of the header */
body.landing.about .about-sec .prose p.kicker { margin: -2px 0 10px; font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--dim); }   /* the line under a heading (Playacting Mars in the middle of the city) */
body.landing.about .about-sec .prose a { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--cobalt-rgb),.5); text-underline-offset: 3px; }
body.landing.about .about-sec .prose a:hover { text-decoration-color: var(--cobalt); }
/* Who we are: the three officers of the day — the brief over the role, the portrait of the person on shift (when the
   shift plan names one), the role, their state */
body.landing.about .officers-today { gap: 22px 26px; }
body.landing.about .officer-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
body.landing.about .officer-card .eyebrow { margin: 0; }
body.landing.about .officer-pic { margin: 4px 0 2px; width: min(100%, 180px); }
body.landing.about .officer-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; background: #101012; }
body.landing.about .officer-pic figcaption { margin-top: 8px; font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); }
body.landing.about .officer-title { margin: 0; font-family: var(--mono); font-size: 15px; letter-spacing: .06em; }
body.landing.about .officer-mood { margin: 0; }
body.landing.about .about-sec .prose h3:first-child { margin-top: 0; }
body.landing.about .about-sec .prose p { font-size: var(--fs-read); line-height: 1.6; }
body.landing.about .about-sec .panel { background: var(--tile); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 1px solid rgba(var(--cobalt-rgb),.12); border-radius: 18px; }

/* A sol on MARS!platz (sol.js, solFold): the day's schedule on a rail — one row an activity, whatever its length
   (October: by activity, not by hour), in the colour of its kind. Off the About page since 12 October ("from About remove
   A sol on MARS!platz"); kept with solFold, should the run want it back. The kinds' colours hold in both themes. */
body.landing.about .sol { --k-science: var(--cobalt); --k-eva: var(--mars); --k-comms: var(--mars); --k-health: #22915a; --k-meal: #c98a00; --k-social: #8a8fa8; --k-other: var(--faint);
  display: block; }   /* the rail alone across the section since 12 October: no crew, key, fixed hours or note beside it */
:root[data-theme="dark"] body.landing.about .sol { --k-health: #4cc47f; --k-meal: #f0b429; --k-social: #8d8d98; }
body.landing.about .sol-when { margin: 0 0 14px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mars-ink); }
body.landing.about .sol-list { list-style: none; margin: 0; padding: 0; position: relative; }
body.landing.about .sol-list::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--hair); }   /* the rail */
body.landing.about .sol-item { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 14px; align-items: start; box-sizing: border-box;
  padding: 8px 0 9px; border-top: 1px solid transparent; --k: var(--k-other); }
body.landing.about .sol-item.kind-science { --k: var(--k-science); }
body.landing.about .sol-item.kind-eva { --k: var(--k-eva); }
body.landing.about .sol-item.kind-comms { --k: var(--k-comms); }
body.landing.about .sol-item.kind-health { --k: var(--k-health); }
body.landing.about .sol-item.kind-meal { --k: var(--k-meal); }
body.landing.about .sol-item.kind-social { --k: var(--k-social); }
body.landing.about .sol-bar { position: relative; z-index: 1; align-self: stretch; width: 12px; margin-top: 3px; margin-bottom: 1px; border-radius: 6px; background: var(--k); opacity: .9; }   /* the activity's mark on the rail, in its colour */
body.landing.about .sol-item.is-end .sol-bar { align-self: start; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); }   /* lights out: a mark on the rail */
body.landing.about .sol-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
body.landing.about .sol-label { font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); }
body.landing.about .sol-detail { font-size: 13.5px; line-height: 1.4; color: var(--dim); }
body.landing.about .sol-role { font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
body.landing.about .sol-now { display: inline-block; margin-left: 8px; vertical-align: 2px; padding: 2px 8px; border-radius: 999px; background: var(--mars); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 14px; letter-spacing: .1em; }   /* the activity under way, beside its name */
body.landing.about .sol-item.is-now { border-top-color: color-mix(in srgb, var(--mars) 35%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--mars) 9%, transparent), transparent 70%); border-radius: 8px; }
body.landing.about .sol-item.is-done { opacity: .5; }
body.landing.about .sol-item.is-end { padding-bottom: 0; }
/* an officer's role over their name — the Current Crew's (below; A sol on MARS!platz's own box of the three, its key, its
   fixed hours and its note stood beside the rail until 12 October) */
body.landing.about .sol-officer-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.landing.about .sol-officer-who b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
body.landing.about .sol-officer-who span { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink); }
/* Current Crew on the About page (12 October, between What's inside the habitat and Who we are — gone from it the same
   day: "remove Current Crew from About"; kept with sol.js's crewBox, unused; the landing page's is in sheet.css): A sol on
   MARS!platz's box of the three roles without its key, each role with the photograph of the astronaut in it that day in
   place of its letter, the robot dog's for someone the station has no picture of: three across on a desk, one under the
   other on a phone */
body.landing.about .about-sec.crew-sec { padding-bottom: 32px; }
body.landing.about .crew-now { padding: 20px 24px 22px; border-radius: 18px; background: var(--tile); border: 1px solid var(--hair); }
body.landing.about .crew-now .eyebrow { margin: 0 0 16px; }
body.landing.about .crew-now-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
body.landing.about .crew-now-officer { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* (each picture a close-up of its own, cut round the face — public/crew/face, tools/crew-pictures.py: shown whole) */
body.landing.about .crew-now-officer img { flex: none; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: #101012;
  box-shadow: 0 0 0 3px var(--tile), 0 0 0 4px rgba(var(--cobalt-rgb), .35); }
body.landing.about .crew-now-officer .sol-officer-who { gap: 4px; }
body.landing.about .crew-now-officer .sol-officer-who b { font-size: 12px; }
body.landing.about .crew-now-officer .sol-officer-who span { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
body.landing.about .crew-now-officer.is-open .sol-officer-who span { color: var(--faint); font-weight: 500; }   /* a role the plan names nobody in */
body.landing.about .crew-now-officer .sol-officer-who .nb { white-space: nowrap; }   /* a surname whole: Matthieu / Vlaminck-Maurer */
@media (max-width: 860px) {
  body.landing.about .crew-now { padding: 16px 16px 18px; }
  body.landing.about .crew-now-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.landing.about .crew-now-officer { gap: 14px; }
  body.landing.about .crew-now-officer img { width: 76px; height: 76px; }
  body.landing.about .crew-now-officer .sol-officer-who span { font-size: 18px; }
}
@media (max-width: 860px) {
  body.landing.about .sol-item { column-gap: 12px; }
}


/* ------------------------------------------------------------ panel heads */
body.landing .dpanel-title { flex-wrap: wrap; row-gap: 8px; }

/* --------------------------------------------------------------- phones */
@media (max-width: 760px), (max-height: 520px) {
  body.landing { --fs-tag: 11.5px; --fs-label: 12.5px; --fs-note: 15px; --fs-name: 16px; --fs-read: 17px; }   /* the type sizes, a little larger in the hand */
  body.landing .ticker { height: 50px; margin-top: 0; padding: 0 12px; gap: 2px; }                 /* edge to edge here too, its contents a little in from the sides */
  body.landing .tk-right { display: flex; flex: none; }
  body.landing .tk-right .status { gap: 4px; }
  body.landing .status .theme button { min-height: 30px; min-width: 30px; padding: 0 6px; font-size: 0; gap: 0; justify-content: center; }
  body.landing .status .theme .theme-mark { font-size: 12px; }
  body.landing .status .lang-menu > summary { min-height: 30px; min-width: 0; padding: 0 8px 0 10px; gap: 6px; font-size: 11px; letter-spacing: .04em; }
  body.landing .status .lang-menu > .lang { gap: 2px; padding: 4px; border-radius: 18px; }
  body.landing .status .lang button { min-height: 30px; min-width: 30px; padding: 0 5px; font-size: 11px; letter-spacing: .04em; }
  body.landing .tk-window { min-width: 40px; }
  body.landing .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 20px 0 24px; padding: 0; min-height: 0; }
  body.landing:not(.inner) .masthead, body.landing:not(.inner) .masthead > div { display: contents; }   /* the wordmark, its lines, the lead and the button become the column's own rows */
  body.landing:not(.inner) .masthead .status { display: none; }
  /* the first screen: the wordmark, its line and the run; then the habitat; then the lead; then the two doors (the world's
     slowest chat follows the column) */
  body.landing .wordmark { order: 1; }
  body.landing .tagline { order: 2; }
  body.landing .run-dates { order: 3; }
  body.landing .dome-panel { order: 4; margin: 22px 0 0; }
  body.landing .masthead .lead { order: 5; margin: 18px 0 0; max-width: none; }
  body.landing .masthead-cta { order: 6; margin: 24px 0 0; text-align: center; flex-direction: column; align-items: center; gap: 10px; }
  body.landing .masthead-btn { width: 100%; max-width: 420px; }
  body.landing .masthead-btn.masthead-btn-live { font-size: 12.5px; letter-spacing: .12em; padding: 0 22px; gap: 10px; }   /* its longer name on one line */
  body.landing .portal { min-height: 0; }
  body.landing:not(.messages) .portal-pop { display: none; }                      /* a phone has the composer as the Write page's dock alone */
  body.landing .portal-head { margin: 0 0 16px; }
  body.landing .cloud-latest { padding: 18px 18px 16px; border-radius: 24px; }
  /* the dashboard on a phone starts with its figures: the newest pictures rise over the habitat and fill the Media page, so
     the strip at its head stays unshown (still on the page — cloud.js keeps it current, and the habitat's sky reads it) */
  body.landing .dash > .cloud-latest { display: none; }
  body.landing.inner .masthead .status { display: none; }
  body.landing .dome-stage { max-height: none; }
  body.landing .dome-stage { aspect-ratio: 700 / 350; background: none; }
  body.landing .dome-screen { background: none; }
  body.landing .dome-panel, :root[data-theme="dark"] body.landing .dome-panel { padding: 0 0 30px; background-image: none; }
  body.landing .dome-head { margin-bottom: 12px; padding: 0; }
  body.landing .dome-panel { --pop-room: 0; }
  body.landing .dome-tag { display: none; }
  body.landing .dome-legend { display: none; }                                        /* the keys on the picture are the way in: no second row of them under it */
  body.landing .dome-caption { font-size: 0; line-height: 0; }                        /* the base line stays; the hint under it goes */
  body.landing .dome-caption::before { margin: 0; }
  body.landing dialog.dome-popup { width: min(560px, calc(100vw - 16px)); margin: auto; }
  /* held upright, a part's pop-up rises from the foot of the screen into the space under the dome (dome.js, under) —
     one short slide, kept even where the phone asks for less motion */
  body.landing dialog.dome-popup[open] { animation: dome-rise .38s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes dome-rise { from { transform: translateY(70vh); opacity: .4; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { body.landing dialog.dome-popup[open] { animation-duration: .3s !important; } }
  body.landing .dome-popup .popup-body p { font-size: 15px; line-height: 1.45; }
  body.landing .portal-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; align-content: start; gap: 14px; }
  body.landing .composer-device form.composer .msgbox textarea, body.landing .composer .msgbox textarea { min-height: 112px; flex: none; }
  body.landing .feed-wrap { min-height: 0; }
  body.landing .composer .tags { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }              /* the tags wrap onto more rows; nothing runs off the screen */
  body.landing .composer .tags label { flex: none; }
  body.landing .device, body.landing .screen.board { padding: 20px 18px; border-radius: 28px; }
  body.landing .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-top: 40px; scroll-margin-top: -24px; }
  body.landing .dash-figs { gap: 4px 18px; margin-top: 10px; }
  body.landing .run-strip { grid-column: 1 / -1; padding: 16px 18px; gap: 4px; }
  body.landing .run-n, body.landing .run-strip .run-n { font-size: 10.5px; letter-spacing: 0; }
  body.landing .dash-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  body.landing .run-strip { border-radius: 24px; }
  /* the small screen keeps the head plain (October: "very readable, not cluttered"): no strip of thirteen sols (the sol is
     in the figures and in the panels' heads), no LIVE pill under the figures (the Sensors panel carries its own), no
     cursor after the title */
  body.landing.dashboard .run-strip, body.landing.dashboard .dash-live, body.landing.dashboard .dash-head .bigsec::after { display: none; }
  body.landing.dashboard .dash-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.landing.dashboard .dash-sub { font-size: 11px; letter-spacing: .06em; line-height: 1.5; }
  body.landing .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.landing .dpanel { padding: 20px 18px; border-radius: 28px; }
  body.landing .mission-today { padding: 20px 18px 22px; }
  body.landing .mission-parts { gap: 10px; }
  body.landing .mission-part { padding: 14px 16px 16px; }
  body.landing .mission-title { font-size: 24px; }
  body.landing .dash-head .bigsec, body.landing .portal-head .bigsec, body.landing .dash-subhead .bigsec { font-size: 30px; }
  body.landing .dash-clock { align-items: flex-start; }
  /* the habitat's readings on a phone: one plain column of compact readouts — each instrument its sign at the left, its
     name and scale beside it, its figure at the right, its meter under them across the tile; the radar left to a wider
     screen; the steps, the stores, the power and the fan one under the other */
  body.landing .hbt .bento, body.landing #hbt-bento, body.landing .dpanel.compact .hbt .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 14px; }
  body.landing #hbt-bento > * { grid-column: 1 / -1; grid-row: auto; }
  body.landing .hbt .t-sens { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic h big" "ic sub big" "m m m" "v v v"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px 14px; }
  body.landing .hbt .t-sens > .t-ic { position: static; grid-area: ic; width: 40px; height: 40px; }
  body.landing .hbt .t-sens > .t-ic svg { width: 20px; height: 20px; }
  body.landing .hbt .t-sens > h3, body.landing .hbt .t-sens > .sub { margin: 0; padding-right: 0; overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
  body.landing .hbt .t-sens > h3 { grid-area: h; }
  body.landing .hbt .t-sens > .sub { grid-area: sub; }
  /* the sign stands in its own column here, not over the words: the room a wider screen keeps it at their right goes back
     to the name and the scale (8 October — "Air pressure" and its scale had wrapped on two lines for nothing) */
  body.landing .hbt .tile.t-sens > .t-ic ~ h3, body.landing .hbt .tile.t-sens > .t-ic ~ .sub { padding-right: 0; }
  body.landing .hbt .t-sens .t-read, body.landing .hbt .t-sens .t-read.has-side { display: contents; }
  body.landing .hbt .t-sens .big { grid-area: big; justify-self: end; font-size: 22px; text-align: right; white-space: nowrap; }
  body.landing .hbt .t-sens .big em { font-size: 12.5px; margin-left: 3px; }
  body.landing .hbt .t-sens .viz { grid-area: m; margin-top: 10px; }
  body.landing .hbt .t-sens .viz.is-side { justify-self: center; width: 84px; height: 84px; }   /* a phone: the round drawings in the middle of the tile, under its line */
  body.landing .hbt .t-sens .viz.viz-thermo { width: 34px; height: 84px; }
  body.landing .hbt .t-sens .viz.is-wide { height: 46px; }
  body.landing .hbt .t-sens .t-read.has-side .viz { grid-area: m; align-self: auto; }               /* the desk's places for a round drawing are not the phone's */
  body.landing .hbt .t-sens .t-read.has-side .verdict { grid-area: v; }
  body.landing .hbt .t-sens .verdict { grid-area: v; min-height: 0; margin-top: 6px; }
  body.landing .hbt .t-sens .verdict:empty { display: none; }
  body.landing .folder-body #habitat .hbt .t-sens .big { font-size: 24px; }
  body.landing .folder-body #habitat .hbt .t-sens .big em { font-size: 13px; }
  body.landing .folder-body #habitat .hbt .t-sens > h3 { font-size: 17px; margin: 0; overflow-wrap: normal; }
  body.landing .folder-body #habitat .hbt .t-sens > .sub { font-size: 13px; }
  /* the stores two to a line */
  body.landing #hbt-bento > .t-res .gauges.rounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding-right: 8px; }   /* (room at the right for the rounds' shadows) */
  body.landing #hbt-bento > .t-res .gauge.round { width: auto; }
  body.landing .hbt .t-fig .verdict { display: none; }                                           /* "nothing recorded" stands in its foot already */
  body.landing .hbt .t-viz-radar { display: none; }
  body.landing .hbt .tile.t-viz-city { min-height: 0; padding: 14px 12px 12px; } body.landing .dl-city { max-width: 190px; }
  body.landing .pwr-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; row-gap: 6px; padding: 4px 0; }
  body.landing .pwr-name { grid-area: name; } body.landing .pwr-track { grid-area: bar; } body.landing .pwr-val { grid-area: val; }
  body.landing .gauges.rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  body.landing .gauge.round svg { width: 104px; height: 104px; }
  body.landing .cloud-latest { flex-direction: column; gap: 12px; }
  body.landing .cloud-latest-head { width: auto; }
  body.landing .cloud-strip { overflow-x: auto; }
  body.landing .cloud-strip .mtile { flex: 0 0 160px; }
  body.landing .hw-charts { grid-template-columns: minmax(0, 1fr); }
  body.landing .dpanel .dpanel-head { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
  body.landing .dpanel .dpanel-meta { text-align: left; max-width: none; }
  body.landing .glance-link { justify-content: space-between; gap: 10px; padding: 0 16px 0 18px; min-height: 42px; }
  body.landing .glance-link-title { font-size: 15.5px; }
  body.landing.screen .dpanel.blogp .dpanel-head { padding: 16px 20px 12px; }
  body.landing.screen .dpanel.blogp .dpanel-title h3 { font-size: 20px; }
  /* the index of folders: each row's name above its track, three narrow keys a track, the sign and the code on one line and
     the name beneath; the open folder as tall as its panel — the page is one scroll on a phone, the folder scrolls with it */
  body.landing .folder { border-radius: 26px; }
  body.landing .folder-tabs { gap: 10px; padding: 12px 12px 12px; }
  body.landing .frows { gap: 10px; }
  body.landing .frow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 14px; }
  body.landing .frow.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.landing .frow.n1 { grid-template-columns: minmax(0, 1fr); }
  body.landing .frow-k { grid-column: 1 / -1; padding: 3px 6px 1px; font-size: 11px; letter-spacing: .1em; }
  body.landing .ftab { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "l"; align-items: center; align-content: center; justify-items: center; gap: 3px; min-height: 48px; padding: 5px 7px; border-radius: 11px; }
  body.landing .ftab .ftab-ic { grid-area: ic; width: 13px; height: 13px; stroke-width: 1.9; }
  body.landing .ftab .ftab-l { grid-area: l; width: 100%; font-size: 13px; line-height: 1.15; text-align: center; white-space: normal; overflow: visible; -webkit-hyphens: auto; hyphens: auto; }
  body.landing .folder-body { height: auto; min-height: 0; max-height: none; overflow: visible; padding: 16px 14px 18px; }
  body.landing .officer-id b, body.landing .officer-role { white-space: normal; overflow: visible; }   /* an officer's designation and role whole, on two lines where the phone is narrow */
  /* the crew on a phone: the face, then the name with the condition's badge beside it, the role under, the note under
     them across the row — nothing squeezed into a third column */
  body.landing .officer { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "orb id badge" "note note note"; gap: 4px 12px; padding: 12px 0; }
  body.landing .officer-face { width: 40px; height: 40px; }
  body.landing .officer-id b { font-size: 15px; letter-spacing: 0; text-transform: none; }
  body.landing .officer-role { font-size: 10.5px; letter-spacing: .08em; }
  body.landing .officer .badge { align-self: center; }
  body.landing .officer-note { font-size: 14px; line-height: 1.45; color: var(--dim); }
  body.landing .folder-body .tchart-svg { max-height: none; }                                    /* as wide as the folder, however the phone is held; the page scrolls */
  body.landing .foot { padding: 30px 24px; min-height: 0; border-radius: 32px; gap: 24px; }
  body.landing .foot .foot-links { position: static; justify-content: flex-start; }
  body.landing .foot-wordmark { font-size: 44px; }
}

/* ====================================================================== a phone, held upright: the mobile design */
/* The same station, laid out for a thumb: a sticky top bar (the wordmark, the sol, the habitat's clock, the switches) with the
   running line beneath it; the peek tiles under the two doors; the index of folders as two rows of tabs — the groups as a segmented
   control, the group's three folders as underlined tabs — that stick under the top bar while the panel scrolls; and a bar of five
   keys fixed at the foot of the screen — Habitat, Dashboard, Write, Media, More — More opening the menu as a sheet. Sideways (a
   short window) none of this applies: the ticker keeps its menu button and the index its three rows. */
@media (max-width: 760px) and (min-height: 521px) {
  :root { --gutter: 16px; }                                                                            /* the phone's margin: the content edge to edge but for a thumb's width */
  body.landing { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* the top bar */
  body.landing .ticker { position: sticky; top: 0; z-index: 40; height: auto; min-height: 0; flex-wrap: wrap; align-items: center; padding: 0 12px; gap: 0 6px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* the glass is a layer under the bar's contents rather than the bar's own — a blur on the bar itself would pin the menu's sheet
     (position: fixed, below) to the bar instead of the screen */
  body.landing .ticker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass-soft); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35); }
  :root[data-theme="dark"] body.landing .ticker { background: transparent; }
  /* what a link or a key brings into view lands under the bar, not behind it — the portal, the dashboard, a day of the booklet or
     of the log: the room is the window's (a page of the booklet is inside a second scroller, whose own margin the window ignores) */
  html { scroll-padding-top: 92px; }
  body.landing .portal, body.landing #write, body.landing .dash, body.landing .folder, body.landing .logpage-day { scroll-margin-top: 0; }
  body.landing .tk-brand { display: inline-block; flex: none; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.03em; text-transform: none; color: var(--ink); text-decoration: none; line-height: 52px; border: 0; }
  body.landing .tk-brand .bang { color: var(--mars); }
  body.landing .tk-sol { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--mars); color: var(--mars-ink); font-size: 11px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; }
  body.landing .tk-sol i { width: 6px; height: 6px; border-radius: 50%; background: var(--mars); box-shadow: 0 0 8px 2px rgba(255,90,31,.7); animation: live 2.4s ease-in-out infinite; }
  body.landing .tk-right { flex: none; }
  body.landing .tk-window { flex: 1 0 100%; order: 10; min-width: 0; height: 30px; margin: 0 -12px; padding: 0 12px; box-sizing: border-box; display: flex; align-items: center; border-top: 1px solid var(--glass-edge); }
  /* the reading pages — About, What this is, Who we are — as sheets too */
  body.landing dialog.popup:not(.dome-popup) { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: 92vh; margin: 0; border-radius: 26px 26px 0 0; }
  /* the portal's head: the words at the left, the one-way signal small at the right, so the composer's Transmit key is on the
     first screen of the portal */
  body.landing .portal-head { flex-wrap: nowrap; align-items: flex-end; gap: 12px; margin: 0 0 14px; }
  body.landing .portal-head > div { flex: 1 1 auto; min-width: 0; }
  body.landing .portal-head .bigsec { font-size: 27px; }
  body.landing .portal-head .dash-clock { flex: none; align-items: flex-end; text-align: right; padding-bottom: 3px; }
  body.landing .portal-head .dash-clock-label { font-size: 11px; letter-spacing: .08em; }
  body.landing .portal-head .dash-clock b { font-size: 19px; }
  /* the board flows with the page — no box of its own to scroll — with its chips at the head in one sideways row; twenty
     exchanges at a time, a Show more key beneath them (board.js) */
  body.landing .screen.board { padding: 18px 16px 10px; }
  body.landing .board-head { order: -2; }
  body.landing .board .feed-filter { order: -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-top: 0; border-bottom: 1px solid var(--hair); margin: 0 -16px; padding: 12px 16px; -webkit-overflow-scrolling: touch; }
  body.landing .board .feed-filter::-webkit-scrollbar { display: none; }
  body.landing .board .feed-filter .chip { flex: none; }
  body.landing .board .scroller { max-height: none; overflow: visible; margin: 0; }
  body.landing .board .card { padding: 12px 14px 14px; }
  body.landing .board .card[data-mine] { padding-left: 17px; }
  body.landing .card.xc .card-post { padding: 11px 12px 12px; }
  body.landing .card.xc .card-body { font-size: 16.5px; }
  body.landing .card.xc .card-reply p { font-size: 20px; }
  body.landing .feed-more { display: block; width: 100%; min-height: 46px; margin: 14px 0 6px; border: 1px solid rgba(var(--cobalt-rgb),.35); border-radius: 999px; background: rgba(255,255,255,.55); color: var(--cobalt); font-family: var(--display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; cursor: pointer; box-shadow: none; }
  :root[data-theme="dark"] body.landing .feed-more { background: rgba(255,255,255,.06); color: #e6e6ec; border-color: rgba(255,255,255,.3); }
  body.landing .feed-more[hidden] { display: none; }
  /* the portal — the composer and the board — and the dashboard are pages of their own here, /messages and /dashboard:
     the landing page drops both and its two doors lead there (tabbar.js turns the foot's and the dome's doors the same
     way); the doors stand side by side under the lead, which follows the habitat */
  body.landing:not(.inner) .portal, body.landing:not(.inner) .dash { display: none; }
  body.landing .masthead-btn.masthead-btn-page { display: inline-flex; }
  body.landing .masthead-btn[href="#write"], body.landing .masthead-btn[href="#mission"] { display: none; }
  body.landing .masthead-cta { order: 6; margin: 26px 0 0; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 12px; }   /* the two doors side by side */
  body.landing .masthead-btn.masthead-btn-page { flex: 1 1 0; width: auto; min-width: 0; max-width: none; min-height: 62px; padding: 8px 12px; gap: 8px; font-size: 12.5px; letter-spacing: .08em; line-height: 1.25; text-align: center; }
  body.landing .masthead-btn.masthead-btn-page > span { display: none; }                                        /* no room for the arrow; the pill is the door */
  html[lang="fr"] body.landing .masthead-btn.masthead-btn-page { font-size: 11.5px; letter-spacing: .04em; }   /* its long French name */
  body.landing .dome-panel { order: 4; margin: 34px 0 0; }
  /* room to breathe: the wordmark and the run, then the habitat, the lead and the doors, each with air around it */
  body.landing:not(.inner) .hero-grid { margin: 26px 0 0; }
  body.landing:not(.inner) .wordmark { font-size: 52px; }
  body.landing:not(.inner) .tagline { margin-top: 12px; }
  body.landing:not(.inner) .run-dates { margin-top: 12px; line-height: 1.6; }
  body.landing:not(.inner) .masthead .lead { margin-top: 30px; line-height: 1.55; }
  body.landing:not(.inner) .dome-head { margin: 0 0 14px; }
  /* the foot as a low band the width of the page: the wordmark and the house at the left, the two keys one above the other
     at the right, and no more height than they need */
  body.landing .foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand keys" "base keys"; align-items: center; column-gap: 12px; row-gap: 8px; margin: 64px auto 36px; padding: 22px 18px 20px 22px; min-height: 0; border-radius: 28px;
    background: radial-gradient(ellipse 260px 130px at 40px 100%, rgba(255,122,0,.85) 0, rgba(255,122,0,.3) 55%, rgba(255,122,0,0) 100%), radial-gradient(ellipse 240px 140px at calc(100% - 60px) 70%, rgba(68,101,107,.9) 0, rgba(68,101,107,0) 100%), #0d0302; }   /* the dark band with its two lights, the whole way down */
  body.landing .foot-brand-block { grid-area: brand; align-self: end; }
  body.landing .foot .foot-links { grid-area: keys; position: static; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; margin: 0; }
  body.landing .foot .foot-base { grid-area: base; align-self: start; font-size: 11.5px; letter-spacing: .1em; }
  body.landing .foot .foot-base, body.landing .foot .foot-brand, body.landing .foot .foot-base span:last-child { color: rgba(255,255,255,.72); font-size: inherit; }
  body.landing .foot .foot-base { font-size: 11.5px; }
  body.landing .foot-wordmark { font-size: 32px; }
  /* the dashboard page: the top bar names the station; the dashboard's own head is the page's */
  body.landing.dashboard .masthead { display: none; }
  body.landing.dashboard .shell { padding-top: 14px; }
  body.landing.dashboard .dash { padding-top: 4px; }
  /* the messages page: the board is the page — its chips stuck under the top bar, the exchanges flowing beneath — and the
     composer is a pop-up over the foot of the screen, above the bar of keys: the bar's Write key shows and hides it, a touch on
     the page beside it hides it (tabbar.js; without the script it simply stands there) */
  body.landing.messages .masthead { display: none; }                                                  /* the top bar names the station */
  body.landing.messages .shell { padding-top: 14px; }
  body.landing.messages .portal { display: block; min-height: 0; }
  body.landing.messages .portal-head { margin: 0 0 8px; }
  body.landing.messages .portal-grid { display: block; }
  body.landing.messages .portal-main { position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 25; margin: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s; }
  html.js body.landing.messages .portal-main:not(.is-open) { transform: translateY(calc(100% + 100px)); visibility: hidden; transition: transform .24s ease-in, visibility 0s linear .24s; }
  /* a phone set to reduce motion (station.css stops every transition there) still sees the pop-up rise from the foot of the
     screen and sink back — one short slide, which is how it tells where it came from */
  @media (prefers-reduced-motion: reduce) {
    body.landing.messages .portal-main { transition-duration: .3s, 0s !important; }
    html.js body.landing.messages .portal-main:not(.is-open) { transition-duration: .24s, 0s !important; }
  }
  body.landing.messages { padding-bottom: calc(66px + 260px + env(safe-area-inset-bottom, 0px)); }                 /* room under the list for the pop-up */
  html.js body.landing.messages:not(.dock-open) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  html.js body.landing.messages.dock-open { padding-bottom: calc(66px + var(--dock-h, 260px) + env(safe-area-inset-bottom, 0px)); }
  body.landing.messages .screen.board { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  body.landing.messages .board-head { padding: 6px 0 8px; border: 0; }
  body.landing.messages .board-head h2 { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
  body.landing.messages .board .feed-filter { position: sticky; top: 83px; z-index: 5; margin: 0 -16px; padding: 10px 16px 12px; border-bottom: 1px solid var(--hair); background: var(--glass-soft); -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35); }
  body.landing.messages .board .cards { padding-top: 12px; }
  body.landing.messages .feed-more { margin: 4px 0 0; }
  /* the wall of notes on a phone: the notes one under the other, the bar stuck under the top bar with the chips in one
     sideways row (the Write key is the bar's), the name of the board and the count over them */
  body.landing.messages .wall-sec { padding: 0 0 24px; scroll-margin-top: 83px; }
  body.landing.messages .wall-bar { top: 83px; flex-wrap: wrap; margin: 0 -16px; padding: 8px 16px 10px; gap: 8px 12px; }   /* the bar wraps: the chips under the name, never squeezed beside it */
  body.landing.messages .wall-bar .board-head { flex: 1 1 100%; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; }
  body.landing.messages .wall-bar .board-head h2 { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
  body.landing.messages .wall-bar .wall-count { margin-left: auto; font-size: 10.5px; }
  body.landing.messages .wall-bar .feed-filter { flex: 1 1 100%; width: 100%; position: static; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; box-sizing: content-box; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-overflow-scrolling: touch; }
  body.landing.messages .wall-bar .feed-filter::-webkit-scrollbar { display: none; }
  body.landing.messages .wall-bar .feed-filter .chip { flex: none; }
  body.landing.messages .wall-bar .feed-filter { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }   /* the row fades at its end: it goes on sideways */
  body.landing.messages .wall .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 14px; }
  body.landing.messages .card.note .note-head { padding: 11px 34px 11px 14px; }
  body.landing.messages .card.note .note-main { padding: 12px 14px; }
  body.landing.messages .card.note .note-foot { padding-left: 14px; padding-right: 14px; }
  body.landing.messages .card.xc.note .card-body.note-title { font-size: 16px; }
  body.landing.messages .card.xc.note .card-reply p { font-size: 15px; }
  /* the pop-up: the title, the operator, the writing box with Transmit beside it, the tags in one sideways row beneath —
     a surface of its own, plainly apart from the list: solid paper with a rule of Mars along its top edge, a shadow upward,
     and the list dimmed a little behind it while it is out */
  body.landing.messages .device { padding: 16px 20px 18px; border-radius: 28px 28px 0 0; border: 0; border-top: 3px solid var(--mars); background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -26px 52px -22px rgba(15,21,64,.55), 0 -1px 0 rgba(15,21,64,.06); }
  :root[data-theme="dark"] body.landing.messages .device { background: #232329; box-shadow: 0 -26px 52px -22px rgba(0,0,0,.8); }
  /* the dimming is drawn inside the shell (every child of the body is a layer of its own, z-index 1, and the pop-up lives in
     the shell's): there it lies over the list and under the pop-up, the top bar and the keys — drawn on the body it would
     take the body's own glow's round shape and lie over the pop-up as well */
  html.js body.landing.messages.dock-open .shell::before { content: ""; position: fixed; inset: 0; z-index: 24; pointer-events: none; background: rgba(15,21,64,.1); }
  html.js[data-theme="dark"] body.landing.messages.dock-open .shell::before { background: rgba(0,0,0,.35); }
  /* while a message is being written the list behind is blurred away (the one blur a phone draws, and only then); during
     the crossing it clears, so the message can be seen arriving under MY MESSAGES (tabbar.js sets body.crossing) */
  html.js body.landing.messages.dock-open:not(.crossing) .shell::before { background: rgba(247,248,252,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  html.js[data-theme="dark"] body.landing.messages.dock-open:not(.crossing) .shell::before { background: rgba(24,24,28,.6); }
  /* the page ends with the last message: no foot here (the keys and More lead everywhere it did), so the list scrolls up to
     just above the pop-up and no further */
  body.landing.messages .foot { display: none; }
  body.landing.messages .dev-title { display: block; margin: 0 52px 10px 0; font-size: 21px; line-height: 1.1; }
  /* the cross at the top right closes the pop-up (tabbar.js); without the script there is nothing to close, so it is not drawn */
  body.landing.messages .composer-device { position: relative; }
  html.js body.landing.messages .dev-close { display: grid; place-items: center; position: absolute; top: 13px; right: 14px; z-index: 2; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(15,21,64,.06); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.js body.landing.messages .dev-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  html.js body.landing.messages .dev-close:active { transform: scale(.92); background: rgba(15,21,64,.12); }
  html.js[data-theme="dark"] body.landing.messages .dev-close { background: rgba(255,255,255,.08); }
  body.landing.messages .dev-head { margin: 0 0 12px; gap: 10px; font-size: 13px; letter-spacing: .08em; text-wrap: balance; }   /* (its line whole on a 390 px phone; balanced over two where it cannot be) */
  body.landing.messages .dev-chip { font-size: 14px; padding: 5px 12px; }
  /* the day's question in the pop-up: compact, so the writing box keeps its room; while the keyboard is up the
     question stays and its invitation goes */
  body.landing.messages .dev-prompt { margin: 0 0 10px; padding: 9px 12px 9px 13px; gap: 2px; }
  body.landing.messages .dev-prompt-q { font-size: 15px; line-height: 1.3; }
  body.landing.messages .dev-prompt-n { font-size: 12.5px; }
  body.landing.messages.kb .dev-prompt-n { display: none; }
  /* the form: the writing box the whole width and seven lines deep to begin with (less while the keyboard is up, so the
     pop-up stays above it — tabbar.js, grow), the five tags in one line beneath, every one whole, and Transmit under
     them in the middle — an orange pill, waiting dim until there is something to send */
  body.landing.messages .composer-device .dev-body > form.composer { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "msg" "tags" "send"; gap: 12px; align-items: center; }
  body.landing.messages .composer-device form.composer .msgfield { grid-area: msg; }
  body.landing.messages .composer-device form.composer .msgbox textarea { box-sizing: border-box; min-height: 216px; max-height: 320px; padding: 15px 17px 15px; font-size: 18px; line-height: 1.4; border-radius: 20px; }
  body.landing.messages.kb .composer-device form.composer .msgbox textarea { min-height: 120px; }                     /* the script sets what fits above the keyboard */
  body.landing.messages .composer .msgbox .counter { right: 15px; bottom: 8px; font-size: 12px; }
  body.landing.messages .composer .dev-foot { grid-area: send; margin: 0; justify-content: center; }
  body.landing.messages .composer button.primary { width: auto; min-width: 200px; height: 54px; min-height: 0; padding: 0 34px; border-radius: 999px; font-size: 13px; letter-spacing: .14em; box-shadow: 0 0 0 4px rgba(255,90,31,.18), 0 14px 28px -12px rgba(255,70,0,.8); transition: opacity .2s, box-shadow .2s, transform .15s; }
  body.landing.messages .composer button.primary:hover { transform: none; }
  body.landing.messages .composer button.primary:active { transform: scale(.94); }
  body.landing.messages form.composer:invalid button.primary { opacity: .45; box-shadow: none; }                  /* nothing to send yet */
  body.landing.messages .composer hr { display: none; }
  body.landing.messages .composer .tagbar { grid-area: tags; min-width: 0; margin: 0; flex-direction: row; align-items: center; gap: 0; }
  body.landing.messages .composer .tagbar .lbl { display: none; }
  /* the five tags as whole keys, in two short rows in the middle of the pop-up, each its name with room round it (8
     October: "in the light mode, fix the hashtags" — squeezed into one line that scrolled sideways, their raised edges
     were cut flat by the row and the names touched the keys' sides, the last key cut off); nothing clips their shadows */
  body.landing.messages .composer .tags { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 10px 8px; padding: 2px 0 4px; overflow: visible; }
  body.landing.messages .composer .tags label { flex: 0 0 auto; min-width: 0; justify-content: center; min-height: 34px; padding: 0 14px; font-size: 12px; letter-spacing: .03em; white-space: nowrap; }
  body.landing.messages .composer .tags label span { display: block; overflow: visible; }
  body.landing.messages .flash.err { margin: 0 0 10px; }
  /* the keyboard is up (tabbar.js sets body.kb from the visible part of the page, which the keyboard shortens): the bar of
     keys steps aside and the pop-up sits on the keyboard's upper edge (its bottom set by the script), so what is typed is in view */
  body.landing.messages.kb .tabbar { display: none; }
  body.landing.messages.kb .portal-main { bottom: 0; transition: none; }
  /* the crossing, in the pop-up: the dial small at the left, its readings beside it — in the room the form had (tabbar.js
     holds the stage at the form's height while the crossing shows, so the pop-up keeps its size) */
  body.landing.messages #dev-body.is-held { display: grid; align-content: center; }
  /* the crossing is the whole of the box while it lasts: the dial large in the middle — as wide as the pop-up allows —
     its readings beneath it, centred, the countdown large enough to read at arm's length */
  body.landing.messages .transit-block { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; align-items: start; justify-items: center; text-align: center; }
  body.landing.messages .xdial-wrap { width: min(66vw, 280px); }
  body.landing.messages .xdial { max-width: none; width: 100%; margin: 0 auto; }
  body.landing.messages .transit-read { width: 100%; }
  body.landing.messages .transit .state { font-size: var(--fs-label); letter-spacing: .1em; }
  body.landing.messages .transit .clock { margin: 6px 0 8px; font-size: 42px; line-height: 1; }
  body.landing.messages .transit .tbar { height: 5px; margin: 0 auto 8px; max-width: 280px; }
  body.landing.messages .transit .honesty { margin-top: 4px; font-size: 12px; letter-spacing: .06em; }
  body.landing.messages .transit.closed { padding: 4px 0; }
  /* the cookie question as a sheet above the bar of keys, the page usable round it */
  body.landing .consent-veil { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100vh - 96px); }
  body.landing .consent { width: 100%; max-height: calc(100vh - 96px); overflow: auto; padding: 0 16px 14px; }
  body.landing .consent-sky { height: 124px; margin: 0 -16px 12px; }
  body.landing .consent-astro { width: 104px; height: 110px; margin-left: -52px; top: 12px; left: 62%; }
  body.landing .consent h2 { font-size: 19px; }
  body.landing .consent-keys .btn { min-height: 40px; }
  /* the peek tiles: the sol, the signal, the crew's latest line — under the doors, before the portal */
  body.landing .peek { display: grid; gap: 10px; margin: -6px 0 26px; }
  body.landing .peek-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.landing .peek-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); color: var(--ink); text-decoration: none; }
  body.landing .peek-k { font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); font-weight: 500; }
  body.landing .peek-v { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
  body.landing .peek-v em { font-style: normal; font-size: 13px; color: var(--dim); font-weight: 400; letter-spacing: 0; margin-left: 4px; }
  body.landing .peek-s { font-family: var(--display); font-size: 13px; color: var(--dim); }
  body.landing .peek-latest { flex-direction: row; align-items: center; gap: 12px; }
  body.landing .peek-latest .live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mars); box-shadow: 0 0 10px 2px rgba(255,90,31,.7); animation: live 2.4s ease-in-out infinite; }
  body.landing .peek-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  body.landing .peek-t { font-family: var(--display); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
  body.landing .peek-arrow { color: var(--mars); font-size: 16px; flex: none; }
  /* the index as tabs: the groups as a segmented control, the group's folders as underlined tabs, stuck under the top bar */
  body.landing .folder { overflow: visible; }
  body.landing .folder-tabs { position: sticky; top: 83px; z-index: 5; display: block; padding: 8px 8px 0; background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35); border-radius: 26px 26px 0 0; border-bottom: 1px solid var(--hair); }
  body.landing .fgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(var(--cobalt-rgb),.06); }
  :root[data-theme="dark"] body.landing .fgroups { background: rgba(255,255,255,.05); }
  body.landing .fgroup { min-height: 36px; border: 0; background: transparent; border-radius: 10px; padding: 0 4px; justify-content: center; text-align: center; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--dim); cursor: pointer; box-shadow: none; transform: none; }   /* each name in the middle of its third */
  body.landing .fgroup.is-cur { background: var(--cobalt-fill); color: #fff; }
  body.landing .frail { display: block; }
  body.landing .folder-head { display: none; }                                                        /* the heading is the rail's, a wider screen's */
  body.landing .frows { display: block; }
  body.landing .frow { display: none; }
  body.landing .frow.is-cur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin: 2px 0 0; background: none; border-radius: 0; }
  body.landing .frow.n2.is-cur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.landing .frow.n4.is-cur { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.landing .frow.n1.is-cur { display: none; }                                                /* one folder in the group: the segmented control names it already */
  body.landing .frow-k { display: none; }
  body.landing .ftab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-height: 64px; padding: 8px 4px 10px; border-radius: 0; background: transparent; position: relative; color: var(--dim); text-align: center; }
  body.landing .frow .ftab:hover { background: transparent; }
  body.landing .ftab .ftab-ic { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; }
  body.landing .ftab .ftab-l { flex: none; width: 100%; font-size: 13px; line-height: 1.15; text-align: center; white-space: normal; overflow: visible; color: var(--ink); -webkit-hyphens: auto; hyphens: auto; }
  body.landing .folder .frow .ftab.is-front, body.landing .folder .frow .ftab.is-front:hover, :root[data-theme="dark"] body.landing .folder .frow .ftab.is-front, :root[data-theme="dark"] body.landing .folder .frow .ftab.is-front:hover { background: transparent; color: var(--cobalt); box-shadow: none; }
  body.landing .folder .frow .ftab.is-front .ftab-l { color: var(--cobalt); }
  body.landing .folder .frow .ftab.is-front .ftab-ic, :root[data-theme="dark"] body.landing .folder .frow .ftab.is-front .ftab-ic { stroke: var(--cobalt); }
  body.landing .folder .frow .ftab.is-front::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--cobalt-fill); }
  body.landing .folder-body { padding: 30px 12px 18px; }                                    /* room between the tabs and the open folder's heading (8 October) */
  /* the bar of five keys at the foot of the screen */
  body.landing .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid var(--glass-edge); }
  :root[data-theme="dark"] body.landing .tabbar { background: rgba(24,24,28,.88); }
  body.landing .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: none; box-shadow: none; transform: none; color: var(--dim); font-family: var(--display); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; text-decoration: none; cursor: pointer; }
  body.landing .tab-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  body.landing .tab.is-on, body.landing .tab.is-open { color: var(--cobalt); }
  body.landing .tab span { white-space: nowrap; }
  html[lang="fr"] body.landing .tab span { font-size: 9.5px; letter-spacing: .02em; white-space: normal; text-align: center; line-height: 1.1; }                     /* "Tableau de bord" on one line */
  body.landing .tab-board .tab-ic { width: 46px; height: 46px; padding: 12px; box-sizing: border-box; border-radius: 999px; background: linear-gradient(180deg, #ff8a3d, #ff5a1f); stroke: #0f1540; box-shadow: 0 14px 28px -12px rgba(255,70,0,.8); margin-top: -20px; }   /* the middle key, Messages: the Message Board (13 October; Write until then) */
  body.landing .tab-board span { color: var(--mars-ink); }
  html[lang="de"] body.landing .tab-board span { font-size: 9.5px; letter-spacing: .01em; }   /* "Nachrichten" within its key */
  body.landing .tab-board.is-on .tab-ic { box-shadow: 0 0 0 4px rgba(255,90,31,.22), 0 14px 28px -12px rgba(255,70,0,.8); }   /* on the board */
}
/* narrower phones: the bar's first row keeps to one line with everything a little smaller; the narrowest do without the
   sol pill (the peek tile carries the sol) */
@media (max-width: 400px) and (min-height: 521px) {
  body.landing .tk-brand { font-size: 16px; }
  body.landing .tk-sol { font-size: 10.5px; padding: 0 7px; gap: 5px; }
}
@media (max-width: 349px) and (min-height: 521px) {
  body.landing .tk-sol { display: none; }
}

/* a phone held sideways: wide but short — the portal's two cards side by side, the habitat no taller than the screen */
@media (max-height: 520px) and (min-width: 700px) {
  body.landing .portal-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 14px; }
  body.landing .dome-stage { max-width: 560px; margin: 0 auto; }
  body.landing .dome-caption::before { margin-left: 0; margin-right: 0; }
}

/* ---------------------------------------------------- the paper dress: a phone held upright
   The same design, drawn without what costs a phone the most. Same layout, type, cobalt and Mars; the surfaces are paper,
   not glass: nothing is blurred through (a backdrop blur is redrawn every frame, and eight of them share one screen), no
   film is blended over the whole screen, no SVG filter (drawn on the processor), one short shadow per panel instead of
   three, the running line clipped instead of masked, and the cards far below the screen neither laid out nor painted
   until they come near. A wider screen, and a phone held sideways, keep the glass. */
@media (max-width: 760px) and (min-height: 521px) {
  :root {
    --paper-2: #f7f8fc;                                                                  /* the panels' paper */
    --glass: var(--paper-2); --glass-soft: rgba(255,255,255,.96); --glass-solid: var(--paper-2);
    --glass-edge: rgba(47,69,232,.14);
    --glass-shadow: 0 6px 18px -12px rgba(15,21,64,.35);                                 /* one short shadow, not three */
    --sh-raise: var(--glass-shadow); --sh-raise-lg: var(--glass-shadow);
    --tile: #ffffff; --raise: #fbfbfd; --raise-2: #f3f4f9; --well: #ffffff;
  }
  :root[data-theme="dark"] {
    --paper-2: #1f1f24;
    --glass: var(--paper-2); --glass-soft: rgba(24,24,28,.96); --glass-solid: var(--paper-2);
    --glass-edge: rgba(255,255,255,.12);
    --glass-shadow: 0 6px 18px -12px rgba(0,0,0,.6);
    --tile: #26262c; --raise: #26262c; --raise-2: #202025; --well: #17171b;
  }
  /* 1 · no film over the screen */
  html:has(body.landing)::after, :root[data-theme="dark"]:has(body.landing)::after { display: none; }
  /* 2 · paper, not glass: nothing blurs what is behind it */
  .dpanel, .device, .screen.board, .glance-link, .kpi, .run-strip, .dome-popup, dialog.popup,
  body.landing .cloud-latest, body.landing .folder, body.landing .folder-tabs, body.landing .ticker::before, body.landing .tabbar,
  body.landing.messages .board .feed-filter, body.landing.messages .device, body.landing .peek-tile,
  body.landing.inner .logpage-top, body.landing.inner .logpage-day, body.landing.inner .log-day, body.landing.inner .dl-card,
  body.landing.inner .mview, body.landing.inner .panel, body.landing.inner .slab {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* what the page scrolls under — the top bar, the chips row, the bar of keys — is opaque paper: the last few per cent of
     glass let the text beneath ghost through */
  body.landing .ticker::before { background: var(--paper-2); }
  body.landing .folder-tabs { background: var(--paper-2); }
  body.landing .tabbar { background: var(--paper-2); border-top-color: var(--hair); }
  :root[data-theme="dark"] body.landing .tabbar { background: var(--paper-2); }
  body.landing.messages .board .feed-filter { background: var(--paper-2); }
  body.landing dialog.popup::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15,21,64,.3); }
  body.landing .card.xc { background: #fff; box-shadow: none; border-color: var(--hair); }
  :root[data-theme="dark"] body.landing .card.xc { background: var(--tile); }
  body.landing .board .card[data-mine] { box-shadow: inset 3px 0 0 var(--mars); }
  body.landing .masthead-btn { box-shadow: 0 8px 20px -12px rgba(255,70,0,.7); }
  body.landing .masthead-btn.masthead-btn-live { box-shadow: none; background: #fff; }
  :root[data-theme="dark"] body.landing .masthead-btn.masthead-btn-live { background: var(--tile); }
  body.landing .tab-board .tab-ic { box-shadow: 0 6px 14px -8px rgba(255,70,0,.8); }
  /* 3 · the habitat's keys: a stroke instead of a filtered shadow (an SVG filter is drawn on the processor, every time) */
  body.landing .dome-hex polygon, body.landing .dome-pod, :root[data-theme="dark"] body.landing .dome-pod { filter: none; }
  body.landing .dome-pod { stroke: rgba(var(--cobalt-rgb),.35); stroke-width: 1.5; }
  :root[data-theme="dark"] body.landing .dome-pod { stroke: rgba(255,255,255,.28); }
  /* 4 · the running line: clipped, with two painted fades, instead of a mask that moves with it */
  body.landing .tk-window { -webkit-mask-image: none; mask-image: none; position: relative; overflow: hidden; }
  body.landing .tk-window::before, body.landing .tk-window::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; z-index: 1; pointer-events: none; }
  body.landing .tk-window::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
  body.landing .tk-window::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
  :root[data-theme="dark"] body.landing .tk-window::before { background: linear-gradient(90deg, #1a1a1e, rgba(26,26,30,0)); }
  :root[data-theme="dark"] body.landing .tk-window::after { background: linear-gradient(270deg, #1a1a1e, rgba(26,26,30,0)); }
  /* 5 · the cards and the foot far below the screen are neither laid out nor painted until they come near
        (the dashboard's panels are left alone: their scripts measure them as they load) */
  body.landing .card.xc { content-visibility: auto; contain-intrinsic-size: auto 320px; }
  body.landing .foot { content-visibility: auto; contain-intrinsic-size: auto 420px; }
  /* 6 · the live dots keep their pulse (opacity only) with a small static halo */
  body.landing .live-dot, body.landing .cloud-live i, body.landing .tk-sol i, body.landing .peek-latest .live-dot, body.landing .board .live::before { box-shadow: 0 0 0 3px rgba(255,90,31,.18); }
}

/* the inner pages on a phone: nothing a visitor reads under the small capitals' size — the panels' codes, a table's heads, a
   list of states, a day's head, a card's meta, the booklet's figures */
@media (max-width: 760px), (max-height: 520px) {
  body.landing.inner .panel > .chan, body.landing.inner .kv dt, body.landing.inner th, body.landing.inner .pipe > div,
  body.landing.inner .log-day-head, body.landing.inner .log-day-head span, body.landing.inner .card-top, body.landing.inner .card-top .cs, body.landing.inner .card-top .card-day,
  body.landing.inner .eyebrow, body.landing.inner .eyebrow .brk, body.landing.inner .glance-n, body.landing.inner .badge,
  body.landing.inner .spec > span, body.landing.inner .gt-label, body.landing.inner .gt-range, body.landing.inner .gc-note,
  body.landing.inner .gc-head span, body.landing.inner .card-reply .who, body.landing.inner .card-reply-meta { font-size: var(--fs-label); }
  body.landing.inner .kv dd, body.landing.inner td { font-size: 14px; }
  body.landing.inner .log-day-head span { white-space: normal; }                                        /* a long head line wraps rather than runs off */
  body.landing.inner .logpage-strip i, body.landing.inner .logpage-strip span { font-size: 11px; }
  body.landing.inner .spec b, body.landing.inner .gt-value em { font-size: 13px; }
  /* a panel's channel code over its first line rather than in its corner, where a badge or a long title would run into it —
     and none on a booklet page, whose head names the sol already */
  body.landing.inner .panel > .chan { position: static; display: block; margin: 0 0 10px; }
  body.landing.inner .glance-day > .chan { display: none; }
}

/* the About page on a phone: paper, not glass, and the sheets a little closer to their text */
@media (max-width: 760px) and (min-height: 521px) {
  body.landing.about .about-sec { margin-bottom: 16px; padding: 22px 18px 6px; scroll-margin-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.landing.about .about-sec-head { margin-bottom: 18px; padding-bottom: 14px; }
  body.landing.about .about-sec-head .bigsec { font-size: 28px; }
  body.landing.about .about-jump { margin-bottom: 16px; }
  body.landing.about .about-jump a { min-height: 34px; padding: 0 13px; font-size: var(--fs-label); letter-spacing: .08em; }
  /* the credits: each role over its name, the whole width */
  body.landing.about .about-sec .tw table { min-width: 0; }
  body.landing.about .about-sec .tw table, body.landing.about .about-sec .tw tbody, body.landing.about .about-sec .tw tr,
  body.landing.about .about-sec .tw th, body.landing.about .about-sec .tw td { display: block; width: auto !important; }
  body.landing.about .about-sec .tw tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  body.landing.about .about-sec .tw th, body.landing.about .about-sec .tw td { padding: 0; border: 0; }
  body.landing.about .about-sec .tw th { margin: 0 0 4px; }
}

/* ---- the running line on a phone: it runs even where the phone asks for less motion (station.css stops it there) — slower,
   one line of text drifting, which is how the station says what is happening now */
@media (max-width: 760px) and (prefers-reduced-motion: reduce), (max-height: 520px) and (prefers-reduced-motion: reduce) {
  body.landing .tk-track { animation: tk-run 64s linear infinite !important; }
}

/* ====================================================================== the sky of the first page, and the world's slowest chat
   The first screen of the v6 mock-up of the app, in this dress. On the first page — the Earth at its foot, the habitat far
   above, the line between them (landing.js, space; sheet.css lays it out) — the latest exchanges with Earth rise and fade
   one after another — a visitor's question under its callsign, the crew's answer under ✧ and the officer — and the newest
   pictures from the cloud folder appear as small snapshots and fade again (src/views/pages/sky.js draws the sky, public/sky.js
   places what is in it and keeps it current; with nothing to show there is no sky). After the note and the habitat, the
   world's slowest chat: what becomes of a message, in three steps, with a door to the composer. Opacity and a few pixels of
   rise only — nothing blurred, as the paper dress asks; a snapshot's grey is the one filter, on the small picture alone. The
   slowest chat is a column of steps on a phone and on narrower screens, and a row on a desk. */

/* ---- the sky: a line, and a snapshot — as a sequencer sheet has them (below, the sheet): a line is a label on a track, its
   words over a track drawn the width of the sheet (dashed for a message from Earth, whole for the crew's answer), its sender
   and time in small type above — ink on the grey by day, white on the dark sheet by night, each with a halo of the other so
   it reads over the glow and over a snapshot too; a snapshot is a clip, grey as print until the hand is on it */
body.landing .sky-msg { --lbl: var(--ink); --lbl-halo: rgba(236,237,241,.9); --lbl-track: rgba(18,20,38,.5);
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 80%; opacity: 0; }   /* a line is always over a snapshot */
:root[data-theme="dark"] body.landing .sky-msg { --lbl: #fff; --lbl-halo: rgba(10,10,14,.8); --lbl-track: rgba(255,255,255,.85); }
body.landing .sky-msg::after { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--track-l, 0px)); right: calc(-1 * var(--track-r, 0px)); bottom: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--lbl-track) 0 7px, transparent 7px 11px); }   /* its track */
body.landing .sky-msg.is-crew::after { background: var(--lbl-track); }
body.landing .sky-msg.is-on { animation: sky-line 3s ease-in-out both; }
body.landing .sky-who { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--mars-ink);
  text-shadow: 0 0 2px var(--lbl-halo), 0 0 6px var(--lbl-halo); }
:root[data-theme="dark"] body.landing .sky-who { color: #fff; }
body.landing .sky-part.is-crew .sky-who { color: var(--cobalt); }
:root[data-theme="dark"] body.landing .sky-part.is-crew .sky-who { color: #fff; }
body.landing .sky-text { max-width: 100%; box-sizing: border-box; padding: 0 0 5px; font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1.22; letter-spacing: -.005em; color: var(--lbl);
  text-shadow: 0 0 2px var(--lbl-halo), 0 0 10px var(--lbl-halo);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }   /* two lines at most; the whole of it is on the board */
/* a snapshot: the picture in grey, the sol and the time above it; a press opens the picture */
body.landing .sky-pic { position: absolute; z-index: 1; display: block; opacity: 0; pointer-events: auto; border: 0; background: var(--seq-ground); outline: 1px solid var(--seq-track); -webkit-tap-highlight-color: transparent; }
body.landing .sky-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter .3s ease; }
body.landing .sky-pic.is-on { animation: sky-snap 7.2s ease-in-out both; }
body.landing .sky-pic:hover img, body.landing .sky-pic:active img { filter: none; }
body.landing .sky-pic:hover, body.landing .sky-pic:active { outline-color: var(--mars); }
body.landing .sky-when { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: .06em; color: var(--seq-ink); }
@keyframes sky-line { 0% { opacity: 0; transform: translateY(6px); } 22% { opacity: 1; transform: none; } 74% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes sky-snap { 0% { opacity: 0; transform: translateY(12px) scale(.94); } 17% { opacity: 1; transform: none; } 79% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-12px) scale(1.03); } }
@keyframes sky-fade { 0% { opacity: 0; } 20% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
/* asked for less motion (station.css stops every animation then): they come and go by fading alone, nothing rises */
@media (prefers-reduced-motion: reduce) {
  body.landing .sky-msg.is-on { animation: sky-fade 3s linear both !important; }
  body.landing .sky-pic.is-on { animation: sky-fade 7.2s linear both !important; }
}
/* a touch on a snapshot or an exchange (public/sky.js): what was touched stays, and a note stands beside it saying what it
   is — LIVE FEED, the live feed from the habitat; LATEST COMMUNICATION, the latest exchange with it — a small white card
   (dark by night) with one key: to the Media gallery, or to the exchange on the board */
body.landing .sky-msg { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.landing .sky-note { position: absolute; z-index: 4; box-sizing: border-box; width: 320px; padding: 14px 40px 14px 16px; border-radius: 16px; pointer-events: auto; text-align: left; text-transform: none; letter-spacing: 0;
  background: rgba(255,255,255,.97); color: var(--ink); border: 1px solid rgba(var(--cobalt-rgb),.28); box-shadow: 0 18px 40px -16px rgba(15,21,64,.55); font-family: var(--display);
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
:root[data-theme="dark"] body.landing .sky-note { background: rgba(26,26,32,.97); color: #fff; border-color: rgba(255,255,255,.22); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
body.landing .sky-note.is-on { opacity: 1; transform: none; }
body.landing .sky-note-k { display: flex; align-items: center; gap: 7px; font-size: 10.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--mars-ink); }
body.landing .sky-note-k i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mars); box-shadow: 0 0 8px 2px rgba(255,90,31,.6); animation: live 2.4s ease-in-out infinite; }
body.landing .sky-note-t { display: block; margin: 7px 0 0; font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
/* its one key: a cobalt pill — Media Gallery, Message Board — as the page's pressed pills are */
body.landing .sky-note-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 12px 0 0; padding: 0 18px; border: 0; border-radius: 999px; box-sizing: border-box;
  background: var(--cobalt-fill); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1; letter-spacing: .01em; text-decoration: none; box-shadow: 0 10px 20px -12px rgba(47,69,232,.7); -webkit-tap-highlight-color: transparent; }
body.landing .sky-note-btn:hover, body.landing .sky-note-btn:active { color: #fff; background: var(--cobalt-fill); filter: brightness(1.08); transform: none; }
body.landing .sky-note-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(15,21,64,.07); color: inherit; font: 400 18px/1 var(--display); cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent; }
:root[data-theme="dark"] body.landing .sky-note-x { background: rgba(255,255,255,.1); }
body.landing .sky-note-x:hover, body.landing .sky-note-x:active { transform: none; box-shadow: none; background: rgba(15,21,64,.14); }
@media (prefers-reduced-motion: reduce) { body.landing .sky-note-k i { animation: none; } }
/* the sky is the first page's room, over the whole of it (sheet.css lays the room out: the Earth, the habitat, the line);
   its lines and snapshots are placed by public/sky.js, clear of them */
html.js body.landing .space-room .dome-sky { display: block; position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
@media (min-width: 761px) and (min-height: 521px) {
  body.landing .sky-text { font-size: 16px; line-height: 1.24; }
  body.landing .sky-who { font-size: 11.5px; }
  body.landing .sky-when { font-size: 11px; }
}

/* ---- the sheet under the habitat (sky.js, habitatSheet), after a sequencer's layout sheet: a grey ground ruled in fine
   columns — the run's sols, a ruler of their numbers across the top, the sol the run is on in Mars orange and a playhead at
   its hour — tracks across it, dashed, doubled, dotted, one with a wave, one with a row of steps, two lines of the station's
   figures in small type, and one great glow behind the dome, ultramarine going over into red, ending at the ground the dome
   stands on. The dome is glass over it; the sky's snapshots and lines come and go on top. Painted once: gradients and lines
   only, nothing blurred or filtered, so the paper dress keeps it. public/sky.js keeps the glow behind the dome and the
   playhead at the hour. */
body.landing .dome-caption { position: relative; z-index: 1; }
body.landing .dome-panel { --seq-ground: #d7d8dc; --seq-fine: rgba(18,20,38,.07); --seq-major: rgba(18,20,38,.15); --seq-track: rgba(18,20,38,.3); --seq-ink: rgba(18,20,38,.5); }
:root[data-theme="dark"] body.landing .dome-panel { --seq-ground: #1b1b20; --seq-fine: rgba(255,255,255,.045); --seq-major: rgba(255,255,255,.1); --seq-track: rgba(255,255,255,.22); --seq-ink: rgba(255,255,255,.46); }
body.landing .dome-seq { display: block; position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: var(--seq-ground); }
/* the glow: the dome is filled with it rim to rim (dome.js, auraLayers — ultramarine, violet, red, a pale sky blue at its
   left edge and orange at its right); here it spills softly past the rim onto the sheet, as the reference's glow fades into
   its ground, cut away at the ground line */
body.landing .seq-glow { position: absolute; left: 0; right: 0; top: 0; height: var(--orb-base, 86%); overflow: hidden; }
body.landing .seq-orb {
  position: absolute; left: var(--orb-x, 50%); top: calc(var(--orb-base, 86%) - var(--orb-r, 170px) * .4);
  width: calc(var(--orb-r, 170px) * 2.9); height: calc(var(--orb-r, 170px) * 1.8); transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 30% 56%, rgba(47,31,255,.5), rgba(47,31,255,.2) 55%, rgba(47,31,255,0)),
    radial-gradient(closest-side at 70% 56%, rgba(255,43,87,.5), rgba(255,43,87,.2) 55%, rgba(255,43,87,0)),
    radial-gradient(closest-side at 14% 52%, rgba(150,214,255,.55), rgba(150,214,255,0)),
    radial-gradient(closest-side at 86% 56%, rgba(255,150,70,.5), rgba(255,150,70,0)),
    radial-gradient(closest-side at 50% 50%, rgba(178,27,239,.35), rgba(178,27,239,0));
}
/* the columns: one to a sol, four fine lines in each */
body.landing .seq-grid { position: absolute; inset: 0;
  background-image: linear-gradient(90deg, var(--seq-major) 1px, transparent 1px), linear-gradient(90deg, var(--seq-fine) 1px, transparent 1px);
  background-size: calc(100% / var(--seq-days, 13)) 100%, calc(100% / var(--seq-days, 13) / 4) 100%; }
/* the ruler: the sols' numbers, a tick at every quarter */
body.landing .seq-ruler { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: grid; grid-template-columns: repeat(var(--seq-days, 13), minmax(0, 1fr));
  border-bottom: 1px solid var(--seq-major); background-color: var(--seq-ground);
  background-image: linear-gradient(90deg, var(--seq-track) 1px, transparent 1px); background-size: calc(100% / var(--seq-days, 13) / 4) 4px; background-position: 0 100%; background-repeat: repeat-x; }
body.landing .seq-n { padding: 5px 0 0 5px; border-left: 1px solid var(--seq-track); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-tag); line-height: 1; letter-spacing: .08em; color: var(--seq-ink); overflow: hidden; }
body.landing .seq-n.is-now { color: var(--mars-ink); font-weight: 700; }
/* the tracks */
body.landing .seq-t { position: absolute; height: 1px; background: var(--seq-track); }
body.landing .seq-t.seq-dash { background: repeating-linear-gradient(90deg, var(--seq-track) 0 7px, transparent 7px 11px); }
body.landing .seq-t.seq-dot { background: repeating-linear-gradient(90deg, var(--seq-track) 0 2px, transparent 2px 5px); }
body.landing .seq-t.seq-double { height: 4px; margin-top: -2px; background:
    repeating-linear-gradient(90deg, var(--seq-track) 0 9px, transparent 9px 12px) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--seq-track) 0 9px, transparent 9px 12px) 0 3px / 100% 1px no-repeat; }
body.landing .seq-wave { position: absolute; height: 12px; margin-top: -6px; overflow: visible; }
body.landing .seq-wave path { fill: none; stroke: var(--seq-track); stroke-width: 1; vector-effect: non-scaling-stroke; }
body.landing .seq-steps { position: absolute; display: flex; gap: 9px; margin-top: -2px; }
body.landing .seq-steps b { display: block; width: 12px; height: 4px; background: var(--seq-track); }
body.landing .seq-fig { position: absolute; transform: translateY(calc(-100% - 4px)); white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--seq-ink); }
/* the playhead: this hour of the run, a line of Mars from the ruler down, its cap on the ruler */
body.landing .seq-head { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(255,90,31,.8); }
body.landing .seq-head::before { content: ""; position: absolute; top: 0; left: -4.5px; border: 5px solid transparent; border-top: 7px solid var(--mars); border-bottom: 0; }
/* the dome over it: glass over the colour it is filled with — white lines, a thin sheen whiter at the crown */
:root[data-theme="dark"] body.landing .dome-aura-rim, :root[data-theme="dark"] body.landing .dome-aura-crown { opacity: .35; }
body.landing #dome-pearl .s1 { stop-color: #ffffff; stop-opacity: .2; }
body.landing #dome-pearl .s2 { stop-color: #ffffff; stop-opacity: .1; }
body.landing #dome-pearl .s3 { stop-color: #ffffff; stop-opacity: .04; }
body.landing .dome-mesh path { stroke: rgba(255,255,255,.62); }
body.landing .dome-shell { stroke: rgba(255,255,255,.95); stroke-width: 1.4; }
:root[data-theme="dark"] body.landing #dome-pearl .s1 { stop-color: #ffffff; stop-opacity: .12; }
:root[data-theme="dark"] body.landing #dome-pearl .s2 { stop-color: #ffffff; stop-opacity: .07; }
:root[data-theme="dark"] body.landing #dome-pearl .s3 { stop-color: #ffffff; stop-opacity: .03; }
:root[data-theme="dark"] body.landing .dome-mesh path { stroke: rgba(255,255,255,.3); }
:root[data-theme="dark"] body.landing .dome-shell { stroke: rgba(255,255,255,.5); }
/* where the sheet lies: on a desk from under the habitat's heading to under its caption, inside the frame's corners; on a
   phone held upright the width of the screen, from the top of the room above the dome to under its ground line */
@media (min-width: 761px) and (min-height: 521px) {
  body.landing .dome-seq { left: 0; right: 0; top: calc(6px - var(--room)); bottom: -44px; }
}
@media (max-width: 760px) and (min-height: 521px) {
  body.landing .dome-seq { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 0; bottom: -30px; }
  body.landing .dome-screen { padding-top: 25px; }                                                   /* room for the ruler over the dome (with a sky, the sky's room: above) */
  body.landing .seq-fig { display: none; }                                                            /* the small figures would crowd a phone's sheet */
  body.landing .seq-fig.seq-brand { display: block; }                                                 /* the name stays (sheet.css) */
  body.landing .seq-fig.seq-live { display: inline-flex; }                                            /* and the LIVE mark opposite it (sheet.css) */
}

/* ---- the world's slowest chat: the heading, the four steps, the door */
body.landing .slow-chat { display: block; position: relative; margin: 24px 0 48px; }
body.landing .slow-head { margin: 0 0 14px; }
body.landing .slow-eyebrow { display: block; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--mars-ink); font-weight: 500; }
body.landing .slow-head h2 { margin: 7px 0 0; font-family: var(--display); font-size: 30px; line-height: 1.06; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
body.landing .slow-sub { margin: 5px 0 0; font-size: 17px; line-height: 1.4; color: var(--dim); }
body.landing .slow-steps { list-style: none; margin: 0; padding: 0; }
/* a step: its sign in a small tinted disc, its words; a dashed thread in its colour on to the next */
body.landing .slow-step { --c: #2f45e8; --c-soft: rgba(47,69,232,.12); --c-edge: rgba(47,69,232,.4); --c-halo: rgba(47,69,232,.06); --c-glow: rgba(47,69,232,.62); position: relative; }
body.landing .slow-step.s-transmit { --c: #6b50c8; --c-soft: rgba(107,80,200,.12); --c-edge: rgba(107,80,200,.4); --c-halo: rgba(107,80,200,.06); --c-glow: rgba(107,80,200,.62); }
body.landing .slow-step.s-transit { --c: #b24f8f; --c-soft: rgba(178,79,143,.12); --c-edge: rgba(178,79,143,.4); --c-halo: rgba(178,79,143,.06); --c-glow: rgba(178,79,143,.62); }
body.landing .slow-step.s-downlink { --c: #ff5a1f; --c-soft: rgba(255,90,31,.12); --c-edge: rgba(255,90,31,.4); --c-halo: rgba(255,90,31,.06); --c-glow: rgba(255,90,31,.62); }
:root[data-theme="dark"] body.landing .slow-step { --c: #93a0ff; --c-soft: rgba(147,160,255,.14); --c-edge: rgba(147,160,255,.42); --c-halo: rgba(147,160,255,.07); --c-glow: rgba(0,0,0,.7); }
:root[data-theme="dark"] body.landing .slow-step.s-transmit { --c: #ab93f2; --c-soft: rgba(171,147,242,.14); --c-edge: rgba(171,147,242,.42); --c-halo: rgba(171,147,242,.07); }
:root[data-theme="dark"] body.landing .slow-step.s-transit { --c: #e38bc4; --c-soft: rgba(227,139,196,.14); --c-edge: rgba(227,139,196,.42); --c-halo: rgba(227,139,196,.07); }
:root[data-theme="dark"] body.landing .slow-step.s-downlink { --c: #ff7a45; --c-soft: rgba(255,122,69,.14); --c-edge: rgba(255,122,69,.42); --c-halo: rgba(255,122,69,.07); }
body.landing .slow-ic { display: grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; color: var(--c); border: 1px solid var(--c-edge);
  background: radial-gradient(circle at 35% 30%, var(--tile), var(--c-soft)); box-shadow: 0 10px 22px -12px var(--c-glow), 0 0 0 5px var(--c-halo); }
body.landing .slow-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
body.landing .slow-txt { min-width: 0; }
body.landing .slow-txt h3 { margin: 0; font-family: var(--display); font-size: 19px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
body.landing .slow-txt p { margin: 5px 0 0; font-size: 16px; line-height: 1.5; color: var(--dim); }
body.landing .slow-txt p b { font-weight: 500; color: var(--ink); }
body.landing .slow-txt .slow-k { margin: 3px 0 0; font-family: var(--display); font-size: var(--fs-label); line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--mars-ink); }
body.landing .slow-bubble { margin: 6px 0 0; padding: 7px 12px 8px; border: 1px solid var(--hair); border-radius: 16px 16px 16px 4px; background: var(--tile); font-family: var(--display); font-size: 16px; line-height: 1.3; color: var(--ink); }
body.landing .slow-bubble.is-crew { border-radius: 16px 16px 4px 16px; border-color: rgba(255,90,31,.32); background: #fff6f1; }
:root[data-theme="dark"] body.landing .slow-bubble.is-crew { background: #2e221d; border-color: rgba(255,122,69,.34); }
body.landing .slow-bk { display: block; margin: 0 0 3px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mars-ink); }
body.landing .slow-txt .slow-route { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--dim); }
body.landing .slow-earth { color: var(--cobalt); }
body.landing .slow-mars { color: var(--mars-ink); }
/* Earth to Mars: a dotted track in the transit colour, a signal hopping along it */
body.landing .slow-line { position: relative; flex: 0 1 110px; min-width: 40px; height: 1px; background-image: linear-gradient(90deg, var(--c) 50%, transparent 0); background-size: 5px 1px; }
body.landing .slow-line i { position: absolute; top: -2.5px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: slow-hop 2.4s ease-in-out infinite; }
@keyframes slow-hop { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.landing .slow-line i { animation: none; left: calc(50% - 3px); } }
/* the door to the composer: to the portal further down the page — on a phone held upright, where the page has no portal, to
   the messages page (one of the pair is shown, as with the masthead's doors) */
body.landing .slow-cta { margin: 10px 0 0; }
body.landing .slow-cta .slow-write { display: inline-flex; }
body.landing .slow-cta .slow-write-page { display: none; }
/* a column of four — a phone, and a window too short for the card: the sign at the left, the words beside it, a thread down */
@media (max-width: 760px), (max-height: 520px) {
  body.landing .slow-head, body.landing .slow-steps, body.landing .slow-cta { max-width: 640px; }
  body.landing .slow-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; padding: 4px 0 26px; }
  body.landing .slow-head { margin-bottom: 26px; }
  body.landing .slow-head h2 { margin-top: 10px; }
  body.landing .slow-sub { margin-top: 8px; }
  body.landing .slow-txt p { margin-top: 8px; }
  body.landing .slow-txt .slow-k { margin-top: 5px; }
  body.landing .slow-bubble { margin-top: 10px; padding: 10px 14px 11px; }
  body.landing .slow-txt .slow-route { margin-top: 8px; }
  body.landing .slow-step.s-downlink { padding-bottom: 6px; }
  body.landing .slow-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 48px; bottom: 0; width: 1.5px; background-image: linear-gradient(var(--c) 50%, transparent 0); background-size: 1.5px 6px; opacity: .5; }
}
/* a phone held upright: after the habitat, the width of the page; the door leads to the messages page */
@media (max-width: 760px) and (min-height: 521px) {
  body.landing .slow-chat { margin: 64px 0 0; padding-top: 34px; border-top: 1px solid var(--hair); }   /* a section of its own, under a hairline */
  body.landing .slow-cta { margin-top: 18px; }
  body.landing .slow-cta .slow-write { display: none; }
  body.landing .slow-cta .slow-write.slow-write-page { display: flex; width: 100%; max-width: none; min-height: 54px; box-sizing: border-box; }
}
/* a desk (and a tablet): a section of its own between the habitat and the portal, a window high like theirs (the wheel stops at
   its heading, public/section-scroll.js) and dressed like the portal: the heading at the left, the door at the right, where the
   portal keeps its one-way signal; beneath them one glass card with the four steps on a dashed thread, each sign in its own
   colour — side by side from 1180 px across, two by two below that */
@media (min-width: 761px) and (min-height: 521px) {
  body.landing .slow-chat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head cta" "steps steps"; align-items: end; align-content: center; column-gap: 40px; row-gap: calc(3.2 * var(--u));
    margin: 0; padding: calc(4 * var(--u)) 0; min-height: calc(100vh - 28px); box-sizing: border-box; scroll-margin-top: 28px; }
  body.landing .slow-head { grid-area: head; margin: 0; }
  body.landing .slow-head h2 { margin-top: 8px; font-size: 44px; line-height: 1.02; }
  body.landing .slow-sub { margin-top: 10px; font-size: 18px; }
  body.landing .slow-cta { grid-area: cta; margin: 0 0 4px; }
  body.landing .slow-steps { grid-area: steps; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 44px; row-gap: 44px; align-items: start;
    padding: calc(5 * var(--u)) 44px calc(5.4 * var(--u)); border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35); }
  body.landing .slow-step { display: flex; flex-direction: column; gap: 20px; }
  body.landing .slow-step:not(:last-child)::before { content: ""; position: absolute; left: 72px; right: -30px; top: 28px; height: 1.5px; background-image: linear-gradient(90deg, var(--c) 50%, transparent 0); background-size: 7px 1.5px; opacity: .55; }
  body.landing .slow-ic { width: 56px; height: 56px; box-shadow: 0 14px 28px -14px var(--c-glow), 0 0 0 7px var(--c-halo); }
  body.landing .slow-ic svg { width: 26px; height: 26px; }
  body.landing .slow-txt h3 { font-size: 23px; letter-spacing: -.015em; }
  body.landing .slow-txt .slow-k { margin-top: 7px; font-size: var(--fs-label); }
  body.landing .slow-txt p { margin-top: 10px; font-size: var(--fs-read); line-height: 1.5; }
  body.landing .slow-bubble { margin-top: 12px; padding: 10px 15px 11px; font-size: 16.5px; }
  body.landing .slow-bk { font-size: 11.5px; }
  body.landing .slow-txt .slow-route { flex-wrap: wrap; row-gap: 6px; margin-top: 9px; font-size: 12.5px; }   /* Mars under Earth where the column is narrow */
  body.landing .slow-line { flex: 1 1 60px; max-width: 120px; }
}
@media (min-width: 761px) and (max-width: 1179px) and (min-height: 521px) {
  body.landing .slow-head h2 { font-size: 38px; }
  body.landing .slow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 36px; padding-right: 36px; }
  body.landing .slow-step:nth-child(2n)::before { display: none; }                        /* the thread runs across each row, from its first step to its second */
}

/* ====================================================================== the dashboard, alive
   Signs that the dashboard is being updated as it stands — none of them a figure, all of them decoration over the
   figures the page carries (src/views/pages/public.js, dashLive and vizTile; public/live.js moves the astronauts about
   the radar and rolls the head's figures up once; public/typed.js types the day's mission out on the installation's
   mission screen — the dashboard shows it still): at the right of the head a LIVE mark; a cursor blinking after the
   title; the run's strip with the sol of the day breathing; among the habitat's tiles two instruments without a
   reading, each on a row of its own — at the end of the sensors' third row Astronauts tracked, a radar whose sweep goes
   round over rings and a rim of ticks with one dot an astronaut wandering inside, lit as the sweep passes; beside the
   stores and the power Karlsruhe as its fan, the station's three places on it and a signal going along the link; the folder's panels
   framed with brackets at the corners, a pulsing dot before every panel's name; the crew's faces with a ring pulsing
   out of each; the CO₂ dial with a ring pulsing out of it; the task of the hour with a blinking dot. No line sweeps
   over anything. Where the visitor asks for less motion all of it stands still. */
body.landing .dash-head { position: relative; }
body.landing .dash-head .bigsec::after { content: ""; display: inline-block; width: 11px; height: .78em; margin-left: 12px; vertical-align: -.06em; background: var(--mars); animation: dl-blink 1.1s steps(2, start) infinite; }   /* the cursor */
body.landing .dash-live { display: flex; align-items: flex-start; align-self: flex-start; flex: none; padding-top: 6px; }
body.landing .dl-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border: 1px solid var(--mars); border-radius: 999px; font-family: var(--display); font-size: var(--fs-tag); letter-spacing: .16em; font-weight: 600; color: var(--mars-ink); background: rgba(255,90,31,.07); }
body.landing .dl-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mars); box-shadow: 0 0 8px 2px rgba(255,90,31,.6); animation: live 1.6s ease-in-out infinite; }
@keyframes dl-blink { to { visibility: hidden; } }
/* the run's strip: the sol of the day breathes */
body.landing .run-strip .now i { animation: dl-breathe 2.4s ease-in-out infinite; }
@keyframes dl-breathe { 50% { box-shadow: 0 0 16px 4px rgba(255,90,31,.75); } }
/* the two instruments without a reading — Karlsruhe, after the light, and the astronauts, beside the power — each a tile named as the
   instruments are, its sign in the disc at the top right (8 October: "add the corresponding logos"), the name on two
   lines where the tile is narrow and never over the drawing, the drawing in the middle of what is left */
body.landing .hbt .tile.t-viz { position: relative; align-items: center; justify-content: center; min-height: 168px; overflow: hidden; }
body.landing .hbt .viz-k { position: static; align-self: stretch; padding-right: 52px; font-family: var(--display); font-weight: 600; font-size: var(--fs-name); line-height: 1.2; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
body.landing .hbt .tile.t-viz > :not(.viz-k):not(.t-ic) { margin: auto; }
/* the radar: the ticks, the rings, the cross, the sweep going round in four seconds, the astronauts (live.js moves them
   and lights each as the sweep passes; asked for less motion, they stand, lit) */
body.landing .dl-radar { width: 132px; height: 132px; overflow: visible; display: block; }
body.landing .dl-ticks line { stroke: var(--cobalt); stroke-opacity: .35; stroke-width: 1; }
body.landing .dl-ticks line.dl-tick-l { stroke-opacity: .7; stroke-width: 1.4; }
body.landing .dl-ring { fill: none; stroke: var(--cobalt); stroke-opacity: .45; stroke-width: 1; }
body.landing .dl-ring.dl-dash { stroke-dasharray: 2 4; stroke-opacity: .5; }
body.landing .dl-cross { stroke: var(--cobalt); stroke-opacity: .2; stroke-width: 1; }
body.landing .dl-sweep { transform-origin: 60px 60px; animation: dl-turn 4s linear infinite; }
body.landing .dl-sweep path { fill: url(#dl-sweep); }
body.landing .dl-sweep line { stroke: var(--cobalt); stroke-opacity: 1; stroke-width: 1.4; }
body.landing .dl-astro { fill: var(--mars); opacity: .85; }
:root[data-theme="dark"] body.landing .dl-astro { filter: drop-shadow(0 0 3px rgba(255,106,46,.9)); }
@keyframes dl-turn { to { transform: rotate(360deg); } }
/* a phone: the radar a still picture — the sweep standing at twelve o'clock, the crew's dots where they are drawn (live.js
   leaves them be) — nothing on it going round, nothing drawn sixty times a second (13 October: "don't have the moving
   radar or dots on mobile, just the static image") */
@media (max-width: 760px), (max-height: 520px) { body.landing .dl-sweep { animation: none; } }
/* Karlsruhe as its fan (public.js, cityFan): the disc faintly tinted, the thirty-two rays and the rings in cobalt — the
   kilometre rings whole, the half-kilometres dashed, nothing written on them — a sweep of Mars going round once in
   twenty-four seconds; the Schloss a small square of ink at the centre, Red Dust City a dot of Mars with a ring pulsing
   out of it, the ground station a diamond of cobalt, the link between them dashed in cobalt with a signal going along it
   (--lx, --ly: the way from the one to the other, set on the drawing) — the names beside them in the display face, the
   places' names small and dim under them. The drawing takes the tile's width (its words must read), square. */
body.landing .dl-city { display: block; width: 100%; max-width: 236px; height: auto; aspect-ratio: 1; overflow: visible; }
body.landing .dl-city-disc { fill: rgba(var(--cobalt-rgb),.035); stroke: none; }
body.landing .dl-fan line { stroke: var(--cobalt); stroke-opacity: .22; stroke-width: .7; }
body.landing .dl-city .dl-ring { stroke-opacity: .4; stroke-width: .8; }
body.landing .dl-city .dl-ring.dl-dash { stroke-dasharray: 1.5 3; stroke-opacity: .35; }
body.landing .dl-city .dl-rim { stroke-opacity: .55; stroke-width: 1; }
body.landing .dl-fan-sweep { transform-origin: 80px 80px; animation: dl-turn 24s linear infinite; }
body.landing .dl-link { stroke: var(--cobalt); stroke-opacity: .8; stroke-width: 1; stroke-dasharray: 2.5 2.5; stroke-linecap: round; }
body.landing .dl-link-sig { fill: var(--cobalt); animation: dl-link 6s ease-in-out infinite; }
@keyframes dl-link { 0%, 8% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 48% { transform: translate(var(--lx), var(--ly)); opacity: 1; } 52% { opacity: 0; } 56% { transform: translate(var(--lx), var(--ly)); opacity: 0; } 60% { opacity: 1; } 96% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
body.landing .dl-schloss { fill: var(--ink); }
body.landing .dl-rdc { fill: var(--mars); }
body.landing .dl-rdc-ping { fill: none; stroke: var(--mars); stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; animation: dl-ping 3.6s ease-out infinite; }
body.landing .dl-gs { fill: var(--cobalt); }
:root[data-theme="dark"] body.landing .dl-rdc { filter: drop-shadow(0 0 3px rgba(255,106,46,.9)); }
:root[data-theme="dark"] body.landing .dl-gs { filter: drop-shadow(0 0 3px rgba(107,125,255,.8)); }
body.landing .dl-city-t { font-family: var(--display); font-size: 8.8px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 2.2px; stroke-linejoin: round; }   /* a halo of the tile's ground, so a name reads over the rays */
body.landing .dl-city-t.dl-hot { fill: var(--mars-ink); }
body.landing .dl-city-t.dl-cool { fill: var(--cobalt); }
body.landing .dl-city-t.dl-dim { font-size: 7.6px; font-weight: 500; fill: var(--dim); }
:root[data-theme="dark"] body.landing .dl-city-t { stroke: #111115; }
/* the folder's panels: brackets at the corners, a pulsing dot before each name */
body.landing .folder-body { --bk: rgba(var(--cobalt-rgb),.55);
  background-image: linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk));
  background-size: 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px;
  background-position: left 10px top 8px, left 10px top 8px, right 10px top 8px, right 10px top 8px, left 10px bottom 8px, left 10px bottom 8px, right 10px bottom 8px, right 10px bottom 8px;
  background-repeat: no-repeat; }
@media (max-width: 760px) and (min-height: 521px) { body.landing .folder-body { background-image: none; } }   /* a phone: no brackets round the folder (8 October) */
body.landing .folder-body .dpanel-title h3::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 8px 2px rgba(var(--cobalt-rgb),.45); animation: live 2s ease-in-out infinite; vertical-align: middle; }
body.landing .folder-body #habitat .dpanel-title h3::before { display: none; }                                 /* the Habitat carries its LIVE mark already */
/* the crew's faces: a ring pulsing out of each, one after another */
body.landing .officer-face { position: relative; }
body.landing .officer-face::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid rgba(var(--cobalt-rgb),.7); opacity: 0; animation: dl-ping 3.6s ease-out infinite; pointer-events: none; }
body.landing .officer:nth-child(2) .officer-face::after { animation-delay: 1.2s; }
body.landing .officer:nth-child(3) .officer-face::after { animation-delay: 2.4s; }
@keyframes dl-ping { 0% { transform: scale(1); opacity: .8; } 60% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } }
/* the schedule: the task of the hour with a dot blinking before its time */
body.landing .rows .row.active .t::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--mars); box-shadow: 0 0 8px 2px rgba(255,90,31,.6); animation: live 1.4s ease-in-out infinite; vertical-align: middle; }
/* the day's mission, typed on the installation's mission screen (/screen/mission, public/typed.js): the words not yet
   typed keep their place, unseen; the cursor after the last word typed */
body.landing .mission-body .tw-off { color: transparent !important; text-shadow: none; }
body.landing .mission-body .tw-cursor { display: inline-block; width: .55em; height: .95em; margin-left: 2px; vertical-align: -.12em; background: var(--mars); animation: dl-blink 1s steps(2, start) infinite; }
body.landing .mission-body.is-typing li::marker { color: transparent; }
body.landing .mission-body.is-typing li.tw-seen::marker { color: inherit; }
/* a phone: each instrument the width of the panel, under the row it belongs to */
@media (max-width: 760px), (max-height: 520px) {
  body.landing .dash-live { padding-top: 2px; }
  body.landing .hbt .tile.t-viz { grid-column: 1 / -1; grid-row: auto; min-height: 150px; padding: 14px 12px 14px; }   /* the name above, the drawing under it */
  body.landing .dl-radar { width: 108px; height: 108px; }
  body.landing .dl-city { max-width: 220px; }
  body.landing .dash-head .bigsec::after { width: 9px; margin-left: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing .dl-sweep, body.landing .dl-fan-sweep, body.landing .dl-link-sig, body.landing .dl-rdc-ping,
  body.landing .officer-face::after, body.landing .mission-body .tw-cursor { animation: none; }
  body.landing .dl-fan-sweep { transform: rotate(120deg); }                                                            /* the sweep stands, to the south-east as in the mock-up */
  body.landing .dl-link-sig { opacity: 1; }
  body.landing .mission-body .tw-cursor { display: none; }
}

/* ------------------------------------------------------------------ the close key of every pop-up
   The room pop-ups (inside.js, dome.js), the sky's notes (sky.js), the media pop-up (media.js) and the composer's
   pop-up on a phone (public.js, tabbar.js) close with the same key: a round one, 34px (40px under a thumb, below),
   its cross two strokes drawn in the markup, the same wherever it stands. The station's buttons are wide keys with
   spaced capitals, a shadow and a lift on hover (station.css), and under a thumb they are made at least 44px high —
   a round key takes none of that: its sides are pinned equal here, after every rule that sized one of them. */
body.landing .popup-close, body.landing .sky-note-x, body.landing .lightbox .lb-close, html.js body.landing.messages .dev-close {
  box-sizing: border-box; flex: none; width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px;
  margin: 0; padding: 0; border-radius: 50%; place-items: center; font-size: 0; line-height: 1; letter-spacing: 0;
  box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s, color .15s; }
body.landing .popup-close, body.landing .sky-note-x, body.landing .lightbox .lb-close { display: grid; }               /* the composer's key keeps its own: drawn on a phone only (above) */
body.landing .popup-close { margin-left: auto; }                                                                        /* at the right of the pop-up's head */
body.landing .popup-close svg, body.landing .sky-note-x svg, body.landing .lightbox .lb-close svg, html.js body.landing.messages .dev-close svg {
  display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.landing .popup-close:hover, body.landing .popup-close:active, body.landing .sky-note-x:hover, body.landing .sky-note-x:active,
body.landing .lightbox .lb-close:hover, body.landing .lightbox .lb-close:active, html.js body.landing.messages .dev-close:hover, html.js body.landing.messages .dev-close:active { transform: none; box-shadow: none; }
@media (max-width: 760px) {
  body.landing .popup-close, body.landing .sky-note-x, body.landing .lightbox .lb-close, html.js body.landing.messages .dev-close { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; }
  body.landing .lightbox .lb-close { top: -8px; right: -8px; }
}

/* ------------------------------------------------------------------ the Sensors tab in groups (13 October)
   The dashboard's one Sensors tab, its instruments gathered under headings ("keep everything inside the Sensors tab, not
   individual tabs; only inside make bigger groups like Energy, Life support, Resources to have a clarity of everything" —
   public.js, dashboardPanels, grouped): Life support, Resources, Energy, Crew, More-than-human and Habitat hardware
   (while they have a chart), Trends. A heading: its sign in a cobalt disc, its name, a line on what is under it; a
   hairline between the groups. Each group's tiles on four tracks (two in a narrower panel, one on a phone), its charts
   the group's width, one under the other (hardware.js draws them for that width). The rules name the panel by its id, so
   they outrank the bento's (#hbt-bento, above) and the old dress's (station.css, .dpanel .hbt .t-…). The installation's
   screens keep the bento. */
body.landing #sensors.is-grouped .hbt-group { margin: 0; min-width: 0; }
body.landing #sensors.is-grouped .hbt-group:not(:first-of-type) { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hair); }
body.landing #sensors.is-grouped .hbt-group-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
body.landing #sensors.is-grouped .hbt-group-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cobalt-fill); color: #fff; box-shadow: 0 10px 20px -12px rgba(47,69,232,.7); }
body.landing #sensors.is-grouped .hbt-group-ic svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
body.landing #sensors.is-grouped .hbt-group-t { min-width: 0; }
body.landing #sensors.is-grouped .hbt-group-t h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.012em; line-height: 1.15; color: var(--ink); }
body.landing #sensors.is-grouped .hbt-group-t p { margin: 3px 0 0; font-family: var(--display); font-size: 15px; line-height: 1.4; color: var(--dim); text-wrap: pretty; }
body.landing #sensors.is-grouped .hbt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: min(22px, calc(2.4 * var(--u))); }
body.landing #sensors.is-grouped .hbt-grid > * { grid-column: span 1; grid-row: auto; min-width: 0; order: 0; }
body.landing #sensors.is-grouped .hbt-grid > .t-fig, body.landing #sensors.is-grouped .hbt-grid > .t-bike, body.landing #sensors.is-grouped .hbt-grid > .t-pwr { grid-column: span 2; }
body.landing #sensors.is-grouped .hbt-grid > .t-res, body.landing #sensors.is-grouped .hbt-grid > .hbt-notes, body.landing #sensors.is-grouped .hbt-grid > .hw-slot { grid-column: 1 / -1; }
body.landing #sensors.is-grouped .hbt-grid > .t-viz-city { grid-column: span 2; }                 /* Crew: the steps and Karlsruhe, two tracks each (no Astronauts tracked since 13 October) */
body.landing #sensors.is-grouped .hbt-notes:empty, body.landing #sensors.is-grouped .hw-slot:empty { display: none; }
body.landing #sensors.is-grouped .hw-notes { margin: 0 0 18px; }
body.landing #sensors.is-grouped .hw-slot .hw-charts { grid-template-columns: minmax(0, 1fr); gap: min(22px, calc(2.4 * var(--u))); }
body.landing #sensors.is-grouped .hw-slot > .empty { margin: 0; }
/* the stores: a ring a store across the group, as the bento has them */
body.landing #sensors.is-grouped .t-res { padding-bottom: 30px; }
body.landing #sensors.is-grouped .t-res .gauges.rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 20px; }
body.landing #sensors.is-grouped .t-res .gauge.round { width: auto; min-width: 0; }
/* the trends under their heading, the hairline above it the group's */
body.landing #sensors.is-grouped .hbt-trends-in { margin: 0; padding: 0; border: 0; }
body.landing #hbt-groups.is-live .hw-line, body.landing #hbt-groups.is-live .hw-area, body.landing #hbt-groups.is-live .hw-tag { animation: none; }   /* a reading swapped in later is simply there (hardware.js) */
@container hbt (max-width: 739px) {
  body.landing #sensors.is-grouped .hbt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.landing #sensors.is-grouped .hbt-grid > .t-fig, body.landing #sensors.is-grouped .hbt-grid > .t-bike, body.landing #sensors.is-grouped .hbt-grid > .t-pwr, body.landing #sensors.is-grouped .hbt-grid > .t-viz-city { grid-column: 1 / -1; }
}
@container hbt (max-width: 399px) {
  body.landing #sensors.is-grouped .hbt-grid { grid-template-columns: minmax(0, 1fr); }
  body.landing #sensors.is-grouped .hbt-grid > * { grid-column: 1 / -1; }
}
@media (max-width: 760px), (max-height: 520px) {
  body.landing #sensors.is-grouped .hbt-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.landing #sensors.is-grouped .hbt-grid > * { grid-column: 1 / -1; }
  body.landing #sensors.is-grouped .hbt-group:not(:first-of-type) { margin-top: 26px; padding-top: 20px; }
  body.landing #sensors.is-grouped .hbt-group-head { gap: 12px; margin-bottom: 12px; }
  body.landing #sensors.is-grouped .hbt-group-ic { width: 40px; height: 40px; }
  body.landing #sensors.is-grouped .hbt-group-ic svg { width: 20px; height: 20px; }
  body.landing #sensors.is-grouped .hbt-group-t h3 { font-size: 20px; }
  body.landing #sensors.is-grouped .hbt-group-t p { font-size: 14px; }
  body.landing #sensors.is-grouped .t-res .gauges.rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding-right: 8px; }
}

/* ------------------------------------------------------------------ Today's Meal as cards (13 October)
   The dashboard's Today's Meal (public.js, mealCardsBody — "for each meal, show a card with all the nutrients, energy,
   protein etc."): the day's sum in a band at the head — the energy large, what one serving of each meal carries and what
   the kitchen used, the day's nutrients — then a card a meal, three across where the folder is wide, one under the
   other on a phone; the cards of a row keep their parts level (subgrid). A card: the slot and where the meal stands (a
   chip — served, being served, next, later; planned before the run), the name, what one serving carries, the share of
   its energy from protein (cobalt), fat (amber) and carbohydrate (Mars) as a bar, its six nutrients, then what it took
   in the kitchen. In the tiles' dress. */
body.landing { --mc-p: var(--cobalt-fill); --mc-f: #e8a317; --mc-c: var(--mars); --mc-ok: #1d8a55; --mc-ok-rgb: 43,182,115; }
:root[data-theme="dark"] body.landing { --mc-f: #f5bf42; --mc-ok: #5fd69a; --mc-ok-rgb: 95,214,154; }
body.landing #galley.is-cards .dpanel-body { container: mc / inline-size; }
body.landing .mc-wrap { display: grid; gap: 22px; min-width: 0; }
body.landing .mc-k { display: block; margin: 0 0 9px; font-family: var(--display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
/* the day */
body.landing .mc-day { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px 30px; padding: 20px 24px 22px; border-radius: 18px;
  background: linear-gradient(180deg, var(--tile), rgba(var(--cobalt-rgb),.04)); border: 1px solid rgba(var(--cobalt-rgb),.14); }
body.landing .mc-day-lead, body.landing .mc-day-part { min-width: 0; }
body.landing .mc-day-part { padding-left: 24px; border-left: 1px solid var(--hair); }
body.landing .mc-day-kcal { display: block; font-family: var(--display); font-size: 46px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.landing .mc-day-kcal small, body.landing .mc-fig b small { margin-left: 4px; font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--dim); }
body.landing .mc-day-sub { display: block; margin-top: 9px; font-size: 14px; line-height: 1.4; color: var(--dim); }
body.landing .mc-day-part .mc-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.landing .mc-day-nutr { grid-column: 1 / -1; min-width: 0; padding-top: 16px; border-top: 1px solid var(--hair); }
body.landing .mc-day-nutr .mc-energy { margin-top: 0; }
body.landing .mc-day-nutr .mc-share-k { display: none; }                                          /* the band's own heading names it */
body.landing .mc-day-nutr .mc-nutr { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; }
/* a figure: the value large, its name under it */
body.landing .mc-figs { display: grid; gap: 12px 16px; }
body.landing .mc-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.landing .mc-fig b { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.landing .mc-fig span { font-size: 13px; line-height: 1.3; color: var(--dim); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
body.landing .mc-fig.is-lead b { color: var(--mars-ink); }
/* the share of the energy: its name, a bar of three parts, the line naming them; then the nutrients — two to a line where
   a card has room for them, else one */
body.landing .mc-energy { margin-top: 14px; }
body.landing .mc-bar { display: flex; gap: 2px; height: 10px; margin: 0 0 9px; border-radius: 999px; overflow: hidden; background: var(--meter-off); }
body.landing .mc-bar i { display: block; flex: 1 1 0; min-width: 4px; }
body.landing .mc-p { background: var(--mc-p); }
body.landing .mc-f { background: var(--mc-f); }
body.landing .mc-c { background: var(--mc-c); }
body.landing .mc-share { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin: 0; font-size: 13px; line-height: 1.35; color: var(--dim); }
body.landing .mc-share-k { display: block; margin: 0 0 7px; font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
body.landing .mc-share span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
body.landing .mc-share i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
body.landing .mc-share b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.landing .mc-nutr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 18px; margin: 12px 0 0; }
body.landing .mc-nutr > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--hair); }
body.landing .mc-nutr dt { min-width: 0; font-size: 14px; color: var(--dim); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
body.landing .mc-nutr dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.landing .mc-none { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--dim); }
/* the cards */
body.landing .mc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; }
body.landing .mc { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 20px 20px; border-radius: 18px; background: var(--tile); border: 1px solid rgba(var(--cobalt-rgb),.12); }
@supports (grid-template-rows: subgrid) {
  body.landing .mc { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
}
body.landing .mc.is-now { border-color: rgba(255,90,31,.55); box-shadow: 0 0 0 1px rgba(255,90,31,.22), 0 22px 40px -30px rgba(255,90,31,.7); }
body.landing .mc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; min-width: 0; }
body.landing .mc-slot { font-family: var(--display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mars-ink); }
body.landing .mc-state { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px; border-radius: 999px; font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--dim); background: rgba(var(--cobalt-rgb),.06); border: 1px solid rgba(var(--cobalt-rgb),.16); }
body.landing .mc-state i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.landing .mc-state.is-served { color: var(--mc-ok); background: rgba(var(--mc-ok-rgb),.10); border-color: rgba(var(--mc-ok-rgb),.30); }
body.landing .mc-state.is-now { color: #fff; background: var(--mars); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(255,90,31,.8); }
body.landing .mc-state.is-now i { animation: live 2s ease-in-out infinite; }
body.landing .mc-state.is-next { color: #fff; background: var(--cobalt-fill); border-color: transparent; }
body.landing .mc-name { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.22; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
body.landing .mc-sec { min-width: 0; padding-top: 14px; border-top: 1px solid var(--hair); }
body.landing .mc .mc-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container mc (max-width: 760px) {
  body.landing .mc-day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.landing .mc-day-lead { grid-column: 1 / -1; }
  body.landing .mc-day-part:nth-child(2) { padding-left: 0; border-left: 0; }
}
@container mc (max-width: 480px) {
  body.landing .mc-day { grid-template-columns: minmax(0, 1fr); padding: 16px 18px 18px; gap: 16px; }
  body.landing .mc-day-part { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--hair); }
  body.landing .mc-day-kcal { font-size: 40px; }
  body.landing .mc-day-nutr .mc-nutr { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 18px; }
  body.landing .mc { padding: 16px 16px 18px; }
  body.landing .mc-grid { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { body.landing .mc-state.is-now i { animation: none; } }

/* ------------------------------------------------------------------ the Message Board's Write to the Crew key
   (13 October: "the message board should also have a Write to the Crew button"; "make it align with the border of the
   tabs"): a pill in the Mars the header's first key wears, at the right end of the board's bar — which stays under the
   header all the way down the wall (public.js, boardWall) — the height of the filter tabs beside it, so its edges run on
   their lines, its right edge on the page's own (the cards' edge). It opens the composer's window (public/write.js); on a
   phone it shares the bar's first line with the board's name and raises the Write page's dock (tabbar.js). (A floating
   Write to the Crew key stood at the foot of every page for an hour that day, and went: "remove the floating Write to
   the Crew button".) Then a size up (13 October: "on the Message Board, increase the size of the Write to the Crew
   button"): 48 px high on a desk — the tabs' 34 px before — its words and its pen larger, its right edge still on the
   cards' edge and its middle on the tabs' middle; 42 px on a phone. */
body.landing .write-ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.landing .wall-write {
  display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #ff8a3d, #ff5a1f); color: #1a0a02; font-family: var(--display); font-weight: 700; letter-spacing: -.005em; text-transform: none;
  box-shadow: 0 2px 4px rgba(255,70,0,.2), 0 12px 24px -12px rgba(255,70,0,.85), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s ease, filter .15s ease; }
body.landing .wall-write:hover { transform: translateY(-1px); filter: brightness(1.06); color: #1a0a02; text-decoration: none; }
body.landing .wall-write:focus-visible { outline: 2px solid var(--cobalt-fill); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.landing .wall-write { transition: none; } }
body.landing .wall-bar > .wall-write { flex: none; align-self: center; height: 48px; min-height: 0; margin-left: auto; padding: 0 24px 0 19px; gap: 10px; border-radius: 999px; font-size: 17px; }   /* a size up from the filter tabs' 34 px, centred on them */
body.landing .wall-bar > .wall-write .write-ic { width: 21px; height: 21px; }
@media (max-width: 760px) and (min-height: 521px) {
  /* a phone: the board's name alone on the bar's first line, the whole width, in every language (Nachrichtenboard,
     Tableau des messages — the key beside it ran into it once it grew); LIVE, the count where there is room, and the
     key at the right end of the second; the tabs on the third — the bar no taller than it was */
  body.landing.messages .wall-bar .board-head { display: contents; }
  body.landing.messages .wall-bar .board-head h2 { flex: 1 0 100%; }
  body.landing.messages .wall-bar .wall-count { margin-left: 0; }
  body.landing.messages .wall-bar > .wall-write { order: 1; height: 42px; margin-left: auto; padding: 0 17px 0 14px; gap: 8px; font-size: 15px; }
  body.landing.messages .wall-bar > .wall-write .write-ic { width: 18px; height: 18px; }
  body.landing.messages .wall-bar .feed-filter { order: 2; }
}
@media (max-width: 440px) { body.landing.messages .wall-bar .wall-count { display: none; } }   /* a narrow phone: LIVE and the key on the bar's second line */