/* The site's own tokens, beside the design system's in tokens.css. */
:root {
  --primary-edge: #8a5b00;
  --ring-edge: rgba(11, 19, 48, 0.3);
  --doodle: rgba(74, 85, 120, 0.34);
  --doodle-gold: rgba(138, 91, 0, 0.42);
  --hero-top: #dde5f6;
  --hero-bottom: #eef1f8;
  --choco: #6e4026;
  --choco-band: #1b2a52;
  --choco-foil: #cfd3df;
  --nav-bg: rgba(255, 255, 255, 0.62);
  --nav-hover: rgba(11, 19, 48, 0.07);
  --menu-line: #34467a;
  /* The hero's mock of macOS: its menu bar, menus and wallpaper. */
  --scene-bar: rgba(246, 246, 248, 0.74);
  --scene-menu: rgba(244, 244, 247, 0.9);
  --scene-ink: #1d1d1f;
  --scene-muted: rgba(29, 29, 31, 0.48);
  --scene-edge: rgba(0, 0, 0, 0.14);
  --scene-sep: rgba(0, 0, 0, 0.1);
  --scene-pressed: rgba(0, 0, 0, 0.13);
  --scene-wall: radial-gradient(120% 90% at 85% 110%, #f6d58a 0%, rgba(246, 213, 138, 0) 55%), linear-gradient(165deg, #b9c9ef 0%, #dfe6f6 60%, #eef1f8 100%);
  /* The true-colour circle's radius; main.js moves it with --lx and --ly. */
  --lr: min(140px, 30vw);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-edge: #f6d58a;
    --ring-edge: rgba(238, 241, 250, 0.3);
    --doodle: rgba(167, 178, 212, 0.3);
    --doodle-gold: rgba(246, 213, 138, 0.42);
    --hero-top: #16224b;
    --hero-bottom: #0b1330;
    --choco: #a8714a;
    --choco-band: #34467a;
    --choco-foil: #d9dce6;
    --nav-bg: rgba(19, 30, 66, 0.62);
    --nav-hover: rgba(238, 241, 250, 0.09);
    --scene-bar: rgba(28, 30, 44, 0.66);
    --scene-menu: rgba(40, 42, 56, 0.9);
    --scene-ink: #f5f5f7;
    --scene-muted: rgba(245, 245, 247, 0.5);
    --scene-edge: rgba(255, 255, 255, 0.16);
    --scene-sep: rgba(255, 255, 255, 0.12);
    --scene-pressed: rgba(255, 255, 255, 0.2);
    --scene-wall: radial-gradient(120% 90% at 85% 110%, rgba(246, 213, 138, 0.35) 0%, rgba(246, 213, 138, 0) 55%), linear-gradient(165deg, #22356b 0%, #131e42 55%, #0b1330 100%);
  }
}
:root[data-theme="dark"] {
  --primary-edge: #f6d58a;
  --ring-edge: rgba(238, 241, 250, 0.3);
  --doodle: rgba(167, 178, 212, 0.3);
  --doodle-gold: rgba(246, 213, 138, 0.42);
  --hero-top: #16224b;
  --hero-bottom: #0b1330;
  --choco: #a8714a;
  --choco-band: #34467a;
  --choco-foil: #d9dce6;
  --nav-bg: rgba(19, 30, 66, 0.62);
  --nav-hover: rgba(238, 241, 250, 0.09);
  --scene-bar: rgba(28, 30, 44, 0.66);
  --scene-menu: rgba(40, 42, 56, 0.9);
  --scene-ink: #f5f5f7;
  --scene-muted: rgba(245, 245, 247, 0.5);
  --scene-edge: rgba(255, 255, 255, 0.16);
  --scene-sep: rgba(255, 255, 255, 0.12);
  --scene-pressed: rgba(255, 255, 255, 0.2);
  --scene-wall: radial-gradient(120% 90% at 85% 110%, rgba(246, 213, 138, 0.35) 0%, rgba(246, 213, 138, 0) 55%), linear-gradient(165deg, #22356b 0%, #131e42 55%, #0b1330 100%);
}

/* The hero's sky body: the moon at night, the sun by day. */
.moon-scene { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .moon-scene { display: block; }
  :root:not([data-theme="light"]) .sun-scene { display: none; }
}
:root[data-theme="dark"] .moon-scene { display: block; }
:root[data-theme="dark"] .sun-scene { display: none; }

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--font-text); }
/* Safari paints its status bar and toolbar strips, and the overscroll past either end, in the
   body's background, which the page covers everywhere else: the hero's sky at the top, the
   ground once main.js marks the end in view, and under the page tint's two layers, flattened,
   while Night Shift is on. The tint's mask isolates its layers, so the first one's multiply
   composites as a plain mix. */
