/* SPDX-License-Identifier: MIT */
/* openrail site. The tokens follow the console's theme (web/src/kit/theme.css):
   cool near-black and grey neutrals, the pink accent (hue 328), Inter for text,
   IBM Plex Serif for display headings and JetBrains Mono for code. Dark is the
   default look, as in the console; light follows the console's light theme. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-wght.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('fonts/ibm-plex-serif-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Light: the console's light theme. */
  --bg: hsl(240 14% 97%);
  --surface: #ffffff;
  --surface-2: hsl(240 14% 95%);
  --ink: hsl(250 20% 12%);
  --muted: hsl(240 6% 36%);
  --rule: hsl(240 10% 88%);
  --line: hsl(240 10% 88%);
  --band: #ffffff;
  --dot: rgb(0 0 0 / 0.12);
  /* Accent: the console's pink. The fill is a shade darker than the console's
     pink-500 so white button text passes AA (4.7:1). */
  --accent: hsl(328 64% 50%);
  --accent-hover: hsl(328 64% 42%);
  --accent-ink: #ffffff;
  --accent-text: hsl(328 64% 42%);
  --accent-soft: hsl(328 75% 94%);
  --focus: hsl(328 64% 42%);
  /* The field: the price section and the footer, a hard cut to the console's dark ground. */
  --field-bg: hsl(250 24% 9%);
  --field-ink: #f7f7f8;
  --field-muted: #a1a0ab;
  --field-surface: #1c1a28;
  --field-rule: #33323e;
  --field-focus: hsl(328 76% 66%);
  --field-accent: hsl(328 66% 52%);

  --radius: 8px;
  --radius-sm: 6px;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --step-head: clamp(1.625rem, 1.1rem + 2.4vw, 3.25rem);
  --step-display: clamp(1.875rem, 0.5rem + 5.4vw, 5rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --max: 1760px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'IBM Plex Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: hsl(250 24% 9%);
    --surface: #1c1a28;
    --surface-2: #211f2d;
    --ink: #f7f7f8;
    --muted: #a1a0ab;
    --rule: #33323e;
    --line: rgb(255 255 255 / 0.08);
    --band: hsl(250 21% 11%);
    --dot: rgb(255 255 255 / 0.10);
    --accent: hsl(328 66% 49%);
    --accent-hover: hsl(328 60% 43%);
    --accent-text: hsl(328 76% 66%);
    --accent-soft: hsl(328 40% 16%);
    --focus: hsl(328 76% 66%);
    --field-bg: hsl(250 24% 6%);
    --field-surface: #1c1a28;
    --field-rule: #33323e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: hsl(250 24% 9%);
  --surface: #1c1a28;
  --surface-2: #211f2d;
  --ink: #f7f7f8;
  --muted: #a1a0ab;
  --rule: #33323e;
  --line: rgb(255 255 255 / 0.08);
  --band: hsl(250 21% 11%);
  --dot: rgb(255 255 255 / 0.10);
  --accent: hsl(328 66% 49%);
  --accent-hover: hsl(328 60% 43%);
  --accent-text: hsl(328 76% 66%);
  --accent-soft: hsl(328 40% 16%);
  --focus: hsl(328 76% 66%);
  --field-bg: hsl(250 24% 6%);
  --field-surface: #1c1a28;
  --field-rule: #33323e;
}

/* Light and dark captures: only the one for the theme is shown (and, being lazy, loaded). */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.55;
  font-kerning: normal;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
/* Display headings in IBM Plex Serif, as the console's page titles. */
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 { font-size: var(--step-display); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: var(--step-head); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: var(--step-body); line-height: 1.3; }
p, ul, ol, dl, figure, pre { margin: 0; }
p { max-width: 62ch; text-wrap: pretty; }
a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
a:hover { text-decoration-color: var(--accent-text); text-decoration-thickness: 0.1em; }
code, pre, kbd, samp { font-family: var(--mono); font-size: 0.94em; font-variant-ligatures: none; }
code.nw { white-space: nowrap; }
:not(pre) > code { overflow-wrap: anywhere; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: var(--step-small); color: var(--muted); line-height: 1.5; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 30; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; border-radius: var(--radius-sm); }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }
.js [data-hidden] { display: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }

/* Buttons: as in the console. Flat, one fill, 6 px corners; secondary
   buttons are the surface tone with a 1 px line. */
