/* The site's one stylesheet: tokens, reset, shared pieces, then each page's own
   rules. Every color is a token here; a tint or a shadow is a token at an alpha
   (color-mix with transparent), never a new literal. Each page's body carries a
   class (home, plain, lost), and a rule whose selector could reach another page
   is scoped to it with :where(), which adds no specificity. */

:root {
  --page: #ffffff;
  --ink-on-page: #111418;
  --ink-2-on-page: #5b636e;
  --accent: #1f4fe0;
  --ink-on-accent: #ffffff;
  --line: #e3e6ea;
  --shade: #000000;           /* black: hairlines, shadows, the scrim, the dock tooltip's ink */
  --shadow: rgb(10 25 60);    /* the wallpaper's navy, for the softer, larger shadows */

  /* The pretend Mac on the home page. */
  --mac-accent: #0970ea;      /* 4.65:1 on white; Apple's #0a7aff is 4.0 */
  --mac-ink: #1d1d1f;         /* the Mac's label ink, on its white windows and the meeting card */
  --mac-close: #ff5f57;
  --mac-minimize: #febc2e;
  --mac-zoom: #28c840;
  --mac-green: #34c759;       /* the calendar dot on the meeting card */
  --cal-red: #d53c33;         /* the weekday on the Calendar tile */
  --ink-on-glass: #0c1526;
  --ink-2-on-glass: color-mix(in srgb, var(--ink-on-glass) 55%, transparent);
  --glass: color-mix(in srgb, var(--page) 32%, transparent);
  --glass-edge: color-mix(in srgb, var(--page) 50%, transparent);
  --menu-ground: rgb(246 247 250);
  --glass-strong: color-mix(in srgb, var(--menu-ground) 82%, transparent);
  --scrim: color-mix(in srgb, var(--shade) 55%, transparent);
  --chrome-line: color-mix(in srgb, var(--shade) 6%, transparent);
  --file-blank: #ccccdd;      /* behind a desktop file's picture while it loads */
  --wallpaper: #6f93d1;
  --wall-sky: #a9c3f0;
  --wall-floor: #3f62a8;
  --wall-top-left: #dfe9ff;
  --wall-top-right: #b9d0fb;
  --wall-bottom-left: #3d63ad;
  --wall-bottom-right: #27478a;
  --tile-mail-top: #5fb3ff;
  --tile-mail-bottom: #1a7cf2;
  --tile-notes-top: #fff8d6;
  --tile-notes-bottom: #ffe58a;
  --tile-photos-top: #fdfdfd;
  --tile-photos-bottom: #e9edf3;
  --s-page: #eef2fa;          /* the simple page's ground: the wallpaper's palest blue */

  /* SF and SF Mono, the Mac's own faces, so the site keeps the Mac feeling (Rex, 2026-10-28). */
  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --sans: var(--system);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px; --sp-16: 128px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink-on-page);
  font: 400 18px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink-on-accent);
  font: 500 17px/1 var(--sans);
  text-decoration: none;
  border: 0;          /* written for links; a <button> brings its own border otherwise */
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: color-mix(in srgb, var(--accent), var(--shade) 22%);
    transform: translateY(-1px);
  }
  .textlink:hover { color: var(--accent); }
}
.textlink { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.meta { font: 400 14px/1.4 var(--mono); color: var(--ink-2-on-page); }

/* Read by screen readers, not shown. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Home (index.html). At 1100px and wider the page is a pretend Mac: the copy
   lives in a Pounce window, David roams the desktop, and a test meeting runs
   Pounce's own sequence. The pretend system (menu bar, window chrome, the meeting
   card) is set in the system font, as is the page's own copy, so all of it reads
   as the Mac. */
:where(html:has(> .home)), body:where(.home) { height: 100%; }
body:where(.home) { overflow: hidden; background: var(--wallpaper); }
@media (max-width: 1099.98px) { body:where(.home) { overflow: auto; background: var(--s-page); } .screen { display: none; } }
@media (min-width: 1100px) { .simple { display: none; } }

.screen { position: relative; height: 100vh; min-height: 720px; overflow: clip;   /* clip, not hidden: a hidden box still scrolls on focus */ isolation: isolate;
  background:
    radial-gradient(60% 55% at 12% 4%, var(--wall-top-left) 0%, transparent 70%),
    radial-gradient(55% 60% at 92% 18%, var(--wall-top-right) 0%, transparent 70%),
    radial-gradient(70% 60% at 30% 100%, var(--wall-bottom-left) 0%, transparent 70%),
    radial-gradient(60% 50% at 95% 100%, var(--wall-bottom-right) 0%, transparent 70%),
    linear-gradient(170deg, var(--wall-sky) 0%, var(--wallpaper) 55%, var(--wall-floor) 100%); }

/* Menu bar */
.menubar { position: absolute; inset: 0 0 auto; z-index: 980; height: 30px; display: flex; align-items: center;
  padding: 0 12px 0 20px; gap: 20px; font: 500 13px/1 var(--system); color: var(--ink-on-glass);
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.menubar .app { font-weight: 700; }
.menubar .right { margin-left: auto; display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.menubar .clock { padding: 0 8px; }
.status-item { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; border: 0;
  background: transparent; color: inherit; cursor: default; }
/* Apple's cat symbol, as the app shows it (Rex, 2026-10-28), rendered by AppKit at 21 x 17 points
   and tinted with the menu bar's ink. */
.status-item .cat-icon { width: 21px; height: 17px; background: currentColor;
  -webkit-mask: url(/assets/menubar-cat.png) center / contain no-repeat; mask: url(/assets/menubar-cat.png) center / contain no-repeat; }
/* The app's own countdown beside its icon (tools/menubar.swift): "Standup in 5 min". */
.bar-status { font: 500 13px/1 var(--system); white-space: nowrap; }
.bar-status:empty { display: none; }
.status-item[aria-expanded="true"] { background: color-mix(in srgb, var(--page) 45%, transparent); }
@media (hover: hover) and (pointer: fine) { .status-item:hover { background: color-mix(in srgb, var(--page) 30%, transparent); } }

.menu { position: absolute; top: 34px; z-index: 990; width: 260px; padding: 6px; border-radius: 12px;
  font: 400 13px/1 var(--system); color: var(--ink-on-glass); background: var(--glass-strong);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--shade) 18%, transparent), 0 12px 40px color-mix(in srgb, var(--shadow) 28%, transparent); display: none; }
.menu.open { display: block; }
.menu .head { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--ink-2-on-glass); }
.menu .item { display: flex; justify-content: space-between; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px;
  background: transparent; font: inherit; color: inherit; text-align: left; cursor: default; }
