/* Dark canvas shared with the desktop app and the Bitcode Instagram design system. */
/* brand:begin — generated from brand/tokens/tokens.json (web) by brand/build.mjs */
:root {
  --orange: #f7931a;
  --orange-active: #d97b0f;
  --on-accent: #0b0e11;
  --canvas: #0b0e11;
  --canvas-soft: #101318;
  --surface: #14171c;
  --surface-strong: #1d2128;
  --hairline: #2b3139;
  --ink: #f7f7f4;
  --body: #b4b9c1;
  --muted: #8b929d;
  --muted-soft: #5b636e;
  --success: #0ecb81;
  --pending: #dfa88f;
  --relayed: #9fc9a2;
  --mempool: #9fbbe0;
  --confirming: #c0a8dd;
  --confirmed: #c08532;
  --sat-node: #3297ff;
  --sat-script: #f7931a;
  --sat-hash: #b6f500;
  --sat-merkle: #c96bff;
  --mono: 'JetBrains Mono', monospace;
  --radius: 14px;
  --radius-lg: 24px;
  --page-width: 1240px;
}
/* brand:end */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; letter-spacing: -.015em; overflow-x: clip; }
::selection { background: var(--orange); color: var(--on-accent); }
a { color: inherit; text-underline-offset: 4px; }
button { font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
[hidden] { display: none !important; }
img, video { max-width: 100%; }
svg { display: block; flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
code, pre { font-family: var(--mono); letter-spacing: -.035em; }
code { font-size: .875em; }
.container { width: min(100%, var(--page-width)); margin-inline: auto; padding-inline: 40px; }
.section { padding-block: 128px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 500 .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .088em; color: var(--body); margin-bottom: 22px; }
.eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--orange); flex: none; }
.section-title { font-size: clamp(2.25rem, 4.2vw, 3.6rem); line-height: 1.06; font-weight: 500; letter-spacing: -.045em; }
.section-description { color: var(--body); font-size: 1.0625rem; line-height: 1.75; max-width: 48ch; }
.section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; margin-bottom: 56px; }
.badge-row { margin-top: 18px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 11px 20px; border: 1px solid transparent; border-radius: 10px; font-size: .875rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
.button-large { min-height: 54px; padding: 14px 24px; font-size: 1rem; }
.button-primary { background: var(--orange); color: var(--on-accent); box-shadow: 0 10px 32px -12px color-mix(in srgb, var(--orange) 70%, transparent); }
.button-primary:hover { background: var(--orange-active); }
.button-secondary { background: transparent; border-color: var(--hairline); color: var(--ink); }
.button-secondary:hover { background: var(--surface); border-color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; font-weight: 500; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 16px; padding: 10px 18px; border-radius: 6px; background: var(--ink); color: var(--canvas); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.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; }

/* Navigation floats over the hero and settles once the page scrolls. */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--canvas) 78%, transparent); backdrop-filter: blur(18px); }
html[data-scrolled] .site-header { border-bottom-color: var(--surface-strong); background: color-mix(in srgb, var(--canvas) 92%, transparent); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 18px; }
.intro { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -.05em; }
.brand-logo { width: 24px; height: 30px; }
.version { margin-left: 10px; font: .75rem/1 var(--mono); letter-spacing: 0; padding: 5px 7px; border: 1px solid var(--hairline); border-radius: 4px; color: var(--body); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-link { color: var(--body); font-size: .875rem; text-decoration: none; }
.nav-link:hover, .nav-link[aria-current="location"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-actions .button { min-height: 40px; padding: 8px 16px; }
.menu-toggle { display: none; border: 1px solid var(--hairline); background: transparent; border-radius: 10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.language-switch { display: flex; align-items: center; gap: 6px; font: .75rem/1 var(--mono); color: var(--muted); }
.language-switch a { display: inline-flex; min-width: 24px; min-height: 44px; align-items: center; text-decoration: none; color: var(--body); }
.language-switch a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Hero: the promise and the install action on the left, the team on the right. */
.hero { position: relative; padding-block: 24px 48px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 24px; padding-top: 24px; min-height: 0; }
.hero-copy { position: relative; z-index: 1; padding-block: 24px; }
.release { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font: .75rem/1.5 var(--mono); color: var(--body); text-decoration: none; }
.release-tag { border: 1px solid var(--hairline); background: var(--surface); padding: 3px 8px; border-radius: 4px; color: var(--ink); }
.release:hover .release-copy { text-decoration: underline; }
.hero h1 { font-size: clamp(3rem, 5.2vw, 5.6rem); font-weight: 500; line-height: 1.02; letter-spacing: -.055em; margin-bottom: 28px; }
.hero h1 span { display: block; }
.hero h1 .accent-line { color: var(--orange); }
.hero-description { max-width: 42ch; color: var(--body); font-size: 1.125rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--body); font: .75rem/1.5 var(--mono); margin-top: 20px; letter-spacing: 0; }
.hero-stage { position: relative; perspective: 1400px; --lean-x: 0; --lean-y: 0; --hero-light: var(--orange); }
.hero-stage[data-phase="approved"] { --hero-light: var(--success); }
.hero-app { position: relative; margin: 0 -56px 0 0; aspect-ratio: 16 / 9; border: 1px solid color-mix(in srgb, var(--hero-light) 35%, var(--hairline)); border-radius: var(--radius-lg); overflow: hidden; background: var(--canvas-soft); transform: rotateY(calc(-9deg + var(--lean-x) * 6deg)) rotateX(calc(4deg - var(--lean-y) * 6deg)); transform-origin: 40% 50%; box-shadow: 0 50px 120px -40px rgba(0,0,0,.95); }
.hero-stage::before { content: ''; position: absolute; z-index: -1; inset: -18% -12%; background: radial-gradient(ellipse 50% 50% at 55% 50%, color-mix(in srgb, var(--hero-light) 30%, transparent), transparent 70%); pointer-events: none; }
.hero-sat { position: absolute; z-index: 2; left: -84px; bottom: -64px; width: 180px; pointer-events: none; }
.hero-sat img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.7)); }
.hero-sat-line { position: absolute; left: 150px; bottom: 18px; width: max-content; max-width: 300px; margin: 0; padding: 11px 15px; border-radius: 16px 16px 16px 3px; background: var(--ink); color: var(--canvas); font-size: .9375rem; font-weight: 600; line-height: 1.35; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.loop-poster, .loop-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.loop-video { position: absolute; inset: 0; pointer-events: none; }
.desktop-shot { position: relative; }
.desktop-shot[data-tilt] { --tilt-y: 0deg; --tilt-x: 5deg; }
.hero-note .icon { width: 14px; height: 14px; color: var(--success); }

.bitcoin-stack { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; padding-block: 8px 32px; }
.bitcoin-stack a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: .75rem/1.5 var(--mono); color: var(--body); text-decoration: none; }
.bitcoin-stack a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); }
.bitcoin-stack .icon { color: var(--orange); width: 16px; height: 16px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 28px; border-block: 1px solid var(--surface-strong); }
.fact { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fact + .fact { border-left: 1px solid var(--surface-strong); }
.fact-value { font: 1.75rem/1.1 var(--mono); letter-spacing: -.06em; }
.fact-label { max-width: 15ch; color: var(--body); font-size: .8125rem; line-height: 1.5; }

/* Terminal surfaces: the recorded output is the evidence, so it stays legible. */
.terminal { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas-soft); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.terminal--hero { box-shadow: 0 30px 90px -30px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb, var(--orange) 14%, transparent), 0 0 120px -40px color-mix(in srgb, var(--orange) 45%, transparent); }
.terminal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; background: var(--surface); border-bottom: 1px solid var(--surface-strong); padding: 10px 18px; }
.terminal-title { display: flex; align-items: center; gap: 12px; font: .75rem/1.5 var(--mono); color: var(--body); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pending); }
.window-dots i:nth-child(2) { background: var(--relayed); }
.window-dots i:nth-child(3) { background: var(--mempool); }
.demo-label { font: .6875rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--body); border: 1px solid var(--hairline); border-radius: 3px; padding: 2px 5px; }
.terminal-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 18px; min-height: 49px; border-top: 1px solid var(--surface-strong); background: var(--surface); font: .75rem/1.5 var(--mono); color: var(--body); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.recording-kicker { display: flex; align-items: center; gap: 8px; font: .75rem/1.6 var(--mono); color: var(--body); }
.recording-model { color: var(--ink); font: .75rem/1.7 var(--mono); overflow-wrap: anywhere; }
.recording-model span { color: var(--body); }
.demo-caption { margin-top: 14px; color: var(--muted); font: .75rem/1.6 var(--mono); }
.hero-cli-body { height: 360px; padding: 22px 24px; overflow-y: auto; font: .8125rem/1.75 var(--mono); letter-spacing: -.035em; white-space: pre-wrap; color: var(--ink); }
.hero-cli-line { min-height: 1.75em; overflow-wrap: anywhere; }
.hero-cli-line--prompt { color: var(--ink); }
.hero-cli-line--result { color: var(--body); }
.hero-cli-cursor { display: inline-block; width: 7px; height: 1.25em; margin-left: 3px; vertical-align: -.25em; background: var(--orange); }