.btn, button {
  font: inherit;
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); }
.btn:active, button:active { transform: translateY(1px); }
button { background: var(--surface); color: var(--ink); border-color: var(--line); min-height: 44px; padding: 10px 16px; }
button:hover { background: var(--surface-2); border-color: var(--rule); }

/* Header */
.top {
  display: flex; align-items: center; gap: 32px;
  max-width: var(--max); margin-inline: auto;
  padding: 16px var(--margin);
}
.brand { display: inline-flex; color: var(--ink); text-decoration: none; }
.wordmark { display: block; font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; padding: 12px 0; }
.nav { display: flex; gap: 24px; }
.nav a { text-decoration: none; font-size: var(--step-small); font-weight: 500; padding: 12px 0; color: var(--muted); transition: color var(--t-hover) ease; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tools button { background: none; border-color: transparent; font-weight: 500; padding: 10px 12px; color: var(--muted); }
.tools button:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.nav-action { font-size: var(--step-small); font-weight: 500; margin-left: 8px; padding: 9px 14px; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.nav-action:hover { background: var(--surface-2); border-color: var(--rule); }
.search-open kbd { font-size: inherit; color: var(--muted); margin-left: 4px; }
.menu-open { display: none; }

.sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); padding: 16px var(--margin) 48px; overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.sheet-nav { display: grid; gap: 4px; margin-bottom: 24px; }
.sheet-nav a { font-size: var(--step-lead); font-weight: 600; text-decoration: none; padding: 8px 0; }
.sheet-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.sheet-docs details { margin-bottom: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .sheet.opening { animation: sheet-in var(--t-ui) var(--ease-in-out); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 900px) {
  .top { gap: 16px; }
  .nav, .tools .search-open, .tools .theme-toggle { display: none; }
  .menu-open { display: inline-flex; }
}
@media (max-width: 560px) {
  .nav-action { display: none; }
  .code pre { padding-right: 16px; }
  .code .copy { position: static; display: block; margin: 0 4px 4px auto; }
  .code { padding-bottom: 1px; }
  .code .scroll-note { padding-top: 0; }
}

/* Code blocks: a console card. Surface tone, 1 px line, 8 px corners, no window chrome. */
.code { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.code pre { padding: 14px 16px; padding-right: 88px; overflow-x: auto; line-height: 1.55; font-size: var(--step-small); }
.code pre code { font-size: inherit; }
.code .tok, .cmd-inline .tok { white-space: nowrap; }
.code.cmd pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.code .copy { position: absolute; top: 5px; right: 5px; min-height: 40px; min-width: 72px; padding: 8px 12px; background: var(--surface-2); font-weight: 500; }
.code .copy:hover { background: var(--bg); }
.code .scroll-note { font-size: var(--step-small); color: var(--muted); padding: 0 16px 10px; }
.code.out .code-label { font-size: var(--step-small); color: var(--muted); padding: 10px 16px 0; }
.code.out pre { padding-right: 16px; }

/* Tables: the one place 1 px lines are allowed. */
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; text-align: left; color: var(--muted); padding-top: 8px; font-size: var(--step-small); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
thead th { background: var(--surface-2); font-weight: 600; border-bottom: 0; }
tbody th { font-weight: 600; }
.num { text-align: right; }
@media (max-width: 640px) {
  .stack-table thead { display: none; }
  .stack-table tr { display: block; border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .stack-table td, .stack-table tbody th { display: block; position: relative; border: 0; padding: 4px 0 4px calc(34% + 12px); min-height: 1.5em; }
  .stack-table td::before, .stack-table tbody th[data-label]::before { content: attr(data-label); font-weight: 600; position: absolute; left: 0; top: 4px; width: 34%; }
  .stack-table caption { display: block; }
  .stack-table code.nw { white-space: normal; overflow-wrap: anywhere; }
}

.callout { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: var(--radius); }
.callout p + p { margin-top: 8px; }

/* Screenshots: one treatment for all. A console card: surface tone, 1 px line, 8 px corners. */
.mat { background: var(--surface); border: 1px solid var(--line); padding: clamp(6px, 0.8vw, 12px); border-radius: var(--radius); }
.mat img, .mat video, .mat picture { border-radius: 4px; }
.mat img, .mat video { width: 100%; }
.mat-term { background: hsl(250 24% 6%); }
figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 12px; max-width: 72ch; }
figcaption strong { color: var(--ink); }
/* On a phone a whole console screen is too small to read, so each picture
   keeps a crop of the part that matters (set per picture with --zoom and --fx). */
@media (max-width: 720px) {
  .crop { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
  .crop picture, .crop img { position: absolute; top: 0; left: calc(var(--fx, 0%) * -1); width: var(--zoom, 150%); max-width: none; }
}

/* Loops: real recordings. The poster is the finished state under reduced motion. */
.loop { position: relative; }
.loop-video { width: 100%; background: var(--surface); }
.loop-toggle { position: absolute; right: 8px; bottom: 8px; background: var(--bg); color: var(--ink); min-height: 40px; padding: 8px 14px; }
.mat-term .loop-video { background: hsl(250 24% 6%); }

/* ---------- Landing ---------- */
.landing h2 { max-width: 20ch; }
.landing p + p, .landing p + .code, .landing .code + p, .landing p + .table, .landing .table + p { margin-top: 16px; }
.lead { font-size: var(--step-lead); line-height: 1.4; max-width: 40ch; }
.landing h3 { margin-bottom: 12px; }

/* Real screenshots: one treatment for all. The capture on a mat in the
   surface tone, square corners, no device frame. */
.shot-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(6px, 0.7vw, 12px); }
.shot-frame img, .shot-frame picture { border-radius: 4px; }
.shot-frame img, .shot-frame video { width: 100%; }
@media (max-width: 720px) {
  .shot-frame { margin-inline: calc(var(--margin) * -1); padding: 6px; border-radius: 0; border-inline: 0; }
}

/* Hero: the headline and the install block across the top, then the
   recording at full width, so its first frame is large enough to read. */
.hero { padding: clamp(24px, 3.5vw, 56px) 0 clamp(72px, 8vw, 120px); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); align-items: end; }
.hero-text { display: contents; }
.hero h1 { grid-column: 1 / span 7; grid-row: 1 / span 4; align-self: start; font-size: clamp(2.125rem, 0.6rem + 4.6vw, 5rem); max-width: 11em; }
.hero .lead { grid-column: 8 / span 5; grid-row: 1; max-width: 34ch; }
.hero-cmd { grid-column: 8 / span 5; grid-row: 2; margin-top: 24px; }
.hero-links { grid-column: 8 / span 5; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; }
.hero-links a:not(.btn) { padding: 12px 0; font-weight: 600; font-size: var(--step-small); }
.hero-demo { grid-column: 1 / -1; grid-row: 5; margin-top: clamp(32px, 4vw, 56px); }
/* The recording sits on the console's dotted canvas. */
.hero-screen { position: relative; background-color: var(--surface); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(10px, 1.2vw, 20px); } /* taste-skill-ignore: the console's own canvas texture */
.hero-video, .hero-phone img { border-radius: 4px; }
.hero-video { width: 100%; aspect-ratio: 16 / 9; background: var(--surface); }
.hero-phone { display: none; }
.hero-toggle { position: absolute; right: clamp(18px, 2vw, 32px); bottom: clamp(18px, 2vw, 32px); min-height: 44px; padding: 10px 16px; background: #13111c; color: #f7f7f8; border-color: rgb(255 255 255 / 0.14); }
.hero-toggle:hover { background: #211f2d; border-color: rgb(255 255 255 / 0.24); }
.hero-cap { margin: 0; max-width: none; color: var(--muted); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); }
.steps { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gutter); }
.step { position: relative; display: block; width: 100%; min-height: 56px; padding: 16px 8px 10px 0; text-align: left; background: none; color: var(--muted); font-weight: 600; border-radius: 0; }
.step:hover { background: none; color: var(--ink); }
.step { border: 0; }
.step-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; overflow: hidden; background: var(--rule); }
.step-bar::after { content: ''; position: absolute; inset: 0; background: var(--accent-text); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.step.is-done .step-bar::after { transform: scaleX(1); }
.step.is-now { color: var(--ink); }
.hero-note { grid-column: 1 / span 7; margin-top: 16px; font-size: var(--step-small); color: var(--muted); max-width: 72ch; }
.transcript { grid-column: 9 / span 4; margin-top: 8px; font-size: var(--step-small); }
.transcript summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--ink); }
.transcript ol { padding-left: 20px; margin: 8px 0 0; }
.transcript li + li { margin-top: 6px; }
.transcript p { margin-top: 8px; }
.transcript strong { color: var(--ink); }
@media (max-width: 1000px) {
  .hero h1 { grid-column: 1 / -1; grid-row: auto; max-width: 16ch; }
  .hero .lead, .hero-cmd, .hero-links { grid-column: 1 / -1; grid-row: auto; }
  .hero .lead { margin-top: 20px; max-width: 40ch; }
  .hero-cmd { max-width: 640px; }
  .hero-demo { grid-row: auto; }
  .hero-note, .transcript { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero-screen { margin-inline: calc(var(--margin) * -1); padding: 8px; border-radius: 0; border-inline: 0; }
  .hero-video { display: none; }
  .hero-phone { display: block; }
  .hero-phone img { width: 100%; }
  .hero-screen.is-playing .hero-video { display: block; }
  .hero-screen.is-playing .hero-phone { display: none; }
  .hero-toggle { position: static; display: block; width: 100%; margin-top: 6px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-screen:not(.is-playing) + .hero-cap .steps { display: none; }
}

/* Sections: gaps vary with the content (RHYTHM 2). */
.tour { padding-top: clamp(72px, 7vw, 120px); }
.install { padding-top: clamp(72px, 10vw, 200px); }
.domains { margin-top: clamp(72px, 10vw, 200px); padding: clamp(72px, 8vw, 120px) 0; background: var(--band); border-block: 1px solid var(--line); }
.habits { padding-top: clamp(96px, 11vw, 200px); }
.limits { margin-top: clamp(72px, 9vw, 160px); }
.open { padding-top: clamp(72px, 10vw, 200px); }
.faq { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }

/* Tour: one large screenshot at a time, the width of the page. */
.tour-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px var(--gutter); margin-bottom: 24px; }
.tour-head h2 { max-width: 16ch; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs { padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tab { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; text-decoration: none; font-weight: 500; font-size: var(--step-small); border-radius: var(--radius-sm); color: var(--muted); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); }
.tour-panel figcaption { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px var(--gutter); margin-top: 16px; max-width: none; font-size: var(--step-small); }
.tour-panel figcaption > span:first-child { grid-column: 1 / span 6; font-size: var(--step-body); color: var(--ink); max-width: 56ch; }
.tour-panel figcaption > span + span { grid-column: 8 / span 5; }
.tour-panel figcaption > span + span + span { grid-row: 2; }
.beta-note strong { color: var(--ink); }
.tour-panel + .tour-panel { margin-top: 48px; }
@media (max-width: 900px) {
  .tour-panel figcaption > span:first-child, .tour-panel figcaption > span + span, .tour-panel figcaption > span + span + span { grid-column: 1 / -1; grid-row: auto; }
}

/* Install: the installer's real output beside the three ways to run it. */
.install-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.install-shot { grid-column: 1 / span 7; background: var(--field-bg); border: 1px solid var(--field-rule); border-radius: var(--radius); padding: clamp(12px, 1.6vw, 24px); position: sticky; top: 24px; }
.install-shot img { width: 100%; }
.install-shot figcaption { color: var(--field-muted); }
.install-text { grid-column: 8 / span 5; padding-left: clamp(0px, 1.5vw, 24px); }
.install-text h2 { margin-bottom: 24px; }
.ways { display: grid; gap: 16px; margin: 32px 0 0; }
.ways dt { font-weight: 600; font-size: var(--step-small); margin-bottom: 6px; }
.ways dd { margin: 0; }
.install-foot { margin-top: 24px; color: var(--muted); font-size: var(--step-small); }
@media (max-width: 1000px) {
  .install-grid { grid-template-columns: 1fr; }
  .install-shot, .install-text { grid-column: 1; }
  .install-text { order: -1; padding-left: 0; margin-bottom: 32px; }
  .install-shot { position: static; }
}
@media (max-width: 720px) { .install-shot { margin-inline: calc(var(--margin) * -1); padding: 12px var(--margin); border-radius: 0; border-inline: 0; } }

/* Domains: on the surface tone, the steps and records beside the real
   Networking settings. */
.domains-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.domains-side { grid-column: 1 / span 4; }
.domains-side h2 { margin-bottom: 16px; }
.domains-lead { margin-bottom: 32px; }
.domains-shot { grid-column: 6 / span 7; }
.domains .shot-frame { background: var(--surface); }
.status { margin: 0 0 32px; padding-left: 20px; }
.status li + li { margin-top: 12px; }
.records thead th { background: var(--surface-2); }
@media (max-width: 1000px) {
  .domains-grid { grid-template-columns: 1fr; }
  .domains-shot, .domains-side { grid-column: 1; }
  .domains-shot { margin-top: 40px; }
}

/* The price field: a hard cut to ink, one chart and one sentence. */
.field { background: var(--field-bg); color: var(--field-ink); }
.field a { color: var(--field-ink); }
.field .small, .field caption, .field .assumptions { color: var(--field-muted); }
.field :focus-visible { outline-color: var(--field-focus); }
.cost { padding: clamp(72px, 9vw, 160px) 0; }
.cost-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.cost-head { grid-column: 1 / span 5; }
.cost-head h2 { margin-bottom: 24px; }
.cost-figure { font-size: var(--step-lead); line-height: 1.35; font-variant-numeric: tabular-nums; max-width: 32ch; }
.cost-head p:not(.cost-figure) { color: var(--field-muted); }
.cost-chart { grid-column: 7 / span 6; }
.chart-title { color: var(--field-muted); margin: 0 0 32px; max-width: 56ch; }
.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.bar { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.bar-name { font-weight: 600; line-height: 1.3; }
.bar-name small { display: block; font-weight: 400; font-size: var(--step-small); color: var(--field-muted); }
.bar-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bar-fill { display: block; flex: none; height: 28px; width: calc(var(--w) * 0.76); background: var(--field-rule); border-radius: 4px; }
.bar.is-vm .bar-fill { background: var(--field-accent); }
.bar-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.assumptions { margin-top: 32px; font-size: var(--step-small); }
.assumptions summary { cursor: pointer; padding: 10px 0; color: var(--field-ink); font-weight: 600; }
.assumptions p, .assumptions ul { margin-top: 8px; max-width: 72ch; }
.assumptions ul { padding-left: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .ready .bars .bar-fill { transform-origin: left center; transition: transform 900ms var(--ease-expo); }
  .ready .bars:not(.is-in) .bar-fill { transform: scaleX(0.02); }
}
@media (max-width: 1000px) {
  .cost-grid { grid-template-columns: 1fr; }
  .cost-head, .cost-chart { grid-column: 1; }
  .cost-chart { margin-top: 48px; }
}
@media (max-width: 640px) {
  .bar { grid-template-columns: 1fr; }
  .bar-fill { height: 24px; }
}

/* Habits: the split motif. Railway's column and openrail's, with the real
   Variables tab beside them. */
.habits h2 { margin-bottom: 16px; }
.habits-lead { max-width: 56ch; }
.habits-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(32px, 4vw, 56px); align-items: start; }
.habits-table { grid-column: 1 / span 6; }
.habits-shot { grid-column: 7 / span 6; }
.habits-table table { font-size: var(--step-body); }
.habits-table td { padding: 16px 12px; width: 50%; }
.habits-table thead th + th { border-bottom: 3px solid var(--accent); }
.habits td code { white-space: nowrap; }
@media (max-width: 1100px) {
  .habits-grid { grid-template-columns: 1fr; }
  .habits-table, .habits-shot { grid-column: 1; }
  .habits-shot { margin-top: 32px; }
}
@media (max-width: 640px) { .habits td code { white-space: normal; overflow-wrap: anywhere; } .habits-table td { width: auto; padding: 4px 0 4px calc(34% + 12px); } }

/* Limits: a list in larger type on the surface tone, one row per kind. */
.limits { background: var(--band); border-block: 1px solid var(--line); padding: clamp(72px, 8vw, 120px) 0; }
.limits h2 { margin-bottom: clamp(32px, 4vw, 56px); }
.limit-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px var(--gutter); }
.limit-group + .limit-group { margin-top: clamp(32px, 4vw, 48px); }
.limit-group h3 { grid-column: 1 / span 3; font-family: var(--serif); font-weight: 500; font-size: var(--step-lead); line-height: 1.25; margin: 0; }
.limit-group > ul, .limit-group > div { grid-column: 4 / span 9; }
.limit-group .plain { list-style: none; padding: 0; columns: 2 22rem; column-gap: var(--gutter); }
.limit-group .plain li { break-inside: avoid; padding-bottom: 12px; margin: 0; }
.limit-group .small { margin-bottom: 12px; }
.limits-foot { margin-top: 40px; }
.plain { padding-left: 20px; }
.plain li + li { margin-top: 8px; }
@media (max-width: 900px) {
  .limit-group { grid-template-columns: 1fr; }
  .limit-group h3, .limit-group > ul, .limit-group > div { grid-column: 1; }
}

/* Open source: one statement in large type, and where to get the code. */
.open-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); align-items: start; }
.open h2 { grid-column: 1 / span 7; margin-bottom: 24px; }
.statement { grid-column: 1 / span 7; font-size: var(--step-lead); line-height: 1.4; max-width: 46ch; }
.open-links { grid-column: 9 / span 4; grid-row: 1 / span 2; list-style: none; padding: 0; margin: 0; }
.open-links li { padding: 12px 0; }
.open-links li + li { margin-top: 8px; }
.open-links a { font-weight: 600; }
.open-links span { display: block; color: var(--muted); font-size: var(--step-small); margin-top: 4px; }
@media (max-width: 900px) {
  .open-grid { grid-template-columns: 1fr; }
  .open h2, .statement, .open-links { grid-column: 1; grid-row: auto; }
  .open-links { margin-top: 32px; }
}

