:root {
  color-scheme: light dark;
  --background: #FAFAFA;
  --text: #0A0A0A;
  --secondary: #525252;
  --border: #8A8A8A;
  --working: #15803D;
  --attention: #92400E;
  --failed: #B91C1C;
  --rule: #E5E5E5;
  --surface: #FFFFFF;
  --sunken: #F0F0F0;
  --term: #0C0E13;
  --term-rule: #0C0E13;
  --shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 24px 48px -24px rgb(0 0 0 / 22%);
  --app-accent: #9A3412;
  --app-on-accent: #FFFFFF;
  --accent: #1F4FD1;
  --thread: #3D7BFF;
  --accent-soft: rgb(61 123 255 / 9%);
  --spot: rgb(61 123 255 / 9%);
  --ambient: rgb(61 123 255 / 11%);
  --lift: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(15 23 42 / 4%), 0 18px 40px -24px rgb(15 23 42 / 22%);
  --glass: rgb(250 250 250 / 76%);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0A0A0A;
    --text: #FAFAFA;
    --secondary: #A3A3A3;
    --border: #6B6B6B;
    --working: #4ADE80;
    --attention: #FBBF24;
    --failed: #F87171;
    --rule: #262626;
    --surface: #121212;
    --sunken: #1A1A1A;
    --term: #0F1117;
    --term-rule: #262A33;
    --shadow: none;
    --app-accent: #FDBA74;
    --app-on-accent: #0A0A0A;
    --accent: #7DA8FF;
    --thread: #5C95FF;
    --accent-soft: rgb(92 149 255 / 13%);
    --spot: rgb(92 149 255 / 10%);
    --ambient: rgb(61 123 255 / 15%);
    --lift: inset 0 1px 0 rgb(255 255 255 / 5%);
    --glass: rgb(10 10 10 / 72%);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 24px;
  background: var(--background);
  color: var(--text);
  font: 400 16px/24px Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wordmark { margin: 0; font-weight: 500; }
main { max-width: 400px; margin: 72px auto 0; overflow-wrap: anywhere; }
h1 { margin: 0 0 8px; font-size: 24px; line-height: 32px; font-weight: 500; }
.context { display: block; margin: 0 0 24px; color: var(--secondary); }
input[type="email"] {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
}
input[aria-invalid="true"] { border: 2px solid var(--text); padding: 10px 13px; }
::placeholder { color: var(--secondary); opacity: 1; }
.error { margin: -4px 0 12px; font-size: 14px; line-height: 20px; }
.button {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--text);
  color: var(--background);
  font: inherit;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.button:hover { opacity: 0.85; }
.button[disabled], .button[aria-disabled="true"] { background: var(--secondary); opacity: 1; cursor: default; }
.secondary { display: inline-block; min-height: 44px; margin: 8px 0 0; padding: 10px 0; color: var(--text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) { main { margin-top: 48px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* The site itself (D-015, www/DESIGN.md). Everything above is the recipient
   pages' stylesheet, rule for rule, with the site's tokens added to :root; a
   test fails on any drift. Outfit is served from this origin.

   One idea runs through the site: the link is a lit thread between your
   machine and your tester's browser. The thread is the one blue (--thread),
   and the homepage's first and last sections are a dark stage for it in
   both themes. */
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/outfit-latin.woff2") 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;
}
html[lang] { scroll-padding-top: 88px; }
body[data-page] { position: relative; isolation: isolate; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* A wash of blue at the top. */
body[data-page]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 720px; background: radial-gradient(60% 100% at 50% 0%, var(--ambient), transparent 70%); pointer-events: none; }
::selection { background: color-mix(in srgb, var(--thread) 30%, transparent); }
[data-page] main { max-width: none; margin: 0; overflow-wrap: break-word; }
.wrap { width: 100%; max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 808px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 20; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 8px; background: var(--text); color: var(--background); text-decoration: none; }
.skip:focus { top: 10px; }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Header and footer */
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); background: var(--glass); backdrop-filter: saturate(1.6) blur(16px); }
.site-header .wrap, .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.site-header .wrap { min-height: 64px; }
a.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
/* The mark: two points and the thread. */
a.wordmark::before { content: ""; width: 24px; height: 24px; border-radius: 7px; background: radial-gradient(circle at 30% 70%, #FFFFFF 0 2.6px, transparent 3.2px), radial-gradient(circle at 70% 30%, #FFFFFF 0 2.6px, transparent 3.2px), linear-gradient(135deg, transparent calc(50% - 0.8px), rgb(255 255 255 / 85%) 0 calc(50% + 0.8px), transparent 0), linear-gradient(135deg, #7FB0FF, #2F5BEA); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 4px 14px -4px rgb(47 91 234 / 70%); }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0 -12px; }
.site-header nav a, .site-footer nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px; color: var(--secondary); text-decoration: none; transition: color 0.15s; }
.site-header nav a:hover, .site-footer nav a:hover, .site-header nav a[aria-current="page"] { color: var(--text); }
.site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--thread); text-underline-offset: 8px; }
/* Sign in: a pill inside a 44px target. */
.site-header nav a:last-child { margin-left: 8px; padding: 10px 16px; color: var(--text); font-weight: 500; }
.site-header nav a:last-child::before { content: ""; position: absolute; inset: 5px 0; z-index: -1; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); transition: border-color 0.15s; }
.site-header nav a:last-child:hover::before { border-color: var(--text); }
.site-footer { position: relative; overflow: hidden; margin-top: clamp(96px, 12vw, 160px); padding: 48px 0 0; border-top: 1px solid var(--rule); color: var(--secondary); }
.site-footer .wrap { align-items: flex-start; gap: 16px 48px; }
.site-footer .motto { display: block; flex: 1 1 280px; min-height: 0; margin: 0; padding: 6px 0; color: var(--text); font-size: clamp(20px, 16px + 1vw, 26px); line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; }
.site-footer nav { flex: 0 1 auto; }
.site-footer .fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 24px; width: 100%; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.site-footer p { margin: 0; min-height: 44px; display: inline-flex; align-items: center; }
/* The name, large, fading out. */
.site-footer::after { content: "purlview"; display: block; margin: 32px 0 -0.2em; font-size: clamp(88px, 23vw, 320px); line-height: 0.8; font-weight: 700; letter-spacing: -0.06em; text-align: center; white-space: nowrap; background: linear-gradient(180deg, color-mix(in srgb, var(--thread) 26%, transparent), transparent 78%); background-clip: text; color: transparent; pointer-events: none; user-select: none; }
/* Links in prose stay inline; vertical padding gives them a 44px target
   without moving the text, as padding on an inline box widens its hit area
   but not its line. */
