:root {
  color-scheme: dark;
  --bg: #1f1f1f;
  --bg-2: #181818;
  --panel: #181818;
  --panel-2: #2a2d2e;
  --panel-3: #37373d;
  --line: #2b2b2b;
  --line-2: #3c3c3c;
  --text: #d7d7d7;
  --text-strong: #eef0f5;
  --text-2: #cccccc;
  --text-3: #9d9d9d;
  --brand-ink: #eef0f5;
  --brand-champagne: #d6b46a;
  --accent: #0078d4;
  --accent-hover: #026ec1;
  --accent-soft: #04395e;
  --accent-text: #4daafc;
  --on-accent: #ffffff;
  --focus: #4daafc;
  --input: #313131;
  --good: #5fd29a;
  --warn: #e5a50a;
  --bad: #f28b82;
  --glow-a: rgb(0 120 212 / 16%);
  --glow-b: rgb(214 180 106 / 7%);
  --grid: rgb(255 255 255 / 3.5%);
  --shadow-window: 0 0 0 1px #3c3c3c, 0 2px 4px rgb(0 0 0 / 40%), 0 24px 48px -12px rgb(0 0 0 / 60%), 0 64px 128px -32px rgb(0 0 0 / 70%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --wrap: 1200px;
  --gutter: 24px;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f8f8f8;
  --panel: #f8f8f8;
  --panel-2: #f2f2f2;
  --panel-3: #e8e8e8;
  --line: #e5e5e5;
  --line-2: #cecece;
  --text: #1f1f1f;
  --text-strong: #0b1a33;
  --text-2: #3b3b3b;
  --text-3: #616161;
  --brand-ink: #0b1a33;
  --brand-champagne: #b8924a;
  --accent: #005fb8;
  --accent-hover: #0258a8;
  --accent-soft: #e8e8e8;
  --accent-text: #005fb8;
  --on-accent: #ffffff;
  --focus: #005fb8;
  --input: #ffffff;
  --good: #1f7a4d;
  --warn: #8a5a00;
  --bad: #b3261e;
  --glow-a: rgb(0 95 184 / 9%);
  --glow-b: rgb(184 146 74 / 8%);
  --grid: rgb(0 0 0 / 3.5%);
  --shadow-window: 0 0 0 1px #e5e5e5, 0 2px 4px rgb(0 0 0 / 5%), 0 24px 48px -16px rgb(0 0 0 / 16%), 0 64px 120px -40px rgb(0 0 0 / 20%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 5%);
}

/* duscode.com (D39). The site and the app are one product: the colours are
   the app's default theme, VS Code Modern (packages/web/src/styles/themes.css,
   palette "modern"), in the same roles. The page is the app's --bg, cards are
   its --surface, raised fills its --surface-2, hairlines its --border; the one
   primary action is its --primary blue; champagne is the logo's chevron and
   nothing else. test/contrast.test.mjs checks every value against the app's
   theme file (while the app has the palette) and every text/background pair
   against WCAG AA. The tokens themselves are in tokens.mjs, the one source
   the site, the docs and Duscode Cloud's pages share.

   Dark is the default, whatever the operating system says. A visitor who picks
   light gets html[data-theme="light"], remembered in this browser (the head
   script sets it before the first paint, so nothing flashes).

   Type: Inter, one serif voice for the secondary line, mono for evidence.
   Spacing on an 8px scale. Motion: 120/180/600ms with one ease; everything
   still at rest under prefers-reduced-motion, and nothing waits on JS to be
   visible. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--sans); font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--text-strong); }
p, ul, ol, dl, dd, figure { margin: 0; }
code { font-family: var(--mono); font-size: 0.875em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s2); top: -64px; z-index: 100; padding: var(--s1) var(--s2); border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 500; text-decoration: none; }
.skip:focus { top: var(--s2); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.muted { color: var(--text-2); }
.label { display: block; font: 500 13px/1.4 var(--mono); letter-spacing: 0; color: var(--text-3); }
.label b { color: var(--accent-text); font-weight: 500; }
.soon { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s1); border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--text-2); vertical-align: 2px; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: 44px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 500 15px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { border-color: var(--line-2); color: var(--text-strong); background: var(--panel-2); }
.btn-secondary:hover { background: var(--panel-3); }
/* Quiet solid button (near-white on dark, ink on light) for actions that
   aren't the section's one primary call to action, such as Sign in. */
.btn-ink { background: var(--text-strong); color: var(--bg); }
.btn-ink:hover { background: var(--text-2); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; border-radius: 6px; }
.link { color: var(--text-strong); text-decoration: none; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.link::after { content: '→'; color: var(--accent-text); transition: transform var(--dur) var(--ease); }
.link:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: var(--s4); height: 60px; }
.mark { width: 24px; height: auto; }
.mark .ink { fill: var(--brand-ink); }
.mark .acc { fill: var(--brand-champagne); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: var(--text-strong); }
.site-nav { display: flex; gap: var(--s3); margin-left: var(--s2); }
.site-nav a { color: var(--text-2); text-decoration: none; font-size: 14px; transition: color var(--dur-fast); }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--text-strong); }
.site-nav a[aria-current='page'] { text-decoration: underline 2px var(--accent); text-underline-offset: 8px; }
.nav-mobile-only { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.icon-btn:hover { background: var(--panel-2); color: var(--text-strong); }
.theme-toggle .sun { display: none; }
:root[data-theme='light'] .theme-toggle .sun { display: block; }
:root[data-theme='light'] .theme-toggle .moon { display: none; }
html:not(.js) .theme-toggle { display: none; }
.nav-toggle { display: none; border-color: var(--line-2); }
/* The account menu (D-SITE-SIGNED-IN): site.js swaps "Sign in" for it when the cloud says this
   browser is signed in. The slot keeps the link's width, so nothing moves when it swaps. */
.account-slot { position: relative; display: flex; justify-content: flex-end; }
.account-slot.pending .account-signin { visibility: hidden; }
.account-slot.signed-in .account-signin { visibility: hidden; }
.account-slot.signed-in .account-btn { position: absolute; top: 0; right: 0; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; flex: none; }
.avatar svg { width: 16px; height: 16px; }
.account-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; display: inline-flex; }
.account-btn .avatar { box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow var(--dur-fast); }
.account-btn:hover .avatar, .account-btn[aria-expanded='true'] .avatar { box-shadow: 0 0 0 2px var(--accent-text); }
.account-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.account-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 232px; max-width: calc(100vw - 2 * var(--gutter)); padding: 6px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); box-shadow: 0 16px 40px -12px rgb(0 0 0 / 45%); }
.account-pop[hidden] { display: none; }
.account-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.account-who b { display: block; color: var(--text-strong); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.account-who span span { display: block; color: var(--text-3); font-size: 13px; }
.account-pop a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: 14px; }
.account-pop a:hover, .account-pop a:focus { background: var(--panel-2); color: var(--text-strong); outline: none; }
.account-pop a:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.account-pop .account-out { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .account-pop:not([hidden]) { animation: account-in var(--dur-fast) var(--ease); }
  @keyframes account-in { from { opacity: 0; transform: translateY(-4px); } }
}
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .hide-sm { display: none; }
  .header-actions { gap: var(--s1); }
  .site-nav { position: absolute; inset: 60px 0 auto; margin: 0; flex-direction: column; gap: 0; padding: var(--s1) var(--gutter) var(--s3); background: var(--bg); border-bottom: 1px solid var(--line); display: none; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 0; font-size: 17px; color: var(--text-strong); border-bottom: 1px solid var(--line); }
  .nav-mobile-only { display: block; }
  html:not(.js) .site-nav { position: static; display: flex; flex-direction: row; gap: var(--s2); padding: 0; border: 0; background: none; }
  html:not(.js) .site-nav a { border: 0; font-size: 14px; padding: 0; }
  html:not(.js) .nav-toggle { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: var(--s6) 0 0; isolation: isolate; }