body { --edge: var(--hero-top); background-color: color-mix(in srgb, color-mix(in srgb, var(--edge) 78%, rgb(255 138 46)) 90%, rgb(255 154 77)); }
body.at-end { --edge: var(--ground); }
body:has(.shift-off) { background-color: var(--edge); }
a { color: var(--moon-text); }
a:hover { color: var(--ink); }
h1, h2, p { margin: 0; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 44px); line-height: 1.09; }
code { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.page { position: relative; overflow: hidden; min-height: 100vh; background: var(--ground); }
.wrap { position: relative; max-width: calc(864px + 2rem); margin: 0 auto; padding-inline: 1rem; }
.nav-spacer { flex-grow: 1; }

/* Doodles: placed by main.js, behind the content. */
.doodles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.doodle { position: absolute; }
.doodle > span { display: block; width: 100%; height: 100%; }
.doodle svg { display: block; width: 100%; height: 100%; }

/* Hero */
.hero { position: relative; background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%); }
.celestial { position: absolute; right: min(-140px, -10vw); top: -190px; width: min(620px, 80vw); aspect-ratio: 1; pointer-events: none; }
.moon-scene, .sun-scene { position: absolute; inset: 0; }
.ring { position: absolute; border-radius: 50%; }
.ring-near { inset: -14%; border: 1.5px dashed var(--doodle-gold); }
.ring-far { inset: -30%; border: 1.5px dashed var(--doodle); }
.moon-glow { position: absolute; inset: 8% 30% 30% 8%; border-radius: 50%; }
.moon-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--moon); -webkit-mask-image: radial-gradient(circle at 74% 30%, transparent 0 41%, #000 41.4%); mask-image: radial-gradient(circle at 74% 30%, transparent 0 41%, #000 41.4%); }
.sun-rays { position: absolute; inset: -26%; }
.sun-rays svg { width: 100%; height: 100%; }
.sun-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--moon); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 24px; }
/* The nav keeps to the sections' column while the hero's is clearly wider, and joins the hero's
   once the difference would be too small to look deliberate. */
@media (min-width: 1040px) {
  .hero > .wrap > .nav { width: 100%; max-width: 864px; margin-inline: auto; }
}
/* Below this the nav's wide link would push the Night Shift switch onto a second row. */
@media (max-width: 720px) {
  .nav { gap: 12px 16px; }
  .nav .nav-wide { display: none; }
}
/* The wordmark: the icon beside the name in the display face. */
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 30px; line-height: 1; }
.brand:hover { color: var(--ink); }
.nav-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav-link { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color 160ms ease; }
.nav-link:hover { color: var(--ink); background: var(--nav-hover); }
.nav-divider { width: 1px; height: 14px; background: var(--line); }
.shift-switch { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-text); cursor: pointer; }
.switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); transition: background-color 160ms ease; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(11, 19, 48, 0.3); transition: left 160ms ease; }
.shift-switch[aria-pressed="true"] .switch-track { background: var(--ember); }
.shift-switch[aria-pressed="true"] .switch-knob { left: 16px; }

/* Room above the nav on an upright iPhone with a notch (index.html marks it), which main.js
   scrolls past on arrival: Safari draws a page under the status bar only once it's scrolled, so
   this puts the sky and the sun there. */
.status-runway .hero { --runway: 80px; padding-top: var(--runway); }

/* The hero's column is wider than the sections', and on screens wider than phones it fills the
   first screen up to 940px tall, with the content centred in it. The headline scales with the
   column, so beside the scene it always keeps its two lines. */