/* Demonstration: the recorded session and what it proves. */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.terminal-wrap, .demo-media { min-width: 0; }
.views { display: grid; gap: 28px; }
.view-switch { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--canvas-soft); }
.view-switch button { min-height: 36px; min-width: 88px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--body); font: .8125rem/1.4 var(--mono); }
.view-switch button[aria-pressed="true"] { background: var(--surface-strong); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.view-switch button:hover { color: var(--ink); }
.demo-story-media .view-switch { margin-bottom: 14px; }
.view-tag { display: none; margin-bottom: 10px; font: .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--body); }
html:not(.js) .view-tag { display: block; }
html:not(.js) .demo-story .view + .view { margin-top: 28px; }
.demo-explain-title { font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; margin-bottom: 8px; }
.demo-explain-lead { color: var(--body); line-height: 1.7; margin-bottom: 24px; }
.demo-explain-title + .demo-steps { margin-top: 20px; }
.demo-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 28px; }
.demo-steps li, .install-steps li { display: flex; align-items: baseline; gap: 16px; }
.step-index { flex: none; font: .75rem/1 var(--mono); color: var(--body); border: 1px solid var(--hairline); padding: 5px 6px; border-radius: 4px; }
.demo-steps h4 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.03em; margin-bottom: 6px; }
.demo-steps p { color: var(--body); line-height: 1.7; }
.recorded-demos { padding-top: 0; }
.demo-story { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 56px; padding-block: 48px; border-top: 1px solid var(--surface-strong); }
.demo-story:nth-of-type(2) .demo-story-media { order: 2; }
.demo-story-media { min-width: 0; }
.demo-story-copy .eyebrow { margin-bottom: 14px; }
.demo-story-copy h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; font-weight: 500; letter-spacing: -.04em; margin-bottom: 15px; }
.demo-story-copy > p:not(.eyebrow) { color: var(--body); line-height: 1.8; }
.demo-story-copy .recording-model { margin-top: 16px; }
.recording-player { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.recording-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Video frames lean like the hero: toward the copy beside them, a few degrees toward the pointer. */
[data-tilt] { --lean-x: 0; --lean-y: 0; --tilt-y: 6deg; --tilt-x: 3deg; --frame-light: var(--orange); transform: perspective(1400px) rotateY(calc(var(--tilt-y) + var(--lean-x) * 6deg)) rotateX(calc(var(--tilt-x) - var(--lean-y) * 6deg)); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), 0 0 120px -50px color-mix(in srgb, var(--frame-light) 45%, transparent); }
[data-tilt][data-playing] { border-color: color-mix(in srgb, var(--frame-light) 40%, var(--hairline)); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), 0 0 140px -40px color-mix(in srgb, var(--frame-light) 65%, transparent); }
.demo-story:nth-of-type(2) [data-tilt] { --tilt-y: -6deg; }
.recording-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; color: var(--body); font: .75rem/1.5 var(--mono); }
.recording-disclosure { border-top: 1px solid var(--surface-strong); padding-top: 24px; color: var(--body); font-size: .875rem; line-height: 1.8; max-width: 95ch; }
.video-message { position: absolute; bottom: 48px; left: 10px; right: 10px; padding: 10px 12px; color: var(--ink); background: var(--surface-strong); border-radius: 6px; font-size: .875rem; }
.video-message:empty { display: none; }
.video-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; background: color-mix(in srgb, var(--canvas) 18%, transparent); width: 100%; padding: 0; }
.video-start span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; min-height: 46px; border-radius: 999px; background: var(--orange); color: var(--on-accent); font-size: .875rem; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.video-start:hover span { background: var(--orange-active); }
.video-start:focus-visible { outline-offset: -5px; }