/* A calm field behind the first screen: two soft glows and a faint grid that fades out. */
.hero::before { content: ''; position: absolute; inset: -60px 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 340px at 72% 22%, var(--glow-a), transparent 70%),
    radial-gradient(520px 300px at 18% 8%, var(--glow-b), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 85%); mask-image: linear-gradient(#000 30%, transparent 85%); }
.beta-pill { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--text-2); font-size: 13px; text-decoration: none; transition: border-color var(--dur), color var(--dur); }
.beta-pill:hover { border-color: var(--text-3); color: var(--text-strong); }
.beta-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.beta-pill b { color: var(--text-strong); font-weight: 500; }
.hero h1 { margin-top: var(--s2); font-size: clamp(38px, 5.2vw, 78px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.98; }
.hero .second { margin-top: var(--s1); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--text-2); }
.hero-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: end; margin-top: var(--s3); }
.hero-row p { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; color: var(--text-2); max-width: 36em; }
.hero-row p strong { color: var(--text-strong); font-weight: 500; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta .cta-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-3, var(--text-2)); text-align: right; }
@media (max-width: 760px) { .cta .cta-note { text-align: left; } }
.hero-meta { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); color: var(--text-3); font: 400 13px/1.5 var(--mono); }
.hero-row p.hero-meta { font-size: 13px; }

/* The product stage: the real app, and the task's journey under it. */
.stage { position: relative; margin-top: var(--s6); }
.frame { position: relative; }
.window { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-window); background: #1f1f1f; aspect-ratio: 1440 / 900; }
.window picture { position: absolute; inset: 0; transition: opacity 0.6s var(--ease); }
.window img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.js .window picture:not(.on) { opacity: 0; }
html:not(.js) .window picture:not(:first-child) { display: none; }
/* The step's explanation: a chip under the journey, pointing at the active (or clicked) step. Never over the app. */
.evidence-wrap { position: relative; height: 0; margin-top: 14px; --x: 50%; z-index: 5; }
/* Desktop: only after someone clicks a step's dot (the journey plays without it). */
.js .evidence-wrap:not(.open)::before, .js .evidence-wrap:not(.open) .evidence { opacity: 0; visibility: hidden; pointer-events: none; }
.evidence-wrap::before, .evidence-wrap .evidence { transition: left 0.45s var(--ease), opacity 0.2s var(--ease), visibility 0.2s; }
.evidence-wrap::before { content: ''; position: absolute; top: 4px; left: var(--x); width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); background: var(--panel); z-index: 1; }
.evidence { position: absolute; top: 10px; width: min(460px, 100%); left: clamp(0px, calc(var(--x) - min(230px, 50%)), calc(100% - min(460px, 100%))); padding: 14px var(--s2); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); box-shadow: 0 16px 40px -12px rgb(0 0 0 / 45%); }
.evidence .k { display: flex; align-items: center; gap: var(--s1); font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.evidence .k i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); }
.evidence p { margin-top: 6px; color: var(--text-strong); font-size: 14.5px; line-height: 1.45; }
.evidence p span { color: var(--text-3); }
.js .evidence p { transition: opacity var(--dur) var(--ease); }
.js .evidence.swap p { opacity: 0; }

/* The journey: Reason › Decide › Build › Verified › Merged › Live › Watched. */
.journey { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: var(--s3); padding-top: 18px; list-style: none; padding-left: 0; }
.journey::before, .journey::after { content: ''; position: absolute; top: 5px; left: 7%; right: 7%; height: 2px; border-radius: 2px; background: var(--line-2); }
.journey::after { right: auto; width: calc(86% * var(--p, 1)); background: linear-gradient(90deg, var(--accent), var(--accent-text)); transition: width 0.6s var(--ease); }
.journey li { position: relative; display: flex; justify-content: center; }
.journey button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; border: 0; background: none; color: var(--text-3); font: 500 13.5px/1.3 var(--sans); cursor: pointer; text-align: center; transition: color var(--dur) var(--ease); }
.journey button::before { content: ''; position: absolute; top: -18px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); transition: background-color var(--dur), border-color var(--dur), box-shadow var(--dur); }
.journey .done button { color: var(--text-2); }
.journey .done button::before { border-color: var(--accent); background: var(--accent); }
.journey .now button { color: var(--text-strong); }
.journey .now button::before { border-color: var(--accent-text); background: var(--accent-text); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-text) 22%, transparent); }
.journey .owner button::after { content: 'You decide'; font: 500 11px/1 var(--mono); color: var(--warn); }
.journey button:hover { color: var(--text-strong); }
.caption { margin-top: var(--s3); color: var(--text-3); font-size: 13px; text-align: center; }

