:root {
  color-scheme: dark;
  --background: #0b0d12; --text: #edf0f7; --muted: #949dae; --line: #242b38;
  --surface: #141923; --blue: #7aa8ff; --blue-hover: #9abfff; --button-text: #0a1428;
  --accent: #66d9ee; --card: #10151e; --chrome: #1c222e; --pane-header: #171c26;
  --shadow: 0 20px 70px #0006;
}
:root[data-theme="light"] {
  color-scheme: light;
  --background: #f5f7fb; --text: #131d30; --muted: #5c687c; --line: #d7deea;
  --surface: #e9edf5; --blue: #2055ca; --blue-hover: #1644aa; --button-text: #fff;
  --accent: #147d95; --card: #fff; --chrome: #e7ecf4; --pane-header: #f1f4f9;
  --shadow: 0 20px 70px #24395715;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] { color-scheme: light; --background: #f5f7fb; --text: #131d30; --muted: #5c687c; --line: #d7deea; --surface: #e9edf5; --blue: #2055ca; --blue-hover: #1644aa; --button-text: #fff; --accent: #147d95; --card: #fff; --chrome: #e7ecf4; --pane-header: #f1f4f9; --shadow: 0 20px 70px #24395715; }
}
html { scroll-behavior: smooth; scroll-padding-block-start: 28px; }
.cinematic-landing { background: var(--background); }
.cinematic-landing .wrap { inline-size: min(1200px, calc(100% - 80px)); }
.cinematic-landing button, .cinematic-landing select, .cinematic-landing input { font: inherit; }
.cinematic-landing button { cursor: pointer; }
.cinematic-landing button:disabled { cursor: default; }
.cinematic-landing [hidden] { display: none !important; }
.cinematic-landing .brand { gap: 12px; font-size: 16px; }
.cinematic-landing .theme-options, .cinematic-landing .language-menu ul, .cinematic-landing .explore-menu ul { z-index: 30; }
/* A compact workspace ribbon connects the product identity, routes, and utility dock. */
.cinematic-landing .command-header {
  position: relative; z-index: 40; display: grid; grid-template-columns: auto 1fr;
  gap: 36px; min-block-size: 74px; margin-block-start: 18px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 16px;
  background: color-mix(in srgb, var(--card) 80%, var(--background));
  box-shadow: inset 0 1px color-mix(in srgb, var(--text) 5%, transparent), 0 8px 28px #00000008;
}
.cinematic-landing .skip { z-index: 60; }
.command-header .header-brand { gap: 11px; padding-inline: 2px 12px; text-decoration: none; }
.header-brand-icon { position: relative; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--blue) 7%, var(--card)); box-shadow: inset 0 1px color-mix(in srgb, var(--text) 7%, transparent); }
.header-brand-icon::after { content: ''; position: absolute; inset: auto 11px -4px; block-size: 3px; border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line)); border-block-start: 0; border-radius: 0 0 3px 3px; }
.header-brand-copy { display: grid; gap: 5px; }
.header-brand-copy bdi { font-size: 15px; letter-spacing: -.4px; }
.header-brand-copy small { color: var(--muted); font-size: 9px; font-weight: 400; letter-spacing: .015em; }
.cinematic-landing .command-header .appbar-actions { min-inline-size: 0; justify-content: space-between; gap: 24px; }
.header-route-strip { display: flex; align-items: center; gap: 5px; }
.header-route { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 48px; padding: 11px 16px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; transition: color .2s, background .2s, border-color .2s; }
.header-route::after { content: ''; position: absolute; inset: auto 16px -11px; block-size: 1px; background: var(--blue); opacity: 0; transform: scaleX(.65); transition: opacity .2s, transform .2s; }
.header-route:hover, .header-route:focus-visible { color: var(--text); background: var(--surface); text-decoration: none; }
.header-route:hover::after, .header-route:focus-visible::after { opacity: 1; transform: none; }
.header-workspace { color: var(--text); background: color-mix(in srgb, var(--blue) 7%, var(--card)); border-color: color-mix(in srgb, var(--blue) 24%, var(--line)); box-shadow: inset 0 1px color-mix(in srgb, var(--text) 4%, transparent); }
.header-workspace-icon { inline-size: 19px; block-size: 19px; color: var(--blue); }
.header-route-arrow { inline-size: 15px; block-size: 15px; color: var(--blue); margin-inline-start: 8px; transition: transform .2s; }
.header-workspace:hover .header-route-arrow { transform: translate(2px, -2px); }
.header-utilities { display: flex; align-items: center; flex-shrink: 0; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); gap: 1px; }
.command-header .header-utilities details > summary { min-block-size: 44px; border-radius: 8px; font-size: 11px; }
.command-header .header-utilities details[open] > summary { color: var(--text); background: var(--surface); }
.command-header .header-utilities summary > svg:not(.chevron) { inline-size: 17px; block-size: 17px; }
.header-explore-icon { display: none; }
.command-header .theme-options, .command-header .language-menu ul, .command-header .explore-menu ul { margin-block-start: 15px; padding: 7px; background: var(--card); border-radius: 12px; box-shadow: 0 16px 40px #0002; }
.command-header .theme-options button + button { margin-block-start: 8px; }
.cinematic-landing .hero { padding-block: 38px 30px; text-align: start; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); align-items: center; gap: 34px; }
.cinematic-landing .eyebrow { justify-content: flex-start; text-transform: none; letter-spacing: 0; font: inherit; font-size: 11px; font-weight: 500; line-height: 1.4; margin-block-end: 23px; color: var(--muted); }
.cinematic-landing .status-dot { background: var(--accent); box-shadow: none; }
.cinematic-landing h1 { font-size: clamp(46px, 5.9vw, 79px); line-height: 1.04; letter-spacing: -.04em; font-weight: 650; margin-block-end: 23px; }
.cinematic-landing h2 { letter-spacing: -.04em; }
.cinematic-landing .hero h1 { font-size: clamp(42px, 4.7vw, 64px); }
.cinematic-landing .hero h1 span { color: inherit; }
.cinematic-landing .subtitle { max-inline-size: 540px; margin-inline: 0; font-size: 16px; line-height: 1.7; margin-block-end: 24px; }
.cinematic-landing .hero-actions { justify-content: flex-start; gap: 10px 22px; }
.cinematic-landing .button { border-radius: 10px; min-block-size: 48px; padding-inline: 22px; font-size: 13px; }
.cinematic-landing .button:disabled { background: var(--surface); border-color: var(--line); color: var(--muted); }
.cinematic-landing .demo-link { font-size: 13px; }
.cinematic-landing .download-meta { align-items: flex-start; margin-block-start: 14px; }
.cinematic-landing .compatibility, .cinematic-landing .download-note { font-size: 10px; }
.flow-graphic { position: relative; inline-size: 100%; aspect-ratio: 640 / 540; isolation: isolate; font-size: 11px; }
.flow-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: var(--blue); stroke: color-mix(in srgb, var(--blue) 23%, var(--line)); stroke-width: 1; z-index: 2; pointer-events: none; visibility: hidden; }
.flow-lines[data-flow-ready] { visibility: visible; }
.flow-signal { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 10 150; animation: flow-signal 9s linear infinite; }
.flow-ports { fill: var(--accent); stroke: var(--card); stroke-width: 1; }
.flow-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 50%; z-index: -1; }
.orbit-one { inline-size: 74%; aspect-ratio: 1; inset: 9% 13%; }
.flow-node { position: absolute; display: flex; align-items: center; gap: 10px; inline-size: 170px; min-block-size: 55px; padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 24px #0000000b; animation: node-float 7s ease-in-out infinite; z-index: 3; }
.flow-node > div { min-inline-size: 0; flex: 1; }
.flow-node strong, .flow-node small { white-space: nowrap; }
.flow-node strong { display: block; font-size: 11px; font-weight: 550; }
.flow-node small { display: block; color: var(--muted); margin-block-start: 4px; font-size: 8px; }
.flow-node i { inline-size: 4px; block-size: 4px; flex-shrink: 0; background: var(--accent); border-radius: 50%; }
.mini-icon { display: grid; place-items: center; inline-size: 22px; block-size: 22px; flex-shrink: 0; color: var(--blue); font-size: 19px; line-height: 1; }
.flow-terminal { inset: 1% auto auto 1%; }
.flow-browser { inset: 1% 1% auto auto; animation-delay: -2s; }
.flow-tests { inset: auto auto 2.5% 1%; animation-delay: -3s; }
.flow-files { inset: auto 1% 2.5% auto; animation-delay: -4s; }
.flow-caption { position: absolute; inset: auto 0 -4%; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 11px; }
.flow-caption > span { inline-size: 4px; block-size: 4px; background: var(--accent); border-radius: 50%; }
.hero-preview { position: absolute; inset: 14% 2.5% auto; aspect-ratio: 8 / 5; border-radius: 12px; background: var(--card); box-shadow: 0 24px 55px #0002, 0 0 55px color-mix(in srgb, var(--blue) 7%, transparent); }
.hero-preview-window { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }.hero-preview-window > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-preview-action { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; border-radius: inherit; text-decoration: none; background: transparent; transition: background .2s; }
.hero-preview-label { display: inline-flex; align-items: center; gap: 20px; min-block-size: 46px; padding: 12px 19px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); color: var(--text); box-shadow: 0 6px 24px #0003; font-size: 13px; font-weight: 550; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }.hero-preview-label > span { color: var(--blue); }
.hero-preview:hover .hero-preview-label, .hero-preview-action:focus-visible .hero-preview-label { opacity: 1; transform: none; }.hero-preview:hover .hero-preview-action, .hero-preview-action:focus-visible { background: #080f1b1a; }.hero-preview-action:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
/* A scaled, inert copy uses the same native rendering as the full workspace. */
.sandbox.hero-window-inner { position: absolute; inset: 0 auto auto 0; inline-size: 1200px; block-size: 750px; transform-origin: top left; box-shadow: none; }
.hero-window-inner .window-titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-block-size: 60px; padding: 10px 16px; gap: 14px; }
.hero-window-inner .window-identity { gap: 18px; }.hero-window-inner .window-brand { display: flex; }.hero-window-inner .window-tools { margin-inline-start: 0; }.hero-window-inner .desktop-tool { display: block; }
.hero-window-inner .workspace-tabs { order: initial; inline-size: auto; }.hero-window-inner .workspace-tab { flex: initial; min-block-size: 0; font-size: 14px !important; padding: 7px 14px; }
.preview-native-workspace { display: flex; flex-direction: column; block-size: calc(100% - 60px); }.hero-window-inner .workspace-toolbar { flex: 0 0 auto; padding: 8px 12px; }.hero-window-inner .workspace-hint { display: inline; }
.hero-window-inner .workspace-body { flex: 1; block-size: auto; min-block-size: 0; }.hero-window-inner .pane-header { min-block-size: 34px; }.hero-window-inner .pane-tab { min-block-size: 0; padding: 6px 9px; font-size: 13px !important; }
.hero-window-inner .window-tools .sandbox-menu > summary { min-inline-size: 38px; min-block-size: 36px; }.hero-window-inner .pane-header > .sandbox-menu > summary { min-inline-size: 24px; min-block-size: 24px; }
.hero-window-inner .terminal-body { font-size: 16px; }.hero-window-inner .terminal-path { font-size: 12px; }.hero-window-inner .terminal-output { font: inherit; padding: 12px 10px 16px; }
.hero-window-inner .browser-page, .hero-window-inner .file-page { padding: 20px 24px; }.hero-window-inner .file-page h3 { font-size: 29px; }
.cinematic-landing .playground { padding-block: 22px 0; scroll-margin-block-start: 24px; }
.sandbox-viewport { position: relative; }
.sandbox-viewport.is-enhanced { overflow: clip; border-radius: calc(15px * var(--workspace-scale)); box-shadow: 0 24px 65px #0003, 0 3px 12px #0002; }
.sandbox-viewport.is-enhanced > .sandbox { position: absolute; inset: 0 auto auto 0; transform-origin: top left; box-shadow: inset 0 1px var(--mac-highlight); }
.playground-heading { display: flex; align-items: center; justify-content: space-between; margin-block-end: 23px; gap: 20px; }
.playground-heading h2 { margin-block-end: 7px; font-size: 25px; }
.playground-heading p:last-child { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.cinematic-landing .kicker { font: inherit; font-size: 11px; font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--muted); margin-block-end: 12px; }
.demo-badge { display: flex; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; color: var(--muted); }
.demo-badge > span { inline-size: 5px; block-size: 5px; border-radius: 50%; background: #74d6aa; }
/* The demo uses macOS window colors independently from the landing-page palette. */
.sandbox {
  --mac-window: #292929; --mac-header: #222; --mac-toolbar: #2d2d2d;
  --mac-material: linear-gradient(180deg, #3c3c3cc9, #292929eb);
  --mac-text: #ededed; --mac-secondary: #a4a4a4; --mac-line: #ffffff1b;
  --mac-control: #ffffff12; --mac-control-border: #ffffff1c; --mac-selected: #ffffff24;
  --mac-highlight: #ffffff16; --mac-menu: #303030f2; --mac-menu-shadow: #0005;
  --mac-accent: #0a84ff; --mac-field: #1b1b1b; --mac-file: #17191e;
  --mac-file-text: #e4e7ef; --mac-file-muted: #b6bcc7; --mac-file-link: #70b7ff;
  border: 1px solid #ffffff30; border-radius: 15px; overflow: hidden;
  background: var(--mac-window); color: var(--mac-text); position: relative;
  box-shadow: 0 24px 65px #0003, 0 3px 12px #0002, inset 0 1px var(--mac-highlight);
  font: 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: normal; isolation: isolate;
}
:root[data-theme="light"] .sandbox {
  --mac-window: #ededed; --mac-header: #f5f5f5; --mac-toolbar: #eee;
  --mac-material: linear-gradient(180deg, #ffffffe0, #eeeeeee8);
  --mac-text: #242424; --mac-secondary: #676767; --mac-line: #0000001c;
  --mac-control: #ffffff63; --mac-control-border: #00000012; --mac-selected: #fff;
  --mac-highlight: #ffffffc9; --mac-menu: #f7f7f7f2; --mac-menu-shadow: #0002;
  --mac-accent: #007aff; --mac-field: #fff; --mac-file: #fff;
  --mac-file-text: #20232a; --mac-file-muted: #535963; --mac-file-link: #0969da;
  border-color: #00000029;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .sandbox {
    --mac-window: #ededed; --mac-header: #f5f5f5; --mac-toolbar: #eee;
    --mac-material: linear-gradient(180deg, #ffffffe0, #eeeeeee8);
    --mac-text: #242424; --mac-secondary: #676767; --mac-line: #0000001c;
    --mac-control: #ffffff63; --mac-control-border: #00000012; --mac-selected: #fff;
    --mac-highlight: #ffffffc9; --mac-menu: #f7f7f7f2; --mac-menu-shadow: #0002;
    --mac-accent: #007aff; --mac-field: #fff; --mac-file: #fff;
    --mac-file-text: #20232a; --mac-file-muted: #535963; --mac-file-link: #0969da;
    border-color: #00000029;
  }
}
.mac-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.sandbox :where(button, summary, select, input, [role="separator"]):focus-visible { outline: 3px solid color-mix(in srgb, var(--mac-accent) 60%, transparent); outline-offset: 2px; }
.sandbox-fallback p { padding: 16px; margin: 0; color: var(--mac-secondary); font-size: 12px; }
.window-titlebar { position: relative; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; min-block-size: 60px; padding: 10px 16px; background: var(--mac-material); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
.window-identity { display: flex; align-items: center; gap: 18px; min-inline-size: 0; }
.traffic-lights { display: flex; gap: 8px; flex-shrink: 0; }
.traffic-lights i { inline-size: 12px; block-size: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px #0002, inset 0 1px #ffffff26; }
.traffic-lights i:nth-child(2) { background: #febc2e; }.traffic-lights i:nth-child(3) { background: #28c840; }
.window-brand { display: flex; align-items: center; gap: 7px; padding: 7px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--mac-control-border); border-radius: 22px; background: var(--mac-control); box-shadow: inset 0 1px var(--mac-highlight); white-space: nowrap; }
.window-brand img { inline-size: 18px; block-size: 18px; }
.workspace-tabs { display: flex; align-items: center; padding: 3px; gap: 2px; background: var(--mac-control); border: 1px solid var(--mac-control-border); border-radius: 22px; box-shadow: inset 0 1px var(--mac-highlight); }
.workspace-tab { border: 0; border-radius: 18px; background: transparent; color: var(--mac-text); padding: 7px 14px; font-size: 12px !important; font-weight: 500; white-space: nowrap; }
.workspace-tab:hover { background: var(--mac-control); }.workspace-tab[aria-selected="true"] { background: var(--mac-selected); box-shadow: 0 1px 3px #00000013, inset 0 1px var(--mac-highlight); }
.window-tools { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.sandbox-menu { position: relative; }
.sandbox-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 3px; min-inline-size: 24px; min-block-size: 24px; padding: 4px; border: 0; border-radius: 5px; cursor: pointer; color: var(--mac-secondary); }
.sandbox-menu > summary::-webkit-details-marker { display: none; }.sandbox-menu > summary:hover { background: var(--mac-control); color: var(--mac-text); }
.window-tools .sandbox-menu > summary { min-inline-size: 38px; min-block-size: 36px; padding: 7px 8px; border: 1px solid var(--mac-control-border); border-radius: 22px; background: var(--mac-control); box-shadow: inset 0 1px var(--mac-highlight), 0 1px 2px #00000008; color: var(--mac-text); }
.window-tools .sandbox-menu > summary .mac-icon { inline-size: 18px; block-size: 18px; }.window-tools .sandbox-menu > summary .mac-icon:last-child { inline-size: 9px; block-size: 9px; }
.sandbox-menu[open] > .menu-popover { position: absolute; z-index: 20; inset: calc(100% + 5px) 0 auto auto; inline-size: 230px; padding: 5px; border: 1px solid var(--mac-control-border); border-radius: 8px; background: var(--mac-menu); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 8px 24px var(--mac-menu-shadow), inset 0 1px var(--mac-highlight); }
.menu-popover button { display: flex; align-items: center; gap: 7px; inline-size: 100%; min-block-size: 27px; text-align: start; padding: 5px 9px; background: none; color: var(--mac-text); border: 0; border-radius: 4px; font-size: 12px !important; }
.menu-popover button::before { content: ''; inline-size: 12px; flex: 0 0 12px; }.menu-popover button[aria-pressed="true"]::before { content: '✓'; }
.menu-popover button:hover, .menu-popover button:focus-visible { background: var(--mac-accent); color: #fff; }.menu-label { display: block; padding: 7px 9px 5px 28px; color: var(--mac-secondary); font-size: 11px; }
.menu-divider { display: block; border-block-start: 1px solid var(--mac-line); margin: 5px 9px; }
.workspace-toolbar { display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding: 8px 12px; background: var(--mac-window); border-block-end: 1px solid var(--mac-line); }
.workspace-toolbar strong { font-size: 13px; font-weight: 650; }.workspace-hint { font: 10px/1.4 -apple-system, BlinkMacSystemFont, sans-serif; color: var(--mac-secondary); }
.workspace-body { block-size: 530px; overflow: auto; padding: 7px; background: var(--mac-window); }.workspace-layout { block-size: 100%; }
.layout-split { display: flex; block-size: 100%; min-inline-size: 0; min-block-size: 0; }.split-y { flex-direction: column; }.split-child { min-inline-size: 0; min-block-size: 0; }
.split-separator { position: relative; flex: 0 0 8px; cursor: col-resize; touch-action: none; }.split-y > .split-separator { cursor: row-resize; }
.split-separator::after { content: ''; position: absolute; inset: 5px 3px; background: transparent; border-radius: 4px; transition: background .2s; }.split-y > .split-separator::after { inset: 3px 5px; }.split-separator:hover::after, .split-separator:focus-visible::after { background: var(--mac-accent); }
.pane-group { position: relative; display: flex; flex-direction: column; block-size: 100%; min-inline-size: 0; min-block-size: 0; border: 1px solid var(--mac-line); border-radius: 5px; background: var(--mac-window); }
.pane-group.is-focused { border-color: var(--mac-accent); }
.pane-header { display: flex; align-items: center; gap: 3px; min-block-size: 34px; background: var(--mac-header); border-radius: 4px 4px 0 0; border-block-end: 1px solid var(--mac-line); padding-inline: 4px; }
.drag-grip { display: grid; place-items: center; background: none; border: 0; color: var(--mac-secondary); inline-size: 20px; min-block-size: 24px; padding: 2px; cursor: grab !important; touch-action: none; }.drag-grip .mac-icon { inline-size: 13px; block-size: 13px; }
.pane-tabs { display: flex; align-items: stretch; gap: 3px; flex: 1; min-inline-size: 0; overflow: auto; scrollbar-width: thin; }
.pane-tab { display: flex; align-items: center; gap: 9px; color: var(--mac-text); background: none; border: 0; border-radius: 4px; min-inline-size: 100px; max-inline-size: 180px; padding: 6px 9px; white-space: nowrap; font-size: 11px !important; font-weight: 500; touch-action: none; }.pane-tab[aria-selected="true"] { color: var(--mac-accent); }.pane-tab:hover { background: var(--mac-control); }.pane-type-icon { display: flex; align-items: center; }.pane-type-icon .mac-icon { inline-size: 13px; block-size: 13px; }
.pane-actions > summary { border: 0; min-inline-size: 24px; min-block-size: 24px; }.pane-content { flex: 1; min-block-size: 0; min-inline-size: 0; overflow: auto; border-radius: 0 0 4px 4px; }
.terminal-body { color: #dae4f5; background: #080f1b; block-size: 100%; overflow: auto; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.terminal-body.theme-amber { background: #17120b; color: #ffce8d; --terminal-green: #ffc378; --terminal-cyan: #ffdba6; }.terminal-body.theme-highContrast { background: #000; color: #fff; --terminal-green: #8cff8c; --terminal-cyan: #92efff; }
.terminal-path { position: sticky; inset-block-start: 0; display: flex; align-items: center; gap: 8px; min-block-size: 28px; padding: 3px 8px; background: var(--mac-toolbar); border-block-end: 1px solid var(--mac-line); color: var(--mac-text); font-size: 10px; z-index: 1; }.terminal-path > .mac-icon { color: var(--mac-secondary); inline-size: 14px; block-size: 14px; }.terminal-path > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.terminal-path button { display: flex; align-items: center; gap: 1px; margin-inline-start: auto; color: var(--mac-secondary); border: 0; border-radius: 4px; background: none; padding: 0 2px; }.terminal-path button .mac-icon:last-child { inline-size: 9px; block-size: 9px; }
.terminal-output { padding: 12px 10px 16px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }.term-dim { color: #94a2b9; }.theme-amber .term-dim { color: #b79770; }.term-green { color: var(--terminal-green, #8ed4a4); }.term-cyan { color: var(--terminal-cyan, #78cedf); }.term-bold { font-weight: 650; }
.terminal-cursor { display: inline-block; inline-size: 6px; block-size: 12px; background: currentColor; vertical-align: -2px; animation: cursor-blink 1.2s steps(1) infinite; }
.browser-body { background: #f6f8fb; color: #26324a; block-size: 100%; display: flex; flex-direction: column; }
.browser-toolbar { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; min-block-size: 36px; background: var(--mac-toolbar); color: var(--mac-secondary); padding: 5px 8px; border-block-end: 1px solid var(--mac-line); }.browser-toolbar button { display: grid; place-items: center; border: 0; border-radius: 4px; background: none; color: inherit; inline-size: 20px; block-size: 24px; padding: 0; }.browser-toolbar button:disabled { opacity: .4; }.browser-toolbar button:hover:not(:disabled) { background: var(--mac-control); }.browser-toolbar .mac-icon { inline-size: 14px; block-size: 14px; }
.browser-address { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--mac-field); color: var(--mac-text); border: 1px solid var(--mac-line); border-radius: 6px; padding: 4px 7px; font: 11px/1.4 -apple-system, BlinkMacSystemFont, sans-serif; }.browser-external { display: flex; padding: 2px; }
.browser-page { overflow: auto; flex: 1; padding: 20px 24px; }.preview-brand { display: flex; justify-content: space-between; align-items: center; font-weight: 650; font-size: 13px; margin-block-end: 21px; }.preview-brand b { display: inline-grid; place-items: center; inline-size: 25px; block-size: 25px; background: #4a70de; color: white; border-radius: 7px; margin-inline-end: 6px; }.preview-brand small { color: #71809a; font-weight: 400; font-size: 9px; }
.preview-kicker { font-size: 8px; font-weight: 650; letter-spacing: .16em; color: #7d8baa; margin-block-end: 6px; }.preview-title { font-size: 25px; letter-spacing: -.04em; font-weight: 700; margin-block-end: 6px; }.preview-subtitle { font-size: 10px; color: #6a7993; line-height: 1.6; margin-block-end: 15px; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-block-end: 13px; }.preview-metrics div { padding: 12px; border: 1px solid #e1e7f1; border-radius: 8px; background: white; }.preview-metrics span { display: block; font-size: 8px; color: #71809a; }.preview-metrics strong { display: block; font-size: 23px; margin-block-start: 6px; }
.preview-search { display: flex; align-items: center; gap: 8px; color: #708097; font-size: 10px; }.preview-search input { inline-size: 100%; min-inline-size: 0; padding: 8px 9px; border: 1px solid #dbe2ec; background: #fff; color: #26324a; border-radius: 5px; font-size: 10px !important; }.preview-projects { margin-block-start: 9px; }.preview-project { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-block-end: 1px solid #e3e8f0; font-size: 10px; }.preview-project span:last-child { color: #33715e; font-size: 9px; }.preview-empty { color: #6a7993; font-size: 10px; }
.preview-status { flex: 0 0 auto; background: var(--mac-toolbar); color: var(--mac-secondary); border-block-start: 1px solid var(--mac-line); font-size: 10px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-body { block-size: 100%; display: flex; flex-direction: column; background: var(--mac-file); color: var(--mac-file-text); overflow: hidden; }.file-toolbar { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; min-block-size: 36px; padding: 5px 8px; background: var(--mac-toolbar); border-block-end: 1px solid var(--mac-line); font-size: 11px; color: var(--mac-secondary); }.file-toolbar button { display: grid; place-items: center; background: none; border: 0; border-radius: 4px; color: inherit; min-inline-size: 20px; min-block-size: 24px; padding: 0; }.file-toolbar .mac-icon { inline-size: 14px; block-size: 14px; }.file-toolbar button:hover { background: var(--mac-control); }
.file-page { flex: 1; overflow: auto; padding: 20px 24px; }.file-page h3 { font-size: 29px; letter-spacing: -.04em; font-weight: 700; margin-block-end: 12px; }.file-page p { color: var(--mac-file-muted); font-size: 12px; line-height: 1.6; }.file-page h4 { font-size: 19px; font-weight: 650; margin-block: 20px 12px; }.file-page ul { margin: 0; padding-inline-start: 19px; font-size: 12px; line-height: 1.9; color: var(--mac-file-text); }.file-page .file-saved { color: var(--mac-file-link); font-size: 10px; padding-block: 8px; }
.workspace-empty { display: grid; place-items: center; block-size: 100%; text-align: center; color: var(--muted); }
.workspace-empty p { font-size: 12px; }.workspace-empty button { font-size: 11px; border: 1px solid var(--mac-line); background: var(--mac-control); color: var(--mac-text); border-radius: 6px; padding: 10px 15px; }
.pane-group[data-drop]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #659eff25; border: 2px solid #7aa8ff; border-radius: 6px; z-index: 5; }
.pane-group[data-drop="left"]::after { inset-inline-end: 50%; }.pane-group[data-drop="right"]::after { inset-inline-start: 50%; }.pane-group[data-drop="top"]::after { inset-block-end: 50%; }.pane-group[data-drop="bottom"]::after { inset-block-start: 50%; }
.sandbox.is-dragging { cursor: grabbing; user-select: none; }.sandbox.is-dragging button { cursor: grabbing !important; }
.drag-label { position: fixed; z-index: 100; pointer-events: none; padding: 7px 12px; border: 1px solid var(--blue); border-radius: 7px; background: var(--card); color: var(--text); font-size: 10px; box-shadow: var(--shadow); }
.intro-assembling .pane-group { animation: pane-assemble .85s cubic-bezier(.2,.8,.2,1) both; }
.intro-assembling .split-child:nth-child(3) .pane-group { animation-delay: .12s; }
.sandbox-under { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-block-start: 14px; }
.sandbox-under p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.sandbox-buttons { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.quiet-button { background: none; border: 0; color: var(--muted); padding: 8px 0; font-size: 10px !important; }
.quiet-button:hover { color: var(--text); }
.cinematic-landing .capabilities { padding-block: 112px 90px; }
.cinematic-landing .section-heading h2 { font-size: clamp(32px, 3.7vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.cinematic-landing .section-heading > p:last-child { margin-block: 15px 0; color: var(--muted); font-size: 14px; }
.capability-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 15px; }
.capability-card { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--card); }
.card-art { block-size: 205px; padding: 30px 23px; background: radial-gradient(ellipse at top, color-mix(in srgb, var(--blue) 7%, transparent), transparent 70%); }
.card-copy { padding: 20px 24px 25px; border-block-start: 1px solid var(--line); }
.card-copy h3 { font-size: 17px; margin-block: 0 10px; line-height: 1.35; }
.card-copy p { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0; }
.mini-layout { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px; position: relative; }
.mini-pane { background: var(--background); border: 1px solid var(--line); border-radius: 5px; padding: 7px; }
.mini-pane span { display: block; color: var(--blue); font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; padding-block-end: 4px; border-block-end: 1px solid var(--line); }
.mini-pane i { display: block; block-size: 3px; inline-size: 80%; border-radius: 2px; background: color-mix(in srgb, var(--muted) 40%, transparent); margin-block-start: 7px; }
.mini-pane i:nth-child(3) { inline-size: 60%; }.mini-pane i:nth-child(4) { inline-size: 72%; }
.mini-pane.pane-c i { background: #6ab994; }.mini-browser-block { block-size: 20px; margin-block-start: 7px; background: linear-gradient(90deg, #4865a5 28%, transparent 28% 36%, #4865a5 36% 64%, transparent 64% 72%, #4865a5 72%); border-radius: 3px; opacity: .6; }
.mini-divider { position: absolute; inline-size: 2px; block-size: 70%; background: var(--blue); inset: 15% auto auto 54%; opacity: .5; animation: divider-drift 6s ease-in-out infinite; }
.activity-art { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.activity-art > div { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--background); border: 1px solid var(--line); border-radius: 6px; }
.activity-art code { font-size: 8px; color: var(--text); }.activity-art small { margin-inline-start: auto; font-size: 7px; color: var(--muted); }
.activity-dot { inline-size: 4px; block-size: 4px; background: #71caaa; border-radius: 50%; animation: activity-pulse 4s ease-in-out infinite; }.activity-art > div:nth-child(2) .activity-dot { animation-delay: .8s; }.activity-art > div:nth-child(3) .activity-dot { animation-delay: 1.6s; }.activity-art > div:nth-child(4) .activity-dot { animation-delay: 2.4s; }
.saved-art { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.saved-tab { display: flex; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 9px; background: var(--background); color: var(--muted); }.saved-tab span { font-size: 7px; opacity: .7; }.saved-tab.active { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); color: var(--blue); }
.saved-line { font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); margin-block-start: 8px; }
.native-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: 28px 0; color: var(--muted); font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.cinematic-landing .discovery { padding-block-end: 85px; }
.cinematic-landing .discovery h2 { font-size: 33px; max-inline-size: 670px; }
.workflow-links { border-block-start: 1px solid var(--line); }
.workflow-link { display: grid; grid-template-columns: 240px minmax(0, 1fr) 124px; align-items: center; gap: 32px; padding-block: 25px; border-block-end: 1px solid var(--line); border-radius: 0; transition: background .2s; }
.workflow-link h3 { font-size: 18px; line-height: 1.4; margin: 0; }
.workflow-link p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.workflow-link .text-link { justify-self: end; white-space: nowrap; }
.workflow-link:hover, .workflow-link:focus-visible { background: color-mix(in srgb, var(--surface) 50%, transparent); text-decoration: none; }
.workflow-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.workflow-arrow { display: inline-block; margin-inline-start: 7px; color: var(--blue); transition: transform .2s; }
.workflow-link:hover .workflow-arrow, .workflow-link:focus-visible .workflow-arrow { transform: translate(2px, -2px); }
.cinematic-landing .text-link { font-size: 11px; }
.native-video-section { padding-block-end: 75px; }
.native-video-disclosure { --video-inset: 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.native-video-disclosure > summary { list-style: none; display: flex; align-items: center; gap: 20px; padding: 25px 30px; cursor: pointer; }.native-video-disclosure > summary::-webkit-details-marker { display: none; }.native-video-disclosure > summary strong { display: block; font-size: 19px; letter-spacing: -.04em; }.native-video-disclosure > summary small { display: block; font-size: 11px; color: var(--muted); margin-block-start: 5px; }
.native-video-disclosure > summary > span:nth-child(2) { min-inline-size: 0; }
.video-play-mark, .video-length { flex-shrink: 0; }
.video-play-mark { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); font-size: 25px; }.video-length { margin-inline-start: auto; color: var(--muted); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }.video-length span { margin-inline-start: 16px; color: var(--blue); }
.cinematic-landing .native-video-disclosure .showcase { inline-size: 100%; margin: 0; padding: 0 var(--video-inset) var(--video-inset); }.cinematic-landing .native-video-disclosure figcaption { padding-inline: 0; font-size: 10px; }
.cinematic-landing .faq { padding-block-start: 60px; gap: 70px; }.cinematic-landing .faq h2 { font-size: 30px; }.cinematic-landing .faq-list summary { font-size: 13px; }.cinematic-landing .faq-list p { font-size: 12px; }
.cinematic-landing .closing-cta { margin-block: 90px 60px; padding: 65px clamp(20px, 4vw, 48px); border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cinematic-landing .closing-cta h2 { max-inline-size: 1040px; font-size: clamp(42px, 5vw, 62px); line-height: 1.1; letter-spacing: -.04em; margin-block-end: 14px; }.closing-intro { max-inline-size: 650px; margin-inline: auto; color: var(--muted); font-size: 13px; margin-block-end: 26px; }
.cinematic-landing .closing-cta .hero-actions { justify-content: center; }.cinematic-landing .closing-cta .download-meta { align-items: center; }.cinematic-landing .footer { padding-block: 30px 42px; }.cinematic-landing .footer a, .cinematic-landing .copyright { font-size: 10px; }.cinematic-landing .footer .brand { font-size: 14px; }
:root[data-motion="paused"] .flow-signal, :root[data-motion="paused"] .flow-node, :root[data-motion="paused"] .mini-divider, :root[data-motion="paused"] .activity-dot, :root[data-motion="paused"] .terminal-cursor { animation-play-state: paused; }
@keyframes flow-signal { to { stroke-dashoffset: -640; } }@keyframes node-float { 50% { transform: translateY(-4px); } }@keyframes cursor-blink { 50% { opacity: 0; } }@keyframes pane-assemble { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }@keyframes divider-drift { 50% { opacity: .9; transform: translateX(5px); } }@keyframes activity-pulse { 50% { opacity: .4; } }
@media (max-width: 1000px) { .cinematic-landing .wrap { inline-size: calc(100% - 48px); }.hero-grid { gap: 18px; }.flow-node { padding: 10px; gap: 6px; }.flow-node strong { font-size: 9px; }.flow-node small { font-size: 7px; }.capability-grid { grid-template-columns: 1fr 1fr; }.card-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }.card-wide .card-copy { border-block-start: 0; border-inline-start: 1px solid var(--line); align-content: center; }.card-wide .card-art { block-size: 235px; } }
@media (max-width: 800px) { .hero-grid { grid-template-columns: 1fr; }.hero-copy { max-inline-size: 600px; }.cinematic-landing h1 { font-size: clamp(48px, 8vw, 65px); }.playground-heading { align-items: flex-start; }.demo-badge { margin-block-start: 20px; }.sandbox-under { flex-wrap: wrap; }.sandbox-buttons { justify-content: space-between; inline-size: 100%; }.quiet-button { font-size: 11px !important; min-block-size: 40px; }.cinematic-landing .capabilities { padding-block: 80px 65px; }.native-strip { justify-content: flex-start; font-size: 8px; }.cinematic-landing .discovery-heading { align-items: flex-start; flex-direction: column; gap: 20px; }.cinematic-landing .discovery h2 { font-size: 30px; }.cinematic-landing .faq { gap: 30px; }.native-video-disclosure > summary { padding: 22px; gap: 14px; }.native-video-disclosure > summary small { font-size: 10px; }.cinematic-landing .closing-cta { margin-block-start: 70px; } }
@media (max-width: 540px) { .cinematic-landing .wrap { inline-size: calc(100% - 32px); }.cinematic-landing .brand { font-size: 13px; gap: 8px; }.cinematic-landing .brand img { inline-size: 24px; block-size: 24px; }.cinematic-landing .language-menu summary { padding-inline: 5px; }.cinematic-landing .language-menu summary > span { display: none; }.cinematic-landing .explore-menu summary { padding-inline: 7px; font-size: 11px; }.cinematic-landing .theme-picker summary { inline-size: 35px; }.cinematic-landing h1 { font-size: clamp(40px, 10.7vw, 57px); }.cinematic-landing .subtitle { font-size: 14px; }.cinematic-landing .eyebrow { margin-block-end: 18px; }.cinematic-landing .hero-actions { gap: 8px 15px; }.cinematic-landing .button { padding-inline: 15px; font-size: 12px; }.cinematic-landing .demo-link { font-size: 12px; }.cinematic-landing .playground { padding-block-start: 24px; }.playground-heading h2 { font-size: 21px; }.playground-heading p:last-child { font-size: 11px; max-inline-size: 240px; }.demo-badge { display: none; }.capability-grid { grid-template-columns: 1fr; }.card-wide { grid-column: auto; display: block; }.card-wide .card-copy { border-inline-start: 0; border-block-start: 1px solid var(--line); }.card-wide .card-art, .card-art { block-size: 205px; }.native-video-disclosure > summary { padding: 20px 16px; }.video-length { font-size: 9px; }.video-length span { display: none; }.video-play-mark { inline-size: 34px; block-size: 34px; font-size: 20px; }.native-video-disclosure > summary strong { font-size: 17px; }.cinematic-landing .faq { grid-template-columns: 1fr; }.cinematic-landing .closing-cta { padding-block: 47px; }.cinematic-landing .footer { flex-direction: column; align-items: flex-start; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.cinematic-landing *, .cinematic-landing *::before, .cinematic-landing *::after { animation: none !important; transition: none !important; } }
.sandbox-menu .menu-popover { max-block-size: 280px; overflow: auto; }
.sandbox-menu.menu-above[open] > .menu-popover { inset-block-start: auto; inset-block-end: calc(100% + 5px); }
.pane-group { transform-origin: top left; }
/* Keep the product in the first screen, including on touch devices. */
@media (min-width: 1500px) { .cinematic-landing .hero { padding-block: 42px 32px; } }
@media (min-width: 801px) and (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); } }
@media (max-width: 800px) {
  .cinematic-landing .hero { padding-block: 28px 24px; }
  .hero-grid { gap: 18px; }
  .cinematic-landing .hero h1 { font-size: clamp(36px, 7.5vw, 52px); margin-block-end: 16px; }
  .cinematic-landing .hero .subtitle { font-size: 14px; line-height: 1.55; margin-block-end: 18px; }
  .flow-graphic { display: block; max-inline-size: 640px; margin-inline: auto; }
  .flow-node { inline-size: 116px; min-block-size: 36px; padding: 8px 10px; gap: 7px; border-radius: 8px; }
  .flow-node strong { font-size: 10px; }.flow-node small, .flow-node i, .flow-caption { display: none; }.flow-node .mini-icon { inline-size: 18px; block-size: 18px; font-size: 16px; }
  .hero-preview-action { align-items: end; padding-block-end: 14px; }
  .hero-preview-label { opacity: 1; transform: none; font-size: 11px; min-block-size: 36px; padding: 8px 14px; gap: 12px; }
}
@media (max-width: 540px) {
  .cinematic-landing .hero { padding-block: 24px 18px; }
  .cinematic-landing .hero h1 { font-size: clamp(36px, 10vw, 48px); }
  .hero-grid { gap: 12px; }
}
@media (hover: none) { .hero-preview-label { opacity: 1; transform: none; } }
/* Share text rows so wrapped card titles keep the following copy aligned. */
@supports (grid-template-rows: subgrid) {
  .capability-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .card-copy { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
  @media (min-width: 541px) and (max-width: 1000px) {
    .card-wide { grid-row: auto; grid-template-rows: auto; }
    .card-wide .card-copy { grid-row: auto; grid-template-rows: none; }
  }
  @media (max-width: 540px) { .card-wide { grid-template-columns: minmax(0, 1fr); } }
}
@media (min-width: 801px) and (max-width: 1000px) { .flow-node { inline-size: 140px; min-block-size: 48px; } }
@media (max-width: 800px) { .native-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.native-video-disclosure { --video-inset: 22px; } }
@media (max-width: 800px) {
  .workflow-link { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 23px; }
  .workflow-link .text-link { justify-self: start; margin-block-start: 3px; }
}
@media (max-width: 540px) { .cinematic-landing .closing-cta h2 { font-size: clamp(32px, 10.8vw, 42px); }.native-video-disclosure { --video-inset: 16px; } }
@media (max-width: 1100px) {
  .cinematic-landing .command-header { gap: 16px; }
  .cinematic-landing .command-header .appbar-actions { gap: 12px; }
  .header-route { padding-inline: 12px; gap: 8px; }
  .header-utilities { padding-inline-start: 8px; }
  .command-header .language-menu summary > span { display: none; }
}
@media (max-width: 820px) {
  .cinematic-landing .command-header { grid-template-columns: 1fr; gap: 8px; min-block-size: 0; margin-block-start: 14px; padding: 10px; border-radius: 13px; }
  .command-header .header-brand { justify-self: start; max-inline-size: calc(100% - 138px); min-block-size: 44px; padding: 0; gap: 9px; }
  .command-header .header-brand-icon { inline-size: 36px; block-size: 36px; border-radius: 10px; flex-shrink: 0; }
  .cinematic-landing .command-header .header-brand img { inline-size: 30px; block-size: 30px; }
  .header-brand-copy { gap: 4px; }
  .header-brand-copy bdi { font-size: 14px; }
  .header-brand-copy small { font-size: 8px; }
  .cinematic-landing .command-header .appbar-actions { display: block; inline-size: 100%; }
  .header-route-strip { gap: 6px; padding-block-start: 8px; border-block-start: 1px solid var(--line); }
  .header-route { flex: 1; min-inline-size: 0; min-block-size: 44px; padding: 8px; gap: 8px; font-size: 11px; }
  .header-route::after { display: none; }
  .header-route-arrow { margin-inline-start: 0; inline-size: 13px; }
  .header-workspace-icon { inline-size: 16px; }
  .header-utilities { position: absolute; inset: 10px 10px auto auto; padding: 0; border: 0; gap: 0; }
  .command-header .header-utilities details > summary { inline-size: 44px; padding: 0; justify-content: center; }
  .command-header .language-menu summary > svg:first-child, .command-header .header-explore-icon { display: block; }
  .command-header .language-menu summary > span, .command-header .explore-menu summary > span, .command-header .header-utilities .chevron { display: none; }
  .command-header .theme-options, .command-header .language-menu ul, .command-header .explore-menu ul { margin-block-start: 16px; }
}
@media (max-width: 400px) {
  .header-brand-copy small { display: none; }
  .header-brand-copy bdi { font-size: 13px; }
  .command-header .header-brand { gap: 7px; }
  .command-header .header-brand-icon { inline-size: 30px; block-size: 30px; border-radius: 8px; }
  .cinematic-landing .command-header .header-brand img { inline-size: 26px; block-size: 26px; }
  .header-route { gap: 6px; font-size: 10px; }
}
/* Motion begins only after the optional enhancement confirms preferences and visibility. */
.flow-signal, .flow-node, .mini-divider, .activity-dot, .terminal-cursor { animation-play-state: paused; }
:root[data-motion="running"] .flow-signal, :root[data-motion="running"] .flow-node, :root[data-motion="running"] .mini-divider, :root[data-motion="running"] .activity-dot, :root[data-motion="running"] .terminal-cursor { animation-play-state: running; }
.flow-graphic[data-flow-motion="paused"] :is(.flow-node, .flow-signal) { animation-play-state: paused; }

@media (prefers-reduced-transparency: reduce) { .window-titlebar, .sandbox-menu[open] > .menu-popover { background: var(--mac-toolbar); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Product context sits outside the inert sample workspace. */
.hero-preview-note { position: absolute; inset: 91% 0 auto; margin: 0; text-align: center; color: var(--muted); font-size: 10px; line-height: 1.5; }
@media (max-width: 960px) { .hero-preview-note { inset-block-start: 92%; font-size: 8px; } }
@media (max-width: 540px) { .hero-preview-note { max-inline-size: 100px; margin-inline: auto; inset-block-start: 90%; font-size: 9px; } }