/* opsty.dev — the site's one stylesheet (2026-10-12, review "Show It Running").
 *
 * Direction: B "Daylight" for the hero (a Mac desktop in daylight, the banner
 * answered from where you are), A "Nine to Nine" for the spine (one day, the
 * window held beside the text) and C's tab strip for navigation on every page.
 *
 * WHAT IS NOT HERE
 *   The app's own look. Pictures of opsty are scenes: the real components,
 *   rendered by `npm run scenes` and styled by opsty.css (workstream S), which is
 *   scoped under .opsty and never reads a token from this file. This sheet
 *   only frames them (.win, .scene) and fits them (site.js sets --k).
 *
 * RULES THIS FILE KEEPS (see the build spec, §2)
 *   - No left-border stripe on anything, ever: tone is a lamp dot, a tint or
 *     an even hairline. The owner hates the stripe (memory, 2026-10-11).
 *   - Nothing from another company: the typeface is self-hosted below.
 *   - Light and dark follow the Mac (prefers-color-scheme); there is no toggle.
 *   - Reduce Motion stops every animation; Reduce Transparency makes every
 *     surface solid; with scripting off, every player shows its key step.
 *   - Text tokens are checked at 4.5:1 on the grounds they sit on (--ink-3 on
 *     --bg is 5.0 light, 6.3 dark). The lamp colours are for shapes: as text
 *     the light theme's green and teal fall under 4.5, so tags mix them with ink.
 */