/* ---------- Sections ---------- */
.section { padding: var(--s16) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section.tight { padding: var(--s10) 0; }
.band { background: var(--bg-2); border-block: 1px solid var(--line); }
.band + .section { border-top: 0; }
.statement { font-size: clamp(26px, 3.2vw, 42px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.16; max-width: 30ch; color: var(--text-strong); }
.statement .muted { color: var(--text-3); }
.h2 { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -0.045em; line-height: 1.02; }
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: end; margin-bottom: var(--s8); }
.intro p { color: var(--text-2); font-size: 17px; max-width: 34em; }
.intro .label + .h2 { margin-top: var(--s2); }

/* Cards: the app's card, the same radius and hairline. */
.card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.card.lift:hover { border-color: var(--line-2); transform: translateY(-2px); }

/* ---------- Jobs strip: what Dus takes on (two drifting rows) ---------- */
.jobs { display: grid; gap: 12px; margin-top: var(--s5); }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; }
.job { display: grid; gap: 10px; width: 280px; padding: var(--s2); }
.job .top { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.job .duty { font: 500 12px/1 var(--mono); color: var(--text-3); }
.job h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-strong); line-height: 1.35; }
.seal { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font: 500 12px/1 var(--sans); white-space: nowrap; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.seal::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.seal.call { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.seal.run { background: var(--accent-soft); color: var(--accent-text); }
.job p { color: var(--text-3); font-size: 13px; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .js .marquee-track { animation: drift 70s linear infinite; }
  .js .marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 80s; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
}
@keyframes drift { to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { width: auto; flex-wrap: wrap; }
  .marquee-track [aria-hidden='true'] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee.rev { display: none; }
}
html:not(.js) .marquee-track { width: auto; flex-wrap: wrap; }
html:not(.js) .marquee-track [aria-hidden='true'] { display: none; }
html:not(.js) .marquee.rev { display: none; }

/* ---------- The loop: request to production and back ---------- */
.loop { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.loop::before { content: ''; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 6%, var(--line-2) 94%, transparent); }
.loop li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 2px; }
.loop .node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); transition: border-color var(--dur), color var(--dur), background-color var(--dur); }
.loop .node svg { width: 22px; height: 22px; }
.loop li.owner .node { border-color: color-mix(in srgb, var(--warn) 55%, var(--line-2)); color: var(--warn); }
.loop h3 { font-size: 16px; letter-spacing: -0.015em; }
.loop p { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.loop .proof { margin-top: auto; padding-top: 6px; font: 400 12px/1.45 var(--mono); color: var(--text-3); }
.loop .who { font: 500 11px/1 var(--mono); color: var(--warn); }
/* A pulse runs along the line, station to station. */
.loop .pulse { position: absolute; top: 24px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent-text) 55%, transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .loop.in .pulse { animation: pulse 9s var(--ease) infinite; }
  .js .loop.in li .node { animation: node 9s var(--ease) infinite; animation-delay: calc(var(--i) * 9s / 7); }
}
@keyframes pulse { 0% { left: 2%; opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { left: 96%; opacity: 0; } }
@keyframes node { 0%, 10% { border-color: var(--accent-text); color: var(--text-strong); } 18%, 100% { } }
.loop-back { display: flex; align-items: center; gap: 12px; margin-top: var(--s4); padding: 14px var(--s2); border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--text-2); font-size: 15px; }
.loop-back svg { flex: none; width: 20px; height: 20px; color: var(--accent-text); }
.loop-back strong { color: var(--text-strong); font-weight: 500; }