.site-footer .limits a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; padding: 14px 0; }
main p a, main li a, main dd a { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--thread) 60%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; padding: 14px 0; transition: text-decoration-color 0.15s, color 0.15s; }
main p a:hover, main li a:hover, main dd a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Type */
[data-page] h1 { margin: 0 0 16px; font-size: clamp(36px, 26px + 2.6vw, 60px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
h2 { margin: 48px 0 12px; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; }
h3 { margin: 32px 0 8px; font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
p, ul, ol, dl { margin: 0 0 16px; }
ul, ol { padding-left: 24px; }
li { margin: 0 0 8px; }
dt { margin: 24px 0 4px; font-weight: 500; }
dd { margin: 0; color: var(--secondary); }
code, kbd, .terminal, .devlog { font-family: var(--mono); }
code, kbd { font-size: 0.9em; }
p code, li code, dd code { padding: 2px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sunken); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { max-width: 34em; margin: 0; color: var(--secondary); font-size: 18px; line-height: 28px; }
.label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--accent); font: 500 12px/20px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.label::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--thread); box-shadow: 0 0 0 3px var(--accent-soft); }
.section-title { margin: 0 0 16px; font-size: clamp(34px, 20px + 3.3vw, 60px); line-height: 1.02; font-weight: 600; letter-spacing: -0.042em; text-wrap: balance; }
.section-lead { max-width: 36em; margin: 0; color: var(--secondary); font-size: 18px; line-height: 28px; text-wrap: pretty; }
@media (min-width: 640px) {
  .lead { font-size: 21px; line-height: 32px; }
  .section-lead { font-size: 20px; line-height: 30px; }
}

/* Terminals: always dark, in the CLI's own colours (D-002). */
.terminal {
  --text: #FAFAFA;
  --secondary: #A3A3A3;
  --working: #4ADE80;
  --attention: #FBBF24;
  --failed: #F87171;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--term-rule);
  border-radius: 8px;
  background: var(--term);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #3A3F4B transparent;
}
/* Commands never wrap; site.js marks a box that scrolls (fade, focus). */
[data-scrolls]:not([data-end]) { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.prompt, .dim { color: var(--secondary); }
.ok { color: var(--working); }
.attention { color: var(--attention); }
.failed { color: var(--failed); }
pre.terminal code, .cmd code { padding: 0; border: 0; background: none; font-size: inherit; }
.cmd { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; border: 1px solid var(--term-rule); border-radius: 8px; background: var(--term); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); }
.cmd .terminal { flex: 1 1 auto; min-width: 0; margin: 0; border: 0; box-shadow: none; }
.cmd .action { --text: #FAFAFA; --border: #8A8A8A; flex: none; margin: 6px 6px 0 0; color: var(--text); }
.cmd .action:hover { border-color: var(--text); }
@media (max-width: 480px) {
  .terminal { font-size: 13px; line-height: 20px; }
  .cmd { flex-direction: column; align-items: stretch; gap: 0; }
  .cmd .action { align-self: flex-end; margin: 0 6px 6px 0; }
}

/* Controls */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.action:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
a.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 12px 24px; box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--thread) 70%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.more { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 500; text-decoration: none; }
.more::after { content: "→"; margin-left: 6px; transition: transform 0.2s; }
.more:hover::after { transform: translateX(3px); }
main p a.more { color: var(--accent); text-decoration: none; padding: 10px 0; }
input[type="search"] {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  box-shadow: var(--lift);
}

/* The system switch: macOS · Linux · Windows */
.switch { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--rule); border-radius: 12px; background: color-mix(in srgb, var(--sunken) 60%, transparent); width: fit-content; max-width: 100%; }
html:not(.js) .switch, html:not(.js) .box .action { display: none; }
.switch button { min-height: 44px; min-width: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--secondary); font: inherit; cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.switch button:hover { color: var(--text); }
.switch button[aria-pressed="true"] { border-color: var(--border); background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }

/* Cards; site.js lights one where the pointer is ([data-spot]). */
.card { position: relative; isolation: isolate; min-width: 0; border: 1px solid var(--rule); border-radius: 20px; background: var(--surface); box-shadow: var(--lift); }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(480px circle at var(--x, 50%) var(--y, 0%), var(--spot), transparent 55%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
[data-spot]:hover::before { opacity: 1; }

/* The stage: dark in both themes, with the dark theme's tokens. */
.showcase {
  --background: #08090D;
  --text: #FAFAFA;
  --secondary: #A3A3A3;
  --border: #8A8A8A;
  --rule: #242833;
  --surface: #10131A;
  --sunken: #161A23;
  --accent: #8DB4FF;
  --accent-soft: rgb(92 149 255 / 16%);
  --term: #0B0D12;
  --term-rule: #242833;
  --app-accent: #FDBA74;
  --app-on-accent: #0A0A0A;
  --lift: inset 0 1px 0 rgb(255 255 255 / 6%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #1B1F29;
  background: var(--background);
  color: var(--text);
  box-shadow: 0 50px 100px -50px rgb(8 20 60 / 55%);
}
.showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 42% at 50% -4%, rgb(61 123 255 / 42%), transparent 72%), radial-gradient(30% 30% at 92% 18%, rgb(56 189 248 / 11%), transparent 70%), radial-gradient(34% 30% at 4% 52%, rgb(99 102 241 / 12%), transparent 70%), radial-gradient(50% 30% at 50% 100%, rgb(61 123 255 / 16%), transparent 70%); pointer-events: none; }
.showcase::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent 80%); pointer-events: none; }

