/* The page runs from a night sky, the same in both themes, through a dawn into the reader's own
   theme for the day sections, and ends at sunrise. */
:root {
  --midnight: #04141B;
  --night: #0B2530;
  --dusk: #24326A;
  --violet: #6E5E9C;
  --dawn: #F4B69A;
  --mint: #77E7D1;
  --pale: #E6F2EF;

  --day: #F3F7F6;
  --surface: #FFFFFF;
  --well: #E6EEEC;
  --ink: #0B2530;
  --ink-2: rgba(11, 37, 48, 0.7);
  --ink-3: rgba(11, 37, 48, 0.64);
  --rule: rgba(11, 37, 48, 0.12);
  /* The app's ActionFill: a bright mint to fill with, dark ink on it, and its deeper
     Increase Contrast value for lines that must stand out on a light page. */
  --action: #0DAE96;
  --on-action: #06231F;
  --action-line: #0F7A66;
  --amber: #B8730F;
  --red: #C93A3F;
  --menubar: rgba(255, 255, 255, 0.8);
  --edge: rgba(11, 37, 48, 0.1);
  --shadow: 0 1px 0 rgba(11, 37, 48, 0.04), 0 18px 40px -18px rgba(11, 37, 48, 0.28);

  /* The app's own windows, in the system's light look. */
  --win: #FFFFFF;
  --win-bar: #F6F6F6;
  --win-box: #F2F2F2;
  --win-ink: rgba(0, 0, 0, 0.85);
  --win-ink-2: rgba(0, 0, 0, 0.6);
  --win-line: rgba(0, 0, 0, 0.1);
  --win-btn: #FFFFFF;
  --win-btn-edge: rgba(0, 0, 0, 0.14);
  --win-sel: #FFFFFF;
  --win-sel-edge: rgba(0, 0, 0, 0.12);
  --win-press: rgba(0, 0, 0, 0.08);
  --win-error: #C4271D;
  /* The app's two accent assets: AccentColor, the deep teal macOS tints its own controls
     with, and ActionFill, the bright mint only primary buttons are filled with. */
  --win-tint: #007A69;
  --win-on-tint: #FFFFFF;
  --win-action: #0DAE96;
  --win-on-action: #06231F;
  --win-switch-off: rgba(0, 0, 0, 0.09);
  --win-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 22px 60px -12px rgba(11, 37, 48, 0.35), 0 8px 18px -8px rgba(11, 37, 48, 0.2);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 62ch;
  --gutter: clamp(16px, 4vw, 40px);
  --inline: max(var(--gutter), calc((100% - 1120px) / 2));
}

@media (prefers-color-scheme: dark) {
  :root {
    --day: #0D2A34;
    --surface: #12343F;
    --well: #103039;
    --ink: #E6F2EF;
    --ink-2: rgba(230, 242, 239, 0.74);
    --ink-3: rgba(230, 242, 239, 0.54);
    --rule: rgba(230, 242, 239, 0.14);
    --action: #77E7D1;
    --on-action: #06231F;
    --action-line: #77E7D1;
    --amber: #F0AE48;
    --red: #F06A6E;
    --menubar: rgba(18, 52, 63, 0.8);
    --edge: rgba(230, 242, 239, 0.12);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 24px 48px -20px rgba(0, 0, 0, 0.6);

    --win: #2A2A2A;
    --win-bar: #323232;
    --win-box: #333333;
    --win-ink: rgba(255, 255, 255, 0.88);
    --win-ink-2: rgba(255, 255, 255, 0.64);
    --win-line: rgba(255, 255, 255, 0.1);
    --win-btn: rgba(255, 255, 255, 0.16);
    --win-btn-edge: rgba(255, 255, 255, 0.08);
    --win-sel: rgba(255, 255, 255, 0.1);
    --win-sel-edge: transparent;
    --win-press: rgba(255, 255, 255, 0.1);
    --win-error: #FF7B72;
    --win-tint: #77E7D1;
    --win-on-tint: #06231F;
    --win-action: #77E7D1;
    --win-on-action: #06231F;
    --win-switch-off: rgba(255, 255, 255, 0.16);
    --win-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 26px 70px -14px rgba(0, 0, 0, 0.75);
  }
}

/* Everything drawn on the night sky reads its text and controls from these, whatever the theme. */
.is-night {
  --ink: #E6F2EF;
  --ink-2: rgba(230, 242, 239, 0.76);
  --ink-3: rgba(230, 242, 239, 0.56);
  --rule: rgba(230, 242, 239, 0.14);
  --action: #77E7D1;
  --on-action: #06231F;
  --action-line: #77E7D1;
  --surface: rgba(230, 242, 239, 0.08);
  --well: rgba(230, 242, 239, 0.16);
  --edge: rgba(230, 242, 239, 0.14);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  color: var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--midnight); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--day);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