/* ---------- Signature elements (D131), drawn as the app draws them ---------- */
.sig { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sig > .card { display: flex; flex-direction: column; padding: var(--s3); grid-column: span 2; }
.sig > .card.wide { grid-column: span 3; }
.sig h3 { font-size: 18px; letter-spacing: -0.02em; }
.sig .card > p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; }
.sig .demo { margin-top: var(--s3); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-size: 13.5px; line-height: 1.5; flex: 1; }
.kicker { font: 600 11.5px/1 var(--sans); letter-spacing: 0.06em; color: var(--warn); }
.tag-rec { font: 600 11px/1 var(--sans); letter-spacing: 0.05em; color: var(--accent-text); }
/* Therefore line */
.because { display: grid; gap: 8px; }
.because li { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--text-2); }
.because { padding: 0; margin: 0; }
.because .b { color: var(--text-3); font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--panel-2); font: 12px/1 var(--mono); color: var(--text); }
.chip.assume { background: transparent; border: 1px dashed var(--line-2); color: var(--text-3); font-family: var(--sans); font-style: italic; }
.therefore { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text-strong); }
.therefore b { color: var(--accent-text); font-weight: 600; margin-right: 6px; }
/* Triad */
.triad { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.triad li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; color: var(--text-2); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 14px; height: 4px; border-radius: 2px; background: var(--panel-3); }
.pips i.r, .pips i.d { background: var(--accent); }
.pips i.b { background: var(--good); }
.pips i.w { background: var(--warn); }
/* Owner's Call */
.call-q { margin-top: 8px; font-weight: 600; color: var(--text-strong); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.opt { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.opt.rec { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.opt b { display: block; color: var(--text-strong); font-weight: 600; font-size: 13px; }
.opt dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin-top: 6px; font-size: 12px; }
.opt dt { color: var(--text-3); }
.opt dd { color: var(--text-2); }
.call-act { display: flex; gap: 8px; margin-top: 10px; }
.mini-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 5px; font-size: 12.5px; font-weight: 500; background: var(--panel-2); color: var(--text-strong); border: 1px solid var(--line-2); }
.mini-btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
/* Runway */
.runway { position: relative; height: 10px; margin-top: 22px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
.runway .spent { position: absolute; inset: 0 auto 0 0; width: 38%; background: var(--accent); border-radius: 5px 0 0 5px; transition: width 1.2s var(--ease); }
.runway .reserved { position: absolute; top: 0; bottom: 0; left: 38%; width: 9%; background: repeating-linear-gradient(135deg, var(--accent-text) 0 3px, transparent 3px 6px); opacity: 0.7; transition: left 1.2s var(--ease); }
.runway .forecast { position: absolute; top: 4px; left: 47%; width: 33%; height: 2px; background: repeating-linear-gradient(90deg, var(--text-3) 0 6px, transparent 6px 10px); transition: left 1.2s var(--ease); }
.runway-end { position: relative; height: 0; }
.runway-end::after { content: ''; position: absolute; right: 8%; top: -16px; width: 2px; height: 22px; background: var(--warn); }
.runway-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; font: 12px/1.4 var(--mono); color: var(--text-3); }
.runway-legend b { color: var(--text-strong); font-weight: 500; }
.js .sig .card:not(.in) .runway .spent { width: 12%; }
.js .sig .card:not(.in) .runway .reserved { left: 12%; }
.js .sig .card:not(.in) .runway .forecast { left: 21%; }
/* Seal */
.seal-demo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.seal-big { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 13.5px; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.seal-big svg { width: 16px; height: 16px; }
.proven { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; color: var(--text-2); font-size: 13px; }
.proven li::before { content: '✓'; margin-right: 8px; color: var(--good); }
.proven li.gap::before { content: '–'; color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .js .sig .card.in .seal-big { animation: settle 0.7s var(--ease) 0.3s both; }
  .js .sig .card.in .pips i { animation: pip 0.5s var(--ease) both; animation-delay: calc(var(--d, 0) * 140ms + 200ms); }
  .js .sig .card.in .because li, .js .sig .card.in .therefore { animation: rise 0.5s var(--ease) both; animation-delay: calc(var(--d, 0) * 160ms + 150ms); }
}
@keyframes settle { 0% { transform: scale(0.92); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes pip { from { background: var(--panel-3); } }
@keyframes rise { from { opacity: 0.25; transform: translateY(4px); } }

/* ---------- The real app (gallery) ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: var(--s3); }
.tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font: 500 14px/1 var(--sans); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.tabs button:hover { color: var(--text-strong); }
.tabs button[aria-selected='true'] { background: var(--panel-2); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line-2); }
html:not(.js) .tabs { display: none; }
.shots { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s5); align-items: center; }
.shot { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-window); background: #1f1f1f; }
.js .shot-panel[hidden] { display: none; }
html:not(.js) .shot-panel + .shot-panel { margin-top: var(--s4); }
.shot-panel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s5); align-items: center; }
.shot-panel.phone { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.shot-panel.phone .shot { max-width: 300px; justify-self: center; border-radius: 28px; box-shadow: var(--shadow-window), 0 0 0 8px var(--panel-2); }
.shot-copy h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.03em; }
.shot-copy p { margin-top: 12px; color: var(--text-2); }
.shot-copy ul { margin-top: var(--s2); padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text-2); font-size: 15px; }
.shot-copy li { display: flex; gap: 10px; }
.shot-copy li::before { content: '›'; color: var(--accent-text); font-weight: 600; }
.js .shot-panel:not([hidden]) .shot { animation: fadein 0.45s var(--ease); }
@keyframes fadein { from { opacity: 0.4; } }

/* ---------- Duties: the job description ---------- */
.duties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.duty-card { padding: var(--s3); display: flex; flex-direction: column; gap: 10px; }
.duty-card .row { display: flex; align-items: center; justify-content: space-between; }
.duty-card h3 { font-size: 18px; letter-spacing: -0.02em; }
.duty-card p { color: var(--text-2); font-size: 14.5px; }
.duty-card .ends { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font: 12.5px/1.5 var(--mono); color: var(--text-3); }
.switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--accent); flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left var(--dur) var(--ease); }
.switch.off { background: var(--panel-3); }
.switch.off::after { left: 3px; }
.duties-note { margin-top: var(--s3); color: var(--text-3); font-size: 14px; max-width: 60em; }

/* ---------- Trio (yours; ways to run) ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trio .card { padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: 10px; }
.trio .ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2); color: var(--accent-text); }
.trio .ico svg { width: 20px; height: 20px; }
.trio h3 { margin-top: 6px; font-size: 19px; letter-spacing: -0.02em; }
.trio p { color: var(--text-2); font-size: 15px; }
.trio ul { margin-top: 4px; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--text-3); font-size: 14px; }
.trio li::before { content: '—'; margin-right: 8px; color: var(--line-2); }
.trio .link { margin-top: auto; padding-top: 8px; font-size: 15px; }
.trio code { color: var(--text-strong); }

/* ---------- Stats: only numbers we can show the work for ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: var(--s4) var(--s3); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font-size: clamp(34px, 3.8vw, 52px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 12px; color: var(--text-2); font-size: 14.5px; max-width: 22em; }
.stats-note { margin-top: var(--s2); color: var(--text-3); font-size: 13px; }

/* ---------- Beta ---------- */
.beta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; padding: var(--s6); overflow: hidden; }
.beta::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(420px 220px at 90% 0%, var(--glow-a), transparent 70%); }
.beta > * { position: relative; }
.beta p { margin-top: 12px; color: var(--text-2); font-size: 16.5px; max-width: 34em; }
.beta ul { padding: 0; list-style: none; display: grid; gap: 10px; color: var(--text-2); font-size: 15px; }
.beta li { display: flex; gap: 10px; }
.beta li::before { content: '✓'; color: var(--good); }
.beta .cta { justify-content: flex-start; margin-top: var(--s3); }