.menu .item.off { color: var(--ink-2-on-glass); }
.menu .item .time { display: inline-block; width: 72px; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .menu button.item:hover { background: var(--mac-accent); color: var(--ink-on-accent); } }
.menu hr { height: 1px; margin: 5px 10px; border: 0; background: color-mix(in srgb, var(--shade) 10%, transparent); }

/* The Pounce window */
@keyframes spring-in { from { opacity: 0; transform: translateX(-50%) scale(.8); } to { opacity: 1; transform: translateX(-50%); } }
.window { position: absolute; z-index: 10; left: 50%; top: max(56px, calc(50% - 360px));   /* high enough that its bottom clears the floor David walks on */ transform: translateX(-50%);
  width: min(760px, calc(100% - 48px)); background: var(--page); border-radius: 26px; overflow: hidden;
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--shade) 20%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow) 8%, transparent), 0 30px 80px color-mix(in srgb, var(--shadow) 35%, transparent);
  animation: spring-in 450ms cubic-bezier(.3, 1.35, .6, 1) both; }
@media (prefers-reduced-motion: reduce) { .window { animation: none; } }
.titlebar { position: relative; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 20px;
  font: 600 13px/1 var(--system); color: var(--ink-2-on-page); }
.titlebar i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shade) 12%, transparent); }
.titlebar i:nth-child(1) { background: var(--mac-close); }
.titlebar i:nth-child(2) { background: var(--mac-minimize); }
.titlebar i:nth-child(3) { background: var(--mac-zoom); }
.content { padding: 16px 56px 48px; max-height: calc(100vh - 56px - 52px - 112px); overflow: auto; container-type: inline-size; }
/* The wordmark over the headline, at a size where the cat in the p still reads. */
.logo { display: block; width: 168px; height: auto; margin-bottom: var(--sp-3); }
:where(.home) h1 { font-size: 36px; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; margin-bottom: var(--sp-3); }
.lede { font-size: 16px; line-height: 1.5; color: var(--ink-2-on-page); max-width: 38ch; margin-bottom: var(--sp-4); }
/* Three features side by side, stacked when the window is narrow. */
.features { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.features .when { display: block; margin-bottom: var(--sp-1); font: 600 13px/1.6 var(--mono); color: var(--accent); }
.features h2 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: var(--sp-1); }
.features p { font-size: 16px; line-height: 1.5; color: var(--ink-2-on-page); }
@container (max-width: 540px) { .features { grid-template-columns: 1fr; gap: var(--sp-2); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: var(--sp-3); }
.button.quiet { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .button.quiet:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}
.button.quiet:disabled { opacity: 0.5; cursor: default; transform: none; }
:where(.home) .meta { font-size: 13px; }

/* Dock */
/* Picked 5: the Nived dock glass. White at 27 percent, a light 5px blur, a 1px
   edge and squircle corners (corner-shape; a plain radius where unsupported). */
.dock { position: absolute; left: 50%; bottom: 10px; z-index: 4; transform: translateX(-50%); display: flex; gap: 8px;
  padding: 8px; border-radius: 28px; corner-shape: superellipse(1.5); background: color-mix(in srgb, var(--page) 27%, transparent);
  border: 1px solid var(--glass-edge); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 20%, transparent); }