/* FAQ: the questions in two columns, answers open in place. */
.faq h2 { margin-bottom: 24px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 72px); align-items: start; }
.faq-list details { padding: 4px 0; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 600; font-size: var(--step-body); }
.faq-list summary:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; font-weight: 400; font-size: var(--step-lead); line-height: 1; color: var(--muted); }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list details p { padding-bottom: 16px; color: var(--ink); }
@media (max-width: 700px) { .faq-list { grid-template-columns: 1fr; } }

/* The close: the one centred moment (L8), on the ground, not a colour field. */
/* The close sits on the console's dotted canvas, like the hero recording. */
.close { background-color: var(--band); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 16px 16px; border-top: 1px solid var(--line); padding: clamp(72px, 9vw, 160px) 0; } /* taste-skill-ignore: the console's own canvas texture */
.close-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close h2 { max-width: 20ch; margin-bottom: 32px; }
.close .code { width: 100%; max-width: 720px; text-align: left; background: var(--surface); }
.close p { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; }
.close p a:not(.btn) { font-weight: 600; padding: 10px 0; }

/* Demo (only when a reviewed render is in public/demo). */
.demo { padding-top: clamp(72px, 9vw, 160px); }
.demo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.demo-head { grid-column: 1 / span 4; }
.demo-head p { margin-top: 16px; }
.demo-body { grid-column: 5 / span 8; }
.demo-video { width: 100%; }
.chapters { list-style: none; padding: 0; margin-top: 24px; }
.chapter { background: none; padding: 6px 0; min-height: 40px; text-align: left; font-weight: 400; }
.chapter-time { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: 8px; }
@media (max-width: 1000px) { .demo-grid { grid-template-columns: 1fr; } .demo-head, .demo-body { grid-column: 1; } }