/* ── the typeface: JetBrains Mono, served from this site (OFL) ─────────── */
@font-face {
  font-family: "opsty Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-400.woff2?v=14425ba9c695) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "opsty Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-700.woff2?v=d0d4e818808f) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens ──────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --bg: #eef2f5;
  --bg-2: #e3e9ee;
  --surface: #ffffff;
  --ink: #10151c;
  --ink-2: #3c4653;
  --ink-3: #5d6876;
  --line: #d2d9e1;
  --accent: #077a71;
  --on-accent: #ffffff;
  /* Links and accent text: #077a71 is 4.6:1 on --bg but 4.3 on --bg-2, so text
     takes a step darker that clears 5:1 on both. */
  --accent-ink: #066b63;
  --l-ok: #1f9d55;
  --l-work: #0b8f84;
  --l-wait: #7a52d6;
  --l-bad: #c62f3b;
  --l-stray: #9a6200;
  --l-off: #8a94a2;
  /* Tag text: a lamp mixed with ink, so it reads at 5:1+ on its own tint. */
  --tag-new: color-mix(in srgb, var(--l-work) 60%, var(--ink));
  --tag-fix: color-mix(in srgb, var(--l-stray) 75%, var(--ink));
  --tag-prv: color-mix(in srgb, var(--l-wait) 80%, var(--ink));
  --f-text: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Apple SD Gothic Neo",
    sans-serif;
  --f-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
    "Apple SD Gothic Neo", sans-serif;
  --f-mono: "opsty Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 22px;
  --measure: 68ch;
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1280px;
  --nav-h: 48px;
  /* The Daylight desktop: sky, sand and sage (prototype B). */
  --sky: radial-gradient(38% 46% at 82% 12%, rgb(255 246 222 / 0.95), transparent 70%),
    radial-gradient(120% 60% at 30% 118%, #a9c3b4 0 34%, transparent 35%),
    radial-gradient(90% 50% at 92% 112%, #c5d4c2 0 36%, transparent 37%),
    radial-gradient(140% 70% at 60% 128%, #8fae9f 0 40%, transparent 41%),
    linear-gradient(180deg, #a8cbe0 0%, #c9dde8 38%, #e9e4d8 78%, #efe2cf 100%);
  /* A quieter wallpaper for the windows further down: the same light. */
  --wall: radial-gradient(60% 70% at 85% 10%, rgb(255 246 222 / 0.8), transparent 70%),
    linear-gradient(165deg, #b4d0e1 0%, #cfdfe7 45%, #e7e2d6 100%);
  --glass: rgb(250 251 252 / 0.62);
  --glass-strong: rgb(250 251 252 / 0.86);
  --hair: rgb(0 0 0 / 0.1);
  --shadow-win: 0 0 0 0.5px rgb(0 0 0 / 0.38), inset 0 0.5px 0 rgb(255 255 255 / 0.25),
    0 30px 80px -24px rgb(16 30 46 / 0.45), 0 8px 24px -10px rgb(16 30 46 / 0.3);
  --menubar: rgb(255 255 255 / 0.38);
  --menubar-ink: #1b222b;
  --banner: rgb(246 247 249 / 0.78);
  --banner-edge: 0 0 0 0.5px rgb(0 0 0 / 0.14), inset 0 0.5px 0 rgb(255 255 255 / 0.7),
    0 18px 44px -16px rgb(0 0 0 / 0.38);
  --chip: rgb(0 0 0 / 0.07);
  --dock: rgb(255 255 255 / 0.32);
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  /* Wordmark C: the icon's own colours (build/icon.svg, site/favicon.svg). */
  --wm-tile: #101416;
  --wm-lamp: #5fd7d7;
  --wm-cursor: #d0d0d0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0e13;
    --bg-2: #10151b;
    --surface: #131920;
    --ink: #e9edf2;
    --ink-2: #b4bdc9;
    --ink-3: #8a94a2;
    --line: #252c36;
    --accent: #5cd6cb;
    --on-accent: #062320;
    --accent-ink: #5cd6cb;
    --l-ok: #5ccf8b;
    --l-work: #5cd6cb;
    --l-wait: #b79cff;
    --l-bad: #ff6f78;
    --l-stray: #f0b955;
    --l-off: #5d6876;
    --tag-new: var(--l-work);
    --tag-fix: var(--l-stray);
    --tag-prv: var(--l-wait);
    --sky: radial-gradient(30% 36% at 80% 14%, rgb(160 205 230 / 0.28), transparent 70%),
      radial-gradient(120% 60% at 30% 118%, #14262a 0 34%, transparent 35%),
      radial-gradient(90% 50% at 92% 112%, #182b2e 0 36%, transparent 37%),
      radial-gradient(140% 70% at 60% 128%, #0f1f22 0 40%, transparent 41%),
      linear-gradient(180deg, #0b1522 0%, #10202e 45%, #1a2a33 80%, #1d2b30 100%);
    --wall: radial-gradient(60% 70% at 85% 10%, rgb(160 205 230 / 0.2), transparent 70%),
      linear-gradient(165deg, #0d1a27 0%, #13222d 50%, #1b2a2f 100%);
    --glass: rgb(26 31 38 / 0.6);
    --glass-strong: rgb(30 35 42 / 0.88);
    --hair: rgb(255 255 255 / 0.12);
    --shadow-win: 0 0 0 0.5px rgb(0 0 0 / 0.6), inset 0 0.5px 0 rgb(255 255 255 / 0.12),
      0 30px 80px -24px rgb(0 0 0 / 0.75), 0 8px 24px -10px rgb(0 0 0 / 0.6);
    --menubar: rgb(12 18 26 / 0.45);
    --menubar-ink: #e8edf2;
    --banner: rgb(40 44 52 / 0.78);
    --banner-edge: 0 0 0 0.5px rgb(255 255 255 / 0.12), inset 0 0.5px 0 rgb(255 255 255 / 0.12),
      0 18px 44px -16px rgb(0 0 0 / 0.7);
    --chip: rgb(255 255 255 / 0.12);
    --dock: rgb(20 26 34 / 0.45);
    /* A step lighter than the page, so the tile still reads as a tile. */
    --wm-tile: #1d232c;
  }
}

/* ── base ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
svg {
  max-width: 100%;
}
a {
  color: var(--accent-ink);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3 {
  font-family: var(--f-display);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
h2 {
  font-size: clamp(30px, 3.4vw, 46px);
}
h3 {
  font-size: clamp(21px, 1.9vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.18;
}
p {
  margin: 0;
  text-wrap: pretty;
}
code,
kbd,
pre,
samp {
  font-family: var(--f-mono);
}
code {
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
kbd {
  display: inline-block;
  padding: 0 0.42em;
  border-radius: var(--r-1);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -1.5px 0 var(--line);
  color: var(--ink);
  font-size: 0.82em;
  line-height: 1.55;
  white-space: nowrap;
}
/* A label the app prints, quoted exactly (drift-check.mjs checks each one
   against src/). The quote marks go; the weight says it is a label. */
q.ui {
  quotes: none;
  font-weight: 500;
}
q.ui::before,
q.ui::after {
  content: none;
}
/* Words that belong to another program (macOS, Claude Code) keep their marks. */
q.out {
  font-style: normal;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--r-2);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 8px;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.small {
  font-size: 15px;
  color: var(--ink-2);
}
.nowrap {
  white-space: nowrap;
}

/* ── lamps: the app's signal language, drawn for the site ────────────── */
/* ok = a steady dot, work = a turning ring, wait = a violet pulse,
   bad = a cross, stray = amber (a server no tab owns). Never colour alone. */
.lp {
  position: relative;
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  vertical-align: -1px;
}
.lp.ok {
  background: var(--l-ok);
}
.lp.stray {
  background: var(--l-stray);
}
.lp.wait {
  background: var(--l-wait);
  animation: lp-pulse 1.8s ease-out infinite;
}
.lp.work {
  border: 2px solid color-mix(in srgb, var(--l-work) 28%, transparent);
  border-top-color: var(--l-work);
  border-right-color: var(--l-work);
  animation: lp-spin 1.1s linear infinite;
}
.lp.bad::before,
.lp.bad::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2.4px;
  border-radius: 2px;
  background: var(--l-bad);
  transform: translate(-50%, -50%) rotate(45deg);
}
.lp.bad::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@keyframes lp-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--l-wait) 55%, transparent);
  }
  80%,
  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}
@keyframes lp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── the nav: the tab strip (C), one row at every width ──────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--line) 80%, transparent);
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 calc(var(--gutter) - 10px);
}
/* The wordmark, C (2026-10-18, review "Ready to Show"): the app icon's tile,
   the lamp and the cursor, then a plain "Opsty". It was ●psty, a lamp
   standing in for a lowercase o; the name has a capital now, and no glyph has
   to pass for a letter. The same mark is the Dock icon, the favicon and the
   menu bar's. Its colours are the --wm-* tokens above. */
.wm {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  margin-right: 14px;
  padding: 4px 6px;
  color: var(--ink);
  font: 700 21px/1 var(--f-mono);
  letter-spacing: -0.06em;
  text-decoration: none;
}
.wm__mark {
  width: 1.08em;
  height: 1.08em;
  flex: none;
}
.wm__tile {
  fill: var(--wm-tile);
}
.wm__halo {
  fill: var(--wm-lamp);
  fill-opacity: 0.16;
}
.wm__lamp {
  fill: var(--wm-lamp);
}
.wm__cursor {
  fill: var(--wm-cursor);
}
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.tab[aria-current="page"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--hair);
}
.tab .lamp {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--l-off);
}
.tab[aria-current="page"] .lamp {
  background: var(--l-ok);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--l-ok) 22%, transparent);
}
.tab__sub {
  color: var(--ink-3);
  font: 12px var(--f-mono);
}
.nav__menu {
  display: none;
  position: relative;
}
.nav__menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14.5px;
  list-style: none;
  cursor: pointer;
}
.nav__menu > summary::-webkit-details-marker {
  display: none;
}
.nav__menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.nav__menu[open] > summary {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.nav__menu nav {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  display: grid;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgb(0 0 0 / 0.35);
}
.nav__menu .tab {
  height: 40px;
  font-size: 16px;
}
.nav__dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-left: auto;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__dl:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
}
@media (max-width: 640px) {
  .nav__in > .tabs {
    display: none;
  }
  .nav__menu {
    display: block;
  }
  .wm {
    margin-right: 4px;
  }
}
/* A page carrying the strip without the phone menu still fits one row: the
   tabs scroll inside the bar instead of pushing the page sideways. */