.tile { position: relative; width: 56px; height: 56px; border: 0; padding: 0; border-radius: 14px; corner-shape: superellipse(1.5);
  display: grid; place-items: center; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shade) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--shade) 12%, transparent); }
/* Picked 3: the Pounce tile runs the test meeting, and only it hovers: it grows,
   darkens and shows its name, the Nived dock's hover. */
/* The darkening is an inset shade plus a filter on the icon, never a filter on the
   button: that would also darken the tooltip, and white can't be brightened back. */
button.tile { cursor: pointer; transition: transform 300ms cubic-bezier(.3, 1.35, .6, 1), box-shadow 300ms ease; }
button.tile svg { transition: filter 300ms ease; }
button.tile::before { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 14px); padding: 5px 12px;
  border-radius: 64px; background: var(--page); color: var(--shade); font: 500 13px/1.3 var(--system); white-space: nowrap;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--shade) 15%, transparent); opacity: 0; transform: translateX(-50%) scale(.9); transition: opacity 200ms, transform 200ms;
  pointer-events: none; }
button.tile:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  button.tile:not(:disabled):hover { transform: scale(1.1);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shade) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--shade) 12%, transparent), inset 0 0 0 28px color-mix(in srgb, var(--shade) 30%, transparent); }
  button.tile:not(:disabled):hover svg { filter: brightness(0.7); }
  button.tile:not(:disabled):hover::before { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* The disk image on the desktop: a second Download. */
.desk-icon { position: absolute; z-index: 3; width: 96px; display: grid; justify-items: center; gap: 4px; text-decoration: none; }
.desk-icon svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--shade) 20%, transparent)); }
.desk-icon span { padding: 1px 6px; border-radius: 4px; font: 500 12px/1.3 var(--system); color: var(--ink-on-glass); background: var(--glass); }
@media (hover: hover) and (pointer: fine) { .desk-icon:hover span { background: var(--mac-accent); color: var(--ink-on-accent); } .desk-icon:hover svg { filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--shade) 20%, transparent)) brightness(.92); } }
.tile svg { width: 30px; height: 30px; }
.tile.cal { background: var(--page); display: flex; flex-direction: column; justify-content: center; gap: 0; font-family: var(--system); }
.tile.cal b { font-size: 11px; font-weight: 600; color: var(--cal-red); line-height: 1; margin-top: 2px; }
.tile.cal span { font-size: 28px; font-weight: 300; color: var(--mac-ink); line-height: 1; }
.tile.mail { background: linear-gradient(var(--tile-mail-top), var(--tile-mail-bottom)); }
.tile.notes { background: linear-gradient(var(--tile-notes-top), var(--tile-notes-bottom)); }
.tile.photos { background: linear-gradient(var(--tile-photos-top), var(--tile-photos-bottom)); }
/* Pounce's app icon, Rex's glass one (from art/reference/), filling its tile; the image carries its own shape. */
.tile.pounce { background: none; box-shadow: none; }
.tile.pounce img { width: 100%; height: 100%; }
.tile.running::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: color-mix(in srgb, var(--ink-on-glass) 60%, transparent); }

/* Files on the desktop: a cat gif, two notes and a link. Each file opens in a
   small window, which is a solid object David can climb, and closes with the
   red dot (he falls if he was on it). */
