/* Design tokens. Change these once to restyle the entire homepage. */
@font-face { font-family: Geist; src: url('../fonts/22a5144ee8d83bca-s.p.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/7d4881bb7e1bf84d-s.p.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Pixel'; src: url('../fonts/b269f2652091576b.p.woff2') format('woff2'); font-weight: 500; font-display: swap; }
:root {
  --background: #0c0c0c;
  --foreground: #fafafa;
  --muted: #99999f;
  --surface: #121212;
  --border: #262626;
  --pink: #f845fa;
  --cyan: #57f0e2;
  --yellow: #eaf452;
  --font-body: Geist, Arial, sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --font-pixel: 'Geist Pixel', monospace;
  --gutter: 32px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --hero-track: 320vh;
  --workspace-track: 300vh;
  --knowledge-track: 1012vh;
}
* { box-sizing: border-box; }
html { background: var(--background); color: var(--foreground); scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font: 14px/1.625 var(--font-body); overflow-x: clip; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, a, summary { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { color: inherit; background: transparent; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 1px solid #999; outline-offset: 4px; }
h1, h2, h3, h4, p, blockquote { margin: 0; }
h1, h2 { font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
h2 { font-size: clamp(28px, 3vw, 42px); }
h3 { font-size: 16px; font-weight: 500; }
p { color: var(--muted); }
img, video { max-width: 100%; display: block; }
svg { width: 20px; height: 20px; flex-shrink: 0; }
button { border: 0; }
[hidden] { display: none !important; }
.pixel { font-family: var(--font-pixel); font-weight: 500; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); font: 12px/1 var(--font-mono); white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.button:hover { background: #202020; border-color: #494949; }
.button-primary { background: #fafafa; color: #121212; border-color: #fafafa; }
.button-primary:hover { background: #dedede; border-color: #dedede; }
.icon-button { border: 1px solid var(--border); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.icon-button:hover { border-color: #777; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.section-heading h2 { font-size: 36px; }
.section-heading p { margin-top: 12px; }
.eyebrow { display: block; font: 10px/1.5 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.skip-link { position: fixed; z-index: 101; left: 16px; top: -80px; padding: 12px; background: var(--foreground); color: var(--background); }
.skip-link:focus { top: 16px; }
/* Navigation contracts to a floating translucent bar as the page scrolls. */
.navigation { position: fixed; top: 0; left: 50%; translate: -50% 0; z-index: 100; display: flex; width: 100%; max-width: 100%; height: 64px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 24px; border: 1px solid transparent; transition: max-width .3s var(--ease-out), top .3s, background .3s, border-color .3s; }
.navigation.is-scrolled { top: 12px; max-width: min(680px, calc(100% - 32px)); background: #09090b99; border-color: #3f3f4666; border-radius: 3px; backdrop-filter: blur(16px); }
.nav-left, .nav-right { display: flex; align-items: center; gap: 24px; }
.nav-right { gap: 12px; }
.logo { width: 32px; height: 32px; }
.brand-link { display: flex; margin-right: 16px; }
.nav-link { padding: 0; font: 12px var(--font-body); color: var(--muted); }
.nav-link:hover { color: var(--foreground); }
.nav-right .button { height: 32px; padding-inline: 12px; }
.nav-right .nav-login { min-width: 84px; }
.tools { position: relative; }
.tools-toggle { display: flex; align-items: center; gap: 4px; }
.tools-toggle svg { width: 12px; height: 12px; transition: rotate .2s; }
.tools-toggle[aria-expanded="true"] svg { rotate: 180deg; }
.tools-menu { position: absolute; top: 48px; left: -12px; width: 320px; max-width: calc(100vw - 32px); background: #09090bf2; backdrop-filter: blur(16px); border: 1px solid #3f3f46; padding: 4px; }
.tools-menu a { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.tools-menu a:hover { background: #27272a; }
.tools-menu strong { font: 12px var(--font-mono); }
.tools-menu span { font-size: 12px; color: var(--muted); }
/* The hero keeps the reference's 400px image reveal and 320vh scroll track. */
.hero-track { height: var(--hero-track); position: relative; z-index: 2; background: #09090b; }
.hero-sticky { height: 100vh; position: sticky; top: 0; overflow: hidden; clip-path: inset(0 32px 0 32px round 12px); }
.hero-copy { position: relative; z-index: 3; padding: 112px 40px 32px; will-change: opacity, transform; }
.hero-copy h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -.02em; animation: enter-title .9s .1s var(--ease-out) both; }
.hero-copy p { max-width: 448px; margin-top: 24px; font-size: 14px; line-height: 1.625; animation: enter-copy .7s .5s var(--ease-out) both; }
.hero-copy .actions { animation: enter-copy .5s .7s var(--ease-out) both; }
.landscape { position: absolute; inset: 0; overflow: hidden; background-position: center 400px; background-size: cover; background-repeat: no-repeat; clip-path: inset(400px 20px 0 20px); }
.landscape::after { content: ''; position: absolute; inset: 0; background: #0c0c0c0d; pointer-events: none; }
.hero-window-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 48px 32px; transform: translateY(280px) scale(.82); transform-origin: bottom center; will-change: transform; }
.hero-window { position: relative; z-index: 1; width: 100%; max-width: 1024px; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: #0c0c0cf2; box-shadow: 0 20px 60px #0002; }
.window-bar { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--border); background: #0c0c0c66; color: var(--muted); font: 12px var(--font-mono); text-align: center; }
.window-dots { display: flex; align-items: center; gap: 8px; }
.window-dots i { width: 12px; height: 12px; border: 1px solid var(--border); display: block; }
.hero-window .window-dots i { border-radius: 100%; background: #99999966; border: 0; }
.window-actions { display: flex; justify-content: flex-end; }
.hero-stage { position: relative; height: 480px; overflow: hidden; background: var(--background); }
.hero-stage-shade { position: absolute; inset: 0; background: #09090b; opacity: 0; }
.hero-beat { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; padding: 24px 48px; opacity: 0; will-change: opacity, transform; pointer-events: none; }
.hero-beat p { font-size: 60px; line-height: 1.1; letter-spacing: -.025em; color: var(--foreground); text-align: center; white-space: pre-line; }
.beat-mono p, .beat-typing p { font-family: var(--font-mono); }
.beat-muted p { color: var(--muted); font-size: 36px; }
.beat-typing p { font-size: clamp(38px, 7vw, 96px); }
.beat-small p { font-size: 30px; }
.beat-problem p { font-size: 36px; color: white; }
.beat-snake svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.beat-snake text { font-family: var(--font-body); fill: #18181b; font-size: 96px; font-weight: 500; letter-spacing: -.02em; }
.hero-blackout { position: absolute; inset: 0; background: #09090b; z-index: 8; opacity: 0; pointer-events: none; }
/* Loose reference cards converge into the frosted workspace folder. */
.workspace-track { position: relative; height: var(--workspace-track); margin-top: -100vh; background: #09090b; }
.workspace-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ascii-texture { position: absolute; inset: 0; overflow: hidden; font: 12px/24px var(--font-pixel); letter-spacing: 14px; color: currentColor; opacity: .07; white-space: pre; pointer-events: none; user-select: none; }
.workspace-problem { position: absolute; z-index: 3; padding: 0 20px; text-align: center; font-size: 48px; line-height: 1.25; }
.workspace-destination { position: relative; z-index: 2; text-align: center; opacity: 0; }
.workspace-destination > h2 { margin-bottom: 48px; font-size: 36px; }
.workspace-folder { width: 300px; height: 225px; position: relative; perspective: 1000px; }
.folder-stack { position: absolute; top: 0; left: 10%; width: 80%; height: 100%; display: flex; }
.folder-stack > * { position: absolute; width: 50%; height: 75%; border: 1px solid var(--border); object-fit: cover; }
.stack-code { left: -3%; top: 12%; rotate: -12deg; padding: 10px; text-align: left; font: 8px/1.8 var(--font-mono); color: #f472b6; background: #09090b; }
.folder-stack img { left: 25%; top: 5%; rotate: 2deg; }
.stack-note { left: 54%; top: 12%; rotate: 12deg; padding: 10px; text-align: left; font: 8px/1.8 var(--font-body); background: #18181b; color: var(--muted); }
.folder-front { position: absolute; bottom: 0; inset-inline: 0; height: 58%; text-align: left; padding: 60px 16px 14px; border: 1px solid #5556; border-radius: 8px; background: #0c0c0c99; backdrop-filter: blur(12px); }
.folder-front h3 { font: 14px var(--font-mono); }
.folder-front span { font: 12px var(--font-mono); color: var(--muted); }
.folder-front b { font-weight: 400; }
.floating-cards { position: absolute; inset: 0; pointer-events: none; }
.reference-card { position: absolute; left: var(--card-x); top: var(--card-y); width: var(--card-width); height: var(--card-height); transform: translate(-50%, -50%); will-change: transform, opacity; }
.reference-card-inner { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 3px; background: #18181b; transform: perspective(1000px) rotateZ(var(--card-rotation)); transition: box-shadow .25s, transform .2s ease-out; }
.reference-card img { width: 100%; height: 100%; object-fit: cover; }
.reference-card pre { padding: 12px; margin: 0; font: 10px/1.8 var(--font-mono); color: #67e8f9; background: #09090b; height: 100%; }
.reference-card pre span { color: #f472b6; }
.reference-card .paper { padding: 12px; font-size: 9px; }
.paper strong { display: block; color: var(--foreground); margin-bottom: 10px; }
.paper p { margin-bottom: 8px; }
.card-label { position: absolute; bottom: 4px; left: 4px; right: 4px; background: #0c0c0cb3; backdrop-filter: blur(6px); padding: 2px 6px; font: 8px var(--font-mono); }
.benefits { border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); padding: 40px 32px 64px; gap: 48px; border-bottom: 1px solid var(--border); }
.benefit { display: flex; align-items: flex-start; gap: 16px; }
.benefit > svg { margin-top: 3px; width: 24px; height: 24px; }
.benefit h3 { font: 14px/1.5 var(--font-mono); margin-bottom: 8px; }
.benefit p { font-size: 12px; }
/* Alternating thirds are tied to the same 80rem measure as the reference. */
.feature { display: grid; grid-template-columns: calc(50vw - 80rem / 6 - 1px) 1fr; position: relative; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.feature::before { content: ''; position: absolute; left: calc(50vw - 80rem / 6 - 1px); top: 0; width: 10px; height: 10px; background: var(--background); border: 1px solid var(--border); transform: translate(-50%, -50%) rotate(45deg); z-index: 1; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 96px 48px 96px 32px; }
.feature-copy h2 { font-size: 30px; margin-bottom: 24px; line-height: 1.2; }
.feature-copy p { font-size: 14px; line-height: 1.625; margin-top: 16px; }
.feature-copy .actions { margin-top: 32px; }
.feature-media { padding: 32px; display: flex; align-items: stretch; min-height: 600px; border-left: 1px solid var(--border); background: #1717174d; }
.feature-reversed { grid-template-columns: 1fr calc(50vw - 80rem / 6 - 1px); }
.feature-reversed .feature-copy { grid-column: 2; grid-row: 1; padding: 96px 32px 96px 48px; }
.feature-reversed .feature-media { grid-column: 1; grid-row: 1; border-left: 0; border-right: 1px solid var(--border); }
.feature-reversed::before { left: auto; right: calc(50vw - 80rem / 6 - 1px); transform: translate(50%, -50%) rotate(45deg); }
.video-window { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--border); background: var(--background); }
.video-window .window-bar { color: #99999980; flex-shrink: 0; }
.sound-toggle { padding: 8px; margin: -8px; display: flex; color: var(--muted); }
.sound-toggle svg { width: 14px; height: 14px; }
.video-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.video-stage video { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.video-play { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; font: 10px var(--font-mono); letter-spacing: .2em; color: var(--muted); }
.play-triangle { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--border); }
.play-triangle::after { content: ''; margin-left: 4px; border-left: 13px solid var(--muted); border-block: 9px solid transparent; }
.video-stage.is-playing .video-play { opacity: 0; pointer-events: none; }
/* A single pinned stage cycles through four independently editable scenes. */
.knowledge-track { height: var(--knowledge-track); position: relative; border-top: 1px solid var(--border); }
.knowledge-sticky { height: 100vh; position: sticky; top: 0; overflow: hidden; }
.knowledge-scene { position: absolute; inset: 0; padding: 80px 48px 40px; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform; }
.knowledge-scene.is-active { visibility: visible; pointer-events: auto; }
.scene-folders { padding: 8vh 8vw; }
.folder-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; max-width: 1300px; margin: 0 auto; transform-origin: center; }
.mini-folder { aspect-ratio: 4/3; position: relative; border: 1px solid var(--border); border-radius: 6px; background: #18181b50; }
.mini-stack { width: 80%; height: 85%; position: absolute; left: 10%; top: 0; }
.mini-stack > * { position: absolute; width: 48%; height: 82%; top: 8%; border: 1px solid var(--border); object-fit: cover; }
.mini-stack pre { left: 0; rotate: calc(var(--rotation) - 5deg); background: #09090b; color: #f472b6; padding: 6px; font: 5px/1.8 var(--font-mono); overflow: hidden; }
.mini-stack img { left: 26%; top: 5%; rotate: var(--rotation); }
.mini-note { left: 56%; rotate: calc(var(--rotation) + 7deg); background: #18181b; font-size: 6px; padding: 6px; color: var(--muted); }
.mini-folder-front { position: absolute; inset-inline: 0; bottom: 0; height: 55%; background: #0c0c0c99; backdrop-filter: blur(8px); border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; padding: 0 10px 8px; display: flex; flex-direction: column; justify-content: flex-end; }
.mini-folder h3 { font: 12px/1.25 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-folder span { font: 10px var(--font-mono); color: var(--muted); margin-top: 3px; }
.folder-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; color: var(--muted); font: 12px var(--font-mono); margin-top: 40px; }
.scene-search { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7vw; padding-inline: 8vw; }
.knowledge-copy h2 { max-width: 500px; margin-bottom: 40px; font-size: clamp(30px, 4vw, 56px); }
.knowledge-copy p { margin: 24px 0; max-width: 440px; font-size: 14px; }
.search-field { display: flex; align-items: center; gap: 16px; border: 1px solid var(--border); background: #18181b55; height: 56px; padding: 0 16px; font: 13px var(--font-mono); color: var(--foreground); }
.search-field svg { color: var(--muted); width: 16px; height: 16px; }
.search-typing { flex: 1; overflow: hidden; white-space: nowrap; }
.search-shortcut { color: #888; font-size: 11px; }
.search-result { align-self: center; width: 100%; max-width: 540px; border: 1px solid var(--border); background: #111; }
.result-path { padding: 16px; font: 10px var(--font-mono); color: var(--muted); border-bottom: 1px solid var(--border); }
.search-result > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.result-details { display: flex; flex-direction: column; padding: 20px; gap: 12px; }
.result-details small { font: 9px var(--font-mono); color: var(--muted); }
.result-details p { font-size: 12px; color: var(--foreground); }
.tag { display: inline-block; align-self: flex-start; padding: 4px 8px; background: #27272a; font: 10px var(--font-mono); }
.search-note { position: absolute; bottom: 40px; max-width: 500px; left: 8vw; font-size: 12px; }
.scene-analyzer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; padding-inline: 8vw; }
.analyzer-copy h2 { font-size: clamp(28px, 3.6vw, 52px); }
.analyzer-copy p { margin-top: 24px; max-width: 500px; }
.tech-logos { display: flex; align-items: center; gap: 24px; margin: 32px 0; }
.tech-logos img { width: 32px; height: 32px; object-fit: contain; }
.analyze-label { display: block; font: 10px var(--font-mono); letter-spacing: .18em; color: var(--muted); }
.analyze-field { display: flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid var(--border); padding: 16px; color: var(--foreground); font-size: 14px; letter-spacing: 0; }
.analyze-field > span:first-child { color: var(--muted); }
.analyze-field svg { margin-left: auto; }
.analysis-result { max-width: 560px; width: 100%; }
.analysis-result > .eyebrow { margin-bottom: 16px; }
.analysis-window { border: 1px solid var(--border); }
.brief-preview { background: #0d1027; padding: 16px; aspect-ratio: 16/7; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.brief-top, .brief-bottom { position: absolute; inset-inline: 16px; display: flex; justify-content: space-between; font: 7px var(--font-mono); }
.brief-top { top: 12px; color: #f3cc70; }
.brief-top span { color: #999; }
.brief-bottom { bottom: 12px; color: #999; }
.brief-preview img { width: 40%; max-height: 65px; }
.brief-preview small { margin-top: 8px; color: #999; font: 7px var(--font-mono); letter-spacing: .2em; }
.analysis-details { padding: 20px; }
.analysis-row { display: grid; grid-template-columns: 85px 1fr; gap: 12px; padding-bottom: 12px; font: 11px/1.5 var(--font-mono); }
.analysis-row small { color: var(--muted); text-transform: uppercase; font-size: 9px; letter-spacing: .1em; }
.analysis-details .eyebrow { padding-top: 6px; padding-bottom: 8px; }
.detection-log { font: 9px/1.8 var(--font-mono); }
.detection-log div { color: #ffadb7; }
.detection-log div:last-child { color: #b8f06a; }
.analysis-result > p { font-size: 12px; margin: 20px 0; }
.scene-ai { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; padding-inline: 8vw; }
.ai-copy h2 { font-size: clamp(28px, 3.6vw, 52px); }
.ai-copy > p { margin-top: 24px; max-width: 460px; }
.ai-logos { display: flex; gap: 24px; margin-top: 48px; }
.ai-logos img { width: 28px; height: 28px; }
.ai-window { border: 1px solid var(--border); background: #121212; }
.ai-prompt, .ai-answer { padding: 28px; }
.ai-prompt { border-bottom: 1px solid var(--border); }
.ai-window small { font: 9px var(--font-mono); letter-spacing: .12em; color: var(--muted); }
.ai-window p { font-size: 13px; margin-top: 12px; color: var(--foreground); }
.ai-reference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.ai-reference-grid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--border); }
/* Testimonials, pricing, editorial videos and footer. */
.testimonials { background-color:var(--background); position: relative; border-top: 1px solid var(--border); padding-block: 80px; background-size: cover; background-position: center; overflow: hidden; }
.testimonials::before { content: none; }
.testimonials > * { position: relative; }
.testimonials .section-heading { padding-inline: 48px; margin-bottom: 40px; }
.carousel-controls { display: flex; align-items: center; gap: 8px; }
.carousel-dots { display: flex; gap: 8px; margin-right: 20px; }
.carousel-dots button { padding: 0; width: 6px; height: 6px; border-radius: 100%; background: #ffffff40; }
.carousel-dots button[aria-pressed="true"] { background: white; }
.testimonial-track { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 48px; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card { width: 42vw; flex-shrink: 0; min-height: 360px; display: flex; flex-direction: column; border: 1px solid var(--border); background: #0c0c0c40; backdrop-filter: blur(16px); padding: 32px; scroll-snap-align: center; }
.testimonial-number { font: 12px var(--font-mono); color: #9996; margin-bottom: 40px; }
.testimonial-card blockquote { font-size: 20px; line-height: 1.625; }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 40px; font: 14px var(--font-mono); }
.testimonial-person strong { font-weight: 500; }
.testimonial-person p { margin-top: 6px; font-size: 12px; }
.initial { border: 1px solid var(--border); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.membership { padding: 80px 48px; }
.membership .section-heading { margin-bottom: 40px; }
.billing-toggle { display: flex; border: 1px solid var(--border); border-radius: 3px; padding: 4px; }
.billing-toggle button { font-size: 14px; padding: 8px 16px; font-weight: 600; color: var(--muted); border-radius: 2px; }
.billing-toggle button[aria-pressed="true"] { color: var(--foreground); background: #242424; }
.billing-toggle span { color: #b9b9bd; margin-left: 6px; font: 10px var(--font-mono); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); }
.plan + .plan { border-left: 1px solid var(--border); }
.plan-intro { padding: 24px; min-height: 305px; display: flex; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--border); }
.plan-name { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.plan-name h3 { font-size: 20px; font-weight: 500; }
.popular { font: 10px var(--font-mono); padding: 3px 6px; border: 1px solid var(--border); background: #202020; }
.plan-intro p { font-size: 13px; margin-top: 12px; }
.price { display: flex; align-items: baseline; gap: 3px; font-size: 36px; line-height: 1; margin-top: auto; padding-top: 28px; }
.price small { font-size: 12px; color: var(--muted); margin-left: 4px; }
.plan-intro .button { width: 100%; margin-top: 24px; }
.plan ul { list-style: none; padding: 24px; margin: 0; }
.plan li { font-size: 12px; color: var(--muted); margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px; }
.plan li::before { content: '✓'; color: var(--foreground); }
.plan li span { flex: 1; }
.preview-link { text-decoration: underline; font-size: 10px; color: #aaa; padding: 0; }
.compare-link { display: block; width: fit-content; margin: 44px auto 0; font: 12px var(--font-mono); text-decoration: underline; color: var(--muted); }
.journal { padding-block: 96px; border-top: 1px solid var(--border); overflow: hidden; }
.journal .section-heading { padding-inline: 48px; margin-bottom: 40px; }
.channel { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.channel > span .play-icon { position: static; width: 32px; height: 24px; transform: none; }
.channel strong, .channel small { display: block; }
.channel small { color: var(--muted); font: 10px var(--font-mono); }
.channel .button { padding-inline: 16px; }
.journal-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-inline: 48px; }
.film-preview { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 3px; position: relative; aspect-ratio: 16/9; overflow: hidden; }
.film-preview > img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.film-preview:hover > img { transform: scale(1.04); }
.play-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 42px; }
.duration { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; font: 12px var(--font-mono); background: #000c; }
.journal-video h3 { font-size: 14px; line-height: 1.4; margin-top: 12px; }
.shorts-heading { display: flex; align-items: center; justify-content: space-between; margin: 72px 48px 16px; }
.shorts-heading h3 { font-size: 18px; }
.shorts-heading span { font: 14px var(--font-mono); color: var(--muted); }
.shorts-track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 48px 16px; scrollbar-width: thin; }
.short { width: 192px; flex-shrink: 0; }
.short > div { position: relative; aspect-ratio: 1179/2556; overflow: hidden; border: 1px solid var(--border); border-radius: 3px; }
.short img { display:block; width:100%; height:100%; object-fit:contain; }
.short .play-icon { width: 40px; height: 28px; }
.short h4 { font-size: 12px; font-weight: 400; line-height: 1.4; margin-top: 8px; }
.faq { border-block: 1px solid var(--border); display: grid; grid-template-columns: calc(100vw / 3 + 16px) 1fr; }
.faq > h2 { font-size: 36px; padding: 64px 48px; border-right: 1px solid var(--border); }
.faq-list { padding: 48px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { font-size: 14px; font-weight: 400; }
.faq-item h3 button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; padding: 24px 0; }
.faq-item svg { width: 16px; height: 16px; transition: rotate .2s; color: var(--muted); }
.faq-item [aria-expanded="true"] svg { rotate: 45deg; }
.faq-answer p { padding: 0 30px 24px 0; font-size: 13px; }
.final-cta { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; padding: 80px 20px; }
.final-cta > .reveal { position: relative; }
.final-cta h2 { font-size: clamp(28px, 4vw, 42px); }
.final-cta p { margin-top: 16px; margin-bottom: 32px; }
.twinkle { opacity: 1; }
.twinkle > div { color: #ffffff12; }
.twinkle span { color: var(--color); animation: twinkle 3.7s var(--delay) ease-in-out infinite; }
.footer { border-top: 1px solid var(--border); padding: 20px 32px; }
.footer-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 8px; font: 10px var(--font-mono); }
.footer-brand a { display: flex; }
.footer-brand .logo { width: 24px; height: 24px; margin-right: 4px; }
.origin { color: var(--muted); }
.footer-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font: 10px var(--font-mono); color: var(--muted); }
.footer-links a:hover { color: var(--foreground); }
.awards { display: flex; gap: 8px; }
.awards img { width: 34px; height: 34px; object-fit: contain; }
.footer-socials { display: flex; justify-content: center; gap: 24px; padding-top: 24px; font: 10px var(--font-mono); color: var(--muted); }
.dialog { border: 1px solid var(--border); color: var(--foreground); background: var(--background); padding: 40px; max-width: min(520px, calc(100vw - 32px)); }
.dialog::backdrop { background: #000b; backdrop-filter: blur(8px); }
.dialog-close.icon-button { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; }
.dialog-close.icon-button:focus-visible { outline:none; border-color:#aaa; }
.demo-dialog h2 { margin-top: 12px; font-size: 28px; }
.demo-dialog p { margin: 24px 0; }
.video-dialog { width: 94vw; max-width: 1152px; padding: 40px 0 0; }
.dialog-media { aspect-ratio: 16/9; }
.dialog-media video, .dialog-media iframe { width: 100%; height: 100%; border: 0; }
.dialog-media video { object-fit: cover; object-position: center; }
/* Reveal state is added only after the observer has been installed. */
.motion-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
@keyframes enter-title { from { transform: translateY(100px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes enter-copy { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .07; } 50% { opacity: .85; } }
@media (min-width: 1600px) {
  .feature-copy { padding-inline: max(48px, calc((100vw - 1440px) / 2)); }
}
@media (max-width: 1023px) {
  .hero-sticky { clip-path: none !important; }
  .hero-copy { padding: 112px 32px 16px; }
  .landscape { clip-path: inset(400px 0 0 0); }
  .hero-window-wrap { padding: 48px 16px; }
  .hero-stage { height: 400px; }
  .hero-window { max-width: 1024px; }
  .hero-beat p { font-size: 60px; }
  .beat-muted p { font-size: 30px; }
  .beat-small p { font-size: 24px; }
  .beat-problem p { font-size: 30px; }
  .workspace-problem { font-size: 36px; }
  .feature, .feature-reversed { display: flex; flex-direction: column; }
  .feature::before { display: none; }
  .feature-copy, .feature-reversed .feature-copy { padding: 64px 20px; }
  .feature-copy h2 { font-size: 24px; }
  .feature-copy p { max-width: 720px; }
  .feature-media, .feature-reversed .feature-media { border: 0; padding: 16px; min-height: 0; aspect-ratio: 4/3; }
  .benefits { padding: 40px 20px; gap: 24px; }
  .benefit { gap: 12px; }
  .knowledge-scene { padding-inline: 5vw; }
  .scene-search, .scene-analyzer, .scene-ai { gap: 4vw; }
  .folder-grid { gap: 20px; }
  .mini-folder h3 { font-size: 9px; }
  .mini-folder span { font-size: 8px; }
  .knowledge-copy h2 { font-size: 36px; margin-bottom: 24px; }
  .knowledge-copy p, .analyzer-copy p, .ai-copy p { font-size: 12px; }
  .search-note { bottom: 24px; left: 5vw; width: 40%; }
  .tech-logos { gap: 16px; }
  .tech-logos img { width: 24px; height: 24px; }
  .analysis-details { padding: 12px; }
  .analysis-row { grid-template-columns: 64px 1fr; font-size: 9px; }
  .analysis-row small, .detection-log { font-size: 8px; }
  .section-heading h2 { font-size: 24px; }
  .testimonials { padding-block: 64px; }
  .testimonials .section-heading { padding-inline: 20px; }
  .testimonial-track { padding-inline: 20px; gap: 16px; }
  .testimonial-card { width: 85vw; padding: 24px; }
  .initial { display: none; }
  .membership { padding: 64px 20px; }
  .plan-intro { padding: 20px; min-height: 330px; }
  .plan-name { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plan ul { padding: 20px; }
  .journal { padding-block: 64px; }
  .journal .section-heading, .journal-videos { padding-inline: 20px; }
  .shorts-heading { margin-inline: 20px; }
  .shorts-track { padding-inline: 20px; }
  .short { width: 160px; }
  .faq { grid-template-columns: 1fr; padding: 32px 20px; }
  .faq > h2 { padding: 0 0 24px; border: 0; font-size: 24px; }
  .faq-list { padding: 0; }
  .final-cta { padding-block: 56px; }
  .footer-top { grid-template-columns: 1fr auto; }
  .footer-links { grid-column: 1/-1; grid-row: 2; }
}
@media (max-width: 639px) {
  .navigation { padding-inline: 16px; }
  .nav-left { gap: 16px; }
  .brand-link { margin-right: 0; }
  .nav-link[href="#membership"], .nav-submit { display: none; }
  .tools-menu { left: -115px; width: 280px; }
  .hero-copy { padding-inline: 24px; }
  .hero-copy h1 { font-size: 28px; }
  .hero-copy p { max-width: 90%; font-size: 13px; }
  .hero-window-wrap { padding: 48px 16px; }
  .hero-stage { height: 400px; }
  .hero-beat { padding: 24px; }
  .hero-beat p { font-size: 36px; }
  .beat-muted p { font-size: 24px; }
  .beat-small p { font-size: 20px; }
  .beat-problem p { font-size: 24px; }
  .beat-typing p { font-size: 38px; }
  .workspace-problem { font-size: 30px; text-shadow: 0 0 30px #000, 0 0 20px #000; }
  .workspace-destination > h2 { font-size: 28px; margin-bottom: 32px; }
  .reference-card { scale: .7; }
  .reference-card[data-card="0"] { margin-left: -12vw; }
  .reference-card[data-card="2"] { margin-left: -20vw; }
  .reference-card[data-card="4"] { margin-left: -8vw; }
  .workspace-folder { width: 250px; height: 200px; }
  .benefits { grid-template-columns: 1fr; gap: 28px; }
  .benefit p { max-width: 360px; }
  .knowledge-scene { padding: 88px 20px 24px; }
  .folder-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .folder-grid > :nth-child(n+10) { display: none; }
  .folder-tags { gap: 12px; font-size: 10px; }
  .mini-folder h3 { font-size: 8px; }
  .mini-folder span { font-size: 7px; }
  .mini-stack pre, .mini-note { font-size: 3px; }
  .scene-search, .scene-analyzer, .scene-ai { display: flex; flex-direction: column; gap: 24px; justify-content: center; }
  .knowledge-copy { width: 100%; }
  .knowledge-copy h2 { font-size: 30px; max-width: 300px; margin-bottom: 20px; }
  .knowledge-copy p { margin-block: 16px; }
  .search-field { height: 48px; gap: 8px; font-size: 11px; }
  .search-result { max-width: 360px; }
  .result-path { padding: 10px; }
  .search-result > img { aspect-ratio: 16/7; }
  .result-details { padding: 12px; gap: 8px; }
  .result-details p { font-size: 10px; }
  .result-details p:last-child, .result-details small:nth-last-child(2) { display: none; }
  .search-note { position: static; width: 100%; font-size: 10px; }
  .analyzer-copy, .ai-copy { width: 100%; }
  .analyzer-copy h2, .ai-copy h2 { font-size: 28px; }
  .analyzer-copy > p { font-size: 11px; margin-top: 12px; }
  .tech-logos { margin-block: 16px; gap: 20px; }
  .analyze-field { padding: 10px; font-size: 12px; }
  .analyzer-copy > p:last-child { display: none; }
  .analysis-result { max-width: 360px; }
  .analysis-result > .eyebrow { margin-bottom: 6px; }
  .brief-preview { aspect-ratio: 16/5; }
  .brief-preview img { width: 30%; max-height: 36px; }
  .brief-preview small { font-size: 5px; margin-top: 4px; }
  .brief-top, .brief-bottom { font-size: 5px; }
  .analysis-row { padding-bottom: 6px; font-size: 8px; }
  .analysis-row small { font-size: 7px; }
  .analysis-details { padding: 10px; }
  .detection-log { font-size: 7px; }
  .analysis-result > p { font-size: 10px; margin-block: 10px; }
  .analysis-result > .button { height: 32px; }
  .ai-copy .actions { margin-top: 20px; }
  .ai-logos { margin-top: 24px; }
  .ai-logos img { width: 24px; height: 24px; }
  .ai-window { max-width: 360px; width: 100%; }
  .ai-prompt, .ai-answer { padding: 16px; }
  .ai-window p { font-size: 11px; }
  .ai-reference-grid { gap: 8px; margin-top: 16px; }
  .ai-reference-grid img { aspect-ratio: 4/3; }
  .carousel-dots { margin-right: 8px; }
  .testimonial-card { min-height: 350px; }
  .testimonial-number { margin-bottom: 24px; }
  .membership .section-heading { flex-direction: column; align-items: flex-start; gap: 24px; }
  .billing-toggle { width: 100%; }
  .billing-toggle button { flex: 1; padding-inline: 12px; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--border); }
  .plan-name { flex-direction: row; align-items: center; }
  .plan-intro { min-height: 270px; padding: 24px; }
  .plan ul { padding: 24px; }
  .journal .section-heading { flex-direction: column; align-items: flex-start; }
  .journal-videos { grid-template-columns: 1fr; gap: 32px; }
  .journal .section-heading { margin-bottom: 40px; }
  .shorts-heading { margin-top: 56px; }
  .footer { padding-inline: 20px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { flex-wrap: wrap; justify-content: center; font-size: 9px; }
  .footer-links { grid-row: auto; }
  .awards { justify-content: center; }
  .dialog { padding: 32px 24px; }
}
/* Reduced motion is a readable, ordinary document rather than a long empty track. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-track { height: auto; }
  .hero-sticky { position: relative; height: auto; clip-path: none; }
  .hero-copy { padding-bottom: 48px; }
  .landscape { position: relative; height: 500px; clip-path: none; }
  .hero-window-wrap { transform: none; }
  .hero-stage { height: 300px; }
  .hero-beat[data-beat="0"] { opacity: 1; }
  .workspace-track { height: 700px; margin: 0; }
  .workspace-sticky { position: relative; height: 700px; }
  .workspace-problem { top: 80px; font-size: 28px; }
  .workspace-destination { opacity: 1; margin-top: 180px; }
  .workspace-destination > h2 { font-size: 28px; }
  .floating-cards { display: none; }
  .knowledge-track { height: auto; }
  .knowledge-sticky { position: relative; height: auto; overflow: visible; }
  .knowledge-scene { position: relative; min-height: 700px; height: auto; opacity: 1; visibility: visible; pointer-events: auto; border-bottom: 1px solid var(--border); }
  .scene-folders { min-height: 500px; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}
/* ROAM content replaces the reference branding without changing its page grid. */
.logo { width: 60px; height: 32px; object-fit: contain; }
.footer-brand .logo { width: 48px; height: 24px; }
.hero-beat.beat-mono p { font-family: var(--font-pixel); }
.landscape::before { content: ''; position: absolute; inset: 0; background: url('../media/noise-texture.webp') repeat; background-size: 200px; opacity: .12; mix-blend-mode: soft-light; pointer-events: none; }
.tech-logos span { display: flex; align-items: center; min-height: 32px; font: 11px var(--font-mono); color: var(--muted); white-space: nowrap; }
.ai-logos span { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .12em; }
.roam-field-preview { background-size: cover; background-position: center; isolation: isolate; }
.roam-field-preview::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #0009; }
.field-wordmark { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.field-wordmark .logo { width: 75px; height: 25px; max-height: none; }
.field-wordmark strong { font-size: 40px; font-weight: 500; line-height: 1; }
.testimonial-card .field-statement { font-size: 20px; line-height: 1.625; color: var(--foreground); }
.edition-summary { display: flex; flex-direction: column; gap: 12px; font-size: clamp(23px, 2.5vw, 36px); }
.edition-summary small { font: 9px var(--font-mono); letter-spacing: .1em; margin-left: 0; }
.edition-note { max-width: 620px; margin: 44px auto 0; font: 11px/1.7 var(--font-mono); text-align: center; }
.field-principles { gap: 16px; font: 9px var(--font-mono); color: var(--muted); }
@media (max-width: 639px) {
  .logo { width: 48px; }
  .field-wordmark { gap: 4px; }
  .field-wordmark .logo { width: 50px; height: 16px; }
  .field-wordmark strong { font-size: 26px; }
  .tech-logos span { font-size: 10px; min-height: 24px; }
  .ai-logos span { font-size: 9px; }
  .edition-summary { font-size: 32px; }
  .field-principles { justify-content: center; }
}

/* Build terminal: original palette, geometry, font and row markup. */
@font-face { font-family: ROAMTerminal; src: url("../media/roam/terminal-mono.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
.tools-preview .cli-terminal-theme { --terminal-bg: #0a0a0a; --terminal-fg: #dadade; --terminal-white: #f0f0f2; --terminal-dim: #9a9a9f; --terminal-dimmer: #68686f; --terminal-vdim: #343438; --terminal-surface: #202020; --terminal-popover: #1a1a1a; --terminal-panel: #ffffff0b; --terminal-panel-strong: #ffffff13; --terminal-editor-bg: #151515; --terminal-editor-gutter: #1a1a1a; --terminal-editor-divider: #ffffff0f; --terminal-editor-chrome: #ffffff06; --terminal-editor-thumb: #5c5c5c; --terminal-green: #b8f06a; --terminal-green-dim: #b8f06a; --terminal-green-bg: #b8f06a20; --terminal-blue: #93adff; --terminal-teal: #55e8f5; --terminal-blue-bright: #93adff; --terminal-yellow: #f3cc70; --terminal-orange: #f3cc70; --terminal-red: #ffadb7; --terminal-purple: #d7a8ff; --terminal-border: #ffffff14; --terminal-progress-track: #ffffff1a; --terminal-progress-fill: #d7a8ff; --terminal-diff-gutter: #6c6c6c; --terminal-diff-delete-fg: #ffadb7; --terminal-diff-delete-bg: #ffadb714; --terminal-diff-insert-fg: #b8f06a; --terminal-diff-insert-bg: #b8f06a14; --terminal-diff-text: #e9e9ed; }

.tools-menu { width:700px; max-width:calc(100vw - 32px); padding:0; border-radius:12px; box-shadow:0 16px 48px -8px #00000038; }
.tools-menu:not([hidden]) { display:grid; grid-template-columns:220px minmax(0,480px); animation:tools-enter .2s cubic-bezier(.16,1,.3,1); }
.tools-menu::before { content:''; position:absolute; top:-36px; left:0; right:0; height:36px; }
.tools-link-column { padding:8px; }
.tools-link-column a { border-radius:6px; padding:12px 16px; transition:background .15s; }
.tools-link-column a.is-previewed { background:#ffffff0a; }
.tools-link-column strong { font:500 14px/20px var(--font-body); }
.tools-link-column span { font:400 11px/1.375 var(--font-body); }
.tools-preview { padding:12px; min-width:0; height:304px; --font-geist-mono:ROAMTerminal; }
.tools-preview > div { height:100%; }
.tools-preview .cli-terminal-theme { height:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid; border-radius:12px; font:12px/1.625 ROAMTerminal,monospace; }
.tools-preview .cli-terminal-theme > div:first-child { display:flex; align-items:center; gap:12px; padding:8px 12px; }
.tools-preview .cli-terminal-theme > div:first-child > div:first-child { display:flex; flex-shrink:0; gap:6px; }
.tools-preview .cli-terminal-theme > div:first-child > div:first-child > div { width:9px; height:9px; border-radius:50%; }
.tools-preview .cli-terminal-theme > div:first-child > div:first-child > div:nth-child(1) { background:#ffadb7; }
.tools-preview .cli-terminal-theme > div:first-child > div:first-child > div:nth-child(2) { background:#f3cc70; }
.tools-preview .cli-terminal-theme > div:first-child > div:first-child > div:nth-child(3) { background:#b8f06a; }
.tools-preview .cli-terminal-theme > div:first-child > div:nth-child(2) { margin-left:6px; min-width:0; flex:1; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tools-preview .cli-terminal-theme > div:first-child > div:nth-child(3) { display:flex; flex-shrink:0; align-items:center; gap:8px; font-size:11px; }
.tools-preview .cli-terminal-theme > div:first-child > div:nth-child(3) > span:nth-child(2) { position:relative; display:inline-flex; height:1em; overflow:hidden; }
.tools-preview .cli-terminal-theme > div:first-child > div:nth-child(3) > span:nth-child(2) > span { display:block; }
.tools-preview .overflow-y-auto { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.tools-preview .overflow-y-auto::-webkit-scrollbar { display:none; }
.tools-preview .cli-dot-loader { display:inline-flex; gap:var(--cli-dot-gap); align-items:center; }
.tools-preview .cli-dot-loader span { width:var(--cli-dot-size); height:var(--cli-dot-size); background:var(--cli-dot-color); border-radius:50%; animation:terminal-dot 1.2s infinite alternate; }
.tools-preview .cli-dot-loader span:nth-child(even) { animation-delay:.4s; }
@keyframes terminal-dot { to { opacity:.2; } }
@keyframes tools-enter { from { opacity:0; transform:scale(.96) translateY(-4px); } to { opacity:1; transform:none; } }
@media(max-width:600px) { .tools-menu:not([hidden]) { grid-template-columns:1fr; width:calc(100vw - 32px); max-height:calc(100dvh - 100px); overflow-y:auto; } .tools-preview { height:260px; } .tools-link-column { display:grid; grid-template-columns:1fr 1fr; } .tools-link-column a { padding:10px; } }
@media(prefers-reduced-motion:reduce) { .tools-menu:not([hidden]), .tools-preview .cli-dot-loader span { animation:none; } }

/* Native profile network lockup, translated to the dark website. */
.network-branding { margin-top:24px; text-align:center; }
.network-lockup { display:flex; align-items:center; justify-content:center; gap:20px; min-height:60px; }
.network-roam { width:82px; height:24px; object-fit:contain; filter:invert(1); }
.network-base { width:95px; height:24px; object-fit:contain; margin:0; }
.network-multiply { font:16px/24px var(--font-body); color:var(--muted); }
.network-branding p { margin:10px auto 0; max-width:420px; font:10px/1.6 var(--font-mono); color:var(--muted); }

.final-cta .network-branding p { margin:8px auto 0; font:10px/1.6 var(--font-mono); color:var(--muted); }

/* ROAM v2 social artwork, positioned at the footer's lower left. */
.footer { position:relative; }
.footer > .footer-socials { padding-top:48px; }
.footer-social-icons { position:absolute; left:32px; bottom:20px; }
.footer-social-icons > span { display:block; margin-bottom:9px; color:#ffffff6b; font:10px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.footer-social-icons > div { display:flex; align-items:center; gap:10px; }
.footer-social-icons a,.footer-social-icons div > span { width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:#ffffffad; }
.footer-social-icons a { transition:color .18s ease; }
.footer-social-icons a:hover { color:#fff; }
.footer-social-icons svg { width:15px; height:15px; fill:currentColor; }
.footer-social-icons .icon-cutout { fill:var(--background); stroke:none; }
.footer-social-icons .icon-cutout-line { fill:none; stroke:var(--background); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.footer-social-icons .icon-cutout-line-thin { stroke-width:1.55; }
.footer-social-icons .icon-heavy-line { fill:none; stroke:currentColor; stroke-width:3.05; stroke-linecap:square; }
.footer-social-icons > div > :nth-child(1) { color:#55e8f5; }
.footer-social-icons > div > :nth-child(2) { color:#93adff; }
.footer-social-icons > div > :nth-child(3) { color:#f3cc70; }
.footer-social-icons > div > :nth-child(4) { color:#d7a8ff; }
.footer-social-icons > div > :nth-child(5) { color:#ffadb7; }
.footer-social-icons > div > :nth-child(6) { color:#b8f06a; }
.footer-social-icons > div > a:hover { color:#fff; }
@media(max-width:600px) { .footer-social-icons { position:static; margin-top:24px; } }
/* Black background with the original terminal text and accent colors. */
.tools-preview .cli-terminal-theme { --terminal-editor-bg:#000000; }

.story-orb { display:grid; place-items:center; width:100%; aspect-ratio:1; max-width:480px; justify-self:center; }
.story-orb canvas { display:block; width:100%; aspect-ratio:1; border-radius:50%; }
.scene-ai .ai-window[hidden] { display:none; }
/* Two portraits share the existing hero reveal, with a feathered center. */
.landscape-pair { background-image:none !important; background-color:#09090b; }
.hero-portrait { position:absolute; top:var(--hero-image-top,400px); bottom:0; width:55%; background-size:cover; background-position:center top; background-repeat:no-repeat; }
.hero-portrait-0 { left:0; mask-image:linear-gradient(to right,#000 78%,transparent 100%); }
.hero-portrait-1 { right:0; mask-image:linear-gradient(to left,#000 78%,transparent 100%); }



.home-terminal { margin:0; background:#050505; color:#d8d8d8; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); font:400 .875rem/1.65 var(--font-mono); }
.home-terminal-header { background:#0a0a0a; border-bottom:1px solid rgba(255,255,255,.12); }
.home-terminal-header h2 { margin:0; }
.home-terminal-toggle { display:flex; width:100%; min-height:52px; justify-content:space-between; align-items:center; gap:20px; padding:8px 20px; background:transparent; color:inherit; border:0; border-radius:0; cursor:pointer; text-align:left; font:400 .875rem/1.5 var(--font-mono); }
.home-terminal-toggle > span:first-child { display:flex; align-items:center; gap:14px; }
.home-terminal-glyph { color:#fff; font-size:1.125rem; }
.home-terminal-toggle-action { display:flex; align-items:center; gap:22px; color:#a0a0a0; font-size:.75rem; }
.home-terminal-toggle-icon { color:#eee; font-size:1.5rem; }
.home-terminal-toggle:hover { background:#0a0a0a; color:#fff; }
.home-terminal-toggle:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.home-terminal-panel { padding:20px 24px 0; }
.home-terminal-panel[hidden] { display:none; }
.home-terminal-panel-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; color:#888; font-size:.75rem; }
.home-terminal-panel-meta a { color:#aaa; text-underline-offset:4px; }
.home-terminal-output { min-height:118px; padding:22px 0 16px; }
.home-terminal-welcome { margin:0; color:#aaa; }
.home-terminal-welcome strong { color:#eee; font-weight:400; }
.home-terminal-prompt { display:flex; align-items:center; gap:12px; min-height:48px; }
.home-terminal-prompt > span,.home-terminal-echo > span { flex-shrink:0; color:#eee; }
.home-terminal-input { position:relative; flex:1; min-width:80px; }
.home-terminal-prompt input { width:100%; min-width:0; background:transparent; border:0; border-radius:0; color:#fff; caret-color:#fff; caret-shape:block; font:400 1rem/1.5 var(--font-mono); padding:8px 0; }
.home-terminal-input:not(.has-value) input { caret-color:transparent; }
.home-terminal-input:not(.has-value) input::placeholder { padding-left:1.25ch; }
.home-terminal-cursor { position:absolute; left:0; top:50%; width:.65em; height:1.1em; transform:translateY(-50%); background:#ddd; pointer-events:none; animation:home-terminal-blink 1s steps(1,end) infinite; }
@keyframes home-terminal-blink { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .home-terminal-cursor { animation:none; } }
.home-terminal-prompt input::placeholder { color:#666; opacity:1; }
.home-terminal-prompt input:focus { outline:none; }
.home-terminal-prompt:focus-within { box-shadow:0 1px 0 rgba(255,255,255,.18); }
.home-terminal-prompt button { color:#999; background:transparent; border:1px solid #393939; border-radius:0; padding:8px 12px; min-height:44px; font:inherit; cursor:pointer; }
.home-terminal-shortcuts { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:18px -24px 0; padding:6px 24px; border-top:1px solid rgba(255,255,255,.12); background:#0d0d0d; }
.home-terminal-shortcuts > span { color:#666; font-size:.75rem; margin-right:4px; }
.home-terminal-shortcuts button { background:none; color:#aaa; border:0; padding:8px 0; min-height:44px; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.home-terminal-panel button:hover { color:#fff; }
.home-terminal-panel a:focus-visible,.home-terminal-panel button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.home-terminal-result p { margin:0 0 8px; }
.home-terminal-echo { color:#fff; overflow-wrap:anywhere; }
.home-terminal-result ul { margin:12px 0 0; padding:0; list-style:none; max-height:190px; overflow-y:auto; overscroll-behavior:contain; }
.home-terminal-result li a { display:flex; align-items:center; gap:24px; min-height:44px; padding:6px 4px; text-decoration:none; }
.home-terminal-result li a > span { text-decoration:underline; text-underline-offset:4px; }
.home-terminal-result li a:hover { background:#171717; color:#fff; }
.home-terminal-result small { color:#777; font-size:.75rem; }
.home-terminal-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:600px) {
  .home-terminal-toggle { padding:8px 12px; gap:10px; }
  .home-terminal-toggle > span:first-child { gap:8px; }
  .home-terminal-toggle-action { gap:10px; }
  .home-terminal-panel { padding:16px 12px 0; }
  .home-terminal-shortcuts { margin:16px -12px 0; padding:6px 12px; gap:4px 12px; }
  .home-terminal-prompt { gap:8px; flex-wrap:wrap; }
  .home-terminal-prompt > span { font-size:.75rem; }
  .home-terminal-prompt button { padding:8px; font-size:.75rem; }
}

/* Match the new homepage's restrained footer treatment. */
.home-terminal { background:var(--background); color:var(--foreground); font:12px/1.65 var(--font-mono); border-color:var(--border); }
.home-terminal-header { background:transparent; border-bottom:0; }
.home-terminal-toggle { padding-inline:32px; font-size:12px; }
.home-terminal-panel { border-top:1px solid var(--border); padding-inline:32px; }
.home-terminal-toggle-action { font-size:10px; }
.home-terminal-prompt input { font-size:13px; }
.home-terminal-shortcuts { background:transparent; border-color:var(--border); margin-inline:-32px; padding-inline:32px; }
@media(max-width:600px) { .home-terminal-toggle { padding-inline:20px; } .home-terminal-panel { padding-inline:20px; } .home-terminal-shortcuts { margin-inline:-20px; padding-inline:20px; } }
.home-terminal-toggle.console-escape-closed:focus-visible { outline:none; }

.embedded-grid { position:relative; flex:1; min-height:420px; background:var(--background); overflow:hidden; }
.embedded-grid iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
.grid-interacting .embedded-grid iframe { pointer-events:auto; }
.grid-activate { position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#0c0c0c22; color:var(--foreground); }
.grid-activate[hidden] { display:none; }
.grid-activate > span { padding:12px 18px; background:#0c0c0ce6; border:1px solid var(--border); font:12px var(--font-mono); }
.grid-activate small { background:#0c0c0ccf; padding:4px 8px; font:9px var(--font-mono); color:var(--muted); }
.grid-done { font:10px var(--font-mono); color:var(--foreground); }
.home-city-grid .feature-copy p { max-width:420px; }

/* The native God-tab film, shown as the same circular crop. */
.ambient-mark { display:block; width:104px; height:104px; margin:0 auto 32px; padding:0; border:1px solid #ffffff18; border-radius:50%; overflow:hidden; background:#080808; cursor:default; isolation:isolate; }
.ambient-mark img, .ambient-mark video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; }
.ambient-mark:focus-visible { outline:1px solid #b8b8b8; outline-offset:5px; }
@media(max-width:639px) { .ambient-mark { width:80px; height:80px; margin-bottom:24px; } }

.brand-identity { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-identity .brand-link { margin-right:0; }
.navigation .ambient-mark-header { width:28px; height:28px; margin:0; flex-shrink:0; }
@media(max-width:639px) { .brand-identity { gap:8px; } .navigation .ambient-mark-header { width:24px; height:24px; } }

/* Center the signal independently of the two navigation groups. */
.navigation > .ambient-mark-header { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.brand-identity .brand-link { margin-right:16px; }
@media(max-width:639px) { .brand-identity .brand-link { margin-right:0; } }
.navigation.is-scrolled .nav-left { gap:18px; }
.navigation.is-scrolled .brand-identity .brand-link { margin-right:0; }
@media(max-width:480px) {
  .navigation .nav-link[href="#features"] { display:none; }
  .navigation .nav-left, .navigation.is-scrolled .nav-left { gap:10px; }
  .navigation .brand-identity .logo { width:48px; }
}


.navigation .ambient-mark-header { cursor:default; }
.navigation .ambient-mark-header img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Passive desktop-only ROAM signal trace. Never captures pointer input. */
.roam-cursor-trace { position:fixed; inset:0; width:100%; height:100%; z-index:110; pointer-events:none; user-select:none; contain:strict; }
@media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) { .roam-cursor-trace { display:none; } }

/* A quiet platform label above the existing hero, without changing its height. */
.navigation .native-platforms { display:flex; align-items:center; gap:8px; margin-left:0; }
.native-platforms img { height:15px; width:auto; max-width:17px; object-fit:contain; }
@media(max-width:639px) { .navigation .native-platforms { gap:5px; } .native-platforms img { height:12px; max-width:14px; } }

/* Frosted invitation panel, matching the reference proportions. */
.crew-invitation { position:fixed; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); z-index:95; width:448px; min-height:224px; border:1px solid #ffffff30; border-radius:12px; overflow:hidden; background:linear-gradient(110deg,#d3d3d366,#f4f4f4a6); backdrop-filter:blur(24px) saturate(.65); -webkit-backdrop-filter:blur(24px) saturate(.65); color:#202020; box-shadow:0 4px 24px #00000012; }
.crew-invitation-close { position:absolute; top:7px; right:7px; width:24px; height:24px; display:grid; place-items:center; color:#777; background:none; border:0; padding:0; z-index:2; }
.crew-invitation-close svg { width:13px; height:13px; }
.crew-invitation-close:hover { color:#111; }
.crew-invitation-content { display:flex; align-items:center; gap:20px; padding:5px 30px 20px 5px; }
.crew-invitation-art { width:108px; height:108px; flex-shrink:0; border-radius:5px; object-fit:cover; background:#202222; }
.crew-invitation-eyebrow { display:block; margin-bottom:14px; color:#303030; font:12px/1.3 var(--font-mono); letter-spacing:0; }
.crew-invitation h2 { font:20px/1.25 var(--font-pixel); letter-spacing:-.03em; color:#202020; margin:0; }
.crew-invitation p { font:12px/1.4 var(--font-body); margin-top:6px; color:#424242; }
.crew-invitation-signal { display:flex; gap:0; padding:0 5px; margin:0; height:32px; }
.crew-invitation-signal span { flex:1; position:relative; border-radius:9px; background:#8e8e8e15; }
.crew-invitation-signal span:first-child::before { content:''; position:absolute; inset:0 auto 0 0; width:24px; border-radius:9px; background:#b8f06a; }
.crew-invitation-signal b { display:block; position:absolute; top:39px; width:100%; text-align:center; font:10px/1.2 var(--font-mono); font-weight:400; color:#252525; }
.crew-invitation-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:34px 14px 10px; }
.crew-invitation-footer > span { color:#434343; font:8px/1.4 var(--font-mono); letter-spacing:.02em; }
.crew-invitation-footer .button { height:auto; min-height:0; padding:0; font:11px/1.4 var(--font-body); border:0; background:none; color:#202020; text-decoration:underline; text-underline-offset:3px; }
.crew-invitation-footer .button:hover { color:#000; background:none; }
@media(max-width:600px) { .crew-invitation { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); width:min(448px,calc(100vw - 24px)); } .crew-invitation-content { gap:16px; padding-right:25px; } .crew-invitation-art { width:92px; height:108px; } .crew-invitation h2 { font-size:18px; } .crew-invitation-eyebrow { font-size:10px; } }

.crew-glyph { position:relative; display:grid; place-items:center; overflow:hidden; }
.crew-glyph span { position:absolute; color:#93adff; font:62px/1 var(--font-mono); font-weight:500; animation:crew-glyph-cycle 9s steps(1,end) infinite; opacity:0; }
.crew-glyph span:nth-child(2) { color:#d7a8ff; animation-delay:3s; }
.crew-glyph span:nth-child(3) { color:#55e8f5; animation-delay:6s; transform:scaleX(-1); }
@keyframes crew-glyph-cycle { 0%,29% { opacity:1; filter:none; } 30% { opacity:.45; filter:blur(2px); } 33%,100% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .crew-glyph span { animation:none; } .crew-glyph span:first-child { opacity:1; } }

.footer .native-platforms { display:inline-flex; align-items:center; gap:8px; margin:0 8px 0 0; }
.crew-invitation-form { display:flex; gap:6px; margin:0 12px 16px; padding-top:8px; }
.crew-invitation-form input { width:0; flex:1; min-width:0; height:36px; padding:0 10px; border:1px solid #3332; border-radius:7px; background:#ffffff25; color:#202020; font:11px var(--font-mono); outline-offset:2px; }
.crew-invitation-form input::placeholder { color:#414141; }
.crew-invitation-form button { padding:0 12px; border:0; border-radius:7px; background:#202222; color:#fff; font:10px var(--font-mono); }
.crew-invitation .crew-invitation-status { margin:0 14px 12px; font:10px/1.4 var(--font-body); }
.crew-invitation-form label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.footer .native-platforms img { width:auto; height:15px; max-width:17px; }
/* Layered glass: translucent surface, refractive rim and soft reflections. */
.crew-invitation { isolation:isolate; background:linear-gradient(118deg,#ffffff60 0%,#eeeeee3d 40%,#ffffff82 100%); backdrop-filter:blur(26px) saturate(1.25); -webkit-backdrop-filter:blur(26px) saturate(1.25); border-color:#ffffff82; box-shadow:inset 0 1px 1px #ffffffe6,inset 1px 0 1px #ffffff85,inset 0 -1px 2px #ffffff66,0 10px 34px #0002; }
.crew-invitation::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:radial-gradient(ellipse at 5% 0%,#ffffff70,transparent 53%),linear-gradient(130deg,transparent 28%,#ffffff30 48%,transparent 68%); }
.crew-invitation::after { content:''; position:absolute; inset:1px; pointer-events:none; border-radius:10px; border:1px solid #ffffff25; box-shadow:inset 0 0 14px #ffffff20; }
.crew-invitation-form input { background:#ffffff4a; box-shadow:inset 0 1px 3px #0000000a,0 1px 0 #ffffff60; border-color:#ffffff58; }
/* Flat frosted panel: no raised rim or bevel. */
.crew-invitation { border:0; box-shadow:none; background:linear-gradient(110deg,#d3d3d366,#f4f4f4a6); }
.crew-invitation::before,.crew-invitation::after { content:none; }
.crew-invitation-form input { box-shadow:none; border:1px solid #3332; }
.crew-invitation,.crew-invitation-art { border-radius:0; }
.crew-invitation-form input,.crew-invitation-form button { border-radius:var(--radius,2px); }

.crew-pixel-mask { position:absolute; inset:0; z-index:3; display:grid; grid-template-columns:repeat(8,1fr); pointer-events:none; }
.crew-pixel-mask i { background:#202222; opacity:0; }
.crew-pixel-mask i:nth-child(9n) { background:#93adff; }
.crew-pixel-mask i:nth-child(13n) { background:#55e8f5; }

.crew-mosaic { position:absolute; inset:0; width:100%; height:100%; z-index:3; image-rendering:pixelated; pointer-events:none; }

.crew-glyph video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; }
.crew-invitation-art { aspect-ratio:1; height:auto; align-self:center; }
.crew-glyph video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.crew-glyph video::-webkit-media-controls,.crew-glyph video::-webkit-media-controls-start-playback-button { display:none !important; -webkit-appearance:none; }

.crew-glyph > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; pointer-events:none; }

.crew-invitation { background:linear-gradient(110deg,#ffffff18,#ffffff32); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); }
.crew-invitation h2 { color:#fff; }
.crew-invitation-eyebrow,.crew-invitation p { color:#ffffffbf; }
.crew-invitation-close { color:#ffffffa0; }
.crew-invitation-close:hover { color:#fff; }
.crew-invitation-form input { color:#fff; background:#ffffff15; border-color:#ffffff25; }
.crew-invitation-form input::placeholder { color:#ffffffab; }
.crew-invitation-form input[aria-invalid="true"] { border-color:#ffadb7; }

.video-stage video::-webkit-media-controls,.video-stage video::-webkit-media-controls-start-playback-button { display:none !important; -webkit-appearance:none; }

.video-stage video::-webkit-media-controls-overlay-play-button,.video-stage video::-webkit-media-controls-overlay-enclosure,.video-stage video::-webkit-media-controls-enclosure { display:none !important; visibility:hidden !important; opacity:0 !important; -webkit-appearance:none; }

.video-blocked-poster { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; z-index:1; }
.video-stage.autoplay-blocked .video-blocked-poster { display:block; }
.video-stage.autoplay-blocked video { visibility:hidden; }
.video-stage .video-play { z-index:2; }

.video-blocked-poster { display:block; opacity:0; }
.video-stage.autoplay-blocked .video-blocked-poster { opacity:1; }

.video-stage { background-size:cover; background-position:center; }

/* Local companion placement, using the existing menu and footer space. */
.menu-companion{display:block;width:100%;height:140px;border:0;background:#09090b;}
.footer{position:relative;padding-right:180px}.footer-companion{position:absolute;right:18px;bottom:20px;width:150px;height:160px;border:0;background:#09090b;}
@media(max-width:600px){.menu-companion{grid-column:1/-1;height:115px}.footer{padding-right:100px}.footer-companion{width:90px;height:110px;right:4px;bottom:12px}}

.menu-companion{height:160px;background:transparent;margin-top:8px;}
.footer{padding-right:var(--page-gutter,32px)}
.footer-companion{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));right:auto;width:150px;height:170px;z-index:45;background:transparent;border:0;}
@media(max-width:600px){.menu-companion{height:140px}.footer-companion{width:105px;height:125px;left:6px;bottom:max(6px,env(safe-area-inset-bottom))}}

/* Keep the browser's initial subframe paint hidden until the textured first frame. */
.menu-companion{opacity:0;pointer-events:none;transition:opacity .22s ease;color-scheme:dark}
.menu-companion.is-ready{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.menu-companion{transition:none}}

.city-the{display:inline-block;max-width:2em;opacity:1;overflow:hidden;vertical-align:bottom;transition:opacity .4s ease,max-width .7s cubic-bezier(.2,.7,.2,1)}
.city-word{display:inline-grid;vertical-align:baseline}.city-word>span{grid-area:1/1}.city-name{opacity:0;transition:opacity .6s ease .15s}.city-world{transition:opacity .5s ease}
.city-revealed .city-the{opacity:0;max-width:0}.city-revealed .city-world{opacity:0}.city-revealed .city-name{opacity:1}
@media(prefers-reduced-motion:reduce){.city-the,.city-name,.city-world{transition:none}}

/* Film frames keep their size when adjacent copy grows. */
.feature:not(.home-city-grid) .feature-media { align-items:center; }
.feature:not(.home-city-grid) .video-window { height:536px; flex:none; }
@media(max-width:1023px) {
 .feature:not(.home-city-grid) .feature-media { aspect-ratio:auto; }
 .feature:not(.home-city-grid) .video-window { height:auto; aspect-ratio:4/3; }
}

.scene-analyzer .tech-logos span:nth-child(1) { color:#55e8f5; }
.scene-analyzer .tech-logos span:nth-child(2) { color:#d7a8ff; }
.scene-analyzer .tech-logos span:nth-child(3) { color:#f3cc70; }
.scene-analyzer .tech-logos span:nth-child(4) { color:#b8f06a; }

/* Approved Multiplayer ticket, using the same section grid as the film panels. */
.feature-ticket .feature-media{justify-content:center;background:transparent;padding:24px;}
.feature-ticket .ticket-artwork{height:500px;width:auto;max-width:100%;object-fit:contain;}
@media(max-width:1023px){.feature-ticket .feature-media{aspect-ratio:auto;min-height:0;padding:32px 20px;}.feature-ticket .ticket-artwork{height:min(560px,75vh);}}

/* Text-only offline section: both text beats share the viewport centre. */
.workspace-destination > h2{margin-bottom:0}

/* Let the City Grid frame contain its canvas on narrow layouts. */
@media(max-width:1023px) {
 .home-city-grid .feature-media { aspect-ratio:auto; }
 .home-city-grid .video-window { min-width:0; }
 .home-city-grid .embedded-grid { flex:none; height:420px; min-height:0; }
}

.screenshot-viewer { position:fixed; inset:0; margin:auto; width:min(960px,100%); height:100%; height:100dvh; max-width:100%; max-height:100%; padding:24px; border:0; color:var(--foreground); background:#0c0c0c; }
.screenshot-viewer::backdrop { background:#000d; }
.screenshot-viewer-bar { height:44px; display:flex; align-items:center; justify-content:space-between; }
.screenshot-viewer output { color:var(--muted); font:10px var(--font-mono); }
.screenshot-viewer [data-viewer-close] { border:0; color:var(--foreground); }
.screenshot-viewer [data-viewer-close]:focus { outline:none; box-shadow:none; }
.screenshot-viewer [data-viewer-close]:focus-visible { opacity:.6; }
.screenshot-viewer-stage { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:24px; align-items:center; height:calc(100% - 60px); margin-top:16px; }
.screenshot-viewer-stage img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; touch-action:pan-y pinch-zoom; user-select:none; }
@media(max-width:600px) {
 .screenshot-viewer { padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
 .screenshot-viewer-stage { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 44px; gap:12px; position:relative; }
 .screenshot-viewer-stage img { grid-row:1; grid-column:1; }
 .screenshot-viewer-stage button { grid-row:2; grid-column:1; justify-self:start; }
 .screenshot-viewer-stage button:last-child { justify-self:end; }
}

.shorts-track:focus { outline:none; }
.shorts-track:focus-visible { outline:1px solid #999; outline-offset:4px; }

/* Compact navigation before the centred signal meets the longer links. */
@media(min-width:640px) and (max-width:1023px) {
 .navigation .nav-link[href="#membership"], .navigation .nav-submit { display:none; }
 .navigation .nav-left, .navigation.is-scrolled .nav-left { gap:16px; }
 .navigation .brand-identity .brand-link { margin-right:0; }
}
.navigation.is-scrolled .nav-left { gap:10px; }

/* Glass Meridian moves quietly behind the existing offline text sequence. */
.workspace-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:.65; }
@media(prefers-reduced-motion:reduce) { .workspace-background { display:none; } }

/* Footer navigation spans the full row, independent of the brand width. */
.footer-top > .footer-links { grid-column:1 / -1; grid-row:2; width:100%; justify-self:center; justify-content:center; }