@media (max-width: 640px) {
  .nav__in:not(:has(.nav__menu)) > .tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* ── the footer ──────────────────────────────────────────────────────── */
.foot {
  margin-top: 0;
  padding: 48px 0 56px;
  background: var(--bg);
  box-shadow: inset 0 1px 0 var(--line);
  color: var(--ink-2);
  font-size: 15px;
}
.foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: start;
}
.foot__id {
  display: grid;
  gap: 10px;
  max-width: 46ch;
}
.foot__id .wm {
  justify-self: start;
  margin: 0 0 4px -6px;
  font-size: 19px;
}
.foot__say {
  color: var(--ink-3);
  font: 13px var(--f-mono);
  letter-spacing: 0;
  margin-left: 10px;
  white-space: nowrap;
}
.foot__links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot a {
  color: var(--ink);
  text-decoration: none;
}
.foot a:hover {
  text-decoration: underline;
}
.foot__duck a {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .foot__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── buttons ─────────────────────────────────────────────────────────── */
/* The download button is the file: the version, size and chip under it. */
.dlbtn {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 20px 10px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5);
}
.dlbtn b {
  font-size: 16.5px;
  font-weight: 650;
}
.dlbtn small {
  font: 12px var(--f-mono);
  opacity: 0.78;
}
.dlbtn:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--accent));
}
.btn2 {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 13px;
  background: var(--glass);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 0.5px var(--hair);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.btn2:hover {
  background: var(--glass-strong);
}
.copy {
  flex: none;
  appearance: none;
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.copy:hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}
.cmdline {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r-2);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.cmdline code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 14.5px;
  overflow-wrap: normal;
}

/* ── the window frame around a scene ─────────────────────────────────── */
/* A scene is drawn at its own size (--sw × --sh) and scaled to the frame's
   width by site.js (--k). Without script, --k stays at a guess per width. */