/* ---------- Trust (Security page and others) ---------- */
.trust-list { border-top: 1px solid var(--line); }
.trust-list div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.trust-list dt { font-weight: 500; letter-spacing: -0.01em; color: var(--text-strong); }
.trust-list dd { color: var(--text-2); font-size: 15.5px; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); }
.plan { display: flex; flex-direction: column; padding: var(--s5); }
.plan + .plan { border-left: 1px solid var(--line); }
/* Five plans (D80): one row on wide screens, then two, then one. */
.plans.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.plans.five .plan { padding: var(--s4) var(--s3); }
.plans.five .plan .price { font-size: 40px; }
.plan .incl { margin-top: var(--s1); font-size: 14px; color: var(--text-strong); font-weight: 500; }
.plan.pro { background: var(--bg); box-shadow: inset 0 2px 0 var(--accent); }
.plan.pro h3 .label { margin: -4px 0; padding: 3px 8px; border: 1px solid var(--accent); border-radius: 999px; color: var(--text-strong); font-size: 12px; line-height: 1.2; }
.plan h3 { font-size: 17px; letter-spacing: -0.01em; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: var(--s1); }
.plan .price { margin-top: var(--s3); font-size: 48px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--text-strong); }
.plan .price small { margin-left: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.plan .for { margin-top: var(--s2); color: var(--text-2); font-size: 15px; min-height: 3.2em; }
.plan .btn { margin-top: var(--s4); }
.plan ul { list-style: none; padding: 0; margin-top: var(--s4); border-top: 1px solid var(--line); }
.plan li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--text-2); display: flex; justify-content: space-between; gap: var(--s1); }
.plan li:last-child { border-bottom: 0; }
.plan li.inherit { color: var(--text-strong); }
.plan-note { margin-top: var(--s3); color: var(--text-3); font-size: 14px; max-width: 60em; }
.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 600px; }
th, td { padding: 14px var(--s2) 14px 0; text-align: left; border-bottom: 1px solid var(--line); font-weight: 400; }
thead th { color: var(--text-3); font: 500 13px/1.4 var(--mono); }
tbody th { color: var(--text-strong); }
td { color: var(--text-2); width: 18%; }
.yes { color: var(--text-strong); }
.no { color: var(--text-3); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px var(--s5) 20px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; position: relative; color: var(--text-strong); transition: color var(--dur-fast); }
.faq summary:hover { color: var(--accent-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 22px/1 var(--sans); color: var(--text-3); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .answer { padding: 0 var(--s5) var(--s3) 0; color: var(--text-2); font-size: 15.5px; max-width: 46em; }
.faq .answer p + p { margin-top: 10px; }
.faq .answer a { color: var(--text-strong); }

/* ---------- Closing CTA ---------- */
.closing { position: relative; padding: var(--s16) 0; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.closing::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 360px at 80% 100%, var(--glow-a), transparent 70%), radial-gradient(500px 280px at 10% 0%, var(--glow-b), transparent 70%); }
.closing h2 { font-size: clamp(44px, 7.4vw, 104px); letter-spacing: -0.058em; line-height: 0.94; max-width: 16ch; }
.closing .second { margin-top: var(--s2); font-size: clamp(26px, 3vw, 40px); color: var(--text-2); }
.closing-row { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--s3); }
.cmd { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 var(--s2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: 13.5px/1 var(--mono); color: var(--text-2); background: var(--panel); }
.cmd b { color: var(--text-3); font-weight: 400; }

/* ---------- Inner pages ---------- */
.page-head { position: relative; padding: var(--s12) 0 var(--s8); isolation: isolate; }
.page-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 260px at 85% 0%, var(--glow-a), transparent 70%); }
.page-head h1 { font-size: clamp(44px, 7vw, 88px); letter-spacing: -0.055em; line-height: 0.96; max-width: 14ch; }
.page-head .second { margin-top: var(--s2); font-size: clamp(24px, 2.6vw, 34px); color: var(--text-2); }
.page-head p.lede { margin-top: var(--s3); max-width: 38em; color: var(--text-2); font-size: 18px; }
.prose { max-width: 760px; }
.prose h2 { font-size: 28px; letter-spacing: -0.035em; margin: var(--s8) 0 var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; letter-spacing: -0.015em; margin: var(--s4) 0 var(--s1); }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: var(--s2); }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: var(--s1); margin-top: 12px; }
.prose li strong, .prose p strong { color: var(--text-strong); font-weight: 500; }
.prose a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.prose a:hover { text-decoration-color: var(--accent-text); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); }
.notice { margin-bottom: var(--s5); padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-left: 2px solid var(--brand-champagne); border-radius: 4px; color: var(--text-2); font-size: 15px; background: var(--panel); }
.notice strong { color: var(--text-strong); font-weight: 500; }
.layout-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s6); }
.toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 10px; font-size: 14px; }
.toc a { color: var(--text-3); text-decoration: none; }
.toc a:hover { color: var(--text-strong); }