.desk-files { position: absolute; right: 40px; top: 150px; z-index: 3; display: grid; grid-template-columns: 96px; gap: 2px; }
.file { display: grid; justify-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; text-decoration: none; }
.file svg { width: 64px; height: 48px; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--shade) 20%, transparent)); }
.file img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 2px solid var(--page);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shade) 25%, transparent); background: var(--file-blank); }
.file span { max-width: 92px; padding: 1px 6px; border-radius: 4px; font: 500 12px/1.3 var(--system); color: var(--ink-on-glass); background: var(--glass);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .file:hover span { background: var(--mac-accent); color: var(--ink-on-accent); } .file:hover img { filter: brightness(.92); } }
.qwin { position: absolute; z-index: 2; width: 200px; max-width: calc(100% - 32px); background: var(--page); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--shade) 20%, transparent), 0 18px 48px color-mix(in srgb, var(--shadow) 30%, transparent); animation: spring-qwin 450ms cubic-bezier(.3, 1.35, .6, 1) both; }
@keyframes spring-qwin { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qwin { animation: none; } }
.qwin .qbar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 600 12px/1 var(--system); color: var(--ink-2-on-page); }
.qwin .qbar i, .qwin .qbar button { width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shade) 12%, transparent); }
.qwin .qbar button { background: var(--mac-close); cursor: pointer; }
.qwin .qbar i:nth-of-type(1) { background: var(--mac-minimize); }
.qwin .qbar i:nth-of-type(2) { background: var(--mac-zoom); }
.qwin .qbar span { flex: 1; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qwin > img { display: block; width: 100%; height: auto; }   /* the whole photo or gif, never cropped */

.qwin.text { width: 300px; }
.qwin .doc { padding: 4px 18px 18px; font: 400 14px/1.5 var(--system); color: var(--mac-ink); }
.qwin .doc h3 { font-size: 17px; font-weight: 600; margin: 4px 0 8px; }
.qwin .doc p + p { margin-top: 8px; }
.qwin .doc a { color: var(--mac-accent); }
/* The gallery, laid out like a photo library app: a toolbar with the title,
   zoom, the view switch and search, then whole photos fitted into square cells. */
.qwin.gallery { width: min(720px, calc(100% - 32px)); border-radius: 18px; container-type: inline-size; }
.qwin .ptools { height: 56px; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--chrome-line); }
.qwin .ptools .close, .qwin .ptools i { flex: none; }
.qwin .ptools span { flex: none; margin: 0; overflow: visible; }   /* undo the plain title bar's stretching label */
.qwin .ptools .seg { margin-left: auto; }
.qwin .ptools .seg + .seg { margin-left: 0; }
@container (max-width: 620px) { .seg.views { display: none; } }
.qwin .ptools .ptitle { display: grid; margin-left: 10px; line-height: 1.2; }
.ptitle b { font-size: 14px; font-weight: 600; color: var(--mac-ink); }
.ptitle small { font-size: 12px; font-weight: 400; color: var(--ink-2-on-page); }
.seg { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--shade) 5%, transparent); font: 500 13px/1 var(--system); color: var(--mac-ink); }
.qwin .ptools .seg button { width: 28px; height: 24px; border: 0; border-radius: 999px; background: none; font: 400 17px/1 var(--system); color: var(--mac-ink); cursor: pointer; box-shadow: none; padding: 0; }
@media (hover: hover) and (pointer: fine) { .qwin .ptools .seg button:hover { background: color-mix(in srgb, var(--shade) 8%, transparent); } }
.seg.views span { padding: 6px 10px; border-radius: 999px; color: var(--ink-2-on-page); }
.seg.views span.on { background: var(--page); color: var(--mac-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 12%, transparent); }
.psearch { width: 120px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--shade) 5%, transparent); font: 400 13px var(--system); outline: 0; }
.psearch:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mac-accent) 40%, transparent); }
.qwin .grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px; padding: 16px 20px; max-height: min(560px, calc(100vh - 200px)); overflow: auto; }
.qwin .grid button { position: relative; padding: 0; border: 0; cursor: pointer; background: none; aspect-ratio: 1; min-width: 0; }
.qwin .grid button[hidden] { display: none; }
/* The whole photo fits its square, never cropped, upright or sideways. */
.qwin .grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .qwin .grid button:hover img { filter: brightness(.88); } }
.qwin .count { padding: 4px 0 16px; text-align: center; font: 600 13px/1.3 var(--system); color: var(--mac-ink); }
.qwin.mail { width: 400px; }
.compose { display: grid; font: 400 13px/1.4 var(--system); color: var(--mac-ink); }
.compose label { display: flex; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--chrome-line); color: var(--ink-2-on-page); }
.compose input { flex: 1; border: 0; outline: 0; font: inherit; color: var(--mac-ink); background: none; }
.compose label:focus-within, .compose textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--mac-accent); }
.compose textarea { height: 140px; padding: 10px 14px; border: 0; border-top: 1px solid var(--chrome-line); outline: 0; resize: none; font: inherit; }
.compose .send { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--chrome-line); color: var(--ink-2-on-page); font-size: 12px; }
.compose .send .button { padding: 8px 16px; font-size: 14px; }
.compose .send a { color: var(--mac-accent); }
.compose .sent { padding: 32px 14px; border-top: 1px solid var(--chrome-line); text-align: center; }
/* The hidden field only a bot fills in. */
.compose .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* David: a sprite cell placed so his anchor pixel stands on the ground point. */
.sprite { position: absolute; left: 0; top: 0; z-index: 900; pointer-events: none; will-change: transform; }
.sprite .cell { width: 100%; height: 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.sprite.left .cell { transform: scaleX(-1); }


/* The takeover, copied from tools/takeover.swift: black at 55 percent, a
   520-wide card with a 16 corner and 40 inset, countdown, title, time,
   quieter lines, Join, then Snooze and Dismiss. */
.takeover { position: absolute; inset: 0; z-index: 960; display: grid; place-items: center; grid-template-rows: auto; align-content: center; gap: 16px;
  background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.takeover.on { opacity: 1; pointer-events: auto; }
.card { width: 520px; max-width: calc(100% - 32px); padding: 40px; border-radius: 16px; background: var(--page);
  font-family: var(--system); color: var(--mac-ink); transform: scale(0.98); transition: transform 220ms ease; }
.takeover.on .card { transform: none; }
.card .count { font-size: 15px; font-weight: 500; color: var(--mac-accent); margin-bottom: 8px; }
.card h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 16px; }
.card .when { font-size: 17px; margin-bottom: 8px; }
.card .quiet { font-size: 13px; color: color-mix(in srgb, var(--shade) 58%, transparent);   /* 5.3:1 on the white card */ margin-bottom: 8px; }
.card .dot { color: var(--mac-green); }
.card .mac-button { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border: 0; border-radius: 999px;
  font: 400 15px/1 var(--system); color: var(--mac-ink); background: color-mix(in srgb, var(--shade) 6%, transparent); cursor: default; }
.card .mac-button.default { color: var(--ink-on-accent); background: var(--mac-accent); }
@media (hover: hover) and (pointer: fine) {
  .card .mac-button:hover { background: color-mix(in srgb, var(--shade) 10%, transparent); }
  .card .mac-button.default:hover { background: color-mix(in srgb, var(--mac-accent), var(--shade) 12%); }
}
.card .join { margin-top: 16px; }
.card .controls { display: flex; gap: 8px; margin-top: 32px; }
.sample { justify-self: center; font: 500 11px/1 var(--mono);
  text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--ink-on-accent) 75%, transparent); }