/* Homepage: the promise */
.hero { width: 100%; max-width: 1400px; margin: 0 auto; border-width: 0 0 1px; }
.hero > .wrap { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); }
/* Hero: the reason, centred, then the demonstration. */
.hero-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-intro .headline span + span { margin-inline: auto; }
.hero-intro .lead { margin: 0 auto; text-wrap: balance; }
.hero-command { display: inline-flex; align-items: center; gap: 0.6em; margin: 40px 0 0; padding: 0.7em 1.3em; border: 1px solid color-mix(in srgb, var(--thread) 45%, transparent); border-radius: 18px; background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)), var(--term); font: 500 clamp(20px, 14px + 1.4vw, 32px)/1.3 var(--mono); box-shadow: var(--lift), 0 0 0 6px rgb(92 149 255 / 6%), 0 20px 70px -12px rgb(92 149 255 / 55%); animation-delay: 0.3s; }
.hero-command .prompt { color: var(--accent); }
.hero-intro .actions { justify-content: center; margin-top: 28px; animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.38s both; }
@media (min-width: 481px) { .hero { width: calc(100% - 24px); margin-top: 12px; border-width: 1px; border-radius: 28px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 6px 14px 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: rgb(255 255 255 / 4%); color: var(--secondary); font-size: 14px; line-height: 20px; box-shadow: var(--lift); }
.beacon { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--thread); box-shadow: 0 0 10px 1px var(--thread); }
.beacon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--thread); opacity: 0; animation: ring 1.6s ease-out 0.8s 3; }
.hero .headline { margin: 0 0 28px; font-size: clamp(42px, 18px + 5.6vw, 88px); line-height: 0.98; font-weight: 600; letter-spacing: -0.05em; text-wrap: balance; }
.headline span { display: block; }
/* Gradient text; the colour is the fallback a contrast check reads. */
.headline span + span { width: fit-content; padding-bottom: 0.18em; margin-bottom: -0.12em; color: #9EC0FF; background: linear-gradient(100deg, #E3EDFF 0%, #8DB4FF 45%, #5C95FF 80%, #8DB4FF 100%); background-clip: text; -webkit-text-fill-color: transparent; animation-delay: 0.14s; }
.hero .lead { margin: 0; max-width: 36em; animation-delay: 0.22s; }
.hero .eyebrow, .headline span, .hero .lead, .hero-command { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.headline span:first-child { animation-delay: 0.06s; }

/* Get started: install then share, one glass panel joined by the thread. */
.start { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 20px; background: linear-gradient(180deg, rgb(255 255 255 / 5.5%), rgb(255 255 255 / 2%)); box-shadow: var(--lift), 0 30px 60px -30px rgb(0 0 0 / 70%); list-style: none; backdrop-filter: blur(10px); }
.start > li { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; margin: 0; padding: 28px; }
.start > li + li { border-top: 1px solid var(--rule); }
.start > li + li::before { content: "↓"; position: absolute; left: 28px; top: -15px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 50%; background: #0D1016; color: var(--accent); font: 400 14px/1 var(--mono); box-shadow: 0 0 16px -2px rgb(92 149 255 / 45%); }
.start-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.015em; }
.start-title .n { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border: 1px solid rgb(141 180 255 / 45%); border-radius: 50%; background: rgb(92 149 255 / 14%); color: #CFE0FF; font: 500 13px/1 var(--mono); }
.start-body { min-width: 0; }
.start .box { display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0; padding: 8px 8px 8px 18px; overflow: hidden; border: 1px solid var(--term-rule); border-radius: 8px; background: var(--term); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); }
.start .box .prompt { color: var(--accent); font: 500 16px/1.4 var(--mono); }
.start .box code { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: var(--text); font-size: 16px; line-height: 1.4; font-weight: 500; white-space: pre; overflow-x: auto; padding: 8px 12px 8px 0; scrollbar-width: none; }
.start .box .action { flex: none; }
.start .meta { margin: 12px 0 0; color: var(--secondary); font-size: 14px; line-height: 20px; }
.start .then { margin: 12px 0 0; max-width: 40em; color: var(--secondary); font-size: 15px; line-height: 23px; }
@media (max-width: 480px) {
  .start { border-radius: 16px; }
  .start > li { padding: 22px 18px; }
  .start > li + li::before { left: 18px; }
}
/* Side by side from 1180px, where every command fits; rows from 960px. */
@media (min-width: 960px) and (max-width: 1179px) {
  .start > li { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0 24px; align-items: start; padding: 32px; }
  .start-title { padding-top: 16px; }
  .start > li + li::before { left: 32px; }
}
@media (min-width: 1180px) {
  .start { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .start > li { padding: 32px; }
  .start > li + li { border-top: 0; border-left: 1px solid var(--rule); }
  .start > li + li::before { content: "→"; left: -16px; top: 30px; }
}

/* The install box */
.install { min-width: 0; }
.install .native + .native { margin-top: 16px; }
.install .system { margin: 0 0 8px; color: var(--secondary); font: 500 12px/20px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.install .note { margin: 0 0 12px; color: var(--secondary); }
/* Nothing to install yet: a calm notice, with a clock that has started. */
.install .pending { position: relative; margin: 0; padding: 16px 18px 16px 52px; border: 1px solid var(--rule); border-radius: 12px; background: linear-gradient(180deg, var(--accent-soft), transparent); }
.install .pending::before, .os .pending::before { content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; border: 1.5px solid var(--accent); border-radius: 50%; background: conic-gradient(var(--accent) 0 30%, transparent 0) content-box; padding: 3px; }
.install .pending .note { margin: 0; color: var(--text); }
.install .pending p + p { margin-top: 2px; }
.install .button { margin: 0 0 12px; }
.install .native .note { margin: 0; }
.install .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin: 16px 0 0; color: var(--secondary); font-size: 14px; }

/* The demonstration: two windows and the thread between them */
.demo { position: relative; margin: 0; padding: 0; }
.demo-stage { padding: clamp(20px, 4vw, 48px); border-radius: 28px; }
@media (max-width: 480px) { .demo-stage { border-radius: 20px; } }
.demo .stage { display: grid; grid-template-columns: minmax(0, 1fr); }
.demo .side { min-width: 0; }
.demo .side > .label { color: var(--secondary); }
.demo .side > .label::before { background: var(--secondary); box-shadow: none; }
.demo figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 0; color: var(--secondary); }
.demo figcaption p { flex: 1 1 320px; margin: 0; }
.replay { visibility: hidden; }
.js .replay { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .js .replay { visibility: hidden; } }
/* The demonstration's sides side by side from 1120px, where lines fit. */
@media (min-width: 1120px) {
  .demo .stage { grid-template-columns: minmax(0, 1.12fr) 72px minmax(0, 1fr); align-items: start; }
}
/* Three steps, lit in time with the windows. */
.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; margin: 0 0 8px; padding: 0; list-style: none; }
.rail li { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 0 0; color: var(--text); font-weight: 500; animation: lit 0.4s both; }
.rail li::before, .rail li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--rule); }
.rail li::after { background: linear-gradient(90deg, var(--thread), #B9D0FF); box-shadow: 0 0 12px rgb(92 149 255 / 60%); transform-origin: left; animation: fill 1.9s linear 0.4s both; }
.rail li:nth-child(2) { animation-delay: 2.3s; }
.rail li:nth-child(2)::after { animation-duration: 1.2s; animation-delay: 2.3s; }
.rail li:nth-child(3) { animation-delay: 4.8s; }
.rail li:nth-child(3)::after { animation-duration: 2s; animation-delay: 4.8s; }
.rail-n { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border: 1px solid rgb(141 180 255 / 45%); border-radius: 50%; color: #CFE0FF; font: 500 12px/1 var(--mono); }
@media (min-width: 720px) { .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.window { overflow: hidden; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.window .bar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--sunken); color: var(--secondary); font: 400 13px/20px var(--mono); }
.dots { display: inline-flex; gap: 6px; flex: none; }
.dots::before, .dots::after, .dots span { content: ""; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--secondary) 45%, transparent); }
.address { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 2px 10px; border-radius: 7px; background: var(--surface); color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.address .icon { width: 12px; height: 12px; color: var(--secondary); }
/* The host ends in an ellipsis if it ever runs out of room, never mid-letter. */
.address .host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A tester's page: the bar is the host alone, centred, as browsers show it. */
.shots .window .bar { justify-content: center; }
.shots .address { flex: 0 1 auto; justify-content: center; padding: 2px 12px; font-size: 12px; }

/* The developer's side: dark windows. */
.machine { border-color: #252A35; background: #0B0D12; box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 40px 80px -30px rgb(0 0 0 / 85%); }
.machine .bar { border-color: #1C2029; background: #11141B; color: #A3A3A3; }
.machine .dots::before, .machine .dots::after, .machine .dots span { background: #3A3F4B; }
.machine .tab { color: #FAFAFA; }
/* The dev server's terminal, then Purlview's; the reload line is the change. */
.terms { display: grid; gap: 14px; }
.devlog { margin: 0; padding: 14px 16px; color: #D4D4D4; font: 400 13px/20px var(--mono); white-space: pre; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3A3F4B transparent; }
.devlog .dim { color: #A3A3A3; }
.devlog .vite { color: #67E8F9; font-weight: 600; }
.devlog .hmr { display: block; align-self: stretch; margin: 14px -16px 0; padding: 2px 16px; background: rgb(92 149 255 / 12%); box-shadow: inset 2px 0 0 #5C95FF; animation: appear 0.3s 5.2s both, mark 0.6s 5.2s both; }
.devlog .file { color: #CFE0FF; }
.machine .terminal { margin: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; font-size: 13px; line-height: 20px; }
.machine .terminal .line { animation: appear 0.3s both; }
/* Lines grouped as the CLI prints them, with a little air between the
   groups (a flex column drops the newlines between lines, so the gaps are
   exact); the link, the thing to send, in the blue. */
.machine .terminal, .devlog { display: flex; flex-direction: column; align-items: flex-start; }
.machine .terminal .d1, .devlog .line + .line { margin-top: 6px; }
.machine .terminal .d2, .machine .terminal .d3, .machine .terminal .d4 { margin-top: 14px; }
.machine .terminal .link-line { color: #8DB4FF; }
.devlog .line.hmr { margin-top: 14px; }
.typed { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: pre; max-width: 12em; animation: type-command 0.9s steps(19, end) 0.4s both; }
.d1 { animation-delay: 1.5s !important; }
.d2 { animation-delay: 1.8s !important; }
.d3 { animation-delay: 2.1s !important; }
.d4 { animation-delay: 3.9s !important; }
.machine .terminal .line:first-child { animation: none; }
.pulse { position: relative; display: inline-block; }
.pulse::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 0 1px var(--working); opacity: 0; animation: ring 1.2s ease-out 3.9s both; }

/* The thread and its spark. */
.thread { position: relative; height: 56px; }
.thread svg { display: none; }
.thread::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; border-left: 1.5px dashed var(--thread); animation: draw-down 0.6s 2.3s both; transform-origin: top; }
.thread::after { content: ""; position: absolute; left: 28px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #CFE0FF; box-shadow: 0 0 12px 2px var(--thread); opacity: 0; animation: travel-down 0.7s ease-in-out 2.3s both; }
@media (min-width: 1120px) {
  .thread { height: 364px; }
  .thread::before, .thread::after { display: none; }
  .thread svg { display: block; width: 72px; height: 364px; overflow: visible; }
  .thread path { fill: none; stroke: var(--thread); stroke-width: 1.5; stroke-dasharray: 4 5; }
  .thread .glow { stroke-width: 8; stroke-dasharray: none; stroke-opacity: 0.16; }
  .thread circle { fill: #E3EDFF; filter: drop-shadow(0 0 6px #5C95FF); offset-path: path("M0,357 C36,357 36,57 72,57"); offset-distance: 100%; opacity: 0; animation: travel 0.8s ease-in-out 2.3s both; }
  .thread .again { animation-delay: 5.3s; }
  .thread .ends { fill: var(--background); stroke: var(--thread); stroke-width: 1.5; filter: none; offset-path: none; opacity: 1; animation: none; }
}

/* The tester's browser, in the visitor's theme. */
.browser { box-shadow: 0 40px 80px -30px rgb(0 0 0 / 85%), 0 0 0 1px rgb(92 149 255 / 8%); }
@media (prefers-color-scheme: light) {
  .showcase .browser { --text: #0A0A0A; --secondary: #525252; --border: #8A8A8A; --rule: #E5E5E5; --surface: #FFFFFF; --sunken: #F4F4F5; --app-accent: #9A3412; --app-on-accent: #FFFFFF; border-color: #2A2F3A; color: var(--text); }
}
.browser .viewport { position: relative; min-height: 292px; }
.browser .viewport::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--app-accent); transform-origin: left; opacity: 0; animation: load 0.5s ease-out 2.9s both; }
.browser .address { animation: appear 0.2s 2.9s both; }
.app { padding: 20px 24px 24px; animation: arrive 0.4s ease-out 3.2s both; }
.app-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px; color: var(--secondary); font-size: 14px; }
.app-name { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
.app-name::before { content: "▲ "; color: var(--app-accent); }
/* The example app's header: sunrise or night, its own colours. */
.scenery { position: relative; isolation: isolate; overflow: hidden; height: 164px; margin: 0 0 12px; padding: 18px 20px; border-radius: 10px; color: #F8FAFC; animation: dusk-text 0.8s ease 6s both, changed 1.4s ease-out 6s both; }
.scenery .scene { position: absolute; inset: 0; z-index: -1; }
.scene.night { background: linear-gradient(#0B1533, #243466); }
.scene.day { background: linear-gradient(#FFEBC7, #F7BE7E); opacity: 0; animation: fade-out 0.8s ease 6s both; }
.scene .orb { position: absolute; right: 28px; top: 20px; width: 34px; height: 34px; border-radius: 50%; }
.day .orb { background: #FFF8E6; box-shadow: 0 0 0 9px rgb(255 255 255 / 30%); }
.night .orb { box-shadow: inset 9px -5px 0 0 #F1F5F9; transform: rotate(-20deg); }
.night .stars { position: absolute; inset: 0 0 40% 0; background-image: radial-gradient(circle at 54% 18%, #fff 1.2px, transparent 1.6px), radial-gradient(circle at 62% 58%, #fff 1px, transparent 1.4px), radial-gradient(circle at 72% 12%, #fff 1.3px, transparent 1.7px), radial-gradient(circle at 80% 72%, #fff 1px, transparent 1.4px), radial-gradient(circle at 95% 80%, #fff 1.1px, transparent 1.5px), radial-gradient(circle at 47% 82%, #fff 0.9px, transparent 1.3px); }
.scene .peak { position: absolute; bottom: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.scene .peak.far { left: 18%; width: 90%; height: 52%; }
.scene .peak.near { left: -16%; width: 72%; height: 44%; }
.day .far { background: #D98A52; }
.day .near { background: #A85A30; }
.night .far { background: #2C3D78; }
.night .near { background: #17224A; }
.scenery-title { position: relative; margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; }
.scenery-line { position: relative; margin: 2px 0 0; font-size: 14px; line-height: 20px; }
.app-items { margin: 0; padding: 0; list-style: none; }
.app-items li { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.app-items li span + span { color: var(--secondary); font-variant-numeric: tabular-nums; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes appear { from { opacity: 0; } }
@keyframes type-command { from { max-width: 0; } }
@keyframes type { from { max-width: 0; } }
@keyframes erase { from { max-width: 4.6em; } }
@keyframes mark { from { background: transparent; box-shadow: inset 2px 0 0 transparent; } }
@keyframes ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(3.5); } }
@keyframes draw-down { from { transform: scaleY(0); } }
@keyframes travel-down { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }
@keyframes travel { 0% { opacity: 1; offset-distance: 0%; } 90% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
@keyframes load { 0% { opacity: 1; transform: scaleX(0); } 80% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade-out { from { opacity: 1; } }
@keyframes dusk-text { from { color: #1F2937; } }
@keyframes changed { 0% { box-shadow: 0 0 0 0 rgb(92 149 255 / 0%); } 25% { box-shadow: 0 0 0 4px rgb(92 149 255 / 90%); } 100% { box-shadow: 0 0 0 12px rgb(92 149 255 / 0%); } }
@keyframes lit { from { color: var(--secondary); } }
@keyframes fill { from { transform: scaleX(0); } }

/* Homepage sections */
.band { padding-top: clamp(96px, 12vw, 160px); }
.section-head { max-width: 780px; margin: 0 0 48px; }
/* The three points: an open band led by figures. */
.points { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--rule); list-style: none; }
.points::before { content: ""; position: absolute; left: 0; top: -1px; width: 33%; height: 1px; background: linear-gradient(90deg, var(--thread), transparent); }
.points li { margin: 0; padding: 40px 0; }
.points li + li { border-top: 1px solid var(--rule); }
.figure { display: flex; align-items: flex-end; gap: 10px; height: calc(0.9 * clamp(72px, 50px + 5vw, 112px)); margin: 0 0 20px; font-size: clamp(72px, 50px + 5vw, 112px); line-height: 0.9; white-space: nowrap; font-weight: 600; letter-spacing: -0.06em; color: var(--accent); background: linear-gradient(160deg, var(--accent) 20%, var(--thread) 60%, color-mix(in srgb, var(--thread) 35%, var(--background)) 100%); background-clip: text; -webkit-text-fill-color: transparent; }
.figure span { font: 500 13px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; -webkit-text-fill-color: var(--secondary); }
.points h3 { margin: 0 0 8px; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; }
.points p:not(.figure) { max-width: 22em; margin: 0; color: var(--secondary); font-size: 17px; line-height: 26px; }
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.way { display: flex; flex-direction: column; padding: 0 28px 28px; overflow: hidden; }
.way h3 { margin: 0 0 8px; font-size: 24px; line-height: 30px; letter-spacing: -0.025em; }
.way p { color: var(--secondary); }
.way .terminal { margin: auto 0 0; }
/* Who gets in: the link, a thread to each person. */
.fan { position: relative; display: grid; justify-items: center; margin: 0 -28px 28px; padding: 32px 28px 28px; border-bottom: 1px solid var(--rule); background: radial-gradient(70% 90% at 50% 0%, var(--accent-soft), transparent 75%); }
.fan .hub { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--thread) 55%, transparent); border-radius: 999px; background: var(--surface); color: var(--accent); font: 400 13px/20px var(--mono); white-space: nowrap; box-shadow: 0 0 28px -8px color-mix(in srgb, var(--thread) 70%, transparent), var(--lift); }
.fan .hub .icon { width: 14px; height: 14px; }
.fan svg { display: block; width: 100%; max-width: 400px; height: 64px; overflow: visible; }
.fan path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fan path.in { stroke: var(--thread); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--thread) 60%, transparent)); }
.fan path.out { stroke: var(--border); stroke-dasharray: 3 5; opacity: 0.6; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 400px; margin: 0; padding: 0; list-style: none; }
.people li { position: relative; display: grid; place-items: center; justify-self: center; width: 48px; height: 48px; margin: 0; border-radius: 50%; font-size: 18px; font-weight: 600; }
.people .in { border: 1.5px solid var(--thread); background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 24px -4px color-mix(in srgb, var(--thread) 55%, transparent); }
.people .out { border: 1.5px dashed var(--border); color: var(--secondary); opacity: 0.55; }
.people .tag { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--surface); border-radius: 50%; font-size: 10px; line-height: 1; }
.people .in .tag { background: var(--thread); color: #FFFFFF; }
.people .out .tag { background: var(--sunken); color: var(--secondary); }
.people .tag .icon { width: 11px; height: 11px; }
.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 20px; margin: 0; padding: 0; list-style: none; }
.shots li { margin: 0; min-width: 0; }
.shots figure { margin: 0; }
.shots .window { box-shadow: var(--lift), var(--shadow); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s; }
.shots .window:hover { transform: translateY(-4px); border-color: var(--border); }
.shots figcaption { margin: 16px 4px 0; color: var(--secondary); }
.shots figcaption strong { color: var(--text); font-weight: 500; }
.shot { padding: 22px 20px 24px; min-height: 224px; }
.shot .mark { display: flex; align-items: center; gap: 6px; margin: 0 0 28px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.shot .heading { margin: 0 0 6px; font-size: 18px; line-height: 24px; font-weight: 500; }
.shot .line { margin: 0 0 16px; color: var(--secondary); font-size: 14px; line-height: 20px; }
.shot .field { display: block; margin: 0 0 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--secondary); font-size: 14px; line-height: 20px; }
.shot .solid { display: block; padding: 10px; border-radius: 8px; background: var(--text); color: var(--background); font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; align-items: center; padding: clamp(24px, 5vw, 56px); overflow: hidden; }
.split::after { content: ""; position: absolute; right: -10%; bottom: -30%; z-index: -1; width: 70%; height: 90%; background: radial-gradient(closest-side, var(--ambient), transparent); pointer-events: none; }
.split-copy .section-lead { margin-bottom: 20px; }
.split-copy p:last-child { margin: 0; }
.split-art { min-width: 0; }
.split .terminal { margin: 0; }
/* Two ports joining one link. */
.merge { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; grid-template-rows: auto auto; align-items: center; row-gap: 12px; margin: 0 0 20px; }
.merge .port { position: relative; display: inline-flex; align-items: center; width: fit-content; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--text); font: 400 13px/20px var(--mono); white-space: nowrap; box-shadow: var(--lift); }
.merge .port:nth-child(2) { grid-row: 2; }
.merge svg { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; overflow: visible; }
.merge path { fill: none; stroke: var(--thread); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.merge .joined { grid-column: 3; grid-row: 1 / span 2; border-color: color-mix(in srgb, var(--thread) 55%, transparent); background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 24px -6px color-mix(in srgb, var(--thread) 60%, transparent); }
@media (max-width: 719px) {
  .merge { display: flex; flex-wrap: wrap; gap: 8px; }
  .merge svg { display: none; }
  .merge .joined { flex-basis: 100%; width: fit-content; flex-grow: 0; }
  .merge .joined::before { content: "→"; margin-right: 8px; color: var(--secondary); }
}
.closing { padding-top: clamp(96px, 12vw, 160px); }
.finale { padding: clamp(48px, 8vw, 104px) clamp(20px, 5vw, 64px); border-radius: 28px; text-align: center; }
.finale::before { background: radial-gradient(60% 60% at 50% 110%, rgb(61 123 255 / 45%), transparent 70%), radial-gradient(40% 40% at 10% 0%, rgb(99 102 241 / 14%), transparent 70%), radial-gradient(40% 40% at 90% 0%, rgb(56 189 248 / 12%), transparent 70%); }
.finale::after { mask-image: radial-gradient(70% 70% at 50% 100%, #000, transparent 80%); }
.closing .section-title { max-width: 14em; margin: 0 auto; font-size: clamp(34px, 18px + 4vw, 72px); }
.closing .section-title span { display: block; }
/* A title that breaks only between its phrases; the last in the blue. */
.phrases { text-wrap: wrap; }
.phrases span { display: inline-block; }
.phrases .accent-line, #get span + span + span { color: var(--accent); }
@media (min-width: 720px) { .phrases .accent-line { display: block; } }
.section-head:has(.phrases) { max-width: 960px; }
.closing .section-title span + span { color: #9EC0FF; }
/* Get started's own stage. */
.setup { border-radius: 28px; }
.setup .start { border: 0; background: none; box-shadow: none; backdrop-filter: none; }
@media (max-width: 480px) { .setup { border-radius: 20px; } }
.closing .actions { justify-content: center; margin-top: 32px; }
@media (max-width: 480px) { .finale { border-radius: 20px; } }
@media (min-width: 1000px) {
  .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .points li { padding: 48px 40px 8px; }
  .points li:first-child { padding-left: 0; }
  .points li + li { border-top: 0; border-left: 1px solid var(--rule); }
}
@media (min-width: 720px) {
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
@media (min-width: 1120px) {
  .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 40px; }
  .shots li:nth-child(even) { translate: 0 40px; }
}

/* Install page */
.page-head { padding-top: clamp(48px, 7vw, 88px); padding-bottom: 8px; }
.not-found .actions { margin-top: 8px; }
.page-head .context { max-width: 40em; margin: 0 0 32px; font-size: 19px; line-height: 30px; }
.picker { margin: 0 0 8px; }
.os { padding: 40px 0 8px; }
.js .os[data-os]:not([data-selected]) { display: none; }
.os > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 20px; font-size: 32px; line-height: 38px; letter-spacing: -0.03em; }
.os .channel { color: var(--secondary); font: 400 13px/20px var(--mono); letter-spacing: 0.02em; }
.os .note { color: var(--secondary); }
.os .pending { position: relative; padding: 20px 24px 20px 56px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, var(--accent-soft), transparent), var(--surface); box-shadow: var(--lift); }
.os .pending::before { left: 22px; top: 22px; }
.os .pending p { margin: 0; }
.os .pending .note { color: var(--text); }
.os .pending p + p { margin-top: 4px; color: var(--secondary); }
.route { position: relative; padding: 28px; border: 1px solid var(--rule); border-radius: 20px; background: radial-gradient(80% 120% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface); box-shadow: var(--lift); }
.route .cmd, .route > .terminal { margin: 14px 0 18px; }
.route p { margin: 0 0 8px; color: var(--secondary); }
.route p:last-child { margin: 0; }
.route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.route .route-head { margin: 0; color: var(--text); font-size: 20px; line-height: 28px; }
.route-head strong { font-weight: 600; letter-spacing: -0.01em; }
.badge { display: inline-flex; align-items: center; padding: 1px 10px; border: 1px solid color-mix(in srgb, var(--thread) 50%, transparent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 11px/22px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 480px) { .route { padding: 18px; border-radius: 16px; } }

/* Check, upgrade, uninstall: spaced rows. */
.after { margin: 28px 0 0; padding: 0 4px; }
.after > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 8px 0; }
.after dt { margin: 0; color: var(--secondary); font: 500 12px/24px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.after dd { min-width: 0; margin: 0; color: var(--text); }
.after dd .cmd, .after dd > .terminal { margin: 0 0 8px; }
.after dd p { margin: 0; color: var(--secondary); }
@media (min-width: 640px) { .after > div { grid-template-columns: 120px minmax(0, 1fr); } }

/* Other ways to install: open cards, name beside commands. */
.others { margin-top: 56px; }
.others > .label { margin-bottom: 16px; }
.other { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; margin: 0 0 16px; padding: 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.other-head h3 { margin: 0 0 6px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.other-head p { margin: 0; color: var(--secondary); font-size: 15px; line-height: 23px; }
.steps-list { display: grid; gap: 14px; margin: 0; }
.steps-list > div { min-width: 0; }
.steps-list dt { margin: 0 0 6px; color: var(--secondary); font: 500 11px/16px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.steps-list dd { min-width: 0; margin: 0; }
.steps-list .cmd { margin: 0 0 8px; }
.steps-list .cmd:last-child, .steps-list dd > p { margin: 0; }
.steps-list dd > p { color: var(--text); }
.seq { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.seq li { min-width: 0; margin: 0; }
.seq .cmd { margin: 0 0 8px; }
.seq .cmd:last-child { margin-bottom: 0; }
.seq-n { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--text); font-size: 14px; line-height: 20px; font-weight: 500; }
.seq-n span { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid color-mix(in srgb, var(--thread) 45%, transparent); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 500 11px/1 var(--mono); }
.steps-list .archives { margin-top: 12px; color: var(--secondary); font-size: 15px; line-height: 24px; }
@media (min-width: 760px) { .other { grid-template-columns: 200px minmax(0, 1fr); } }
/* Completion and verification at the foot. */
.extras { margin-top: 72px; }
.extra + .extra { margin-top: 48px; }
.extra h2 { margin: 0 0 8px; font-size: 22px; line-height: 30px; }
.extra > p { color: var(--secondary); }
.extra .steps-list { margin-top: 20px; }
.steps-list .aside { margin: 8px 0 0; color: var(--secondary); font-size: 14px; line-height: 20px; }

/* Docs */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 72px; padding-top: 40px; }
.docs article { min-width: 0; max-width: 700px; }
.docs article > .context { font-size: 19px; line-height: 30px; }
.docs-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -12px 24px; }
.docs-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px; color: var(--secondary); text-decoration: none; transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.docs-nav a:hover { color: var(--text); }
.docs-nav a[aria-current="page"] { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--thread); text-underline-offset: 8px; }
.docs-nav .label { display: none; }
@media (min-width: 960px) {
  .docs { grid-template-columns: 232px minmax(0, 1fr); padding-top: 72px; }
  .docs-nav { position: sticky; top: 96px; align-self: start; flex-direction: column; gap: 2px; margin: 0; padding: 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); box-shadow: var(--lift); }
  .docs-nav .label { display: flex; margin: 4px 0 8px; padding: 0 12px; }
  .docs-nav a { padding: 10px 12px; border-radius: 10px; }
  .docs-nav a:hover { background: var(--sunken); }
  .docs-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
}
.docs article h2 { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.docs article h1 + h2, .docs article .context + h2 { margin-top: 32px; }
.pager { display: flex; justify-content: flex-end; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--rule); }
.pager a { display: inline-flex; flex-direction: column; min-width: 240px; min-height: 44px; padding: 14px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-weight: 500; text-align: right; text-decoration: none; box-shadow: var(--lift); transition: border-color 0.15s, transform 0.2s; }
.pager a:hover { border-color: var(--accent); transform: translateX(2px); }
.pager span { color: var(--secondary); font-size: 14px; line-height: 20px; font-weight: 400; }
.pager span::after { content: " →"; }
/* Docs index: numbered pages, each with its first line. */
.pages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pages li { margin: 0; min-width: 0; }
.pages a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 28px; border: 1px solid var(--rule); border-radius: 20px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--lift); transition: border-color 0.2s, transform 0.2s; }
.pages a::after { content: "→"; position: absolute; right: 28px; top: 26px; color: var(--secondary); font-size: 20px; transition: transform 0.2s, color 0.2s; }
.pages a:hover { border-color: color-mix(in srgb, var(--thread) 60%, transparent); transform: translateY(-2px); }
.pages a:hover::after { color: var(--accent); transform: translateX(4px); }
.pages .first a { background: radial-gradient(90% 120% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); border-color: color-mix(in srgb, var(--thread) 40%, var(--rule)); }
.page-n { color: var(--accent); font: 500 13px/20px var(--mono); letter-spacing: 0.08em; }
.start-here { position: absolute; left: 72px; top: 27px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--thread) 50%, transparent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 11px/20px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pages strong { margin-top: 12px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.025em; }
.pages .what { color: var(--secondary); }
.pages .line { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: auto; padding: 12px 16px; border: 1px solid var(--term-rule); border-radius: 10px; background: var(--term); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); }
.pages .what + .line { margin-top: 20px; }
.pages .line .prompt { color: #8DB4FF; font: 500 13px/20px var(--mono); }
.pages .line code { min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: #FAFAFA; font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.pages .failed-line code { color: #F87171; }
/* Every command: the CLI's help in a terminal window beside its note. */
.commands { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; align-items: start; margin-top: 96px; }
.commands h2 { margin: 0 0 12px; font-size: clamp(28px, 22px + 1.6vw, 40px); line-height: 1.1; letter-spacing: -0.035em; }
.commands p { color: var(--secondary); }
.commands .terminal { margin: 0; padding: 18px 20px; }
@media (min-width: 960px) { .commands { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
/* Docs terminals get a window bar, drawn in the background. */
.docs article pre.terminal { padding-top: 46px; background: radial-gradient(circle at 20px 18px, #3A3F4B 4.5px, transparent 5px), radial-gradient(circle at 36px 18px, #3A3F4B 4.5px, transparent 5px), radial-gradient(circle at 52px 18px, #3A3F4B 4.5px, transparent 5px), linear-gradient(#1C2029, #1C2029) 0 35px / 100% 1px no-repeat, linear-gradient(#11141B, #11141B) 0 0 / 100% 35px no-repeat, var(--term); }
body[data-page="install"] .narrow { max-width: 920px; }
.messages dt { margin: 32px 0 8px; font-weight: 400; scroll-margin-top: 96px; }
.messages dt code { display: block; padding: 12px 16px; border: 1px solid var(--term-rule); border-radius: 8px; background: var(--term); color: #FAFAFA; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.messages dt code .dim { color: #A3A3A3; }
.messages dt code .ok { color: #4ADE80; }
.messages dt code .attention { color: #FBBF24; }
.messages dt code .failed { color: #F87171; }
.messages.on-page dt code { border-color: var(--rule); background: var(--surface); color: var(--text); font: 500 17px/24px Outfit, ui-sans-serif, system-ui, sans-serif; }
.messages dd { color: var(--text); }
.messages dd code { padding: 1px 5px; }
.filter { position: sticky; top: 64px; z-index: 1; margin: 24px 0 0; padding: 12px 0; background: var(--background); }
.filter label { display: block; margin: 0 0 6px; font-weight: 500; }
html:not(.js) .filter { display: none; }
.none { color: var(--secondary); }