/* Download */
.install { list-style: none; padding: 0; margin: var(--s2) 0 0; counter-reset: i; border-top: 1px solid var(--line); }
.install > li { counter-increment: i; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.install > li::before { content: counter(i, decimal-leading-zero); font: 500 13px/1.9 var(--mono); color: var(--text-3); }
.install h3 { font-size: 17px; margin: 0; letter-spacing: -0.015em; }
.install p { margin-top: 6px; }
.code { position: relative; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.code pre { margin: 0; padding: var(--s2) 88px var(--s2) var(--s2); overflow-x: auto; font: 13.5px/1.75 var(--mono); color: var(--text-strong); }
.code .c { color: var(--text-3); }
.copy-btn { position: absolute; top: 10px; right: 10px; height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); font: 500 12.5px/1 var(--sans); cursor: pointer; }
.copy-btn:hover { color: var(--text-strong); }
html:not(.js) .copy-btn { display: none; }

/* Releases: the download card, other systems, changelogs, All versions (D-DOWNLOADS-RELEASES) */
.rel-state { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: var(--s3); padding: 12px var(--s2); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); color: var(--text-2); font-size: 14.5px; }
.rel-state strong { color: var(--text-strong); font-weight: 500; }
.rel-state .btn { margin-left: auto; }
.dl-card { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.dl-card h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.035em; line-height: 1.1; }
.dl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; color: var(--text-3); font-size: 14px; }
.chan { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s1); border-radius: 999px; border: 1px solid var(--line-2); font: 500 12px/1 var(--mono); color: var(--accent-text); }
.chan.withdrawn { color: var(--warn); border-color: currentColor; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--s4); }
.dl-actions .btn { height: 48px; padding: 0 var(--s3); font-size: 16px; }
.dl-actions .muted { font-size: 14px; }
.sha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: var(--s3); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.sha > span { font: 500 12px/1 var(--mono); color: var(--text-3); white-space: nowrap; }
.sha code, .prose .sha code { padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.5; color: var(--text-2); word-break: break-all; }
.sha button { height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); font: 500 12.5px/1 var(--sans); cursor: pointer; }
.sha button:hover { color: var(--text-strong); }
.sha button:focus-visible, .dl-row a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dl-min { margin-top: var(--s2); color: var(--text-3); font-size: 14px; }
.dl-list { margin-top: var(--s2); border-top: 1px solid var(--line); }
.dl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.dl-row b { font-weight: 500; color: var(--text-strong); }
.dl-row .d { color: var(--text-3); font-size: 14px; }
.dl-row > a { align-self: start; }
.dl-row .sha { grid-column: 1 / -1; margin-top: 4px; }
.changes { display: grid; gap: var(--s3); margin-top: var(--s2); }
.changes h3 { margin: 0; font: 500 13px/1.4 var(--mono); color: var(--text-3); letter-spacing: 0; }
.changes ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--text-2); }
.rel-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); font-size: 15px; }
.rel-links a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.rel-skel { height: 220px; border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.versions { display: grid; gap: var(--s5); }
.version { padding-top: var(--s4); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.version h2 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.version .why { margin-top: var(--s2); padding: 12px var(--s2); border-left: 2px solid var(--warn); background: var(--panel); color: var(--text-2); font-size: 15px; }
.version details { margin-top: var(--s2); }
.version summary { cursor: pointer; color: var(--text-2); font-size: 15px; }
.steps-win { margin: 12px 0 var(--s2); padding-left: 1.4em; display: grid; gap: 6px; color: var(--text-2); }

/* Generated pages: /capabilities from the evidence, /changelog from the release records (D-SITE-PAGES) */
.changelog { max-width: 880px; }
.changelog .version h3 { margin: var(--s2) 0 0; font: 500 13px/1.4 var(--mono); color: var(--text-3); letter-spacing: 0; }
.changelog .version ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--text-2); }
.changelog .version header p { margin-top: 6px; font-size: 14px; }
.changelog .withdrawn { margin-top: var(--s2); padding: 12px var(--s2); border-left: 2px solid var(--warn); background: var(--panel); color: var(--text-2); font-size: 15px; }
.changelog-links { margin-top: var(--s5); }
.cap-key { padding-bottom: var(--s2); }
.cap-checked { color: var(--text-3); font: 13px/1.5 var(--mono); }
.cap-areas { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-3); font-size: 14px; }
.cap-areas a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.cap-section { padding-top: var(--s8); }
.cap-section .intro p { margin-top: 10px; color: var(--text-2); max-width: 60ch; }
.cap-area { margin: var(--s5) 0 var(--s2); font: 500 13px/1.4 var(--mono); color: var(--text-3); letter-spacing: 0; }
.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cap { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); scroll-margin-top: 96px; }
.cap h3 { font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-strong); }
.cap > p { margin-top: 8px; color: var(--text-2); font-size: 15px; }
.cap .cap-proof { color: var(--text-3); font-size: 14px; }
.cap-ok { color: var(--good); font-weight: 600; }
.cap-since { color: var(--text-2); }
.cap .cap-note { padding-left: 10px; border-left: 2px solid var(--warn); color: var(--text-2); font-size: 14px; }
.cap-empty { padding: var(--s3); border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--text-2); }
#coming .cap { background: transparent; border-style: dashed; }
.cap-more { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.cap-more summary { cursor: pointer; color: var(--text-2); }
.cap-more p { margin-top: 6px; }
.cap-area-list { list-style: none; margin: var(--s3) 0 0; padding: 0; border-top: 1px solid var(--line); }
.cap-area-list li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.cap-area-list a { color: var(--text-strong); text-decoration: none; }
.cap-area-list a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cap-area-list p { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.cap-stage { align-self: start; display: inline-flex; justify-content: center; height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 12px/1 var(--mono); white-space: nowrap; }
.cap-stage.is-shipped { color: var(--good); border-color: currentColor; }
.cap-stage.is-beta { color: var(--warn); border-color: currentColor; }
.cap-stage.is-coming { color: var(--text-3); border-style: dashed; }
@media (max-width: 600px) { .cap-area-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; } .cap-stage { justify-self: start; } }
@media (max-width: 760px) { .caps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-top: var(--s10); background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: var(--s4); padding-bottom: var(--s10); }
.footer-brand p { margin-top: var(--s2); color: var(--text-2); font-size: 15px; }
.footer-brand p.serif { margin-top: 2px; font-size: 19px; color: var(--text-3); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h2 { margin-bottom: 6px; font: 500 13px/1.4 var(--mono); letter-spacing: 0; color: var(--text-3); }
.footer-col a { color: var(--text-2); text-decoration: none; font-size: 14px; width: fit-content; }
.footer-col a:hover { color: var(--text-strong); }
.footer-base { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s3) 0 var(--s5); border-top: 1px solid var(--line); color: var(--text-3); font: 13px/1.4 var(--mono); }

/* ---------- Motion: reveal on scroll, visible at rest ----------
   A block is fully visible without JS, before the observer runs and under
   reduced motion. Only once it is known to be below the fold (.below, set by
   site.js) does it wait, slightly lowered and faded, to rise into place. */
.js .reveal.below { opacity: 0.001; transform: translateY(14px); }
.js .reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .reveal, .js .reveal.below { opacity: 1; transform: none; }
}