/* Capabilities, by activity: cards on the left, one sticky terminal on the right. */
.cap { display: flex; flex-direction: column; align-items: start; background: var(--surface); border: 1px solid var(--surface-strong); border-radius: var(--radius-lg); padding: 26px; }
.cap-top { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 24px; }
.cap-icon { display: grid; place-items: center; height: 40px; width: 40px; border-radius: 10px; background: var(--surface-strong); color: var(--on-accent); }
.cap-icon:not([style]) { color: var(--ink); }
.cap-icon .icon { width: 20px; height: 20px; }
.cap-index { font: .75rem/1 var(--mono); color: var(--body); }
.cap h3 { font-size: 1.125rem; font-weight: 500; margin-bottom: 10px; letter-spacing: -.025em; }
.cap p { color: var(--body); line-height: 1.8; margin-bottom: 22px; }
.cap code { font-size: .75rem; line-height: 1.8; color: var(--body); margin-top: auto; padding-top: 16px; width: 100%; border-top: 1px solid var(--surface-strong); overflow-wrap: anywhere; }
.cap-note { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 28px; color: var(--body); font-size: .8125rem; }
.cap-note p { max-width: 73ch; }
.cap-note a { flex: none; font-size: .8125rem; }
.story-rail { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 60px; position: relative; align-items: start; }
.story-cards { min-width: 0; }
.story-card { min-height: 420px; padding: 36px; margin-bottom: 60px; scroll-margin-top: 120px; }
.story-card:last-child { margin-bottom: 0; }
.story-card h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.2; }
.story-card p { margin-bottom: 30px; }
.story-card.is-active { border-color: color-mix(in srgb, var(--orange) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 30%, transparent), 0 30px 80px -40px color-mix(in srgb, var(--orange) 45%, transparent); }
.story-card .cap-top { margin-bottom: 36px; }
.story-sticky { display: none; }
.session-panel { margin: 28px 0 0; min-width: 0; width: 100%; }
.session-panel .hero-cli-body { height: 300px; padding: 22px; font-size: .75rem; }
.session-panel figcaption { display: flex; flex-direction: column; gap: 8px; padding: 16px 2px; color: var(--body); font: .75rem/1.6 var(--mono); }
.session-panel figcaption code { color: var(--ink); font-size: .875rem; overflow-wrap: anywhere; }
.session-panel .terminal-bottom { align-items: baseline; }
.session-panel .terminal-bottom a { padding-block: 8px; }