/* Footer */
.foot { background: var(--field-bg); color: var(--field-ink); padding: 48px var(--margin) 40px; border-top: 1px solid var(--field-rule); }
.foot > * { max-width: var(--max); margin-inline: auto; }
.foot .brand { color: var(--field-ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; font-size: var(--step-small); max-width: var(--max); }
.foot-links a { padding: 10px 0; }
.foot-note { margin-top: 16px; font-size: var(--step-small); color: var(--field-muted); max-width: var(--max); }
.foot :focus-visible { outline-color: var(--field-focus); }

/* Entrances (M2): only with motion allowed, and only once script runs. */
@media (prefers-reduced-motion: no-preference) {
  .ready [data-reveal], .ready .landing h2 { transition: opacity var(--t-reveal) var(--ease-expo), transform var(--t-reveal) var(--ease-expo); transition-delay: var(--d, 0ms); }
  .ready .landing h2:not(.is-in) { opacity: 0; transform: translateY(20px); }
  .ready .hero h1 { opacity: 1; transform: none; }
  @media (min-width: 721px) { .ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px); } }
  .js .hero h1, .js .hero .lead, .js .hero .code, .js .hero-links { animation: rise 700ms var(--ease-expo) both; }
  .js .hero .lead { animation-delay: 70ms; }
  .js .hero .code { animation-delay: 140ms; }
  .js .hero-links { animation-delay: 210ms; }
  .js .hero-demo { animation: rise 900ms var(--ease-expo) 120ms both; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .ready [data-reveal-list] > * { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .ready [data-reveal-list]:not(.is-in) > * { opacity: 0; transform: translateY(12px); }
  .ready [data-reveal-list] > *:nth-child(2) { transition-delay: 70ms; }
  .ready [data-reveal-list] > *:nth-child(3) { transition-delay: 140ms; }
  .ready [data-reveal-list] > *:nth-child(4) { transition-delay: 210ms; }
  .ready [data-reveal-list] > *:nth-child(5) { transition-delay: 280ms; }
}

/* ---------- Docs ---------- */
.docs {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 220px;
  gap: 48px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 24px var(--margin) 96px;
}
.sidebar { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; font-size: var(--step-small); padding-right: 8px; scrollbar-width: thin; }
.sidebar details, .sheet-docs details { margin-bottom: 12px; }
.sidebar summary, .sheet-docs summary { cursor: pointer; font-weight: 600; padding: 8px 0; list-style: none; display: flex; justify-content: space-between; }
.sidebar summary::-webkit-details-marker, .sheet-docs summary::-webkit-details-marker { display: none; }
.sidebar summary::after, .sheet-docs summary::after { content: '+'; color: var(--muted); }
.sidebar details[open] summary::after, .sheet-docs details[open] summary::after { content: '\2212'; }
.sidebar ul, .sheet-docs ul { list-style: none; padding: 0; margin: 0; }
.sidebar a, .sheet-docs a { display: block; padding: 6px 10px; text-decoration: none; color: var(--muted); border-radius: var(--radius-sm); }
.sidebar a:hover, .sheet-docs a:hover { color: var(--ink); background: var(--surface-2); }
.sidebar a[aria-current="page"], .sheet-docs a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); font-weight: 500; } /* taste-skill-ignore: an inset bar, not a shadow */
.content { min-width: 0; }
.content article { max-width: 72ch; }
.content h1 { font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.02em; margin: 8px 0 24px; }
.content h2 { font-size: var(--step-lead); letter-spacing: -0.01em; line-height: 1.25; margin: 56px 0 16px; scroll-margin-top: 24px; }
.content h3 { margin: 32px 0 8px; scroll-margin-top: 24px; }
.content article > p:first-of-type { font-size: var(--step-lead); line-height: 1.4; color: var(--muted); }
.content p, .content ul, .content ol, .content .code, .content .table, .content .callout, .content .doc-shot { margin-top: 16px; }
.content ul, .content ol { padding-left: 24px; max-width: 62ch; }
.content li + li { margin-top: 6px; }
.content :not(pre) > code { background: var(--surface-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; font-size: 0.86em; }
.content .table :not(pre) > code { background: none; padding: 0; }
.content table { font-size: var(--step-body); }
.content .doc-shot { margin-top: 24px; margin-bottom: 8px; }
.content .doc-shot .shot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.content .doc-shot .shot img { border-radius: 4px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 72px; max-width: 72ch; }
.pager a { display: block; background: var(--surface); border: 1px solid var(--line); padding: 16px 20px; text-decoration: none; font-weight: 600; border-radius: var(--radius); transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.pager a:hover { background: var(--surface-2); border-color: var(--rule); }
.pager a span { display: block; font-size: var(--step-small); color: var(--muted); font-weight: 400; }
.pager .next { text-align: right; grid-column: 2; }
.meta { display: flex; gap: 24px; margin-top: 32px; font-size: var(--step-small); color: var(--muted); }
.toc { align-self: start; font-size: var(--step-small); background: var(--surface); border: 1px solid var(--line); padding: 16px 20px; border-radius: var(--radius); }
.toc:empty { background: none; border: 0; padding: 0; }
.toc-title { font-weight: 600; margin-bottom: 8px; }
.toc ul { list-style: none; padding: 0; }
.toc a { display: block; padding: 5px 0; text-decoration: none; color: var(--muted); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.narrow { max-width: 820px; margin-inline: auto; padding: 48px var(--margin) 96px; }
.narrow h1 { font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 24px; }
.narrow h2 { font-size: var(--step-lead); margin: 48px 0 12px; }
.narrow ul { padding-left: 20px; }
.narrow li + li { margin-top: 8px; }
.narrow .lead { color: var(--muted); }
.deploy form { display: grid; gap: 12px; margin-top: 24px; max-width: 520px; }
.deploy input { font: inherit; padding: 12px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-sm); min-height: 44px; }
.deploy input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.deploy .btn { justify-self: start; }
.err { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
@media (max-width: 1200px) {
  .docs { grid-template-columns: 232px minmax(0, 1fr); }
  .docs > .toc { display: none; }
}
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .sidebar { display: none; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
}

/* Search dialog: it floats over the page (C6). */
dialog.search { width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 640px); margin: 10vh auto auto; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 16px 48px -8px rgb(0 0 0 / 0.5); } /* taste-skill-ignore: the dialog floats */
dialog.search::backdrop { background: rgb(10 8 20 / 0.6); }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.search-form label { grid-column: 1 / -1; font-size: var(--step-small); font-weight: 600; }
.search-form input { font: inherit; min-height: 44px; padding: 10px 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-sm); width: 100%; }
.search-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.search-status { font-size: var(--step-small); color: var(--muted); margin: 12px 0 8px; }
.search-results { list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: calc(min(70vh, 640px) - 140px); }
.search-results a { display: block; padding: 10px 12px; text-decoration: none; border-radius: var(--radius-sm); }
.search-results a:hover, .search-results a:focus-visible { background: var(--surface-2); }
.search-results strong { display: block; }
.search-results span { display: block; font-size: var(--step-small); color: var(--muted); }

@media print {
  .top, .foot, .sidebar, .toc, .pager, .loop-toggle { display: none; }
}

/* Docs home: every group, in columns across the page. */
.docs-home { max-width: 1440px; margin-inline: auto; padding: 48px var(--margin) 120px; }
.docs-home h1 { font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.02em; }
.docs-home .lead { margin-top: 16px; color: var(--muted); max-width: 52ch; }
.docs-home-start { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 32px; }
.docs-groups { columns: 3 300px; column-gap: 48px; margin-top: 72px; }
.docs-group { break-inside: avoid; margin-bottom: 48px; }
.docs-group h2 { font-size: var(--step-lead); margin-bottom: 12px; }
.docs-group ul { list-style: none; padding: 0; margin: 0; }
.docs-group li { padding: 8px 0; }
.docs-group a { font-weight: 600; }
.docs-group span { display: block; }

/* A closed details element keeps no layout for its hidden text. */
details:not([open]) > :not(summary) { display: none; }
/* Docs pages with no on-page list give its column back to the text. */
.docs:has(> .toc:empty) { grid-template-columns: 248px minmax(0, 1fr); }
.docs:has(> .toc:empty) > .toc { display: none; }
/* The docs frame is as wide as its columns, centred on the page. */
.docs { max-width: calc(248px + 72ch + 220px + 96px + 2 * var(--margin)); }
.docs:has(> .toc:empty) { max-width: calc(248px + 72ch + 48px + 2 * var(--margin)); }
@media (max-width: 1200px) { .docs { max-width: calc(232px + 72ch + 48px + 2 * var(--margin)); } }
@media (max-width: 900px) { .docs, .docs:has(> .toc:empty) { max-width: none; } }
.logo { display: block; height: 28px; width: auto; margin: 8px 0; }
.foot .logo { height: 30px; }
/* Wide screens: the hero text and the recording sit side by side, so the
   headline, the install command and the whole recording are seen together. */
@media (min-width: 1101px) {
  .hero-grid { align-items: center; }
  .hero-text { display: flex; flex-direction: column; grid-column: 1 / span 5; grid-row: 1; }
  .hero h1 { font-size: var(--step-head); max-width: 14ch; }
  .hero .lead { margin-top: 20px; max-width: 40ch; }
  .hero-cmd { margin-top: 28px; }
  .hero-demo { grid-column: 6 / -1; grid-row: 1; margin-top: 0; }
  .hero-note, .transcript { grid-column: 1 / -1; }
  .step { font-size: var(--step-small); }
}
/* Medium screens: stacked, with the recording capped to one screen height. */
@media (min-width: 721px) and (max-width: 1100px) {
  .hero-screen, .hero-cap { max-width: min(100%, calc((100svh - 150px) * 16 / 9)); margin-inline: auto; }
}
/* A bare code block (the deploy page's README snippet) gets the code block's card. */
.narrow pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font-size: var(--step-small); line-height: 1.55; margin-top: 12px; }