/* ---------- Early access ---------- */
.access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.access-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.access-card h2 { font-size: 24px; letter-spacing: -0.03em; }
.access-card p { color: var(--text-2); }
.access-card .btn { margin-top: auto; }
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 14px; font-weight: 500; }
.field input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--input); color: var(--text-strong); font: inherit; font-weight: 400; letter-spacing: 0.04em; }
.field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .plans.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans.five .plan + .plan { border-left: 0; }
  .plans.five .plan { border-top: 1px solid var(--line); }
  .plans.five .plan:nth-child(-n + 2) { border-top: 0; }
  .plans.five .plan:nth-child(even) { border-left: 1px solid var(--line); }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .loop { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s4); }
  .loop::before, .loop .pulse { display: none; }
  .sig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sig > .card, .sig > .card.wide { grid-column: span 1; }
  .sig > .card:last-child { grid-column: 1 / -1; }
  .shot-panel, .shot-panel.phone { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .hero-row, .intro, .faq-grid, .layout-2, .beta { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .cta { justify-content: flex-start; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan .for { min-height: 0; }
  .duties, .trio { grid-template-columns: minmax(0, 1fr); }
  .access { grid-template-columns: minmax(0, 1fr); }
  .trust-list div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .toc { display: none; }
  .journey { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .journey button { font-size: 11.5px; }
  .journey .owner button::after { display: none; }
}
@media (max-width: 600px) {
  .plans.five { grid-template-columns: minmax(0, 1fr); }
  .plans.five .plan:nth-child(even) { border-left: 0; }
  .plans.five .plan:nth-child(2) { border-top: 1px solid var(--line); }
  :root { --gutter: 16px; }
  .hero { padding-top: var(--s6); }
  .hero-row { margin-top: var(--s4); }
  .cta .btn { flex: 1 1 auto; }
  .stage { margin-top: var(--s6); }
  .window { border-radius: 8px; }
  .evidence-wrap { height: auto; }
  .js .evidence-wrap:not(.open) .evidence { opacity: 1; visibility: visible; pointer-events: auto; }
  .evidence-wrap::before { display: none; }
  .evidence { position: static; width: auto; max-width: none; margin-top: 12px; box-shadow: none; }
  .journey { margin-top: var(--s2); }
  .journey button { font-size: 0; gap: 0; }
  .journey .now button { font-size: 11px; }
  .section, .closing { padding: var(--s10) 0; }
  .intro { margin-bottom: var(--s5); }
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop li { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: var(--s2); row-gap: 4px; }
  .loop li > :not(.node) { grid-column: 2; }
  .loop .node { grid-row: span 4; }
  .sig { grid-template-columns: minmax(0, 1fr); }
  .opts { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat { padding: var(--s3) 0; }
  .beta { padding: var(--s3); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .plan { padding: var(--s3); }
  .access-card { padding: var(--s3); }
  .dl-card { padding: var(--s3); }
  .dl-actions .btn { flex: 1 1 100%; }
  .sha { grid-template-columns: minmax(0, 1fr) auto; }
  .sha > span { grid-column: 1 / -1; }
  .rel-state .btn { margin-left: 0; }
  .tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .tabs button { flex: none; }
}
/* Short laptop screens: the product starts on the first screen. */
@media (max-height: 760px) and (min-width: 601px) {
  .hero { padding-top: var(--s4); }
  .hero h1 { font-size: clamp(38px, 4.8vw, 68px); }
  .hero-meta { margin-top: var(--s2); }
}

/* ---- marketing pages (D-SITE-PAGES) ---- */
.mk-hero-shot .shot img, .mk-rows .shot img { display: block; width: 100%; height: auto; }
.prose ul + p, .prose ol + p { margin-top: var(--s2); }
.mk-eng { margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.mk-eng summary { list-style: none; cursor: pointer; padding: 12px var(--s3); font: 500 13px/1.5 var(--mono); color: var(--text-2); display: flex; justify-content: space-between; gap: var(--s2); }
.mk-eng summary::-webkit-details-marker { display: none; }
.mk-eng summary::after { content: '+'; color: var(--text-3); }
.mk-eng[open] summary::after { content: '−'; }
.mk-eng summary:hover { color: var(--text-strong); }
.mk-eng summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mk-eng > div { padding: 0 var(--s3) var(--s3); color: var(--text-2); font-size: 15px; }
.mk-eng > div p { color: var(--text-2); }
.mk-eng a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.mk-eng code { overflow-wrap: anywhere; }
.mk-rows { display: grid; gap: var(--s10); }
@media (min-width: 1081px) {
  .mk-rows .shot-panel:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .mk-rows .shot-panel:nth-child(even) .shot { order: 2; }
  .mk-rows .shot-panel.phone:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s1); border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: 0; color: var(--text-2); white-space: nowrap; vertical-align: 2px; }
.state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.state.is-today::before { background: var(--good); }
.state.is-beta::before { background: var(--warn); }
.state.is-coming::before { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }
.mk-flow { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: flow; }
.mk-flow > li { counter-increment: flow; display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.mk-flow > li::before { content: counter(flow, decimal-leading-zero); font: 500 13px/1.9 var(--mono); color: var(--text-3); }
.mk-flow h3 { font-size: 22px; letter-spacing: -0.03em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk-flow .who { display: block; margin-top: 8px; font: 500 13px/1.5 var(--mono); color: var(--accent-text); }
.mk-flow p { color: var(--text-2); }
.mk-flow p + p { margin-top: 10px; }
.mk-flow .proof { font: 13px/1.5 var(--mono); color: var(--text-3); }
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid .card { padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: 10px; }
.mk-grid h3 { font-size: 19px; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk-grid p, .mk-grid li { color: var(--text-2); font-size: 15px; }
.mk-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mk-grid li { display: flex; gap: 10px; }
.mk-grid li::before { content: '›'; color: var(--accent-text); font-weight: 600; }
.mk-grid .link { margin-top: auto; padding-top: 8px; font-size: 15px; }
.mk-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.mk-next a { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text-strong); text-decoration: none; transition: border-color var(--dur) var(--ease); }
.mk-next a:hover { border-color: var(--line-2); }
.mk-next b { font-weight: 500; }
.mk-next b::after { content: ' →'; color: var(--accent-text); }
.mk-next span { color: var(--text-2); font-size: 14.5px; }
.mk-status { border-top: 1px solid var(--line); }
.mk-status > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.mk-status h3 { font-size: 17px; letter-spacing: -0.015em; margin-bottom: 6px; }
.mk-status p, .mk-status li { color: var(--text-2); font-size: 15.5px; }
.mk-status ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.mk-status a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.mk-facts table { min-width: 860px; }
.mk-facts td { width: auto; vertical-align: top; font-size: 14.5px; }
.mk-facts tbody th { vertical-align: top; width: 13%; font-weight: 500; }
.mk-facts td a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-2); overflow-wrap: anywhere; }
.mk-facts caption { caption-side: bottom; padding-top: var(--s2); text-align: left; color: var(--text-3); font-size: 13px; }
.mk-asof { display: inline-block; margin-top: var(--s3); font: 500 13px/1.5 var(--mono); color: var(--text-3); }
.mk-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-contact .card { padding: var(--s4); display: flex; flex-direction: column; gap: 10px; }
.mk-contact h2 { font-size: 22px; letter-spacing: -0.03em; }
.mk-contact p { color: var(--text-2); }
.mk-contact .addr { font-size: 18px; font-weight: 500; color: var(--text-strong); overflow-wrap: anywhere; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
@media (max-width: 1080px) {
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-flow > li { grid-template-columns: 44px minmax(0, 1fr); }
  .mk-flow > li > :last-child { grid-column: 2; }
}
@media (max-width: 760px) {
  .mk-rows { gap: var(--s8); }
  .mk-grid, .mk-grid.two, .mk-contact { grid-template-columns: minmax(0, 1fr); }
  .mk-flow > li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .mk-flow > li > :last-child { grid-column: auto; }
  .mk-status > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .mk-facts table { min-width: 0; }
  .mk-facts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mk-facts tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .mk-facts tbody th, .mk-facts td { display: block; width: auto; padding: 4px 0; border: 0; }
  .mk-facts tbody th { font-size: 18px; padding-bottom: 8px; }
  .mk-facts td::before { content: attr(data-col); display: block; font: 500 12px/1.6 var(--mono); color: var(--text-3); }
  .mk-contact .card { padding: var(--s3); }
}

/* ---------- Open Duscode (/code/, D-CODE-LAUNCHER) ---------- */
.launch-head h1 { max-width: 16ch; }
.launch { display: grid; gap: var(--s3); max-width: 880px; }
.launch-card { padding: var(--s4); display: grid; gap: var(--s3); }
.launch-card-head { display: grid; gap: var(--s1); }
.launch-status { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-strong); line-height: 1.35; }
.launch-card-head .launch-status:not([data-launch-status]) { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.launch[data-state='looking'] [data-launch-status]::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 12px; vertical-align: -2px; border: 2px solid var(--line-2); border-top-color: var(--accent-text); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .launch[data-state='looking'] [data-launch-status]::after { animation: launch-spin 0.9s linear infinite; } }
@keyframes launch-spin { to { transform: rotate(360deg); } }
.launch-found, .launch-none { display: grid; gap: var(--s3); }
.launch [hidden] { display: none; }
.launch-meta { display: flex; align-items: center; gap: 10px; font: 400 13px/1.5 var(--mono); color: var(--text-3); }
.launch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.launch-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.launch-note, .launch-lead { color: var(--text-2); font-size: 15px; max-width: 46em; }
.launch-lead strong, .launch-note strong { color: var(--text-strong); font-weight: 500; }
.launch-note a, .launch-more a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.launch code { font-size: 0.86em; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-strong); white-space: nowrap; }
.launch-platforms { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.launch-platforms li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s2); padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.launch-platforms li strong { color: var(--text-strong); font-weight: 500; }
.launch-platforms li.mine strong::after { content: 'Yours'; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 11px/1 var(--mono); color: var(--accent-text); vertical-align: 2px; }
.launch-platforms b { color: var(--text-strong); font-weight: 500; }
.launch-more summary { cursor: pointer; color: var(--text-2); font-size: 15px; }
.launch-more summary:hover { color: var(--text-strong); }
.launch-more-body { display: grid; gap: var(--s2); margin-top: var(--s2); color: var(--text-2); font-size: 15px; }
.launch-port { display: flex; align-items: flex-end; gap: 12px; max-width: 520px; }
.launch-port .field { flex: 1; min-width: 0; }
.launch-port .field input { letter-spacing: 0; }
.launch-port .btn { height: 44px; flex: none; }
.launch-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.launch-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.launch-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.launch-row-main strong { color: var(--text-strong); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-state { font: 400 12.5px/1.4 var(--mono); color: var(--text-3); }
.launch-state[data-ok] { color: var(--good); }
@media (max-width: 600px) {
  .launch-card { padding: var(--s3) var(--s2); }
  .launch-platforms li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .launch-port { flex-direction: column; align-items: stretch; }
  .launch-actions .btn { flex: 1 1 auto; justify-content: center; }
  .launch code { white-space: normal; }
}

/* The blog and newsroom on duscode.com (D-BLOG-CMS): served after the site's
   own tokens and stylesheet, so it only adds what posts need. */
.blog-head { padding: var(--s12) 0 var(--s4); }
.blog-head h1 { margin-top: var(--s2); }
.blog-head .lede { margin-top: var(--s2); }
.blog-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.blog-tabs a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.blog-tabs a[aria-current='page'] { border-color: var(--accent-text); color: var(--text-strong); }
.blog-tabs a:hover { color: var(--text-strong); }
.blog-feed-link { margin-top: var(--s2); font-size: 14px; color: var(--text-3); }
.blog-feed-link a { color: var(--text-2); text-underline-offset: 3px; }
.posts { list-style: none; margin: 0; padding: 0 0 var(--s12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.post-card:hover { border-color: var(--line-2); }
.post-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel-2); }
.post-card .body { display: flex; flex-direction: column; gap: 10px; padding: var(--s3); }
.post-card h2 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
.post-card h2 a { color: var(--text-strong); text-decoration: none; }
.post-card h2 a::after { content: ''; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card p { color: var(--text-2); font-size: 15px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--text-3); font: 13px/1.5 var(--mono); }
.post-meta .cat { color: var(--accent-text); }
.ai-label { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 600 11px/1 var(--sans); letter-spacing: 0.04em; color: var(--brand-champagne); }
.blog-empty { padding: var(--s4); border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--text-2); margin-bottom: var(--s12); }
.post { padding: var(--s10) 0 var(--s12); }
.post-header { max-width: 760px; }
.post-header h1 { margin-top: var(--s2); font-size: clamp(34px, 5vw, 52px); }
.post-header .lede { margin-top: var(--s2); }
.post-header .post-meta { margin-top: var(--s3); }
.post-hero { margin: var(--s5) 0 0; max-width: 1040px; }
.post-hero img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.post .prose { margin-top: var(--s5); }
.post .prose img { display: block; max-width: 100%; height: auto; margin: var(--s3) 0; border-radius: var(--radius); border: 1px solid var(--line); }
.post .prose pre { overflow-x: auto; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 14px; }
.post .prose pre code { padding: 0; border: 0; background: none; }
.post .prose blockquote { margin: var(--s3) 0; padding-left: var(--s2); border-left: 2px solid var(--line-2); color: var(--text-2); }
.post .prose table { width: 100%; border-collapse: collapse; margin-top: var(--s2); font-size: 15px; display: block; overflow-x: auto; }
.post .prose th, .post .prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s5); }
.post-tags a { display: inline-flex; height: 28px; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--panel-2); color: var(--text-2); text-decoration: none; font-size: 13px; }
.post-ai-note { max-width: 760px; margin-top: var(--s5); padding: 12px var(--s2); border-left: 2px solid var(--brand-champagne); background: var(--panel); color: var(--text-2); font-size: 14.5px; }
.post-foot { max-width: 760px; margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 15px; }
.post-foot a { color: var(--text-strong); text-underline-offset: 3px; }
.preview-bar { position: sticky; top: 0; z-index: 30; padding: 10px var(--gutter); background: var(--warn); color: #1f1f1f; font: 500 14px/1.4 var(--sans); text-align: center; }
.preview-bar a { color: inherit; }
@media (max-width: 760px) {
  .posts { grid-template-columns: minmax(0, 1fr); }
  .blog-head { padding-top: var(--s8); }
  .post { padding-top: var(--s6); }
}