/* Team Sats: four compact cards, one screen. */
.sats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sat-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--surface-strong); border-radius: var(--radius-lg); background: radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--sat) 14%, transparent), transparent 70%), var(--surface); }
.sat-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.sat-card-head img { width: 64px; height: 64px; }
.sat-index { font: .75rem/1 var(--mono); color: var(--body); }
.sat-card h3 { font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: -.045em; margin-bottom: 10px; }
.sat-role { display: flex; align-items: center; gap: 10px; font: 500 .6875rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .088em; color: var(--ink); margin-bottom: 12px; }
.sat-role::before { content: ''; width: 10px; height: 10px; background: var(--sat); flex: none; }
.sat-description { color: var(--body); font-size: .9375rem; line-height: 1.65; margin-bottom: 18px; }
.sat-card .sat-limits { margin-top: auto; }
.sat-limits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sat-limits li { font: .6875rem/1 var(--mono); letter-spacing: -.02em; color: var(--body); border: 1px solid var(--surface-strong); border-radius: 999px; padding: 6px 9px; }
.sat-limits li.allow { color: var(--ink); border-color: color-mix(in srgb, var(--sat) 55%, var(--hairline)); }
.sat-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sat-usage > div { background: var(--surface); border: 1px solid var(--surface-strong); border-radius: var(--radius-lg); padding: 26px; min-width: 0; }
.sat-usage h3 { font-size: 1rem; font-weight: 500; margin-bottom: 6px; }
.sat-usage p { color: var(--body); font-size: .875rem; line-height: 1.75; }
.sat-usage pre { margin: 14px 0 0; font-size: .8125rem; line-height: 1.9; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.sat-note { margin-top: 22px; color: var(--body); font-size: .8125rem; max-width: 92ch; }
.preview-badge { display: inline-flex; align-items: center; gap: 7px; font: .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); border: 1px solid var(--hairline); background: var(--surface); padding: 7px 10px; border-radius: 999px; }
.preview-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* How it works: the five lifecycle colours remain the signature sequence. */
.reasoning { background: var(--canvas-soft); border-block: 1px solid var(--surface-strong); }
.stage-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.stage { padding: 24px 20px; border: 1px solid var(--surface-strong); border-radius: var(--radius); background: var(--surface); }
.stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 2px solid var(--stage); }
.stage-swatch { width: 24px; height: 24px; background: var(--stage); border-radius: 7px; box-shadow: 0 0 24px -4px var(--stage); }
.stage-number { color: var(--body); font: .75rem/1 var(--mono); }
.stage h3 { color: var(--ink); font: .8125rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.stage p { font-size: .875rem; line-height: 1.75; color: var(--body); }
.control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; }
.control-item { display: flex; align-items: start; gap: 14px; }
.control-item > .icon { margin-top: 4px; color: var(--orange); }
.control-item h3 { font-size: 1rem; font-weight: 500; margin-bottom: 5px; }
.control-item p { font-size: .875rem; color: var(--body); line-height: 1.75; }
.control-item code { color: var(--ink); }
.workflow .section-heading { align-items: start; }
.provider-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.provider { padding: 5px 10px; border: 1px solid var(--hairline); border-radius: 999px; font: .75rem/1.5 var(--mono); color: var(--body); }
.model-examples { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 36px; }
.model-example { border-left: 2px solid var(--orange); padding: 8px 14px; }
.model-example a { display: inline-block; font-size: 1rem; font-weight: 500; text-decoration: none; }
.model-example a:hover { text-decoration: underline; }
.model-example p { font-size: .8125rem; color: var(--body); margin-top: 5px; }
.mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mode-card { min-width: 0; }
.mode-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mode-head .icon { width: 16px; height: 16px; color: var(--orange); }
.mode-head h3 { font-size: .9375rem; font-weight: 500; }
.snippet { position: relative; display: flex; align-items: center; min-height: 98px; padding: 18px 55px 18px 17px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); }
.snippet pre { margin: 0; font-size: .8125rem; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 7px; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: .8125rem; }
.copy-button:hover { background: var(--surface-strong); }
.copy-button .icon { width: 16px; height: 16px; }
.snippet .copy-button { position: absolute; top: 7px; right: 6px; }
.copy-button[data-copied="true"] { color: var(--success); background: var(--surface-strong); }
.mode-card > p { margin-top: 12px; color: var(--body); font-size: .875rem; line-height: 1.75; }