a { color: inherit; }
img, svg, canvas { display: block; }
button { font: inherit; color: inherit; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Selected text takes the page's mint instead of the system blue. */
::selection { background: rgba(119, 231, 209, 0.32); }

.skip { position: absolute; left: var(--gutter); top: -60px; padding: 10px 14px; background: var(--pale); color: var(--night); border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

/* The top bar, laid over the night sky */
.bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  padding-inline: var(--inline);
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; text-decoration: none; font: 600 17px/1 var(--rounded); }
.brand img { border-radius: 7px; }
.bar nav { display: flex; gap: 24px; margin-left: auto; font-size: 16px; }
.bar nav a { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.bar nav a:hover { color: var(--ink); }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font: 600 16px/1 var(--rounded);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.button:hover { background: var(--well); }
.button:active { transform: scale(0.98); }
.button.primary { background: var(--action); border-color: transparent; color: var(--on-action); }
.button.primary:hover { background: var(--action); filter: brightness(1.06); }
.button.compact { min-height: 44px; padding: 0 18px; font-size: 15px; }
.button .gh { width: 18px; height: 18px; fill: currentColor; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sections run edge to edge so their skies can; their content keeps to one column. */
main > section, .sunrise > section, .foot { padding-inline: var(--inline); }

h1, h2, h3, .clock, .flow-clock { font-family: var(--rounded); }

/* The hero: the night sky, the headline, and the night's minutes filling the app's drop, with the
   app's own menu over its lower edge */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(72px + clamp(20px, 5vh, 64px));
  padding-bottom: clamp(48px, 9vh, 104px);
  background:
    radial-gradient(60% 70% at 78% 30%, rgba(119, 231, 209, 0.13), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(36, 50, 106, 0.55), transparent 70%),
    linear-gradient(180deg, var(--midnight) 0%, var(--night) 100%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
h1 {
  font-weight: 700;
  font-size: clamp(44px, 6.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 12ch;
  text-wrap: balance;
}
.lead { margin-top: 24px; font-size: clamp(18px, 1.7vw, 21px); color: var(--ink-2); max-width: 40ch; }
.hero .actions { margin-top: 36px; }
.hero-meta { margin-top: 16px; }
.key { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; text-align: start; }
.swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.swatch.kept { background: var(--pale); }
.swatch.every { background: var(--mint); box-shadow: 0 0 8px rgba(119, 231, 209, 0.7); }

/* The stage is one column: the drop, then its key and caption. The menu shares the drop's cell and
   sits over its lower left, so the drop reads as the menu's icon. */
.hero-stage { display: grid; grid-template-areas: "drop" "notes"; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.minute-drop {
  grid-area: drop;
  position: relative;
  height: min(64vh, 600px);
  height: min(64svh, 600px);
  min-height: 400px;
  aspect-ratio: 11 / 15;
  max-width: 100%;
}
.drop-notes { grid-area: notes; display: grid; justify-items: center; gap: 10px; margin-top: 28px; text-align: center; }
.drop-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 15px; color: var(--ink-2); }
.minute-drop canvas, .drop-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.minute-drop canvas { filter: drop-shadow(0 0 7px rgba(119, 231, 209, 0.35)); cursor: crosshair; touch-action: pan-y; }
.minute-drop.is-drawn .drop-still { display: none; }
.drop-caption { font-size: 14px; color: var(--ink-3); text-wrap: balance; }
.drop-hint { display: block; }
.drop-tip {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(4, 20, 27, 0.86);
  border: 1px solid rgba(119, 231, 209, 0.28);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 18px));
  /* Only the fade animates: a tip that moves to the other side of its dot, or follows it through a
     scroll, must jump there, or it would sweep across the screen's edge on the way. */
  transition: opacity 140ms ease;
}
.drop-tip.is-shown { opacity: 1; }
/* Near the top of the screen the tip opens below its dot instead. */
.drop-tip.is-below { transform: translate(-50%, 18px); }
.tip-time { font: 600 15px/1.2 var(--rounded); font-variant-numeric: tabular-nums; }
.tip-value { font: 500 14px/1.2 var(--rounded); color: var(--mint); font-variant-numeric: tabular-nums; }
.tip-note { color: var(--ink-3); font-size: 12px; }

.panel-wrap {
  grid-area: drop;
  align-self: end;
  justify-self: start;
  position: relative;
  z-index: 1;
  width: 300px;
  margin: 0 0 5% max(-6%, -48px);
}
.menubar-strip { display: flex; justify-content: center; }
.menubar-item { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; color: var(--ink); }
.menubar-item.is-open { background: var(--rule); }
svg.drop { width: 13px; height: 16px; fill: var(--ink); }
.menubar-item.late .drop, .mark.late .drop { fill: var(--amber); }
.menubar-item.stopped .drop, .mark.stopped .drop { fill: var(--red); }
.menubar-title { font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.menubar-title[hidden] { display: none; }
/* The menu, rebuilt from the app's own view: 280 points wide, 12 points of padding. It is Liquid
   Glass, with no colour of its own: it takes the sky and the drop's dots behind it, with a lit upper
   edge and a soft shadow under it, as the app's panel does over a desktop. */
.panel {
  --p-ink: #F4F7F6;
  --p-ink-2: rgba(244, 247, 246, 0.8);
  --p-edge: rgba(255, 255, 255, 0.16);
  position: relative;
  margin: 12px auto 0;
  width: 280px;
  max-width: 100%;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.03) 100%),
    rgba(18, 30, 36, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.9);
  backdrop-filter: blur(22px) saturate(1.9);
  color: var(--p-ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    0 26px 60px -20px rgba(0, 0, 0, 0.7),
    0 0 80px -24px rgba(119, 231, 209, 0.35);
  font: 400 13px/1.35 var(--sans);
}
.panel > * + * { margin-top: 10px; }
.panel-wrap .panel { margin-top: 0; }
/* Where the browser can cut an element to a shape() outline, the panel and its pointer toward the menu
   bar item become one outline: a rounded rectangle with a notch centred on the top edge, about 24
   points wide and 10 tall, with straight flanks about 50 degrees from the edge, wide concave
   fillets where it leaves the edge and a rounded tip, as the macOS popover has. The glass (::before) and the lit edge (::after) are
   both cut to it, so the pointer is the same material as the panel and the edge runs on around it
   with no seam. Elsewhere the panel stays the plain rounded glass above, with no pointer. */
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .panel {
    --shape-arrow: shape(from 16px 10px, hline to calc(50% - 14.36px), arc to calc(50% - 7.465px) 6.785px of 9px ccw, line to calc(50% - 2.911px) 1.357px, arc to calc(50% + 2.911px) 1.357px of 3.8px cw, line to calc(50% + 7.465px) 6.785px, arc to calc(50% + 14.36px) 10px of 9px ccw, hline to calc(100% - 16px), arc to calc(100% - 0px) 26px of 16px cw, vline to calc(100% - 16px), arc to calc(100% - 16px) calc(100% - 0px) of 16px cw, hline to 16px, arc to 0px calc(100% - 16px) of 16px cw, vline to 26px, arc to 16px 10px of 16px cw, close);
    --ring-arrow: shape(evenodd from 16px 10px, hline to calc(50% - 14.36px), arc to calc(50% - 7.465px) 6.785px of 9px ccw, line to calc(50% - 2.911px) 1.357px, arc to calc(50% + 2.911px) 1.357px of 3.8px cw, line to calc(50% + 7.465px) 6.785px, arc to calc(50% + 14.36px) 10px of 9px ccw, hline to calc(100% - 16px), arc to calc(100% - 0px) 26px of 16px cw, vline to calc(100% - 16px), arc to calc(100% - 16px) calc(100% - 0px) of 16px cw, hline to 16px, arc to 0px calc(100% - 16px) of 16px cw, vline to 26px, arc to 16px 10px of 16px cw, close, move to 16px 11px, hline to calc(50% - 14.36px), arc to calc(50% - 6.699px) 7.428px of 10px ccw, line to calc(50% - 2.145px) 2px, arc to calc(50% + 2.145px) 2px of 2.8px cw, line to calc(50% + 6.699px) 7.428px, arc to calc(50% + 14.36px) 11px of 10px ccw, hline to calc(100% - 16px), arc to calc(100% - 1px) 26px of 15px cw, vline to calc(100% - 16px), arc to calc(100% - 16px) calc(100% - 1px) of 15px cw, hline to 16px, arc to 1px calc(100% - 16px) of 15px cw, vline to 26px, arc to 16px 11px of 15px cw, close);
    --shape-flat: shape(from 16px 10px, hline to calc(100% - 16px), arc to calc(100% - 0px) 26px of 16px cw, vline to calc(100% - 16px), arc to calc(100% - 16px) calc(100% - 0px) of 16px cw, hline to 16px, arc to 0px calc(100% - 16px) of 16px cw, vline to 26px, arc to 16px 10px of 16px cw, close);
    --ring-flat: shape(evenodd from 16px 10px, hline to calc(100% - 16px), arc to calc(100% - 0px) 26px of 16px cw, vline to calc(100% - 16px), arc to calc(100% - 16px) calc(100% - 0px) of 16px cw, hline to 16px, arc to 0px calc(100% - 16px) of 16px cw, vline to 26px, arc to 16px 10px of 16px cw, close, move to 16px 11px, hline to calc(100% - 16px), arc to calc(100% - 1px) 26px of 15px cw, vline to calc(100% - 16px), arc to calc(100% - 16px) calc(100% - 1px) of 15px cw, hline to 16px, arc to 1px calc(100% - 16px) of 15px cw, vline to 26px, arc to 16px 11px of 15px cw, close);
    --shape: var(--shape-arrow);
    --ring: var(--ring-arrow);
    isolation: isolate;
    padding: 13px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    /* A clip-path would cut a shadow on the glass itself, so the shadow is the panel's own. */
    box-shadow:
      0 26px 60px -20px rgba(0, 0, 0, 0.7),
      0 0 80px -24px rgba(119, 231, 209, 0.35);
  }
  .panel::before, .panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px 0 0 0;
    pointer-events: none;
  }
  .panel::before {
    background:
      linear-gradient(165deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.03) 100%),
      rgba(18, 30, 36, 0.42);
    -webkit-backdrop-filter: blur(22px) saturate(1.9);
    backdrop-filter: blur(22px) saturate(1.9);
    clip-path: var(--shape);
  }
  .panel::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.16) 26px, rgba(255, 255, 255, 0.12) 100%);
    clip-path: var(--ring);
  }
  /* In the hero the panel floats over the drop, which stands for its icon, so it has no pointer.
     Stacked under the drop on a narrow screen, it hangs from its own menu bar item instead. */
  .panel-wrap .panel { --shape: var(--shape-flat); --ring: var(--ring-flat); }
}
.hero-strip { display: none; }
.reading { display: flex; align-items: baseline; gap: 4px; }
.reading .value { display: inline-flex; font: 300 40px/1 var(--rounded); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* Each digit sits in its own slot, so a changed one can roll while its neighbours stay still. */
.digit { position: relative; display: inline-block; overflow: hidden; }
.digit .gone { position: absolute; inset: 0; }
.reading .unit { font: 400 14px/1 var(--rounded); color: var(--p-ink-2); }
.status { display: flex; align-items: center; gap: 6px; color: var(--p-ink-2); font-size: 13px; }
.status strong { color: var(--p-ink); font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #30D158; flex: none; }
.dot.amber { background: #FF9F0A; }
.dot.red { background: #FF453A; }
.panel .detail { font-size: 11px; color: var(--p-ink-2); }
.panel .detail[hidden] { display: none; }
.polled { font-size: 11px; color: var(--p-ink-2); }
.panel hr { border: 0; border-top: 1px solid var(--p-edge); margin: 10px 0 0; }
.panel-actions { display: flex; gap: 8px; }
.panel-actions .spacer { flex: 1; }
.pill { padding: 4px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); font-size: 13px; }
.pill.primary { background: #77E7D1; color: #06231F; }

/* The film: one shape morphing through the app, on the night sky. Without .is-live (no script, or
   reduced motion) it is a plain section with one still. With it, the stage pins while the reader scrolls
   through a track a few screens tall, and the scroll position is how far through the film it is. */
.film { padding-block: clamp(48px, 9vh, 96px) clamp(24px, 5vh, 56px); background: var(--night); }
.film-pin { display: grid; gap: clamp(20px, 4vh, 36px); }
.film-stage {
  position: relative;
  aspect-ratio: 5 / 3;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(119, 231, 209, 0.1), transparent 70%),
    linear-gradient(180deg, #0E2C38, #071C24);
  box-shadow: inset 0 0 0 1px rgba(230, 242, 239, 0.08);
}
.film-stage canvas, .film-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-stage.is-drawn .film-still { display: none; }
.film-progress { display: none; height: 2px; border-radius: 1px; background: var(--rule); overflow: hidden; transition: opacity 300ms ease; }
.film-progress.is-done { opacity: 0; }
.film-progress span { display: block; height: 100%; background: var(--mint); transform-origin: 0 50%; transform: scaleX(0); }
.film-track.is-live { height: 360vh; margin-block: calc(-1 * clamp(48px, 9vh, 96px)) calc(-1 * clamp(24px, 5vh, 56px)); }
.film-track.is-live .film-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  padding-block: clamp(24px, 5vh, 56px);
}
.film-track.is-live .film-stage {
  justify-self: center;
  align-self: center;
  width: min(100%, calc((100vh - 190px) * 5 / 3));
  width: min(100%, calc((100svh - 190px) * 5 / 3));
}
.film-track.is-live .film-progress { display: block; }
@media (max-width: 640px) {
  .film-stage { aspect-ratio: 4 / 5; border-radius: 20px; }
  .film-track.is-live .film-stage {
    width: min(100%, calc((100vh - 190px) * 4 / 5));
    width: min(100%, calc((100svh - 190px) * 4 / 5));
  }
}

/* The hero's caption names the gesture the reader's device has. */
.when-touch { display: none; }
@media (hover: none) {
  .when-hover { display: none; }
  .when-touch { display: inline; }
}

/* The night. Without .is-live (no script, or reduced motion) it is a plain stacked section. With
   it, the stage pins while the reader scrolls through a track four screens tall, and the scroll
   position is the story's progress. */
.night {
  padding-block: clamp(24px, 6vh, 72px);
  background: linear-gradient(180deg, var(--night) 0%, #0A2230 100%);
}
.night-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.night-title { font-weight: 650; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; max-width: 28ch; }
.clock { font-weight: 300; font-size: clamp(40px, 5.4vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--mint); text-shadow: 0 0 28px rgba(119, 231, 209, 0.35); }
.night-track:not(.is-live) .clock { display: none; }
.captions { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 12px; max-width: var(--measure); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.chart { margin-top: 28px; }
.rows {
  position: relative;
  height: clamp(300px, 36vw, 460px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rows canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 5px rgba(119, 231, 209, 0.3)); }
/* The finished night drawn in the markup, for a browser running no script; night.js hides it. */
.night-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.night-still path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.night-still .g { stroke: rgba(230, 242, 239, 0.12); stroke-width: 1; stroke-dasharray: 2 5; }
.night-still .p { stroke: rgba(230, 242, 239, 0.45); stroke-width: 1.6; }
.night-still .r { stroke: var(--mint); stroke-width: 2; }
.night-track.is-drawn .night-still { display: none; }
.row-label { position: absolute; left: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 17px; z-index: 1; }
.row-label strong { font-weight: 600; }
.row-label span { color: var(--ink-3); font-size: 15px; }
.row-1 { top: 3%; }
.row-2 { top: 53%; }
.row-2 strong { color: var(--mint); }
.event {
  position: absolute;
  left: calc(var(--at, 0) * 100%);
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.event.wake { transform: translate(-100%, -50%); }
/* Where the night's defaults put the two events (130 and 514 of 540 minutes), for a page with no
   script; night.js sets the same from its parameters. */
.event[data-at="sleeps"] { --at: 0.2407; }
.event[data-at="wakes"] { --at: 0.9519; }
.axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .note { margin-top: 18px; font-size: 15px; color: var(--ink-3); }

.night-track.is-live { height: 420vh; }
.is-live .night-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: center;
  padding-block: clamp(16px, 5vh, 56px);
}
.is-live .captions { grid-template-areas: "c"; min-height: 4.4em; }
.is-live .captions li { grid-area: c; opacity: 0; transform: translateY(8px); transition: opacity 360ms ease, transform 360ms ease; }
.is-live .captions li.is-current { opacity: 1; transform: none; }
.is-live .chart { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
.is-live .rows { height: auto; min-height: 260px; max-height: 520px; }

/* Where your readings go: the same night from the inside, on the same sky */
.relay {
  padding-block: clamp(56px, 10vh, 112px) clamp(32px, 6vh, 64px);
  background: #0A2230;
}
.relay h2 { max-width: 20ch; }
.relay .section-lead { max-width: 56ch; }
.flow { margin-top: clamp(28px, 5vh, 48px); }
.flow-stage { position: relative; aspect-ratio: var(--flow-aspect, 1000 / 300); }
.flow-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(119, 231, 209, 0.32)); }
.flow-still { width: 100%; height: auto; }
.flow.is-drawn .flow-still { display: none; }
.flow:not(.is-drawn) .flow-stage, .flow:not(.is-drawn) .flow-controls { display: none; }
.flow-label {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  transform: translateX(-50%);
  width: max-content;
  max-width: 20ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-2);
  text-wrap: balance;
}
.flow-label[data-align="start"] { transform: translateY(-50%); text-align: left; max-width: 15ch; }
.flow-label.is-mint { color: var(--mint); }
/* The wide layout's label points, for the first paint; flow.js sets the same from its layout. */
[data-flow-label="sensor"] { --lx: 4.8%; --ly: 72.7%; }
[data-flow-label="source"] { --lx: 20.8%; --ly: 72.7%; }
[data-flow-label="cloud"] { --lx: 41%; --ly: 72.7%; }
[data-flow-label="mac"] { --lx: 69.7%; --ly: 72.7%; }
[data-flow-label="phone"] { --lx: 94.7%; --ly: 72.7%; }
.flow-controls { margin-top: clamp(20px, 4vh, 36px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.flow-clock { font-weight: 300; font-size: 40px; line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(119, 231, 209, 0.35); }
.flow-count { color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 15.5em; }
.flow-controls .button { min-width: 11em; }

/* The dawn: the reasons, written on the sky as it lightens into the day's theme. The sky only turns
   violet and warm in the bottom padding, below the last line, so the words always sit on night or
   dusk however tall they wrap. */
.dawn {
  --sunrise-band: clamp(160px, 30vh, 300px);
  position: relative;
  padding-top: clamp(64px, 12vh, 136px);
  padding-bottom: var(--sunrise-band);
  background: linear-gradient(180deg, #0A2230 0%, var(--dusk) calc(100% - var(--sunrise-band)), var(--violet) calc(100% - var(--sunrise-band) * 0.62), var(--dawn) calc(100% - var(--sunrise-band) * 0.24), var(--day) 100%);
}
.dawn::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255, 226, 184, 0.6), transparent 72%);
  /* The glow fades out over the last 72px, so the section ends on the next section's own colour and
     no bright edge slides past while the page scrolls. */
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 72px);
  mask-image: linear-gradient(0deg, transparent 0, #000 72px);
  pointer-events: none;
}
.dawn h2 { font-size: clamp(36px, 5vw, 64px); max-width: 14ch; }
.dawn .prose { color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); }
.dawn .prose p:first-child { color: var(--ink); }

/* The day */
.setup, .calm, .settings, .apps, .privacy, .questions { padding-block: clamp(56px, 10vh, 112px); background: var(--day); }
.calm, .settings, .apps, .privacy, .questions { border-top: 1px solid var(--rule); }
h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
/* No paragraph ends on a word left alone on its line. */
p, li, dd { text-wrap: pretty; }
.section-lead { margin-top: 16px; color: var(--ink-2); max-width: var(--measure); }
.prose { margin-top: 24px; display: grid; gap: 16px; max-width: var(--measure); color: var(--ink-2); }
.small { margin-top: 20px; font-size: 16px; color: var(--ink-3); max-width: var(--measure); }

.steps { list-style: none; padding: 0; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
/* The four steps read along one line, each numbered where it starts. */
.steps li { counter-increment: step; padding-top: 20px; border-top: 1px solid var(--rule); }
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 12px;
  color: var(--ink-3);
  font: 600 15px/1 var(--rounded);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-weight: 650; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.steps p { margin-top: 8px; font-size: 16px; color: var(--ink-2); }

/* Quiet until something needs you: pick a state, and the menu bar and menu beside it show it. */
.calm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.marks { margin-top: 28px; display: grid; gap: 8px; }
.marks button {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 6px 14px 6px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  font-size: 16px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.marks button:hover { background: var(--well); }
.marks button[aria-checked="true"] { background: var(--surface); border-color: var(--rule); color: var(--ink); box-shadow: var(--shadow); }
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--menubar);
  border: 1px solid var(--edge);
}
.state-view {
  justify-self: center;
  width: min(100%, 420px);
  padding: 28px 24px 24px;
  border-radius: 24px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(119, 231, 209, 0.12), transparent 70%),
    linear-gradient(180deg, #123544, var(--night));
  color: #E6F2EF;
  --ink: #E6F2EF;
  --rule: rgba(230, 242, 239, 0.14);
  --amber: #F0AE48;
  --red: #F06A6E;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}
.state-view .panel { transition: box-shadow 240ms ease; }
.state-view[data-state="stale"] .panel { box-shadow: var(--shadow), 0 0 80px -20px rgba(255, 159, 10, 0.4); }
.state-view[data-state="stopped"] .panel, .state-view[data-state="signin"] .panel { box-shadow: var(--shadow), 0 0 80px -20px rgba(255, 69, 58, 0.4); }
.state-words { margin-top: 20px; text-align: center; font-size: 15px; color: rgba(230, 242, 239, 0.7); }

/* Settings: the app's own window, rebuilt in the system's look, following the reader's theme */
.settings { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.settings-copy { position: sticky; top: 40px; order: 2; }
.mac-window {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--win);
  color: var(--win-ink);
  box-shadow: var(--win-shadow);
  font: 400 13px/1.38 var(--sans);
}
.win-chrome { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; background: var(--win-bar); }
.lights { position: absolute; left: 12px; top: 9px; display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.win-title { font-weight: 600; color: var(--win-ink); }
.win-toolbar {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 2px 8px 8px;
  background: var(--win-bar);
  border-bottom: 1px solid var(--win-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.win-toolbar [role="tab"] {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 64px;
  min-height: 48px;
  padding: 5px 8px 4px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--win-ink-2);
  font-size: 11.5px;
  cursor: pointer;
}
.win-toolbar [role="tab"] svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.win-toolbar [role="tab"] svg .fill { fill: currentColor; }
.win-toolbar [role="tab"][aria-selected="true"] { background: var(--win-sel); box-shadow: 0 0 0 0.5px var(--win-sel-edge), 0 1px 2px rgba(0, 0, 0, 0.06); color: var(--win-tint); }
.win-toolbar [role="tab"]:focus-visible { outline: 2px solid var(--win-tint); outline-offset: -2px; }
.win-body { padding: 4px 20px 20px; }
.pane[hidden] { display: none; }
.mac-window:not(.is-live) [role="tab"] { cursor: default; }
.group { margin-top: 16px; }
.group .head { margin: 0 0 6px 10px; font-weight: 600; font-size: 13px; color: var(--win-ink); }
.group-note { margin: 6px 10px 0; font-size: 12px; color: var(--win-ink-2); }
.box { border-radius: 8px; background: var(--win-box); padding: 0 10px; }
.box > .row + .row { border-top: 1px solid var(--win-line); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 7px 0; }
.row.stack { display: grid; gap: 4px; justify-content: stretch; }
.row .label, .value-row .label { font-size: 12px; color: var(--win-ink-2); }
.value-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.value-row.single { padding-top: 6px; }
.btns, .trail { display: flex; align-items: center; gap: 8px; flex: none; }
.muted { color: var(--win-ink-2); }
.small-text { font-size: 12px; }
.tiny { font-size: 11px; }
.mono { font: 400 13px/1.35 var(--mono); overflow-wrap: anywhere; }
.mono.token { letter-spacing: 0.02em; }
.twoline { display: grid; gap: 1px; }
.mbtn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 11px;
  border-radius: 6px;
  border: 0.5px solid var(--win-btn-edge);
  background: var(--win-btn);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  color: var(--win-ink);
  white-space: nowrap;
}
button.mbtn { cursor: pointer; }
button.mbtn:active { filter: brightness(0.92); }
.mbtn.primary { background: var(--win-action); color: var(--win-on-action); border-color: transparent; }
.seg { display: inline-flex; padding: 2px; border-radius: 7px; background: var(--win-switch-off); }
.seg.wide { display: flex; width: 100%; }
.seg [role="radio"] {
  flex: 1;
  min-height: 24px;
  padding: 2px 12px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-size: 13px;
  color: var(--win-ink);
  white-space: nowrap;
  cursor: pointer;
}
.seg [role="radio"][aria-checked="true"] { background: var(--win-tint); color: var(--win-on-tint); box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.2); }
.seg-row { padding-top: 10px; }
.qr-row { justify-content: center; border-top: 0 !important; }
.qr-tile { width: 232px; padding: 12px; border-radius: 16px; background: #FFFFFF; }
.qr-tile svg { width: 100%; height: auto; padding: 10px; }
.qr-tile path { fill: #000000; }
.box > .caption { display: block; text-align: center; color: var(--win-ink-2); font-size: 12px; border-top: 0 !important; padding-top: 0; }
.steps-block { display: grid; gap: 6px; justify-content: stretch; color: var(--win-ink-2); font-size: 12px; }
.switch {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border: 0;
  border-radius: 11px;
  background: var(--win-switch-off);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 180ms cubic-bezier(.3, .7, .3, 1.2);
}
.switch[aria-checked="true"] { background: var(--win-tint); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--win-tint); outline-offset: 2px; }
.switch:disabled { opacity: 0.4; cursor: default; }
.switch:disabled::before { display: none; }
.days {
  width: 44px;
  min-height: 22px;
  padding: 1px 6px;
  border: 0.5px solid var(--win-btn-edge);
  border-radius: 5px;
  background: var(--win);
  color: var(--win-ink);
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.days:focus-visible { outline: 3px solid color-mix(in srgb, var(--win-tint) 45%, transparent); outline-offset: 0; }
.stepper { display: inline-grid; grid-template-rows: 1fr 1fr; width: 16px; height: 22px; border-radius: 5px; border: 0.5px solid var(--win-btn-edge); background: var(--win-btn); overflow: hidden; }
.stepper button, .stepper span { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.stepper button + button, .stepper span + span { border-top: 0.5px solid var(--win-btn-edge); }
.stepper svg { width: 8px; height: 5px; fill: none; stroke: var(--win-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.stepper button:active { background: var(--win-press); }
.stepper.static span { cursor: default; }
.row.error { color: var(--win-error); font-size: 12px; border-top: 0 !important; min-height: 0; padding-top: 0; }
.row.error[hidden] { display: none; }
.field { min-width: 66px; padding: 1px 6px; border: 0.5px solid var(--win-btn-edge); border-radius: 5px; text-align: right; font-variant-numeric: tabular-nums; }
.field.disabled, .radio.disabled { opacity: 0.55; }
.done { display: inline-flex; align-items: center; gap: 5px; color: var(--win-ink-2); }
.done svg { width: 15px; height: 15px; fill: none; stroke: #28C840; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.radio { justify-content: flex-start; }
.rb { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 0.5px solid var(--win-btn-edge); background: var(--win-btn); }
.radio.on .rb { border: 4.5px solid var(--win-tint); background: #FFFFFF; }
/* The window keeps the app's own control sizes on screen, but every control a reader can use gets a
   hit area at least 44 px tall and wide, since on a phone a finger is the pointer. */
.seg [role="radio"], button.mbtn { position: relative; }
.seg [role="radio"]::after, button.mbtn::after { content: ""; position: absolute; inset: -11px 0; z-index: 1; }
button.mbtn { min-width: 44px; justify-content: center; }
.switch::before { content: ""; position: absolute; inset: -12px -4px; z-index: 1; }
@media (pointer: coarse) {
  /* On a touch screen the rows take a phone's height, so stacked controls never share a hit area, and
     a field and a stepper, which have no room for an invisible one, take a phone's own sizes: the field
     48 px tall at 16 px text, the stepper two 48 px buttons side by side. */
  .row { min-height: 48px; }
  .days { width: 56px; min-height: 48px; font-size: 16px; }
  .stepper { grid-template-rows: none; grid-template-columns: 1fr 1fr; width: 98px; height: 48px; border-radius: 6px; }
  .stepper button + button { border-top: 0; border-left: 0.5px solid var(--win-btn-edge); }
  .stepper svg { width: 12px; height: 8px; }
}
.about { display: grid; justify-items: center; gap: 8px; padding: 16px 16px 14px; text-align: center; }
.about img { border-radius: 22px; }
.about-name { font: 700 17px/1.2 var(--sans); }
.btn-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.app-list { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 24px 64px; }
.app-list dt { font-size: 15px; color: var(--ink-3); }
.app-list dd { margin-top: 6px; font: 650 clamp(22px, 2.4vw, 30px)/1.2 var(--rounded); letter-spacing: -0.02em; }

.facts { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 900px; }
.facts div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 650 17px/1.3 var(--rounded); }
.facts dd { margin-top: 4px; font-size: 16px; color: var(--ink-2); }

.faq { margin-top: 32px; border-top: 1px solid var(--rule); }
/* On a wide screen the heading sits beside the questions, so the section fills the width. */
@media (min-width: 861px) {
  .questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
  .questions-head { position: sticky; top: 32px; }
  .faq { margin-top: 0; }
}
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font: 650 18px/1.35 var(--rounded);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus as the answer opens. */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--action-line), var(--action-line)) center / 14px 2px no-repeat,
    linear-gradient(var(--action-line), var(--action-line)) center / 2px 14px no-repeat;
  transition: background-size 200ms ease;
}
.faq details[open] summary::after { background-size: 14px 2px, 2px 0; }
.faq details p { padding: 0 0 20px; max-width: var(--measure); color: var(--ink-2); }

/* Sunrise: the app's icon rising behind the last word, and the footer under it. Centred, unlike the
   rest of the page, because it is drawn around the sun. */
.sunrise {
  background:
    radial-gradient(circle 360px at 50% calc(clamp(88px, 16vh, 168px) + 64px), rgba(255, 226, 184, 0.95) 0, rgba(255, 210, 170, 0.72) 13%, rgba(244, 182, 154, 0.46) 26%, rgba(160, 118, 164, 0.26) 44%, rgba(110, 94, 156, 0.1) 62%, transparent 82%),
    linear-gradient(180deg, var(--day) 0%, var(--dusk) 24%, var(--night) 72%, var(--midnight) 100%);
}
.download { padding-top: clamp(88px, 16vh, 168px); padding-bottom: clamp(72px, 12vh, 128px); display: grid; justify-items: center; text-align: center; gap: 24px; }
.download img { border-radius: 28px; box-shadow: 0 20px 60px -10px rgba(4, 20, 27, 0.6); }
.download h2 { margin-top: 40px; font-size: clamp(44px, 7vw, 92px); line-height: 0.98; max-width: none; }
.download .actions { justify-content: center; }
.meta { font-size: 15px; color: var(--ink-3); max-width: 46ch; }

/* The icon rises into the finale as the reader scrolls to it, driven by the scroll position, so
   nothing runs while the page is still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .download img {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}
@keyframes rise {
  from { transform: translateY(72px) scale(0.86); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Links inside a line of text get a 44 px tall hit area without moving the text around them. */
.section-lead a, .foot a { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* When the two lines wrap, the row gap keeps their links' 44 px hit areas apart. */
.foot { padding-block: 32px 48px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 12px; font-size: 15px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after, .switch, .switch::after, .marks button, .drop-tip, .state-view .panel { transition: none; }
}

/* Narrow screens */
@media (max-width: 1000px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-copy { position: static; order: 0; }
  .mac-window { justify-self: center; }
}
@media (max-width: 860px) {
  .calm { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the headline and buttons, then the drop with its key and caption, then the menu. */
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-stage { grid-template-areas: "drop" "notes" "menu"; }
  .minute-drop { height: min(56vh, 500px); height: min(56svh, 500px); min-height: 340px; }
  .panel-wrap { grid-area: menu; justify-self: center; margin: 48px 0 0; }
  .hero-strip { display: flex; }
  .panel-wrap .panel { margin-top: 12px; }
  .panel-wrap .panel { --shape: var(--shape-arrow); --ring: var(--ring-arrow); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar nav { display: none; }
  .bar .button { margin-left: auto; }
  /* Stacked, the headline is sized to fill the column, and the lead and the two buttons use its full
     width, so nothing in the hero leaves an empty right-hand side. The divisor is the widest
     line's width in ems with a margin, so the Rounded face, which runs wider, still fits. */
  h1 { font-size: min(96px, calc((100vw - 2 * var(--gutter)) / 6.6)); max-width: none; }
  .lead { max-width: none; }
  .hero .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .actions .button { padding-inline: 12px; }
  /* At this width and below, flow.js draws the diagram upright with each label beside its device,
     since the wide one's five labels would run into each other. Kept to a phone's width so it
     doesn't grow tall. */
  .flow-stage { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 360px) {
  .bar { gap: 12px; }
  .brand { gap: 8px; }
  .bar .button.compact { padding-inline: 14px; }
}
@media (max-width: 400px) {
  .hero .actions, .download .actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
}
@media (max-width: 640px) {
  .drop-key { flex-direction: column; align-items: center; }
  .drop-key .key { text-align: center; }
  .is-live .rows { min-height: 300px; }
  .row-label span { display: none; }
  .steps, .facts { grid-template-columns: minmax(0, 1fr); }
  .event { font-size: 13px; }
  .axis span:nth-child(2), .axis span:nth-child(4) { display: none; }
  .flow-controls .button { width: 100%; }
  .flow-count { min-width: 0; }
  .flow-label { font-size: 13px; }
  .win-toolbar { justify-content: flex-start; }
  .win-body { padding-inline: 12px; }
  .qr-tile { width: min(232px, 70vw); }
  .seg.wide [role="radio"] { padding-inline: 4px; font-size: 12px; }
  .row { flex-wrap: wrap; }
  .value-row { flex-wrap: wrap; }
}

/* The panel shown larger on wide screens, so it holds its own beside the drop. Narrower, the drop is
   smaller and the panel stays at its own size so it doesn't hide the night. */
@media (min-width: 1200px) {
  .panel-wrap { zoom: 1.12; }
}

/* The debug tuning panel, present only with #tune in the address. */
.tune-strip, .tune-panel { position: fixed; z-index: 20; font: 12px/1.3 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); }
.tune-strip { right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; max-width: min(560px, 100% - 24px); }
.tune-panel { right: 12px; bottom: 104px; width: min(340px, 100% - 24px); max-height: 70vh; overflow: auto; padding: 12px; display: grid; gap: 10px; }
.tune-panel[hidden] { display: none; }
.tune-group { border: 1px solid var(--rule); border-radius: 8px; padding: 8px; display: grid; gap: 6px; }
.tune-row { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 8px; }
.tune-strip .tune-row { grid-template-columns: auto 120px 36px; }
.tune-value { font-variant-numeric: tabular-nums; text-align: right; }
.tune-help { color: var(--ink-3); }
.tune-actions { display: flex; gap: 8px; }
.tune-strip button, .tune-panel button { font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--well); color: var(--ink); }