/* Below 1100px wide: a plain page, no pretend Mac (Rex, 2026-10-28). A header with
   the wordmark, the words on the page, the features as cards David climbs, a footer. */
.simple { min-height: 100vh; }
:where(.home) .s-head { max-width: 560px; margin: 0 auto; padding: var(--sp-3) var(--sp-2); }
:where(.home) .s-head img { display: block; width: 112px; height: auto; }
.s-stack { position: relative; max-width: 560px; margin: 0 auto; padding: var(--sp-6) var(--sp-2) var(--sp-6); }
.s-hero h1 { font-size: clamp(32px, 7vw, 44px); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; margin-bottom: var(--sp-2); }
.s-hero .lede { font-size: 17px; max-width: 38ch; margin-bottom: var(--sp-4); }
.s-hero .actions { align-items: flex-start; margin-bottom: 0; }
/* Download and what it costs, read together. */
.get { display: grid; justify-items: start; gap: var(--sp-2); }
.fine { font: 400 12px/1.4 var(--mono); color: var(--ink-2-on-page); padding-left: 24px; }
/* The test meeting stands in for a Mac screen; a phone has none, so below 700px it's left out. */
@media (max-width: 699.98px) { .s-hero [data-try] { display: none; } }
/* Room above each card for David to sit on its top without covering the words above. */
.s-features { list-style: none; padding: 0; margin: var(--sp-16) 0 0; display: grid; gap: var(--sp-12); }
.s-tile { background: var(--page); border-radius: 20px; padding: var(--sp-4) var(--sp-3);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--shade) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--shadow) 8%, transparent); }
.s-tile .when { display: block; margin-bottom: var(--sp-1); font: 600 13px/1.6 var(--mono); color: var(--accent); }
.s-tile h2 { font-size: 19px; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: var(--sp-1); }
.s-tile p { font-size: 16px; line-height: 1.5; color: var(--ink-2-on-page); }
.s-foot { margin-top: var(--sp-8); text-align: center; }
.simple .sprite { z-index: 50; }
.simple .takeover { position: fixed; }
/* "Free," hand-lettered, the mark Extra Extra uses, in Pounce's blue. The word is there for screen readers. */
.free-mark { display: inline-block; width: 2.4em; height: 1.4em; margin: 0 0.1em; vertical-align: -0.35em;
  background: oklch(0.584 0.253 0); -webkit-mask: url(/assets/free.svg) center / contain no-repeat; mask: url(/assets/free.svg) center / contain no-repeat;
  animation: free-hue 36s linear infinite; }