/* Desktop app preview. */
.desktop-shot { margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--canvas); box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 140px -60px color-mix(in srgb, var(--sat-node) 55%, transparent); }
.desktop-shot .loop-poster { height: auto; aspect-ratio: 16 / 9; }
.desktop-caption { margin-top: 14px; color: var(--body); font-size: .8125rem; }
.desktop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.desktop-item h3 { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 500; margin-bottom: 8px; }
.desktop-item h3 .icon { color: var(--orange); width: 17px; height: 17px; }
.desktop-item p { color: var(--body); font-size: .875rem; line-height: 1.8; }
.desktop-status { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: 44px; padding: 22px 24px; border: 1px dashed var(--hairline); border-radius: var(--radius); }
.desktop-status h3 { font-size: .9375rem; font-weight: 500; margin-bottom: 4px; }
.desktop-status p { color: var(--body); font-size: .875rem; line-height: 1.75; }

/* Installation. */
.getting-started { border-top: 1px solid var(--surface-strong); background: radial-gradient(ellipse 50% 60% at 15% 0%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 70%); }
.install-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.install-intro .section-description { margin-top: 20px; }
.install-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; }
.install-steps h3 { display: inline; font-size: 1rem; font-weight: 500; }
.install-steps p { color: var(--body); font-size: .875rem; margin-top: 3px; }
.install-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; }
.install-tabs { display: flex; position: relative; align-items: stretch; width: 100%; margin-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.install-tabs a { flex: 1; padding: 12px 5px; min-height: 44px; text-align: center; font: .8125rem/1.5 var(--mono); color: var(--body); text-decoration: none; position: relative; z-index: 1; }
.install-tabs a[aria-selected="true"] { color: var(--ink); }
.install-indicator { display: none; position: absolute; bottom: -1px; left: 0; height: 2px; background: var(--orange); width: var(--tab-width,0px); transform: translateX(var(--tab-x,0px)); }
.js .install-indicator { display: block; }
[data-install-panel] { margin-bottom: 14px; scroll-margin-top: 110px; }
.install-box { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.install-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--surface-strong); background: var(--surface-strong); }
.install-bar span { font: .75rem/1.5 var(--mono); color: var(--body); }
.install-box pre { font-size: .8125rem; line-height: 2.1; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 22px; }
.code-comment { color: var(--muted); }
.install-next { border-top: 1px solid var(--surface-strong); padding: 20px 22px; }
.install-next h3 { font-size: .875rem; font-weight: 500; margin-bottom: 7px; }
.install-next p { font-size: .875rem; color: var(--body); line-height: 1.8; }
.install-next code { display: inline; background: var(--surface-strong); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; color: var(--ink); }
.install-note { margin-top: 16px; color: var(--body); font-size: .875rem; line-height: 1.75; }