.win {
  margin: 0;
  min-width: 0;
}
.win__frame {
  --k: 0.62;
  position: relative;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--wall);
  box-shadow: var(--shadow-win);
  isolation: isolate;
}
/* Before `npm run scenes` fills a marker, the frame keeps a window's shape. */
.win__frame:not(:has(.scene, .opsty)) {
  width: 100%;
  aspect-ratio: 16 / 10;
}
.win[data-size="md"] {
  max-width: 760px;
}
.win[data-size="sm"] {
  max-width: 560px;
}
.win__lights {
  position: absolute;
  z-index: 3;
  left: calc(13px * var(--k));
  top: calc(12px * var(--k));
  width: 52px;
  height: 12px;
  transform: scale(var(--k));
  transform-origin: 0 0;
  background: radial-gradient(circle at 6px 6px, #ff5f57 5.6px, transparent 6.2px),
    radial-gradient(circle at 26px 6px, #febc2e 5.6px, transparent 6.2px),
    radial-gradient(circle at 46px 6px, #28c840 5.6px, transparent 6.2px);
  pointer-events: none;
}
.scene {
  --k: 0.62;
  position: relative;
  width: calc(var(--sw) * var(--k));
  height: calc(var(--sh) * var(--k));
  max-width: 100%;
  overflow: hidden;
}
.scene > .opsty {
  width: var(--sw);
  height: var(--sh);
  transform: scale(var(--k));
  transform-origin: 0 0;
}
.scene__step[hidden] {
  display: none !important;
}
.win figcaption {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .win__frame,
  .scene {
    --k: 0.5;
  }
}
@media (max-width: 640px) {
  .win__frame,
  .scene {
    --k: 0.37;
  }
}

/* ── sections ────────────────────────────────────────────────────────── */
.sec {
  padding: clamp(56px, 6vw, 84px) 0;
}
.sec--band {
  background: var(--bg-2);
}
.sec__head {
  display: grid;
  gap: 16px;
  max-width: 40em;
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
.sec__head p {
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 19px);
}
.after {
  max-width: var(--measure);
  margin-top: 28px;
  color: var(--ink-2);
}

/* ══ 1 · the hero: a Mac desktop in daylight ═════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  isolation: isolate;
}
/* The macOS menu bar: the frontmost app is your editor, and opsty's lamp sits
   in the tray (build/tray/*.svg). Drawn by the site; it has no meaning a
   caption does not give, so it is hidden from assistive tech. */
.mb {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 28px;
  padding: 0 18px;
  background: var(--menubar);
  color: var(--menubar-ink);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.mb b {
  font-weight: 700;
}
.mb__sp {
  flex: 1;
}
.mb__tray {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mb svg {
  display: block;
}
.mb__lamp svg {
  width: 25px;
  height: 17px;
}
/* opsty's mark in the menu bar from 0.6.0 (B5, review "Nothing Cut Off"):
   the lamp and the cursor of build/tray/*.svg, on their 26 × 18 canvas. The
   lamp turns while something works; on your turn it is lit and the cursor
   blinks, 530 ms on and off, and stops after about ten seconds, as
   main/tray.ts does. Reduce Motion stops both (the rule at the end). */
.mb__lamp .ring {
  transform-origin: 7px 8.5px;
  animation: lp-spin 1.1s linear infinite;
}
.hero[data-state="wait"] .mb__lamp .cur {
  animation: mb-blink 1.06s steps(1, end) 10;
}
@keyframes mb-blink {
  50% {
    opacity: 0;
  }
}
/* The hero is one state machine, .hero[data-state]: work → wait (the banner
   in, the Dock counts 1, the lamp lit) → done (answered from the banner),
   or open (Open Tab brought subtank to the front). site.js only sets the
   state and the scene's step; everything that follows it is here. From 0.6.0
   the menu-bar lamp is lit only while the call is unseen (G2): once subtank
   is in front, or answered, the mark turns again for saju's agent. */
.mb__lamp .fill,
.hero [data-when] {
  display: none;
}
.hero[data-state="wait"] .mb__lamp .fill {
  display: inline;
}
.hero[data-state="wait"] .mb__lamp .ring {
  display: none;
}
.hero[data-state="work"] [data-when~="work"],
.hero[data-state="wait"] [data-when~="wait"],
.hero[data-state="open"] [data-when~="open"],
.hero[data-state="done"] [data-when~="done"] {
  display: inline-flex;
}
.mb__clock {
  font-variant-numeric: tabular-nums;
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 76px var(--gutter) 128px;
}
.hero__copy {
  position: relative;
  z-index: 4;
  padding-top: 16px;
}
.kick {
  min-height: 24px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
}
.kick > span {
  align-items: center;
  gap: 10px;
}
.hero h1 {
  margin-top: 16px;
  font-size: clamp(40px, 4.3vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.hero__lede {
  margin-top: 20px;
  max-width: 30em;
  color: var(--ink-2);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.5;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.hero__facts {
  margin-top: 16px;
  color: var(--ink-2);
  font: 13px var(--f-mono);
}
.hero__warn {
  margin-top: 14px;
  max-width: 34em;
  padding: 10px 14px;
  border-radius: var(--r-2);
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 0.5px var(--hair);
  color: var(--ink);
  font-size: 14.5px;
}
.hero__about {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 30px;
  max-width: 34em;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.replay {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 0 0 0.5px var(--hair);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.replay:hover {
  background: var(--glass-strong);
}
.hero__stage {
  position: relative;
  z-index: 2;
  align-self: start;
  margin-top: 40px;
  margin-right: calc(-0.4 * var(--gutter));
}
.hero__win {
  position: relative;
  z-index: 2;
  transition: filter 500ms ease;
}
.hero__win .win__frame {
  background: transparent;
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
}
.hero[data-state="open"] .hero__win {
  z-index: 4;
}
/* The editor you are writing in: site-drawn, in front of opsty. */
.editor {
  position: absolute;
  z-index: 3;
  right: -28px;
  bottom: -84px;
  width: min(390px, 58%);
  overflow: hidden;
  border-radius: 12px;
  background: var(--glass-strong);
  box-shadow: var(--shadow-win);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
  backdrop-filter: blur(36px) saturate(1.7);
  color: var(--ink-2);
}
.editor__tt {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0.5px solid var(--hair);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}
.editor__tt::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 11px;
  width: 52px;
  height: 12px;
  background: radial-gradient(circle at 6px 6px, #c9ccd1 5.6px, transparent 6.2px),
    radial-gradient(circle at 26px 6px, #c9ccd1 5.6px, transparent 6.2px),
    radial-gradient(circle at 46px 6px, #c9ccd1 5.6px, transparent 6.2px);
}
.editor__doc {
  padding: 16px 22px 20px;
  font-size: 13px;
  line-height: 1.65;
}
.editor__doc b {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font: 700 17px/1.3 var(--f-display);
}
.editor__doc p + p {
  margin-top: 8px;
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 15px;
  margin-left: 1px;
  background: var(--accent);
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* The banner: macOS's notification, drawn by the site. Its buttons are real:
   Yes is Claude's own first option, Open Tab is opsty's. */
.banner {
  position: absolute;
  z-index: 8;
  top: 40px;
  right: 18px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 440px;
  max-width: calc(100% - 32px);
  padding: 12px 12px 12px 14px;
  border-radius: var(--r-4);
  background: var(--banner);
  box-shadow: var(--banner-edge);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  transform: translateX(calc(100% + 40px));
  transition: transform 620ms var(--ease), visibility 0s linear 620ms;
  visibility: hidden;
}
.hero[data-state="wait"] .banner {
  transform: none;
  visibility: visible;
  transition: transform 620ms var(--ease), visibility 0s;
}
.banner__ic svg {
  display: block;
  width: 38px;
  height: 38px;
}
.banner__tx {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.32;
}
.banner__app {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1px;
  color: var(--ink-2);
  font-size: 11.5px;
}
.banner__tx b {
  display: block;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner__body {
  display: block;
  color: var(--ink-2);
}
.banner__acts {
  display: grid;
  gap: 5px;
}
.banner__acts button {
  appearance: none;
  padding: 5px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--chip);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.banner__acts .yes {
  background: var(--accent);
  color: var(--on-accent);
}
.banner__acts button:hover {
  filter: brightness(1.06);
}
.dock {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 12px;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-4);
  background: var(--dock);
  box-shadow: 0 0 0 0.5px var(--hair), inset 0 0.5px 0 rgb(255 255 255 / 0.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  transform: translateX(-50%);
}
.dock i {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
}
.dock svg {
  display: block;
  width: 46px;
  height: 46px;
}
.dock .run::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.dock__badge {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e5342b;
  color: #fff;
  font: 700 12px/20px var(--f-text);
  text-align: center;
  transform: scale(0);
  transition: transform 300ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.hero[data-state="wait"] .dock__badge {
  transform: scale(1);
}
.pointer {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  width: 18px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.45));
  transition: transform 760ms cubic-bezier(0.45, 0, 0.2, 1), opacity 300ms;
}
.pointer.is-on {
  opacity: 1;
}
.pointer.is-click::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(255 255 255 / 0.95);
  border-radius: 50%;
  animation: click 480ms ease-out both;
}
@keyframes click {
  from {
    opacity: 1;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
@media (max-width: 1180px) {
  .hero__in {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  }
  .editor {
    right: -12px;
    width: min(330px, 56%);
  }
}
/* Tablet: the copy on top, the desktop under it, the banner between. */
@media (max-width: 1023px) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 56px;
    padding-bottom: 150px;
  }
  .hero__copy {
    max-width: 36em;
  }
  .hero .banner {
    position: relative;
    top: auto;
    right: auto;
    justify-self: end;
    transform: none;
    visibility: visible;
  }
  .hero__stage {
    margin: 0;
  }
  .editor {
    bottom: -96px;
  }
  .hero[data-state="done"] .banner,
  .hero[data-state="open"] .banner {
    opacity: 0.6;
  }
}
/* Phone: no desktop. The banner alone, above the headline. */
@media (max-width: 640px) {
  .mb,
  .hero__stage,
  .dock,
  .pointer,
  .hero__about {
    display: none;
  }
  .hero__in {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 22px;
    padding-bottom: 48px;
  }
  .hero .banner {
    order: -1;
    justify-self: auto;
    width: auto;
    max-width: none;
    grid-template-columns: 34px minmax(0, 1fr);
    border-radius: 18px;
  }
  .hero .banner__ic svg {
    width: 34px;
    height: 34px;
  }
  .hero .banner__acts {
    grid-column: 2;
    display: flex;
    gap: 8px;
  }
  .hero .banner__tx b {
    white-space: normal;
  }
  .hero__copy {
    padding-top: 0;
  }
  .hero h1 {
    margin-top: 12px;
  }
  .hero__cta .dlbtn {
    flex: 1 1 100%;
    align-items: center;
    text-align: center;
  }
  .hero__cta .btn2 {
    flex: 1 1 100%;
    justify-content: center;
  }
  .hero__about {
    margin-top: 20px;
  }
}

/* ══ 2 · the day ═════════════════════════════════════════════════════════ */
.day__grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}
.day__aside {
  grid-column: 2;
  grid-row: 1;
}
.day__win {
  position: sticky;
  top: max(calc(var(--nav-h) + 24px), calc(50vh - 210px));
}
.day__stops {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(240px, 33vh, 300px);
  padding: 20px 0;
}
.stop__t {
  display: block;
  color: var(--ink-3);
  font: 700 clamp(58px, 6.4vw, 92px)/0.9 var(--f-mono);
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}
.stop.is-now .stop__t {
  color: var(--ink);
}
.stop__when {
  display: block;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 15px;
}
.stop h3 {
  margin-top: 18px;
}
.stop p {
  margin-top: 10px;
  color: var(--ink-2);
}
@media (max-width: 860px) {
  .day__grid {
    display: block;
  }
  .day__aside {
    position: sticky;
    top: var(--nav-h);
    z-index: 3;
    margin: 0 calc(-1 * var(--gutter));
    padding: 12px var(--gutter) 14px;
    background: linear-gradient(var(--bg) 88%, transparent);
  }
  .day__win {
    position: static;
    max-width: 520px;
  }
  .day__win figcaption {
    display: none;
  }
  .stop {
    min-height: 48vh;
    justify-content: flex-start;
    padding-top: 28px;
  }
  .stop__t {
    font-size: 48px;
  }
}

/* ══ 0.5.0 · what is new, said once in the hero and once at its section ═ */
.hero__new {
  margin-top: 14px;
  font-size: 14.5px;
}
.hero__new a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--ink-2);
  text-decoration: none;
}
.hero__new a:hover .hero__new-t {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sec__new {
  margin-bottom: -4px;
}
.sec__new .tag {
  text-decoration: none;
}

/* ══ 3, 4 · the tabbed players ══════════════════════════════════════════ */
.player__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 22px;
}
.player__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.player__tabs [role="tab"] {
  appearance: none;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
}
.player__tabs [role="tab"]:hover {
  color: var(--ink);
}
.player__tabs [role="tab"][aria-selected="true"] {
  background: var(--ink);
  box-shadow: none;
  color: var(--bg);
}
.player__pause {
  appearance: none;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  cursor: pointer;
}
.player__pause:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.player__body {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.player--flip .player__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
}
.player--flip .player__text {
  order: 2;
}
.panel {
  padding-top: 6px;
}
.panel__k {
  color: var(--ink-3);
  font: 13px var(--f-mono);
}
.panel h3 {
  margin-top: 10px;
}
.panel p:not([class]) {
  margin-top: 12px;
  color: var(--ink-2);
}
.panel__src {
  margin-top: 16px;
  color: var(--ink-3);
  font: 13px/1.5 var(--f-mono);
}
@media (max-width: 860px) {
  .player__body,
  .player--flip .player__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .player__text,
  .player--flip .player__text {
    order: 2;
  }
}

/* ══ 5 · themes ═══════════════════════════════════════════════════════════ */
.themes__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.themes__side .sec__head {
  margin-bottom: 24px;
}
.swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.themes__more {
  margin-top: 18px;
}
@media (max-width: 960px) {
  .themes__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sw {
  appearance: none;
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 8px 8px 10px;
  border: 0;
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.sw:hover {
  color: var(--ink);
}
.sw[aria-pressed="true"] {
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
/* A tiny window in that theme: its ground, a line of its text, its lamp. */
.sw__chip {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 7px;
  background: linear-gradient(var(--t) 0 0) 22px 15px / 46% 2px no-repeat,
    linear-gradient(color-mix(in srgb, var(--t) 45%, var(--g)) 0 0) 22px 23px / 30% 2px no-repeat, var(--g);
  box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.25);
}
.sw__chip::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a);
}
@media (max-width: 900px) {
  .swatches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ══ 6 · what leaves your Mac ═════════════════════════════════════════════ */
.leave {
  margin: 0;
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.leave svg {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}
.leave text {
  fill: var(--ink);
  font-family: var(--f-text);
}
.leave .m {
  font-family: var(--f-mono);
}
.leave .dim {
  fill: var(--ink-2);
}
.leave .box {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.2;
}
.leave .go {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.leave .dest {
  fill: color-mix(in srgb, var(--accent) 10%, transparent);
  stroke: var(--accent);
  stroke-opacity: 0.55;
}
.leave .no {
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 1.6;
  stroke-dasharray: 4 5;
}
.leave .x {
  stroke: var(--l-bad);
  stroke-width: 2.2;
}
.leave__tall {
  display: none !important;
}
@media (max-width: 700px) {
  .leave__wide {
    display: none !important;
  }
  .leave__tall {
    display: block !important;
    max-width: 380px;
    margin: 0 auto;
  }
}
.never {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 48px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.never li {
  max-width: 40em;
  color: var(--ink-2);
}
.never b {
  color: var(--ink);
  font-weight: 650;
}
@media (max-width: 760px) {
  .never {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ 7 · download ═════════════════════════════════════════════════════════ */
.dl__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.dl h2 {
  font-size: clamp(36px, 4.4vw, 60px);
}
.dl__lede {
  margin-top: 14px;
  max-width: 34em;
  color: var(--ink-2);
  font-size: clamp(17px, 1.35vw, 19px);
}
.dl .dlbtn {
  margin-top: 26px;
  padding: 14px 24px 12px;
}
.dl .dlbtn b {
  font-size: 18px;
}
.dl__mine {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.dl__mine .lp {
  margin-right: 6px;
}
.dl .cmdline {
  margin-top: 26px;
}
.dl__how {
  margin-top: 12px;
  max-width: 40em;
}
.note {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 20px;
  max-width: 40em;
  padding: 14px 16px;
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--l-stray) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--l-stray) 35%, var(--line));
  color: var(--ink);
  font-size: 15.5px;
}
.note .lp {
  flex: none;
  transform: translateY(1px);
}
.note[hidden] {
  display: none;
}
.facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  padding-top: 2px;
  color: var(--ink-3);
  font: 13px var(--f-mono);
}
.facts dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 15.5px;
}
@media (max-width: 860px) {
  .dl__in {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .dl .dlbtn {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ══ pages: privacy, changelog, 404 ═══════════════════════════════════════ */
.page {
  padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 112px);
}
.page__head {
  display: grid;
  gap: 16px;
  max-width: 44em;
}
.page__head h1 {
  font-size: clamp(36px, 4.6vw, 60px);
}
.page__head p {
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 19px);
}
/* Direct children only: a live window inside the prose (privacy's checks)
   carries the app's own type and colours, which these must not reach. */
.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 16px;
}
.prose > h2 {
  margin-top: 56px;
  font-size: clamp(26px, 2.6vw, 34px);
}
.prose > h3 {
  margin-top: 32px;
  font-size: 21px;
}
.prose > h2 + *,
.prose > h3 + * {
  margin-top: 12px;
}
.prose > p,
.prose > ul > li,
.prose > ol > li {
  color: var(--ink-2);
}
.prose > p b,
.prose > ul b {
  color: var(--ink);
  font-weight: 650;
}
.prose > ul,
.prose > ol {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
  padding-left: 1.2em;
}
.prose > ul > li::marker {
  color: var(--ink-3);
}
.prose > pre {
  margin: 0;
  padding: 12px 16px;
  overflow-x: auto;
  border-radius: var(--r-2);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
}

/* privacy */
.priv__fig {
  margin-top: clamp(28px, 4vw, 48px);
}
.priv__body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
.toc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  font-size: 14.5px;
}
.toc h2 {
  margin-bottom: 10px;
  color: var(--ink-3);
  font: 600 13px var(--f-text);
  letter-spacing: 0;
}
.toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc a {
  display: block;
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--ink-2);
  text-decoration: none;
}
.toc a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.changed {
  display: grid;
  gap: 10px;
  max-width: var(--measure);
  padding: 18px 20px;
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--line));
  color: var(--ink-2);
  font-size: 15.5px;
}
.changed > b {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
}
.changed .small {
  font-size: 14px;
}
@media (max-width: 900px) {
  .priv__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .toc {
    position: static;
  }
  .toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A window that is the page's own content (the privacy checks, the 404): the
   app's Lens classes, readable at their natural size, never scaled down. */
.livewin {
  margin: 32px 0;
}
.livewin .win__frame {
  --k: 1;
  width: auto;
}
/* The app's chrome sizes are made for a desktop window at arm's length; on a
   page whose content this is, they step up. Every rule that reaches inside a
   live .opsty starts with `html`: opsty.css loads after this sheet, resets
   each element under .opsty (`all: revert`) and styles the Lens classes at
   the same specificity, so without the extra element these would lose. */
html .opsty.opsty--live {
  --size-chrome: 14px;
  --size-chrome-sm: 13px;
  --size-meta: 12.5px;
  --size-grid: 13.5px;
}
html .opsty--live .lens__title {
  margin: 0;
  font-size: 15.5px;
}
.opsty.opsty--live {
  position: relative;
  container-type: inline-size;
  contain: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--grid-bg, #0f1217);
  color: var(--text, #e4e8ee);
}
html .opsty--live .live__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: var(--chrome-bg, rgb(15 18 23 / 0.5));
  border-bottom: 0.5px solid var(--stroke, rgb(255 255 255 / 0.1));
  color: var(--text-dim, #9aa3b1);
  font: 600 12px var(--font-ui, var(--f-text));
}
html .opsty--live .live__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 16px 18px 22px 24px;
}
@media (max-width: 640px) {
  html .opsty--live .live__grid {
    padding: 14px 12px 16px;
  }
}
html .opsty--live .term {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html .opsty--live .lens {
  position: relative;
  max-width: 560px;
  margin-top: 4px;
}
html .opsty--live .lens__tether {
  left: 20px;
}
html .opsty--live a {
  color: var(--accent, #5cd6cb);
}
html .opsty--live a.cap {
  text-decoration: none;
  cursor: pointer;
}
html .opsty--live .lens__title {
  margin: 0;
}
html .opsty--live .lens kbd {
  font-family: var(--font-grid, var(--f-mono));
}
html .opsty--live .lens__body,
html .opsty--live .lens__row-sub,
html .opsty--live .lens__src {
  white-space: normal;
}
html .opsty--live .check__rows {
  display: grid;
  gap: 14px;
  margin: 10px 0 4px;
}
html .opsty--live .check__row {
  display: grid;
  gap: 8px;
}
html .opsty--live .check__row p {
  margin: 0;
}
html .opsty--live .check__cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
html .opsty--live .check__cmd code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  overflow-wrap: normal;
  font-family: var(--font-grid, var(--f-mono));
  font-size: 12.5px;
}
html .opsty--live .check__out {
  color: var(--text-dim, #9aa3b1);
  font-family: var(--font-grid, var(--f-mono));
  font-size: 12px;
}

/* changelog */
.log {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.rel {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: 0;
  padding: clamp(36px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--line);
}
.rel > header {
  grid-column: 1;
  grid-row: 1 / span 999;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: grid;
  gap: 6px;
}
.rel > :not(header) {
  grid-column: 2;
  max-width: var(--measure);
  margin: 0;
}
.rel > header h2 {
  display: grid;
  gap: 8px;
  font-size: inherit;
  letter-spacing: 0;
}
.rel__v {
  font: 700 clamp(34px, 3.4vw, 46px)/1 var(--f-mono);
  letter-spacing: -0.05em;
}
.rel__name {
  color: var(--ink);
  font: 650 16px/1.3 var(--f-text);
  letter-spacing: 0;
}
.rel time,
.rel__req {
  color: var(--ink-3);
  font: 13px var(--f-mono);
}
.rel > p {
  color: var(--ink-2);
  font-size: 18px;
}
.rel h3 {
  margin-top: 26px;
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-2);
  font: 600 12px var(--f-mono);
  letter-spacing: 0;
}
.tag.new {
  background: color-mix(in srgb, var(--l-work) 15%, transparent);
  color: var(--tag-new);
}
.tag.fix {
  background: color-mix(in srgb, var(--l-stray) 16%, transparent);
  color: var(--tag-fix);
}
.tag.prv {
  background: color-mix(in srgb, var(--l-wait) 15%, transparent);
  color: var(--tag-prv);
}
.items {
  display: grid;
  gap: 14px;
  margin-top: 12px !important;
  padding: 0;
  list-style: none;
}
.items li {
  display: grid;
  gap: 2px;
  color: var(--ink-2);
}
.items li b {
  color: var(--ink);
  font-weight: 650;
}
.rel > p:last-child {
  margin-top: 24px;
  font-size: 15.5px;
}
/* The 0.4.0 row's picture: the banner, answered. Site-drawn, decorative. */
.thumb {
  position: relative;
  height: 128px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--sky);
  box-shadow: inset 0 0 0 1px var(--line);
}
.thumb .banner {
  top: 14px;
  right: 12px;
  left: 12px;
  width: auto;
  max-width: none;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
  border-radius: 14px;
  transform: none;
  visibility: visible;
  transition: none;
}
.thumb .banner__ic svg {
  width: 26px;
  height: 26px;
}
.thumb .banner__tx {
  font-size: 11px;
}
.thumb .banner__app {
  font-size: 10px;
}
.thumb .banner__acts {
  grid-column: 2;
  display: flex;
  gap: 6px;
}
.thumb .banner__acts span {
  padding: 2px 9px;
  border-radius: 7px;
  background: var(--chip);
  font-size: 11px;
  font-weight: 600;
}
.thumb .banner__acts .yes {
  background: var(--accent);
  color: var(--on-accent);
}
/* The 0.5.0 row's picture: a tab torn off into a window of its own, its
   lamp still asking. Site-drawn, decorative. */
.thumb .wins {
  position: absolute;
  inset: 0;
}
.thumb .wins__w {
  position: absolute;
  top: 16px;
  left: 14px;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 62%;
  height: 84px;
  padding: 7px 8px 0 40px;
  border-radius: 9px;
  background: var(--glass-strong);
  box-shadow: 0 0 0 0.5px var(--hair), 0 10px 24px -14px rgb(16 30 46 / 0.45);
}
.thumb .wins__w::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 9px;
  width: 22px;
  height: 6px;
  background: radial-gradient(circle at 3px 3px, #ff5f57 2.6px, transparent 3px),
    radial-gradient(circle at 11px 3px, #febc2e 2.6px, transparent 3px),
    radial-gradient(circle at 19px 3px, #28c840 2.6px, transparent 3px);
}
.thumb .wins__w--b {
  top: 40px;
  right: 12px;
  left: auto;
  width: 44%;
  height: 76px;
  transform: rotate(-2deg);
}
.thumb .wins__t {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 17px;
  padding: 0 7px;
  border-radius: 5px;
  color: var(--ink-2);
  font: 600 10.5px var(--f-text);
  white-space: nowrap;
}
.thumb .wins__t--on {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.thumb .wins__l {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l-ok);
}
.thumb .wins__l--work {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--l-work);
}
.thumb .wins__l--wait {
  background: var(--l-wait);
}
/* 0.6.0's row: opsty's mark lit in a menu bar (B5), and the Glance under it. */
.thumb .mbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  height: 22px;
  padding: 0 12px;
  background: var(--menubar);
  color: var(--menubar-ink);
  font: 600 10.5px var(--f-text);
}
.thumb .mbar__mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.thumb .mbar__mark svg {
  width: 21px;
  height: 15px;
}
.thumb .gl {
  position: absolute;
  top: 30px;
  right: 10px;
  display: grid;
  gap: 3px;
  width: 72%;
  padding: 7px;
  border-radius: 9px;
  background: var(--glass-strong);
  box-shadow: 0 0 0 0.5px var(--hair), 0 10px 24px -14px rgb(16 30 46 / 0.45);
}
.thumb .gl__r {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 6px;
  overflow: hidden;
  border-radius: 5px;
  color: var(--ink-2);
  font: 600 10.5px var(--f-text);
  white-space: nowrap;
}
.thumb .gl__r:first-child {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.thumb .gl__x {
  flex: none;
  width: 7px;
  height: 7px;
  background: linear-gradient(45deg, transparent 40%, var(--l-bad) 40% 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--l-bad) 40% 60%, transparent 60%);
}
.thumb .gl .wins__l {
  flex: none;
}
/* 0.7.0's row: the grey text is Tab's (T1, T2). A prompt with the grey rest
   of an earlier command and its tab keycap, then the same line once Tab took
   it. Site-drawn, decorative. */
.thumb .gh {
  position: absolute;
  top: 22px;
  right: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--glass-strong);
  box-shadow: 0 0 0 0.5px var(--hair), 0 10px 24px -14px rgb(16 30 46 / 0.45);
  color: var(--ink);
  font: 500 11px var(--f-mono);
  white-space: pre;
}
.thumb .gh--b {
  top: 70px;
}
.thumb .gh__p {
  flex: none;
  margin-right: 0.6em;
  color: var(--accent-ink);
}
.thumb .gh__c {
  flex: none;
  width: 1.5px;
  height: 13px;
  background: var(--ink);
}
.thumb .gh__g {
  overflow: hidden;
  color: var(--ink-3);
  text-overflow: ellipsis;
}
.thumb .gh__k {
  flex: none;
  margin-left: 8px;
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
  font: 600 9.5px var(--f-text);
}
@media (max-width: 860px) {
  .rel {
    grid-template-columns: minmax(0, 1fr);
  }
  .rel > header {
    position: static;
    grid-row: auto;
    margin-bottom: 20px;
  }
  .rel > :not(header) {
    grid-column: 1;
  }
  .thumb {
    max-width: 380px;
  }
}

/* 404 */
.lost {
  padding: clamp(40px, 6vw, 88px) 0 clamp(72px, 8vw, 112px);
}
.lost .livewin {
  max-width: 760px;
  margin: 0;
}
.lost__more {
  margin-top: 28px;
  color: var(--ink-2);
}

/* ── motion, transparency, scripting ─────────────────────────────────── */
/* ══ 4b · Room to move: two windows on one desk (0.5.0) ═══════════════ */
/* The first window is the scene that follows the player's steps; the second
   (scene room-b, doclife torn off into a window of its own) shows only at
   the first step. It comes out of the first window's strip, where doclife's
   tab is in every other step, and settles over the lower right corner, as a
   window dropped on the desktop would. site.js keeps data-at on the player. */
.desk {
  position: relative;
  margin: 0 0 clamp(36px, 7%, 64px);
  min-width: 0;
}
.desk__a {
  transform-origin: 0 0;
  transition: transform 0.5s var(--ease);
}
.desk__b {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: calc(-1 * clamp(36px, 7%, 64px));
  width: 60%;
  transform-origin: 8% 0;
  transition:
    transform 0.6s var(--ease),
    opacity 0.3s ease,
    visibility 0s linear 0s;
}
.player:not([data-at="windows"]) .desk__b {
  visibility: hidden;
  opacity: 0;
  transform: translate(-62%, -150%) scale(0.32);
  transition:
    transform 0.4s var(--ease),
    opacity 0.25s ease,
    visibility 0s linear 0.4s;
}
.player[data-at="windows"] .desk__a {
  transform: scale(0.92);
}
@media (max-width: 860px) {
  .desk__b {
    width: 64%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mb,
  .banner,
  .editor,
  .dock,
  .btn2,
  .replay,
  .hero__warn,
  .win__frame,
  .hero__win .win__frame {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mb {
    background: var(--bg-2);
  }
  .banner,
  .editor,
  .btn2,
  .replay,
  .hero__warn,
  .dock {
    background: var(--surface);
  }
  .hero__win .win__frame {
    background: var(--surface);
  }
}
/* Without script nothing plays, so each player shows the moment that carries
   its meaning: the banner in, and every tab's words at once. */
@media (scripting: none) {
  .hero .banner {
    transform: none;
    visibility: visible;
  }
  .dock__badge {
    transform: scale(1);
  }
  .hero[data-state] [data-when],
  .mb__lamp .ring {
    display: none;
  }
  .hero[data-state] [data-when~="wait"] {
    display: inline-flex;
  }
  .mb__lamp .fill {
    display: inline;
  }
  .scene[data-scene="hero"] .scene__step[data-step="work"] {
    display: none !important;
  }
  .scene[data-scene="hero"] .scene__step[data-step="wait"] {
    display: block !important;
  }
  .replay,
  .player__tabs,
  .player__pause {
    display: none;
  }
  .panel[hidden] {
    display: block;
  }
  .panel + .panel {
    margin-top: 28px;
  }
}