.hero > .wrap { max-width: calc(clamp(1080px, 68vw, 1280px) + 2rem); }
.hero-content { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px clamp(24px, 3.5vw, 48px); align-items: center; align-content: center; padding-block: 16px 88px; container-type: inline-size; }
.hero-text { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.eyebrow { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 5.8cqi, 76px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: 19px; line-height: 1.6; max-width: 46ch; }
@media (min-width: 561px) {
  .hero > .wrap { display: flex; flex-direction: column; min-height: min(100svh, 940px); }
  .hero-content { flex: 1 0 auto; }
}
.hero-cue { position: absolute; z-index: 1; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.hero-cue:hover { color: var(--ink); }
.hero-cue svg { animation: nudge 2.4s ease-in-out infinite; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.requirement { font-size: 14px; color: var(--ink-muted); }
.button { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 17px; text-decoration: none; }
.button-primary { background: var(--moon); color: var(--on-moon); border: 1px solid var(--primary-edge); }
.button-primary:hover { color: var(--on-moon); }
.button-plain { border-color: transparent; }
.button-version { font-family: var(--font-mono); font-size: 12px; font-weight: 500; opacity: 0.75; }

/* The hero's scene: a live mock of the menu bar with Nightcap's menu open over Figma, in macOS's
   own light or dark look. It's laid out at 440px wide in em of the 13-point menu text, and
   scales as one piece to the width it gets, like a screenshot. */
.scene { position: relative; margin: 0; width: 100%; aspect-ratio: 1.18; container-type: inline-size; border-radius: 14px; overflow: hidden; background: var(--scene-wall); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--line); color: var(--scene-ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
.scene > * { font-size: calc(100cqi * 13 / 440); }
.scene-bar { display: flex; align-items: center; gap: 1.23em; height: 2em; padding: 0 0.77em; background: var(--scene-bar); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); font-weight: 500; white-space: nowrap; }
.scene-apple { width: 1.08em; height: 1.23em; flex: none; }
.scene-app { font-weight: 700; }
/* Menus that don't fit wrap onto a hidden second line, so none shows cut. */
.scene-menus { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 1.23em; height: 1.3em; overflow: hidden; }
.scene-status { flex: none; display: flex; align-items: center; gap: 0.31em; }
.scene-icon { display: inline-flex; align-items: center; justify-content: center; height: 1.54em; min-width: 2em; border-radius: 0.46em; }
.scene-icon svg { width: 1.23em; height: 1.23em; }
.scene-icon .scene-battery { width: 1.85em; }
.scene-moon { background: var(--scene-pressed); }
.scene-moon svg { width: 1.31em; height: 1.31em; }
.scene-clock { padding-left: 0.31em; font-variant-numeric: tabular-nums; }
.scene-window { position: absolute; left: 6%; top: 20%; width: 58%; height: 70%; display: flex; flex-direction: column; border-radius: 0.77em; overflow: hidden; background: #2c2c2e; color: #f5f5f7; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 0.92em 2.3em rgba(0, 0, 0, 0.28); }
.scene-titlebar { height: 2.17em; flex: none; display: flex; align-items: center; gap: 0.5em; padding: 0 0.83em; font-size: 0.92em; font-weight: 600; background: #1e1e20; }
.scene-lights { display: flex; gap: 0.5em; margin-right: 0.5em; }
.scene-lights i { width: 0.83em; height: 0.83em; border-radius: 50%; background: #ff5f57; }
.scene-lights i + i { background: #febc2e; }
.scene-lights i + i + i { background: #28c840; }
.scene-canvas { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0.92em; }
.scene-menu { position: absolute; right: 0.62em; top: 2.38em; width: 20.9em; padding: 0.38em; border-radius: 0.92em; background: var(--scene-menu); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: 0 0 0 0.5px var(--scene-edge), 0 1.08em 2.77em rgba(0, 0, 0, 0.3); line-height: 1.23; }
.scene-menu .menu-item { grid-template-columns: 1.38em 1fr auto; column-gap: 0.15em; padding: 0.23em 0.69em; }
.scene-menu .menu-check { font-size: 0.92em; line-height: inherit; }
.scene-menu .menu-status .menu-title { font-weight: 600; color: var(--scene-muted); }
.scene-menu .menu-indented .menu-text { padding-left: 0.92em; }
.scene-menu .menu-subtitle { font-size: 0.846em; line-height: 1.27; color: var(--scene-muted); }
.scene-menu .menu-key { font-size: 1em; color: var(--scene-muted); }
.scene-menu .menu-sep { margin: 0.38em 0.77em; background: var(--scene-sep); }
.scene-menu .menu-header { padding: 0.55em 0.91em 0.18em 2.64em; font-size: 0.846em; color: var(--scene-muted); }

.poster-circle { position: absolute; left: 8%; top: 8%; width: 54%; aspect-ratio: 1; border-radius: 50%; background: #e5372c; }
.poster-square { position: absolute; right: 8%; top: 30%; width: 34%; aspect-ratio: 1; background: #0a72e8; }
.poster-bar { position: absolute; left: 8%; bottom: 8%; width: 84%; height: 16%; background: #22b33a; }

/* Sections */
.section { padding-block: 72px; border-top: 1px solid var(--line); }
.section-text { font-size: 17px; line-height: 1.6; color: var(--ink-muted); max-width: 540px; }

.how { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.how-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 720px; text-align: center; }

.desk { position: relative; z-index: 10; margin: 0; width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.desk-screen { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--line); color: var(--starlight); }
.desk-menubar { position: absolute; inset: 0 0 auto 0; height: 28px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: rgba(11, 19, 48, 0.72); font-size: 13px; }
.desk-app-name { font-weight: 700; }
.desk-menu-label { color: var(--starlight-muted); }
.desk-moon { display: inline-flex; width: 18px; height: 18px; }
.desk-moon svg { width: 18px; height: 18px; }
.desk-time { font-variant-numeric: tabular-nums; }
.desk-window { position: absolute; left: 5%; top: 14%; width: 56%; height: 64%; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.window { height: 100%; display: flex; flex-direction: column; }
.window[hidden] { display: none; }
.window-bar { height: 28px; flex: none; display: flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: 600; }
.window-mail { background: #f7f8fc; color: #1c2340; }
.window-mail .window-bar { background: #e6e9f2; }
.mail-row { display: flex; flex-direction: column; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid #e1e5ef; }
.mail-row:last-child { border-bottom: 0; }
.mail-row span { color: #4a5578; }
.window-figma { background: #2b2b2e; }
.window-figma .window-bar { background: #1e1e21; }
.figma-canvas { flex-grow: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }
.figma-board { height: 100%; aspect-ratio: 3 / 4; background: #fbf6ee; border-radius: 4px; position: relative; overflow: hidden; }
.figma-board .poster-circle { left: 12%; top: 10%; width: 60%; }
.figma-board .poster-square { right: 10%; top: 40%; width: 38%; }
.figma-board .poster-bar { left: 10%; bottom: 8%; width: 80%; height: 14%; }
.window-safari { background: #f7f8fc; }
.window-safari .window-bar { background: #e6e9f2; justify-content: center; }
.address { padding: 3px 36px; border-radius: 6px; background: #ffffff; font-size: 12px; font-weight: 400; color: #1c2340; }
.video { flex-grow: 1; position: relative; background: linear-gradient(180deg, #2f2a6b 0%, #b0377a 38%, #ff7a3d 62%, #ffd27a 72%, #1f5fa8 73%, #0d2c57 100%); }
.play { position: absolute; left: 50%; top: 46%; width: 54px; height: 38px; margin: -19px 0 0 -27px; border-radius: 10px; background: rgba(11, 19, 48, 0.75); display: flex; align-items: center; justify-content: center; }

.menu { padding: 5px; border-radius: 10px; background: var(--night); border: 1px solid var(--menu-line); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); font-size: 12px; line-height: 1.25; color: var(--starlight); }
.desk-menu-inline { position: absolute; right: 3%; top: 32px; width: 240px; }
.desk-menu-below { display: none; align-self: flex-end; width: min(260px, 100%); }
.menu-item { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 4px; padding: 3px 8px; }
.menu-check { font-size: 11px; line-height: 15px; }
.menu-status .menu-title { font-weight: 700; color: var(--starlight-muted); }
.menu-indented .menu-text { padding-left: 12px; }
.menu-subtitle { display: block; font-size: 10px; color: var(--starlight-muted); }
.menu-key { color: var(--starlight-muted); font-size: 11px; }
.menu-sep { height: 1px; margin: 4px 8px; background: var(--menu-line); }
.menu-header { padding: 5px 8px 1px 24px; font-size: 10px; font-weight: 700; color: var(--starlight-muted); }

.dock { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; padding: 8px 10px; border-radius: 16px; background: rgba(238, 241, 250, 0.14); border: 1px solid rgba(238, 241, 250, 0.2); }
.dock-app { position: relative; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--tile); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font: 700 17px/1 var(--font-text); transition: transform 160ms ease; }
.dock-app:hover { transform: translateY(-3px); }
.dock-app::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #eef1fa; opacity: 0; }
.dock-app[aria-pressed="true"]::after { opacity: 1; }

.desk-tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 450ms ease-in-out; }
.desk-tint.on { opacity: 1; transition-duration: 900ms; }
.desk-tint span, .page-tint span { position: absolute; inset: 0; }
.desk-tint span:first-child, .page-tint span:first-child { background: rgba(255, 138, 46, 0.22); mix-blend-mode: multiply; }
.desk-tint span:last-child, .page-tint span:last-child { background: rgba(255, 154, 77, 0.10); }

/* Evening */
.evening { display: flex; flex-direction: column; gap: 28px; }
.split-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 48px; }
.split-heading h2 { flex: 1 1 280px; }
.split-heading .section-text { flex: 1 1 420px; }
.sky-strip { position: relative; height: 8px; margin: 2px 0 6px; border-radius: 999px; background: linear-gradient(90deg, #ff9a4d 0%, #d0567a 16%, #4a3f8a 30%, #24366a 46%, #1b2a52 66%, #3d528c 82%, #f6d58a 100%); box-shadow: inset 0 0 0 1px var(--line); }
.sky-marker { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--line-strong); transition: transform 220ms cubic-bezier(.2, 1.6, .4, 1); }
.sky-marker.on { background: var(--moon); box-shadow: 0 0 0 2px var(--moon-text); transform: scale(1.35); }
.moments { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.moment { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--font-text); }
.moment[aria-pressed="true"] { border-color: var(--moon-text); background: var(--surface); }
.moment-time { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.moment[aria-pressed="true"] .moment-time { color: var(--moon-text); }
.moment-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--true-colour); }
.moment-dot.warm { background: var(--ember); }
.moment-title { font-size: 15px; font-weight: 650; line-height: 1.3; }
.moment-detail { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.moment-body { flex: 1 1 320px; font-size: 17px; line-height: 1.6; max-width: 46ch; }
.menu-card { flex: 0 1 280px; padding: 6px; border-radius: 10px; background: var(--night); border: 1px solid var(--menu-line); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); color: var(--starlight); font-size: 12px; line-height: 1.3; }
.menu-card-status { padding: 4px 8px 6px 26px; }
.menu-card-status strong { color: var(--starlight-muted); }
.menu-card-status span, .menu-card-note { display: block; font-size: 11px; color: var(--starlight-muted); }
.menu-card-sep { height: 1px; margin: 2px 8px 4px; background: var(--menu-line); }
.menu-card-header { padding: 2px 8px 2px 26px; font-size: 10px; font-weight: 700; color: var(--starlight-muted); }
.menu-card-item { display: grid; grid-template-columns: 18px 1fr; padding: 3px 8px; }

/* Command line */
.cli { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; }
.cli-text { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }
.note { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.terminal { flex: 999 1 440px; min-width: 0; background: var(--night-deep); color: var(--starlight); border: 1px solid var(--menu-line); border-radius: 12px; padding: 24px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; overflow-x: auto; box-shadow: 0 24px 70px -18px rgba(246, 213, 138, 0.32); }
.term-line { white-space: pre; }
.t-prompt { color: var(--moon); }
.t-out { color: var(--starlight-muted); }
.t-cmd { color: var(--starlight); font-weight: 600; }
.t-arg { color: var(--moon); }
.t-warm { color: #ffaa6b; }
.t-ok { color: #30d158; }

/* The download panel, at dusk */
.dusk { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; margin-bottom: 72px; padding: clamp(28px, 5vw, 48px); border-radius: 12px; background: var(--night); color: var(--starlight); }
.dusk > * { position: relative; z-index: 1; }
.dusk .dusk-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 120% at 82% 118%, rgba(255, 154, 77, 0.62) 0%, rgba(208, 86, 122, 0.34) 38%, rgba(208, 86, 122, 0) 70%); }
.dusk .dusk-sun { position: absolute; z-index: 0; pointer-events: none; right: 24%; bottom: -72px; width: 124px; height: 124px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ffb977 0%, #ff9a4d 42%, #e8664a 100%); animation: dusk-glow 6s ease-in-out infinite; }
.dusk .dusk-star { position: absolute; z-index: 0; pointer-events: none; color: rgba(238, 241, 250, 0.55); }
.dusk-text { flex: 999 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dusk-title { font-family: var(--font-display); font-size: 40px; line-height: 1.05; text-wrap: balance; }
.dusk-sub { font-size: 15px; line-height: 1.55; color: var(--starlight-muted); text-wrap: balance; }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 0 48px; font-size: 14px; color: var(--ink-muted); }
.made-with { display: inline-flex; align-items: center; gap: 6px; }
.choco-bar { transform: rotate(16deg); margin-left: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: var(--ink-muted); }
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.theme-option { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); cursor: pointer; padding: 0; }
.theme-option:hover { color: var(--ink); }
.theme-option[aria-pressed="true"] { background: var(--surface); color: var(--ink); }

/* The page under Night Shift, with the true-colour circle cut out of it. */
.page-tint { position: absolute; inset: 0; z-index: 5; pointer-events: none; transition: opacity 900ms ease-in-out; -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx, 900px) var(--ly, 330px), transparent 98%, #000 100%); mask-image: radial-gradient(circle var(--lr) at var(--lx, 900px) var(--ly, 330px), transparent 98%, #000 100%); }
.lens-ring { position: absolute; z-index: 20; left: 0; top: 0; transform: translate(calc(var(--lx, 900px) - var(--lr)), calc(var(--ly, 330px) - var(--lr))); width: calc(var(--lr) * 2); height: calc(var(--lr) * 2); border-radius: 50%; border: 2px solid var(--moon); box-shadow: 0 0 0 1px var(--ring-edge); pointer-events: none; }
.page.shift-off .page-tint, .page.shift-off .lens-ring { opacity: 0; }

/* Motion: one orchestrated entrance, and slow ambient loops. */
.spring { transition: transform 420ms cubic-bezier(.2, 1.6, .4, 1); }
.spring:hover { transform: scale(1.045); }
.spring:active { transform: scale(.97); }
.rise { display: inline-block; animation: rise 1000ms cubic-bezier(.2, 1.25, .35, 1) both; }
.rise-late { animation-delay: 140ms; }
@keyframes rise { from { opacity: 0; transform: translateY(42px) rotate(2deg); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in 700ms ease-out 420ms both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.swap { animation: swap-in 420ms ease-out; }
@keyframes swap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.twinkle { animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.06); } }
.drift { animation: drift 9s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -12px); } }
.sway { animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.spin { animation: spin 60s linear infinite; }
.spin-back { animation: spin 90s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.glow { animation: glow 6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 90px 20px rgba(246, 213, 138, .16); } 50% { box-shadow: 0 0 140px 44px rgba(246, 213, 138, .26); } }
@keyframes dusk-glow { 0%, 100% { box-shadow: 0 0 70px 16px rgba(255, 138, 70, .28); } 50% { box-shadow: 0 0 110px 30px rgba(255, 120, 70, .40); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .fade-in, .swap, .twinkle, .drift, .sway, .spin, .spin-back, .glow, .dusk .dusk-sun, .hero-cue svg { animation: none; }
  .spring, .dock-app, .nav-link, .desk-tint, .page-tint, .sky-marker, .switch-track, .switch-knob { transition: none; }
}

/* Phones */
@media (max-width: 560px) {
  :root { --lr: min(92px, 24vw); }
  .brand-name { display: none; }
  .brand img { width: 36px; height: 36px; }
  .nav { gap: 6px; flex-wrap: nowrap; }
  .nav-group { padding: 2px; }
  .nav-link { padding: 0 9px; font-size: 13px; height: 28px; }
  .hero-content { display: flex; flex-direction: column; align-items: stretch; padding-block: 48px 80px; }
  .hero-text { flex: none; }
  .hero-title { font-size: clamp(32px, 10.2vw, 44px); }
  .lead { font-size: 17px; }
  .hero-cue, .scene-wide { display: none; }
  .scene { aspect-ratio: 0.95; }
  .scene > * { font-size: 12px; }
  .scene-bar { gap: 0.83em; padding: 0 0.67em; }
  .scene-window { left: 5%; top: 40%; width: 62%; height: 54%; }
  .scene-menu { width: 19.7em; }
  .celestial { width: 240px; right: -96px; top: calc(var(--runway, 0px) - 150px); }
  .desk-menu-inline, .sky-strip { display: none; }
  .desk-menu-below { display: block; }
  .desk-window { top: 16%; height: 52%; width: 62%; }
  .dock { bottom: 8px; gap: 6px; padding: 5px 6px; border-radius: 12px; }
  .dock-app { width: 34px; height: 34px; border-radius: 9px; }
  .terminal { font-size: 11px; padding: 18px; font-variation-settings: "wdth" 87.5; }
  .term-line { white-space: pre-wrap; overflow-wrap: anywhere; }
  .dusk-title { font-size: 34px; }
  .dusk .dusk-sun { right: 10%; width: 96px; height: 96px; bottom: -50px; }
  .doodle:not(.keep) { display: none; }
  .site-footer { flex-direction: column; gap: 16px; }
  .footer-links { justify-content: center; }
}