/* Footer and small overlays. */
.site-footer { border-top: 1px solid var(--surface-strong); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px; padding-block: 32px; }
.footer-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.footer-brand .brand-name { font-size: 1.125rem; }
.footer-brand .brand-logo { width: 16px; height: 20px; }
.footer-tagline { color: var(--body); font-size: .8125rem; }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; text-decoration: none; color: var(--body); }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.site-preferences { padding-block: 4px 32px; color: var(--body); font-size: .8125rem; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.site-preferences button { background: var(--surface); padding: 10px 14px; min-height: 44px; border: 1px solid var(--hairline); border-radius: 8px; font-size: .8125rem; }
.site-preferences button:hover { border-color: var(--muted); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 10px; background: var(--ink); color: var(--canvas); box-shadow: 0 10px 32px rgba(0,0,0,.5); font-size: .875rem; text-align: center; }
.toast:empty { display: none; }
.language-banner { position: fixed; z-index: 40; bottom: 16px; left: 16px; max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: .875rem; }
.language-banner button { background: transparent; border: 0; min-width: 44px; min-height: 44px; }
.brand-menu { position: fixed; z-index: 80; left: var(--menu-x,0px); top: var(--menu-y,0px); width: 180px; padding: 5px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.brand-menu > * { display: block; width: 100%; min-height: 44px; border: 0; border-radius: 6px; padding: 12px; background: transparent; font-size: .875rem; text-align: start; text-decoration: none; }
.brand-menu > *:hover { background: var(--surface-strong); }
#genesis-dialog { max-width: min(600px,calc(100% - 40px)); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 32px; background: var(--surface); color: var(--ink); }
#genesis-dialog::backdrop { background: color-mix(in srgb, var(--canvas) 70%, transparent); backdrop-filter: blur(4px); }
#genesis-dialog blockquote { font: 1.125rem/1.8 var(--mono); margin: 0 0 30px; }

@media (min-width: 1024px) {
  .js .story-sticky { display: grid; position: sticky; top: max(100px, calc(50svh - 220px)); transform: translateY(var(--rail-release,0px)); }
  .js .inline-session { display: none; }
  .js .session-panel--sticky { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; }
  .js .session-panel--sticky[data-active] { opacity: 1; visibility: visible; pointer-events: auto; }
}
@media (min-width: 1600px) {
  .hero-app { margin-right: -80px; }
  .hero h1 span { white-space: nowrap; }
}
@media (max-width: 1180px) {
  .nav-links { gap: 16px; }
  .nav-link { font-size: .8125rem; }
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hero-app { margin-right: 0; }
  .hero-sat { left: -48px; width: 140px; }
  .hero-sat-line { left: 112px; max-width: 240px; font-size: .875rem; }
  .stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .section-heading { gap: 40px; }
  .demo-grid { gap: 40px; }
  .install-grid { gap: 40px; }
  .mode-grid, .desktop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .story-rail { display: block; }
  .story-card { min-height: 0; margin-bottom: 28px; }
  .nav-shell { min-height: 68px; gap: 12px; }
  .js .menu-toggle { display: inline-flex; }
  .js .nav-links { display: none; position: fixed; top: 68px; left: 0; right: 0; width: 100%; padding: 24px; max-height: calc(100svh - 68px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 6px; background: var(--canvas); border-bottom: 1px solid var(--hairline); box-shadow: 0 24px 48px rgba(0,0,0,.5); }
  .js .nav-links.is-open { display: flex; }
  .nav-link { display: flex; align-items: center; min-height: 48px; }
  html[data-menu-open] { overflow: hidden; }
  html[data-menu-open] .site-header { backdrop-filter: none; background: var(--canvas); }
  html:not(.js) .nav-shell { flex-wrap: wrap; }
  html:not(.js) .nav-links { display: flex; width: 100%; order: 3; flex-wrap: wrap; justify-content: flex-start; gap: 4px 18px; padding-block: 8px 16px; }
  .demo-grid { grid-template-columns: 1fr; }
  .sats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .container { padding-inline: 24px; }
  .section { padding-block: 88px; }
  .hero { padding-block: 24px 40px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .hero-copy { padding-block: 16px 0; }
  .hero h1 { font-size: clamp(2.75rem, 11vw, 4.25rem); }
  .hero-app { margin: 16px 0 0; transform: none; }
  [data-tilt] { transform: none; }
  .hero-stage { margin-bottom: 72px; }
  .hero-sat { left: auto; right: -4px; bottom: -84px; width: 104px; }
  .hero-sat-line { left: auto; right: 92px; bottom: 6px; max-width: 210px; font-size: .8125rem; border-radius: 16px 16px 3px 16px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .section-description { max-width: 60ch; }
  .facts { grid-template-columns: repeat(2, 1fr); padding-block: 0; }
  .fact { justify-content: start; padding: 22px 12px; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--surface-strong); }
  .demo-story { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .demo-story:nth-of-type(2) .demo-story-media { order: 0; }
  .sat-usage, .control-row, .model-examples, .mode-grid, .desktop-grid { grid-template-columns: 1fr; }
  .stage-grid { grid-template-columns: 1fr; }
  .stage { display: grid; grid-template-columns: 72px 1fr; gap: 6px 20px; align-items: start; }
  .stage-head { grid-row: span 2; flex-direction: column-reverse; align-items: start; gap: 10px; margin: 0; padding: 0; border: 0; }
  .install-grid { grid-template-columns: 1fr; gap: 36px; }
  .desktop-status { grid-template-columns: 1fr; }
  .cap-note { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
  .container { padding-inline: 20px; }
  .section { padding-block: 72px; }
  .brand-name { font-size: 1.25rem; }
  .brand-logo { width: 20px; height: 25px; }
  .brand .version { display: none; }
  .nav-actions { gap: 8px; }
  .nav-actions .button { display: none; }
  .hero-actions .button { width: 100%; }
  .hero-description { font-size: 1.0625rem; }
  .terminal-bar, .terminal-bottom { padding-inline: 14px; }
  .terminal-title { font-size: .6875rem; gap: 9px; }
  .hero-cli-body { height: 410px; padding: 17px 16px; font-size: .75rem; }
  .session-panel .hero-cli-body { height: 330px; padding: 16px; font-size: .6875rem; }
  .story-card { padding: 22px; }
  .story-card .cap-top { margin-bottom: 22px; }
  .story-card .session-panel { width: calc(100% + 12px); margin-inline: -6px; }
  .fact { gap: 10px; padding-inline: 6px; }
  .fact-value { font-size: 1.25rem; min-width: 39px; }
  .fact-label { font-size: .75rem; }
  .bitcoin-stack { gap: 4px 18px; justify-content: start; }
  .sats-grid { grid-template-columns: 1fr; }
  .install-box pre { padding: 18px; }
  .install-next { padding-inline: 18px; }
  .install-tabs a { font-size: .75rem; }
  .footer-links { width: 100%; justify-content: space-between; gap: 12px; }
}

/* Project marks: a quiet contextual row, subordinate to bitcode's identity. */
.project-ecosystem{padding-block:28px 40px;border-bottom:1px solid var(--hairline)}
.project-ecosystem h2{margin:0 0 22px;font:400 12px/1.5 'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.project-ecosystem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ecosystem-project{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;color:inherit;border-radius:8px}
.ecosystem-project:focus-visible{outline:2px solid #f7931a;outline-offset:8px}
.ecosystem-mark{display:flex;align-items:center;justify-content:center;flex:0 0 52px;height:52px}
.ecosystem-mark img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.ecosystem-mark--qvac{flex-basis:96px}.ecosystem-mark--lightning{background:var(--ink);border-radius:8px;padding:7px}.ecosystem-mark--kaleido{background:var(--surface);border-radius:8px;padding:4px}
.ecosystem-project strong{display:block;font-size:14px;font-weight:500;line-height:1.5}.ecosystem-project small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px}
@media(max-width:1100px){.project-ecosystem-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}
@media(max-width:640px){.project-ecosystem-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ecosystem-project{flex-direction:column;gap:8px;text-align:center}.ecosystem-mark,.ecosystem-mark--qvac{flex:0 0 auto;width:100%;max-width:72px;height:36px}.ecosystem-mark--lightning,.ecosystem-mark--kaleido{width:36px;padding:5px}.ecosystem-project strong{font-size:11px;line-height:1.3}.ecosystem-project small{display:none}}