/* Drifting round the rainbow as on Rainbo's and Séance's sites (Rex, 2026-11-11), with
   Rainbo's hues, each tuned to read on white; still on the red under Reduce Motion. */
@keyframes free-hue {
  0.0% { background-color: oklch(0.584 0.253 0); }
  8.33% { background-color: oklch(0.585 0.25 30); }
  16.67% { background-color: oklch(0.572 0.146 60); }
  25.0% { background-color: oklch(0.563 0.126 90); }
  33.33% { background-color: oklch(0.553 0.146 120); }
  41.67% { background-color: oklch(0.531 0.194 150); }
  50.0% { background-color: oklch(0.537 0.125 180); }
  58.33% { background-color: oklch(0.542 0.119 210); }
  66.67% { background-color: oklch(0.551 0.157 240); }
  75.0% { background-color: oklch(0.579 0.234 270); }
  83.33% { background-color: oklch(0.596 0.267 300); }
  91.67% { background-color: oklch(0.593 0.281 330); }
  100% { background-color: oklch(0.584 0.253 0); }
}
@media (prefers-reduced-motion: reduce) { .free-mark { animation: none; } }
/* Forced colors would paint the masked fill as the page's own Canvas, so FREE would vanish. */
@media (forced-colors: active) { .free-mark { forced-color-adjust: none; background-color: CanvasText; animation: none; } }
/* Over the pale page the scrim is lighter than over the wallpaper: the label goes full white (5.2:1). */
.simple .sample { color: var(--ink-on-accent); }

/* ---- The plain pages (about.html, privacy.html): the same words as about.md and
   privacy.md on the home page, under the home page's header and a way back. */
:where(.plain) main { max-width: 640px; margin: 0 auto; padding: var(--sp-4) var(--sp-3) var(--sp-12); }
:where(.plain) .s-head { max-width: 640px; margin: 0 auto; padding: var(--sp-3); }
:where(.plain) .s-head img { display: block; width: 112px; height: auto; }
:where(.plain) .back { display: inline-flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-4); font: 500 15px/1 var(--sans); color: var(--accent); text-decoration: none; }
:where(.plain) .back svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { :where(.plain) .back:hover { text-decoration: underline; text-underline-offset: 3px; } }
:where(.plain) h1 { font-size: 40px; margin-bottom: var(--sp-4); }
:where(.plain) h2 { font-size: 22px; margin: var(--sp-6) 0 var(--sp-2); }
:where(.plain) p + p { margin-top: var(--sp-2); }
:where(.plain) .meta { margin-top: var(--sp-6); }
/* David's photos on the about page, the ones in the desktop's Photos window: whole,
   never cropped, two across on a phone and three on a wider screen, where the page
   widens for them. */
:where(.plain) .photos { list-style: none; padding: 0; margin: var(--sp-6) 0 0; columns: 2; column-gap: var(--sp-2); }
:where(.plain) .photos li { break-inside: avoid; margin-bottom: var(--sp-2); }
:where(.plain) .photos img { width: 100%; height: auto; border-radius: 12px; background: var(--line); }
@media (min-width: 720px) { :where(.plain.wide) main, :where(.plain.wide) .s-head { max-width: 880px; } :where(.plain) .photos { columns: 3; } }

/* ---- 404 */
body:where(.lost) { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); text-align: center; }
:where(.lost) h1 { font-size: 40px; margin: var(--sp-1) 0 var(--sp-2); }
:where(.lost) p { color: var(--ink-2-on-page); margin-bottom: var(--sp-4); }