/* Design tokens */
:root {
  color-scheme: light dark;
  --paper: light-dark(#f1f3f7, #111216);
  --surface: light-dark(#f8f9fc, #1c1e24);
  --ink: light-dark(#101824, #f5f5f7);
  --muted: light-dark(#535e70, #b4b8c3);
  --blue: light-dark(#075fd6, #8cbfff);
  --wash: light-dark(#e9edf4, #1d222c);
  --line: light-dark(#d7dfec, #343946);
  --glass: light-dark(rgb(246 249 255 / .58), rgb(32 35 44 / .78));
  --selection: light-dark(rgb(216 230 249 / .8), rgb(57 71 91 / .85));
  --glass-edge: light-dark(rgb(255 255 255 / .94), rgb(165 192 234 / .18));
  --shadow: 0 18px 48px light-dark(rgb(22 46 84 / .12), rgb(0 0 0 / .2)), 0 3px 8px light-dark(rgb(22 46 84 / .06), rgb(0 0 0 / .12));
  --material-blur: 26px;
  --material-saturation: 165%;
  --page-gutter: clamp(20px, 3.35vw, 48px);
  --section-space: clamp(66px, 10vw, 110px);
  --scroll-clearance: 115px;
  --block-gap: clamp(40px, 4.8vw, 56px);
  --grid-gap: clamp(28px, 3.6vw, 42px);
  --narrative-column-min: 18rem;
  --space-tight: 8px;
  --space-inline: 12px;
  --space-body: 16px;
  --item-gap: 24px;
  --space-large: 32px;
  --control-target: 44px;
  --control-prominent: 50px;
  --control-radius: 999px;
  --panel-radius: 24px;
  --header-inset: clamp(14px, 1.67vw, 24px);
  --header-height: 70px;
  --header-width: 1240px;
  --type-display: clamp(3.25rem, min(8.5vw, 18cqw), 7.25rem);
  --type-title: clamp(2.45rem, 5vw, 4.6rem);
  --type-heading: 1.2rem;
  --type-lede: clamp(1.05rem, 1.7vw, 1.28rem);
  --type-body: 1rem;
  --type-small: .9375rem;
  --type-label: .875rem;
  --type-caption: .75rem;
  --line-body: 1.75;
  --line-label: 1.45;
  --ease-response: cubic-bezier(.22, 1, .36, 1);
  --motion-response: 280ms;
  --motion-reveal: 800ms;
  --spring-stiffness: 220;
  --spring-damping: 28;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-synthesis: none;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-clearance);
  -webkit-font-smoothing: antialiased;
}
/* Document and typography */
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 92% 4%, light-dark(#9fc8ff20, #164d781e), transparent 55rem), radial-gradient(ellipse at 8% 30%, light-dark(#b6c8ed18, #36397518), transparent 60rem), var(--paper); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: var(--type-display); font-weight: 650; letter-spacing: -.055em; line-height: .99; }
h2 { font-size: var(--type-title); font-weight: 620; letter-spacing: -.06em; line-height: 1.07; white-space: pre-line; }
h3 { font-size: var(--type-heading); line-height: 1.35; font-weight: 620; letter-spacing: -.025em; }
button, input { font-family: inherit; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: var(--selection); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
[data-reservation-label="busy"] { display: none; }
[data-gpu="busy"] [data-reservation-label="free"] { display: none; }
[data-gpu="busy"] [data-reservation-label="busy"] { display: inline; }
/* Controls and navigation */
.button { min-height: var(--control-prominent); padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline); border-radius: var(--control-radius); font-size: var(--type-label); font-weight: 600; border: 1px solid transparent; line-height: var(--line-label); transition: background var(--motion-response), box-shadow var(--motion-response), transform var(--motion-response) var(--ease-response); }
.button.primary { background: linear-gradient(180deg, #1676ee, #075ace); color: #fff; border-color: rgb(0 62 161 / .25); box-shadow: inset 0 1px 1px rgb(255 255 255 / .45), inset 0 -1px 1px rgb(0 39 108 / .14), 0 5px 12px rgb(0 68 160 / .15); }
.button.primary:hover { background: linear-gradient(180deg, #2587ff, #0963da); transform: translateY(-2px); box-shadow: inset 0 1px 1px rgb(255 255 255 / .45), 0 9px 21px rgb(0 68 160 / .22); }
.button.secondary { border-color: var(--line); background: var(--surface); }
.button.compact { padding: 10px 18px; min-height: var(--control-target); gap: var(--space-body); font-size: var(--type-caption); }
.text-link { font-size: var(--type-small); font-weight: 600; display: inline-flex; gap: 14px; align-items: center; min-height: var(--control-target); }
.text-link:hover { color: var(--blue); }
.glass, .explainer-controls button[aria-pressed="true"] { background: linear-gradient(135deg, #ffffff30, transparent 46%, #9dc8ff12), var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow), inset 0 1px 1px rgb(255 255 255 / .8), inset 0 -1px 1px rgb(29 59 103 / .09); }
.glass, .mobile-nav, .explainer-controls button[aria-pressed="true"] { backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturation)); -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturation)); }
.site-header { position: fixed; z-index: 30; inset-block-start: var(--header-inset); inset-inline: 0; width: min(var(--header-width), calc(100% - var(--header-inset) * 2)); margin-inline: auto; min-height: var(--header-height); padding: 8px 12px 8px 18px; border-radius: var(--control-radius); display: grid; align-items: center; gap: var(--item-gap); container: header / inline-size; grid-template-columns: auto minmax(0, 1fr) auto; }
.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 660; font-size: 1.08rem; letter-spacing: -.045em; line-height: var(--line-label); }
.brand img { width: 40px; height: 40px; flex-shrink: 0; }
.desktop-nav { position: relative; justify-content: center; gap: var(--space-tight); margin-inline: auto; padding: 4px; isolation: isolate; grid-column: 2; justify-self: center; font-size: var(--type-label); }
.desktop-nav a { position: relative; z-index: 1; font-size: var(--type-label); font-weight: 550; color: var(--muted); min-height: var(--control-target); padding-inline: var(--space-inline); display: flex; align-items: center; transition: color var(--motion-response); }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--ink); }
.nav-indicator { position: absolute; z-index: 0; inset-block: 4px; inset-inline-start: 0; width: var(--nav-width, 0px); transform: translateX(var(--nav-x, 0px)); border-radius: var(--control-radius); background: var(--selection); box-shadow: inset 0 1px 1px rgb(255 255 255 / .7), 0 1px 3px rgb(36 63 105 / .08); pointer-events: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-tight); grid-column: 3; justify-self: end; }
.icon-button { width: var(--control-target); height: var(--control-target); border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; }
.icon-button:hover { background: var(--wash); color: var(--ink); }
.theme-toggle[aria-pressed="true"] .theme-moon, .theme-toggle[aria-pressed="false"] .theme-sun { display: none; }
.play-glyph { display: none; }
.motion-toggle[aria-pressed=true] .play-glyph { display: block; }
.motion-toggle[aria-pressed=true] .pause-glyph { display: none; }
.mobile-nav { position: fixed; inset: calc(var(--header-inset) + var(--header-height) + var(--space-inline)) 0 auto; width: min(38rem, calc(100% - var(--header-inset) * 2)); max-height: calc(100svh - var(--header-height) - var(--header-inset) - var(--space-large)); margin: 0 auto; padding: var(--space-body); border-radius: var(--panel-radius); border: 1px solid var(--line); color: var(--ink); background: var(--glass); box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav a { display: flex; align-items: center; min-height: var(--control-target); padding: var(--space-inline) var(--space-body); border-radius: 12px; font-size: var(--type-body); }
.skip-link { position: fixed; inset-block-start: -100px; inset-inline-start: 24px; z-index: 100; background: var(--ink); color: var(--paper); padding: 14px 20px; border-radius: 12px; }
.skip-link:focus { inset-block-start: 24px; }
.support .button { margin-top: var(--space-large); }
.policy-content a:not(.button) { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.notfound .button { margin-top: var(--space-large); }
.button, .icon-button, .explainer-controls button { position: relative; isolation: isolate; scale: calc(1 - var(--press, 0) * .035); }
.button::before, .explainer-controls button::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at calc(50% + var(--control-x, 0) * 40%) calc(20% + var(--control-y, 0) * 30%), #ffffff38, transparent 65%); }
.mobile-nav:popover-open { display: grid; }
.mobile-nav a:hover { background: var(--wash); }
.store-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-prominent); }
.store-link::before { content: ''; position: absolute; z-index: -1; inset: -10px; border-radius: 12px; pointer-events: none; background: radial-gradient(ellipse at calc(50% + var(--control-x, 0) * 40%) calc(50% + var(--control-y, 0) * 35%), #499eff80, transparent 68%); filter: blur(14px); opacity: 0; transition: opacity var(--motion-response) var(--ease-response); }
.store-link:hover::before, .store-link:focus-visible::before { opacity: 1; }
.store-link img { display: block; width: auto; height: 40px; max-width: 100%; }
/* Hero illustration */
.hero { position: relative; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); align-items: center; padding-block: clamp(135px, 12vw, 165px) var(--section-space); overflow: visible; }
.hero-copy { position: relative; min-width: 0; z-index: 8; container: hero-copy / inline-size; }
.hero .eyebrow { margin-bottom: var(--item-gap); display: flex; align-items: center; gap: var(--space-inline); }
.tiny-bridge { color: var(--blue); width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.hero h1 span { color: var(--blue); }
.hero-description { color: var(--muted); font-size: var(--type-lede); line-height: var(--line-body); max-width: 28rem; margin-top: var(--space-large); }
.hero-art { --pointer-x: 0; --pointer-y: 0; --scroll-progress: 0; --signal-progress: 0; width: 100%; max-width: min(clamp(460px, 44vw, 620px), calc(100svh - var(--scroll-clearance) - var(--space-large))); min-width: 0; justify-self: center; aspect-ratio: 1; position: relative; isolation: isolate; perspective: 1200px; overflow: clip; container: hero / inline-size; }
.scene-well { position: absolute; width: 86.2903%; height: 80.6452%; top: 8.7097%; left: 8.8710%; z-index: -3; border-radius: 50%; background: radial-gradient(ellipse at 48% 35%, #2d659e, #163960 43%, #0b203b 77%); box-shadow: inset 0 1px 2px #bedcff99, inset 0 -2px 3px #07172f, 0 30px 70px -24px #244e8245; transform: translate3d(calc(var(--pointer-x) * -7px), calc(var(--pointer-y) * -7px), 0) rotate(calc(-19deg + var(--pointer-x) * 2deg - var(--scroll-progress) * 3deg)); }
.scene-well::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: radial-gradient(ellipse at calc(45% + var(--pointer-x) * 16%) calc(28% + var(--pointer-y) * 14%), #7fc5ff33, transparent 58%); }
.scene-halo { position: absolute; z-index: -2; width: 73.3871%; height: 73.3871%; top: 12.9032%; left: 15.3226%; border-radius: calc(44% + var(--pointer-x) * 4%) calc(56% - var(--pointer-x) * 4%) calc(49% + var(--pointer-y) * 4%) calc(51% - var(--pointer-y) * 4%); border: 1px solid #92cdff38; box-shadow: inset 0 0 45px #59aaff15, 0 0 30px #67c5ff0a; transform: translate3d(calc(var(--pointer-x) * 13px), calc(var(--pointer-y) * 11px), 0) rotate(calc(-20deg + var(--pointer-x) * 7deg + var(--scroll-progress) * 18deg)) scale(calc(1 + var(--scroll-progress) * .035)); opacity: calc(.7 + var(--scroll-progress) * .25); }
.scene-floor { position: absolute; z-index: -1; top: 64.5161%; left: 14.8387%; width: 68.5484%; height: 19.3548%; background: radial-gradient(ellipse, #030e22b3, #06244c45 42%, transparent 70%); transform: translate3d(calc(var(--pointer-x) * 9px), calc(var(--pointer-y) * 5px), 0) rotate(-19deg); }
.orbit { position: absolute; z-index: -1; width: 83.8710%; height: 83.8710%; top: 7.7419%; left: 50%; translate: -50% 0; border: 1px solid #9ec8f74d; border-radius: 50%; transform: rotateX(67deg) rotateZ(-28deg); box-shadow: 0 1px 0 #e9f5ff22; }
.orbit::after { content: ''; position: absolute; width: 9px; height: 9px; top: 18%; left: 9%; border-radius: 50%; background: #b9efff; box-shadow: 0 0 15px #77cfff; }
.orbit-one { transform: rotateX(calc(67deg + var(--pointer-y) * 4deg)) rotateZ(calc(-28deg + var(--pointer-x) * 12deg + var(--scroll-progress) * 22deg)); opacity: calc(.65 + var(--scroll-progress) * .25); }
.orbit-two { width: 98.3871%; height: 98.3871%; top: 1.1290%; opacity: .52; transform: rotateX(calc(67deg - var(--pointer-y) * 3deg)) rotateZ(calc(31deg - var(--pointer-x) * 9deg - var(--scroll-progress) * 16deg)); }
.orbit-two::after { width: 5px; height: 5px; top: 70%; left: 4%; }
.signal-ribbon { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; transform: translate3d(calc(var(--pointer-x) * 8px), calc(var(--pointer-y) * 8px), 0); }
.ribbon-depth { stroke: #030e2580; stroke-width: 18; }
.ribbon-edge { stroke: url(#signal-light); stroke-width: 6; opacity: .75; }
.ribbon-current { stroke: #e3fbff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--signal-progress)); }
.hero-plinth { position: absolute; width: 38.3871%; height: 28.7097%; border-radius: 33px; background: linear-gradient(145deg, #fff 0%, #dce6f3 48%, #9bacbf 100%); border: 1px solid #e6f1ff; box-shadow: 0 2px 0 #f8fcff, -1px 5px 0 #899db7, -2px 10px 0 #60758f, -2px 13px 0 #c8d5e6, 0 31px 35px -11px #020e236b, inset 1px 1px 2px #fff; transform: translate3d(calc(var(--pointer-x) * var(--depth-shift)), calc(var(--pointer-y) * var(--depth-shift) - var(--scroll-progress) * 25px), 0) rotateX(49deg) rotateZ(-29deg); }
.hero-plinth::after { content: ''; position: absolute; inset: 5px; border-radius: 28px; border: 1px solid #fff6; background: linear-gradient(140deg, #fff7, transparent 44%, #3f6c9d0d); }
.plinth-back { --depth-shift: 10px; z-index: 1; top: 17.0968%; left: 54.0323%; width: 33.0645%; height: 25.3226%; }
.plinth-middle { --depth-shift: 15px; z-index: 2; top: 44.1935%; left: 39.6774%; }
.plinth-front { --depth-shift: 22px; z-index: 3; top: 63.2258%; left: 12.9032%; }
.plinth-symbol { width: 24%; aspect-ratio: 1; position: absolute; z-index: 1; top: 48%; left: 52%; transform: translate(-50%, -50%); display: grid; place-items: center; color: #3b526f; }
.plinth-symbol svg { width: 100%; height: 100%; overflow: visible; }
.plinth-front .plinth-symbol { top: 26%; left: 50%; width: 68%; height: 72%; color: #c3e5ff; border: 3px solid #a8bdd8; border-radius: 8px; background: linear-gradient(140deg, #224d7f, #0b203d); box-shadow: 0 4px 0 #6683a6, 0 10px 14px #03142e55, inset 0 1px 1px #9bd1ff66; transform: translate(-50%, -50%) perspective(500px) rotateX(-24deg); }
.plinth-front .plinth-symbol svg { width: 65%; height: 65%; }
.hero-plinth:not(.plinth-front)::before { content: ''; position: absolute; z-index: 1; bottom: 10%; left: 12%; width: 28%; height: 6%; border-radius: 3px; background: repeating-linear-gradient(90deg, #59738f 0 2px, transparent 2px 4px); }
.hardware-port { position: absolute; bottom: 12px; right: 28px; width: 27px; height: 4px; background: #526b8e; border-radius: 2px; box-shadow: inset 0 1px 1px #21354d; }
.hardware-port::after { content: ''; position: absolute; width: 4px; height: 4px; right: -11px; border-radius: 50%; background: #125ed4; }
.hero-plinth:not(.plinth-front) .hardware-port::after { background: #239f86; opacity: calc(.35 + var(--signal-progress) * .65); box-shadow: 0 0 calc(var(--signal-progress) * 12px) #5cf2c4; }
.hero-icon-anchor { position: absolute; z-index: 5; top: 13.7097%; left: 12.5806%; width: 54.5161%; height: 54.5161%; transform: translate3d(calc(var(--pointer-x) * 25px), calc(var(--pointer-y) * 25px - var(--scroll-progress) * 54px), 0) rotateX(calc(var(--pointer-y) * -5deg)) rotateY(calc(var(--pointer-x) * 6deg)) rotateZ(-12deg); }
.hero-icon-aura { position: absolute; inset: 18%; border-radius: 24%; background: #64b4ff; opacity: .15; box-shadow: 0 0 70px 35px #54a6ff80; }
.hero-icon { width: 100%; height: 100%; }
.task-label { position: absolute; z-index: 7; padding: 8px 14px; font-size: var(--type-caption); font-weight: 650; color: light-dark(#1757ac, #b3d5ff); border: 1px solid light-dark(#d0e0f5, #3b5c85); border-radius: 10px; background: light-dark(#f6faff, #142a47); transform: translate3d(calc(var(--pointer-x) * 17px), calc(var(--pointer-y) * 17px), 0) rotate(-10deg); box-shadow: 0 3px 0 #acbfd8, 0 12px 17px #04173333, inset 0 1px 0 #fff; }
.task-one { top: 31.2903%; right: 0.4839%; }
.task-two { top: 56.2903%; right: 4.3548%; }
.task-three { top: 77.2581%; right: 20.8065%; }
html[data-motion=running] :is(.hero-copy > .eyebrow, .hero-copy > h1, .hero-description, .hero-copy > .actions > .button.primary, .hero-art) { animation: hero-arrive var(--motion-reveal) var(--ease-response) both; }
.hero-art[data-in-view="false"] *, .hero-art[data-in-view="false"] *::before, .hero-art[data-in-view="false"] *::after { animation-play-state: paused !important; }
.hero-packet { transform: translate(var(--packet-x, 190px), var(--packet-y, 485px)); fill: #f7fcff; stroke: #0c61d3; stroke-width: 2; filter: drop-shadow(0 3px 5px #05265080); opacity: min(1, calc(var(--signal-progress) * 12), calc((1 - var(--signal-progress)) * 12)); }
.route-end { fill: #dff6ff; stroke: #65b8ff; stroke-width: 3; }
/* Content layouts and check journey */
.wrap { width: min(1160px, calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.eyebrow { font-size: var(--type-label); letter-spacing: .045em; font-weight: 650; margin-bottom: var(--item-gap); }
.section-intro { color: var(--muted); font-size: var(--type-lede); line-height: var(--line-body); max-width: 600px; margin-top: var(--item-gap); text-wrap: pretty; }
.section-heading { margin-bottom: var(--block-gap); }
.actions { display: flex; gap: var(--item-gap); align-items: center; flex-wrap: wrap; margin-top: var(--space-large); }
.intro { position: relative; border-top: 1px solid var(--line); }
.intro h2 { max-width: 900px; }
.intro .section-intro { max-width: 640px; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--grid-gap); margin-top: var(--block-gap); padding-top: var(--item-gap); border-top: 1px solid var(--line); }
.principle strong { display: block; font-size: var(--type-body); font-weight: 600; }
.principle > div:last-child > span { display: block; color: var(--muted); font-size: var(--type-label); margin-top: var(--space-tight); }
.story-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--grid-gap); position: relative; }
.story-sticky, .story-steps { flex: 1 1 20rem; min-width: 0; }
.story-sticky { position: relative; align-self: start; }
.story-layout[data-interactive="true"] .story-steps { display: grid; }
.story-layout[data-interactive="true"] .story-step { grid-area: 1 / 1; }
.story-step[data-active="false"] { visibility: hidden; pointer-events: none; }
.journey { container: journey / inline-size; width: 100%; aspect-ratio: 600 / 440; position: relative; margin-top: var(--item-gap); isolation: isolate; }
.journey-grid { position: absolute; inset: 15% 12% 0; background-image: linear-gradient(#6786b11c 1px, transparent 1px), linear-gradient(90deg, #6786b11c 1px, transparent 1px); background-size: 24px 24px; transform: perspective(600px) rotateX(52deg) scale(.85); transform-origin: center 75%; mask-image: radial-gradient(ellipse at 55% 65%, #000, transparent 70%); opacity: .6; }
.journey-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 2.5px; }
.path-base { stroke: #a3bad8; stroke-dasharray: .008 .014; }
.path-signal { stroke: var(--blue); stroke-width: 4px; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--story-progress, 0)); filter: drop-shadow(0 2px 3px #2d81e54d); }
.editor-device { position: absolute; top: 49%; left: 12%; width: 28%; transform: perspective(700px) translate3d(calc(var(--story-progress, 0) * -5px), calc(var(--story-progress, 0) * -4px), 0) rotateY(calc(8deg - var(--story-progress, 0) * 4deg)); filter: drop-shadow(0 18px 16px #12365c24); }
.editor-screen { aspect-ratio: 1.5; background: linear-gradient(135deg, #1b365a, #0c1b31); border: 1cqw solid #b7c5d9; border-radius: 1.5cqw 1.5cqw .6667cqw .6667cqw; padding: 1.8333cqw 1.6667cqw; box-shadow: 0 11px 15px #253b5c26, inset 0 1px 0 #000; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: .5cqw; gap: .8333cqw; }
.editor-screen i { border-radius: 2px; background: #7db5ed; grid-column: span 3; }
.editor-screen i:nth-child(2n) { background: #c1dbfa; grid-column: span 4; }
.editor-screen i:last-child { background: #5f7ca5; grid-column: span 2; }
.editor-base { height: 1.3333cqw; background: linear-gradient(#e1e8f1, #abb9cb); border-radius: 2px 2px 10px 10px; margin-inline: -8%; }
.worker-device { position: absolute; left: 69%; top: 47%; width: 20%; height: 28%; }
.worker-layer { position: absolute; width: 100%; aspect-ratio: 1.7; top: 0; border-radius: 13px; border: 1px solid #c5d3e7; box-shadow: 0 7px 0 #afbed1, 0 10px 0 #eff5fd, 0 16px 15px rgb(41 73 118 / .12); background: linear-gradient(135deg, #fff, #dae4f1); transform: rotateX(35deg) rotateZ(-12deg); }
.worker-layer:nth-child(2) { top: 22%; }
.worker-layer:nth-child(3) { top: 44%; }
.worker-layer i { position: absolute; width: 4px; height: 4px; background: var(--blue); border-radius: 50%; bottom: 7px; right: 10px; box-shadow: 0 0 calc(var(--worker-complete, 0) * 16px) #44baff; }
.snapshot-packet { --packet-x: 26.6667; --packet-y: 44.1667; position: absolute; top: 0; left: 0; display: grid; padding: 1.6667cqw; background: var(--surface); color: var(--blue); border: 1px solid #b9cceb; border-radius: 2.1667cqw; box-shadow: 0 4px 0 #a9c0df, 0 17px 22px #1e4b8b24; transform: translate3d(calc(var(--packet-x) * 1cqw), calc(var(--packet-y) * 1cqw), 0) translate(-50%, -50%) rotate(calc(-9deg + var(--story-progress, 0) * 18deg)); }
.snapshot-packet > span { grid-area: 1 / 1; display: grid; place-items: center; }
.snapshot-packet svg { width: 4.1667cqw; height: 4.1667cqw; }
.packet-source { opacity: calc(1 - var(--result-opacity, 0)); }
.packet-result { color: light-dark(#12734d, #79dab7); opacity: var(--result-opacity, 0); }

.journey-check { position: absolute; top: 40%; right: 9%; width: 4.8333cqw; height: 4.8333cqw; display: grid; place-items: center; background: var(--blue); color: #fff; border-radius: 50%; font-size: 3cqw; opacity: var(--worker-complete, 0); transform: scale(var(--result-scale, .8)); }
.story-step { display: flex; flex-direction: column; justify-content: center; padding-block: var(--block-gap); }
.story-step .eyebrow { color: var(--blue); }
.story-step h3 { font-size: clamp(2rem, 3.3vw, 3.1rem); line-height: 1.1; letter-spacing: -.055em; white-space: pre-line; }
.story-step > p:not(.eyebrow) { color: var(--muted); font-size: var(--type-body); line-height: var(--line-body); margin-top: var(--item-gap); max-width: 415px; }
.story-step .step-note { padding-top: var(--item-gap); border-top: 1px solid var(--line); font-size: var(--type-small); }
.capacity { position: relative; overflow: hidden; background: radial-gradient(ellipse at 78% 0%, #21477b 0, transparent 48%), linear-gradient(140deg, #12243e, #09182d 75%); color: #f7faff; }
.capacity .eyebrow { color: #a8c7ef; }
.capacity .section-intro { color: #bdc9da; max-width: 34rem; flex: 1 1 18rem; }
.capacity-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--grid-gap); flex-wrap: wrap; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--narrative-column-min)), 1fr)); gap: var(--grid-gap); margin-top: var(--block-gap); }
.feature p { font-size: var(--type-small); line-height: var(--line-body); margin-top: var(--space-body); }
.capacity .feature p { color: #bdc9da; }
.stack-section { position: relative; border-bottom: 1px solid var(--line); container: hardware / inline-size; }
.roadmap-note { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--grid-gap); margin-top: var(--block-gap); padding-top: var(--space-large); border-top: 1px solid var(--line); }
.roadmap-note h3 { white-space: pre-line; font-size: clamp(1.9rem, 2.8vw, 2.75rem); line-height: 1.15; letter-spacing: -.045em; text-wrap: balance; }
.roadmap-note .eyebrow { font-size: var(--type-caption); color: var(--blue); margin-bottom: var(--item-gap); }
.roadmap-note p { margin-top: 0; font-size: var(--type-small); line-height: 1.85; color: var(--muted); }
.roadmap-note a { display: inline-flex; align-items: center; min-height: var(--control-target); color: var(--blue); font-size: var(--type-label); font-weight: 600; margin-top: 8px; text-decoration: underline; text-underline-offset: 4px; }
.app .section-heading { text-align: center; }
.app .section-intro { margin-inline: auto; }
.app-features .feature p { color: var(--muted); }
.setup { background: linear-gradient(145deg, var(--wash), var(--paper)); border-block: 1px solid var(--line); }
.setup-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--narrative-column-min)), 1fr)); gap: var(--grid-gap); counter-reset: setup; }
.setup-steps li { counter-increment: setup; position: relative; }
.setup-steps li::before { content: '0' counter(setup); position: absolute; top: 128px; right: 0; font-size: var(--type-label); color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 650; }
.setup-steps p { margin-top: var(--space-body); font-size: var(--type-small); line-height: var(--line-body); color: var(--muted); }
.capacity-heading > div { flex: 1 1 24rem; }
/* Hardware illustrations */
.silicon-strip { --silicon-progress: 0; --silicon-x: 0; --silicon-y: 0; position: relative; display: grid; gap: var(--space-large); margin-block: var(--block-gap); padding: 10px; }
.silicon-vendor { --silicon-angle: -7deg; position: relative; min-width: 0; margin: 0; }
.silicon-vendor figcaption { margin-top: 12px; color: var(--ink); text-align: center; font-size: 1.18rem; line-height: 1.4; letter-spacing: -.035em; font-weight: 650; overflow-wrap: anywhere; }
.silicon-stage { position: relative; width: 100%; max-width: 285px; aspect-ratio: 1.08; margin-inline: auto; perspective: 850px; isolation: isolate; }
.silicon-stage::before { content: ''; position: absolute; z-index: -1; inset: 68% 9% 2%; border-radius: 50%; background: radial-gradient(ellipse, #1e38534d, transparent 70%); transform: translateX(calc(var(--silicon-x) * 6px)); opacity: calc(.45 + var(--silicon-progress) * .3); }
.silicon-package { position: absolute; inset: 12% 10%; border-radius: 13%; border: 1px solid #aebacb; background: linear-gradient(145deg, #f4f7fb, #b6c4d8); box-shadow: 0 3px 0 #8a9cb6, 0 7px 0 #596f8d, 0 10px 0 #dbe5f2, 0 25px 25px -13px #102c5440, inset 0 1px 1px #fff; transform-style: preserve-3d; transform: translateY(calc((1 - var(--silicon-progress)) * 8px)) rotateX(calc(36deg - var(--silicon-progress) * 24deg - var(--silicon-y) * 7deg)) rotateY(calc(var(--silicon-x) * 9deg)) rotateZ(calc(var(--silicon-angle) + var(--silicon-x) * 4deg)); }
.silicon-package::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at calc(50% + var(--silicon-x) * 45%) calc(10% + var(--silicon-y) * 40%), #ffffff5c, transparent 65%); transform: translateZ(1px); }
.silicon-die { position: absolute; border: 1px solid #ffffff70; box-shadow: 0 2px 0 #132033, 0 6px 10px #071a2a40, inset 0 1px 1px #ffffff30; transform: translateZ(calc(7px + (1 - var(--silicon-progress)) * 17px)); }
.silicon-apple .silicon-package { inset: 10% 13%; border-radius: 15%; }
.apple-integrated { inset: 10% 12% 22%; border-radius: 6%; background: linear-gradient(135deg, #18222e, #344358); overflow: hidden; }
.apple-compute { position: absolute; inset: 10% 53% 37% 9%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5%; }
.apple-compute i { border: 1px solid #b9d3d580; background: linear-gradient(135deg, #728a8f, #425c65); }
.apple-graphics { position: absolute; inset: 10% 9% 25% 54%; display: grid; grid-template-rows: repeat(4, 1fr); gap: 6%; }
.apple-graphics i { border: 1px solid #c2cad570; background: repeating-linear-gradient(90deg, #64778f 0 2px, #7d8c9d 2px 3px); }
.apple-fabric { position: absolute; left: 48%; top: 8%; width: 3%; height: 75%; background: linear-gradient(#bdced9, #7495ac); }
.apple-memory { position: absolute; left: 9%; bottom: 10%; width: 39%; height: 21%; border: 1px solid #9ab3ca; background: repeating-linear-gradient(0deg, #49617d 0 3px, #92a8be 3px 4px); }
.apple-memory-bank { position: absolute; bottom: 8%; width: 32%; height: 10%; border: 1px solid #919eaf; border-radius: 3px; background: linear-gradient(135deg, #354456, #152335); transform: translateZ(3px); box-shadow: 0 2px 0 #70819a; }
.bank-one { left: 14%; }
.bank-two { right: 14%; }
.silicon-nvidia { --silicon-angle: 5deg; }
.silicon-nvidia .silicon-package { inset: 18% 4%; border-radius: 7%; border-color: #8bbd51; background: repeating-linear-gradient(90deg, transparent 0 11%, #aacd671a 11% 12%), linear-gradient(145deg, #254b1e, #416b27); box-shadow: 0 3px 0 #12320b, 0 7px 0 #6b8c4c, 0 22px 25px -13px #143a144d; }
.nvidia-array { inset: 15% 24%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5%; padding: 6%; border-radius: 5%; border-color: #bcdd7a; background: #213c16; }
.nvidia-array i { border: 1px solid #bcdf724d; background: repeating-linear-gradient(0deg, #609234 0 3px, #92bd5e 3px 4px); }
.nvidia-memory { position: absolute; border: 1px solid #6b9254; background: repeating-linear-gradient(0deg, #162c19 0 10px, #44633a 10px 12px); transform: translateZ(3px); }
.memory-left { left: 8%; top: 20%; width: 10%; height: 60%; }
.memory-right { right: 8%; top: 20%; width: 10%; height: 60%; }
.memory-top { left: 30%; top: 4%; width: 40%; height: 5%; }
.silicon-amd { --silicon-angle: -10deg; }
.silicon-amd .silicon-package { inset: 15% 7%; border-radius: 10%; border-color: #b96268; background: linear-gradient(140deg, #59242d, #2c1522); box-shadow: 0 3px 0 #32121a, 0 7px 0 #8c5360, 0 22px 25px -13px #5011214d; }
.amd-die { top: 19%; width: 34%; height: 52%; border-radius: 4%; border-color: #f7aaa5; padding: 6%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9%; background: linear-gradient(140deg, #a8535a, #6c2b37); }
.amd-die i { border: 1px solid #fbd1c170; background: repeating-linear-gradient(90deg, #ae5d63 0 2px, #e39c8d 2px 3px); }
.die-left { left: 11%; }
.die-right { right: 11%; top: 27%; }
.amd-interconnect { position: absolute; top: 38%; left: 44%; width: 12%; height: 25%; background: repeating-linear-gradient(0deg, #f5a79c 0 1px, transparent 1px 4px); transform: translateZ(4px); }
.amd-cache { position: absolute; left: 14%; right: 14%; bottom: 10%; height: 7%; border: 1px solid #b7747d; background: #160f1a; transform: translateZ(3px); }
.silicon-intel { --silicon-angle: 7deg; }
.silicon-intel .silicon-package { inset: 12% 12%; border-radius: 5%; border-color: #70add7; background: linear-gradient(140deg, #39759d, #154d77); box-shadow: 0 3px 0 #0c385e, 0 7px 0 #6496bc, 0 22px 25px -13px #123b6f4d; }
.intel-tile { border-radius: 4%; border-color: #b3ddf6; background: repeating-linear-gradient(0deg, transparent 0 5px, #b8dcfa33 5px 6px), repeating-linear-gradient(90deg, #387eaf 0 4px, #6aa8d1 4px 5px); }
.tile-primary { left: 10%; top: 12%; width: 42%; height: 55%; }
.tile-graphics { right: 10%; top: 12%; width: 31%; height: 38%; }
.tile-io { right: 10%; bottom: 12%; width: 31%; height: 32%; }
.tile-fabric { left: 10%; bottom: 12%; width: 42%; height: 15%; }
/* GPU and worker explainers */
.stack-explainers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: var(--block-gap); padding-top: var(--block-gap); margin-top: 0; border-top: 1px solid var(--line); }
.driver-explainer { --driver-progress: 0; --driver-x: 0; --driver-y: 0; --gpu-free: 1; --driver-match: clamp(0, calc(var(--driver-progress) * 2), 1); --driver-reserve: clamp(0, calc(var(--driver-progress) * 2 - 1), 1); min-width: 0; container: driver / inline-size; }
.cluster-explainer { --cluster-progress: 1; --cluster-x: 0; --cluster-y: 0; --worker-reveal: 1; --route-0-progress: 1; --route-1-progress: 1; --route-2-progress: 1; min-width: 0; }
.stack-explainers > article { display: flex; flex-direction: column; }
.stack-explainers h3 { font-size: clamp(1.8rem, 2.7vw, 2.55rem); line-height: 1.15; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
.explainer-controls { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: var(--space-tight); margin-top: var(--item-gap); }
.explainer-controls button { display: inline-flex; justify-content: center; align-items: center; flex: 1 1 auto; min-height: var(--control-target); padding: 9px 14px; border: 1px solid transparent; border-radius: 22px; background: transparent; color: var(--muted); font-size: var(--type-label); line-height: var(--line-label); font-weight: 600; }
.explainer-controls button[aria-pressed="true"] { color: var(--ink); }
.explainer-controls button:hover { color: var(--ink); }
.driver-stage, .cluster-stage { position: relative; width: 100%; max-width: 40rem; aspect-ratio: 600 / 400; margin: var(--item-gap) auto 0; flex-shrink: 0; perspective: 1000px; isolation: isolate; }
.driver-floor { position: absolute; z-index: -2; inset: 25% 4% 2%; border-radius: 50%; background: radial-gradient(ellipse, #c7dcf44d, transparent 70%); transform: rotate(-12deg); }
.driver-connections { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; transform: translate3d(calc(var(--driver-x) * 8px), calc(var(--driver-y) * 8px), 0); }
.driver-connection-base { stroke: var(--line); stroke-width: 2; stroke-dasharray: .008 .016; }
.driver-connection-current { stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--driver-progress)); }
.driver-device { position: absolute; z-index: 2; left: 8.3%; top: 56%; width: 35%; height: 28%; border-radius: 12%; border: 1px solid #7392b9; background: repeating-linear-gradient(90deg, transparent 0 14%, #d5e5fc1a 14% 15%), linear-gradient(135deg, #395f89, #18395e); box-shadow: 0 3px 0 #102b4b, 0 7px 0 #a7bedb, 0 19px 21px -9px #15375d40, inset 0 1px 1px #c8e3ff80; transform: translate3d(calc(var(--driver-x) * 8px), calc(var(--driver-y) * 8px), 0) rotateX(calc(28deg - var(--driver-progress) * 17deg - var(--driver-y) * 5deg)) rotateY(calc(var(--driver-x) * 7deg)) rotateZ(-10deg); }
.driver-gpu-die { position: absolute; inset: 16% 23%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8%; padding: 8%; border-radius: 5%; border: 1px solid #c5def8; background: #17293e; box-shadow: 0 2px 0 #08182b, 0 5px 9px #06162f4d; }
.driver-gpu-die i { background: linear-gradient(135deg, #a7c7e7, #5b84aa); border: 1px solid #d5eaff55; }
.driver-gpu-slot { position: absolute; bottom: -6%; left: 18%; right: 18%; height: 8%; background: repeating-linear-gradient(90deg, #b39762 0 3px, #2a3d4c 3px 5px); border-radius: 2px; }
.driver-record { position: absolute; display: grid; place-items: center; width: 30%; height: 21%; border: 1px solid #c7d6e8; border-radius: 11px; box-shadow: 0 4px 0 #a3b5cc, 0 15px 20px -8px #18375f30; transform: translate3d(calc(var(--driver-x) * 12px), calc((1 - var(--driver-match)) * -12px + var(--driver-y) * 9px), 0) rotateX(calc(20deg - var(--driver-match) * 12deg)) rotateZ(calc(-12deg + var(--driver-match) * 7deg)); }
.driver-record svg { width: 45%; height: 65%; }
.driver-installed { left: 4%; top: 10%; width: 27%; z-index: 2; background: linear-gradient(135deg, #eef3f9, #cad7e8); color: #5f748e; }
.driver-serving { left: 34%; top: 26%; z-index: 3; border-color: #7db5ef; background: linear-gradient(135deg, #387dc7, #164a83); color: #edf7ff; box-shadow: 0 4px 0 #194576, 0 15px 20px -8px #18375f40; }
.driver-profile { position: absolute; z-index: 3; left: 73%; top: 38%; width: 22%; height: 30%; display: grid; place-items: center; background: linear-gradient(145deg, #fff, #e0ebf9); border: 1px solid #b7cbe5; border-radius: 7% 19% 7% 7%; color: #175aa7; box-shadow: 0 4px 0 #a8bdd8, 0 18px 23px -9px #15375d29; transform: translate3d(calc((1 - var(--driver-match)) * 19px + var(--driver-x) * 11px), calc(var(--driver-y) * 11px), 0) rotateY(calc(-12deg + var(--driver-match) * 12deg)) rotateZ(calc(8deg - var(--driver-match) * 12deg)); }
.driver-profile svg { width: 62%; height: 70%; }
.profile-pin { position: absolute; right: -8%; bottom: 14%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #357bc8; border: 2px solid #e7f3ff; box-shadow: 0 3px 7px #133e6e33; opacity: var(--driver-match); }
.driver-reservation { position: absolute; z-index: 4; left: 68%; top: 62%; width: 16%; height: 24%; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #fff, #dce9fa); color: #1258ad; border: 1px solid #aec9ea; box-shadow: 0 4px 0 #9db6d5, 0 14px 20px -8px #163e7033; opacity: calc(.25 + var(--driver-reserve) * .75); transform: translate3d(calc(var(--driver-x) * 15px), calc((1 - var(--driver-reserve)) * 12px + var(--driver-y) * 12px), 0) scale(calc(.85 + var(--driver-reserve) * .15)); }
.driver-reservation svg { position: absolute; width: 61%; height: 65%; }
.reservation-lock { opacity: var(--gpu-free); }
.reservation-wait { opacity: calc(1 - var(--gpu-free)); color: #987335; }
.driver-object-labels { position: absolute; z-index: 6; inset: 0; pointer-events: none; font-size: var(--type-label); font-weight: 600; line-height: var(--line-label); }
.driver-object-labels > span { position: absolute; max-width: 38%; }
.driver-key-device { left: 8%; bottom: 0; }
.driver-key-installed { left: 3%; top: 0; }
.driver-key-serving { left: 39%; top: 15%; }
.driver-key-profile { right: 0; top: 18%; max-width: 30%; text-align: end; }
.driver-key-reservation { left: 67%; bottom: 0; max-width: 31%; }
.driver-explainer[data-active="0"] .driver-key-reservation, .driver-explainer[data-active="1"] .driver-key-reservation { visibility: hidden; }
.driver-captions { display: grid; margin-top: var(--space-body); }
.driver-captions > p { grid-area: 1 / 1; font-size: var(--type-small); line-height: var(--line-body); color: var(--muted); }
.driver-captions > p[data-active="false"] { opacity: 0; visibility: hidden; pointer-events: none; }
.explainer-actions { display: flex; flex-wrap: wrap; gap: var(--space-inline); align-items: center; margin-top: auto; padding-top: var(--item-gap); }
.detail-trigger > svg { width: 20px; height: 20px; flex-shrink: 0; }
.gpu-availability { display: inline-flex; align-items: center; gap: var(--space-inline); min-height: var(--control-target); padding: 0 4px; border: 0; background: transparent; color: var(--ink); font-size: var(--type-label); font-weight: 600; line-height: var(--line-label); }
.availability-track { position: relative; width: 36px; height: 22px; border-radius: var(--control-radius); background: light-dark(#aab8ca, #62738c); box-shadow: inset 0 1px 3px #12243d33; }
.availability-track i { position: absolute; width: 18px; height: 18px; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #12243d40; transition: translate var(--motion-response) var(--ease-response); }
.gpu-availability[aria-checked="true"] .availability-track { background: #178465; }
.gpu-availability[aria-checked="true"] .availability-track i { translate: 14px 0; }
.detail-dialog { width: 42rem; max-width: calc(100% - var(--page-gutter) * 2); max-height: calc(100svh - var(--page-gutter) * 2); margin: auto; padding: 0 var(--space-large) var(--space-large); border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--surface); color: var(--ink); box-shadow: 0 30px 100px #07182c55; overflow-y: auto; overscroll-behavior: contain; }
.detail-dialog::backdrop { background: #07182c70; backdrop-filter: blur(10px); }
.detail-dialog > header { position: sticky; top: 0; z-index: 1; background: var(--surface); display: flex; align-items: start; justify-content: space-between; gap: var(--space-body); padding-block: var(--space-large) var(--item-gap); margin-bottom: var(--space-tight); }
.detail-dialog h2 { font-size: var(--type-heading); letter-spacing: -.025em; line-height: 1.35; }
.detail-dialog .icon-button { flex: 0 0 var(--control-target); margin: -8px -8px 0 0; }
.detail-dialog .icon-button svg { width: 22px; height: 22px; }
.detail-dialog > p { margin-top: var(--space-body); font-size: var(--type-body); line-height: var(--line-body); overflow-wrap: normal; }
html[data-motion=running] .detail-dialog[open] { animation: hero-arrive var(--motion-response) var(--ease-response); }

.cluster-stage { overflow: clip; overflow-clip-margin: 0px; }
.cluster-ground { position: absolute; z-index: -1; inset: 20% 14% 4%; border-radius: 50%; background-image: radial-gradient(#789dc736 .7px, transparent .7px); background-size: 15px 15px; mask-image: radial-gradient(ellipse, #000, transparent 70%); transform: perspective(700px) rotateX(42deg) scale(.85); }
.cluster-network { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; transform: translate3d(calc(var(--cluster-x) * 6px), calc(var(--cluster-y) * 6px), 0); }
.cluster-route { stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
.cluster-route-primary { stroke: #1a70cb; stroke-dashoffset: calc(1 - var(--route-0-progress)); }
.cluster-route-upper { stroke: #347f89; stroke-dashoffset: calc(1 - var(--route-1-progress)); }
.cluster-route-lower { stroke: #7069a6; stroke-dashoffset: calc(1 - var(--route-2-progress)); }
.cluster-branch-extra { opacity: var(--worker-reveal); }
.cluster-packet { fill: var(--surface); stroke-width: 1.5; }
.cluster-packet path { fill: none; }
.packet-primary { stroke: #1a70cb; transform: translate(var(--packet-0-x, 190px), var(--packet-0-y, 200px)); }
.packet-upper { stroke: #347f89; transform: translate(var(--packet-1-x, 190px), var(--packet-1-y, 200px)); }
.packet-lower { stroke: #7069a6; transform: translate(var(--packet-2-x, 190px), var(--packet-2-y, 200px)); }
.cluster-editor { position: absolute; z-index: 2; left: 6.6667%; top: 36%; width: 25%; height: 28%; transform: translate3d(calc(var(--cluster-x) * 5px), calc(var(--cluster-y) * 5px), 0); }
.cluster-editor-screen { height: 84%; display: grid; place-items: center; border: 5px solid #b5c7df; border-radius: 9px 9px 5px 5px; background: linear-gradient(145deg, #244b79, #0c2342); box-shadow: 0 8px 14px #18375426; }
.cluster-editor-screen img { width: 48%; height: auto; }
.cluster-editor-base { position: absolute; bottom: 5%; left: -8%; right: -8%; height: 7%; border-radius: 2px 2px 7px 7px; background: linear-gradient(#e8eff7, #94aac7); }
.cluster-worker { position: absolute; z-index: 2; left: 66.6667%; width: 20%; height: 25%; transform: translate3d(calc(var(--cluster-x) * 8px), calc(var(--cluster-y) * 8px), 0) rotateY(calc(var(--cluster-x) * 5deg)); }
.cluster-worker-primary { top: 37.5%; }
.cluster-worker-upper { top: 6.25%; }
.cluster-worker-lower { top: 68.75%; }
.cluster-worker-body { position: absolute; inset: 15% 0; border-radius: 15%; border: 1px solid #b6cce5; background: linear-gradient(135deg, #fff, #d0dff1); box-shadow: 0 4px 0 #96adc9, 0 7px 0 #e6eef8, 0 13px 18px -7px #18375430; transform: rotateX(calc(22deg - var(--cluster-progress) * 12deg)) rotateZ(-7deg); }
.cluster-worker-body::after { content: ''; position: absolute; right: 14%; bottom: 12%; width: 21%; height: 4%; border-radius: 2px; background: #7c96b6; }
.cluster-worker-glyph { position: absolute; left: 30%; top: 26%; width: 40%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #2567b1; background: #f4f9ff; border: 1px solid #b5cbe5; }
.cluster-worker-glyph svg { width: 80%; height: 80%; }
.cluster-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--item-gap); margin-top: 17px; color: var(--muted); font-size: var(--type-label); line-height: var(--line-label); }
.cluster-labels > span:last-child { text-align: end; }
.driver-key-list { list-style: none; margin: var(--item-gap) 0 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-inline) var(--item-gap); color: var(--ink); font-size: var(--type-label); line-height: var(--line-body); }
.driver-key-list li { display: flex; align-items: start; gap: var(--space-inline); min-width: 0; }
.driver-key-list svg { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; color: var(--blue); }
.driver-key-list span { min-width: 0; overflow-wrap: anywhere; }
.faq summary { display: flex; align-items: center; gap: var(--space-inline); min-height: var(--control-target); padding-block: var(--space-body); cursor: pointer; list-style: none; color: var(--ink); font-size: var(--type-label); line-height: var(--line-label); font-weight: 600; overflow-wrap: anywhere; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ''; width: .45rem; height: .45rem; flex: 0 0 .45rem; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion-response) var(--ease-response); }
.faq details[open] > summary::before { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq details > p { margin: 0 0 var(--space-body) calc(.45rem + var(--space-inline)); max-width: 70ch; color: var(--muted); font-size: var(--type-small); line-height: var(--line-body); overflow-wrap: anywhere; }
/* Scroll-driven story objects */
.narrative { position: relative; isolation: isolate; --narrative-progress: 1; --narrative-x: 0; --narrative-y: 0; }
.narrative-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: -1; fill: none; }
.narrative-base { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 6; }
.narrative-current { stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--narrative-progress)); filter: drop-shadow(0 2px 4px #167cff30); }
.narrative-dot { fill: var(--surface); stroke: var(--blue); stroke-width: 2; transform: translate(var(--narrative-dot-x, 0px), var(--narrative-dot-y, 0px)); opacity: var(--narrative-progress); }
.narrative [data-stage] { --stage-progress: 1; min-width: 0; display: block; }
.narrative-object { position: relative; width: 132px; height: 132px; margin-bottom: var(--item-gap); perspective: 650px; }
.object-shadow { position: absolute; width: 96px; height: 26px; left: 12px; top: 93px; border-radius: 50%; background: radial-gradient(ellipse, #274f8d4d, transparent 72%); scale: calc(.8 + var(--stage-progress) * .2); opacity: calc(.45 + var(--stage-progress) * .55); }
.object-face, .object-depth { position: absolute; inset: 16px 28px 25px 10px; border-radius: 19px; transform: translate3d(calc(var(--narrative-x) * 6px), calc((1 - var(--stage-progress)) * -28px + var(--narrative-y) * 6px), 0) rotateX(calc(16deg + (1 - var(--stage-progress)) * 18deg - var(--narrative-y) * 7deg)) rotateY(calc(-12deg + var(--narrative-x) * 12deg)) rotateZ(calc(-8deg + var(--stage-progress) * 8deg)); }
.object-depth { background: linear-gradient(125deg, #cadcf3, #6986ac); translate: 0 7px; box-shadow: 0 3px 0 #d8e5f5, 0 13px 20px -5px #15386733; }
.object-face { display: grid; place-items: center; overflow: hidden; color: #075fd6; border: 1px solid #fff; background: linear-gradient(135deg, #fff, #e2ecf9 70%, #bbcee7); box-shadow: inset 1px 1px 2px #fff, inset -1px -1px 2px #7898c13d; }
.narrative .object-face > svg { width: 46%; height: 46%; color: inherit; margin: 0; stroke-width: 1.2; }
.object-light { position: absolute; inset: 0; background: linear-gradient(calc(110deg + var(--narrative-x) * 30deg), transparent 15%, #fff9 35%, transparent 58%); translate: calc((var(--stage-progress) - .5) * 105%) 0; opacity: .6; }
.object-satellite { position: absolute; z-index: 2; right: 7px; bottom: 18px; width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(145deg, #2489ff, #0754bc); border: 1px solid #6db3ff; box-shadow: 0 3px 0 #06458f, 0 10px 18px #1c5ba72b, inset 0 1px 0 #ffffff61; color: white; transform: translate3d(calc((1 - var(--stage-progress)) * 28px + var(--narrative-x) * 11px), calc((1 - var(--stage-progress)) * -20px + var(--narrative-y) * 11px), 0) rotate(calc(-20deg + var(--stage-progress) * 27deg)); opacity: calc(.25 + var(--stage-progress) * .75); }
.narrative .object-satellite > svg { width: 58%; height: 58%; color: #fff; margin: 0; }
.object-file .object-face, .object-file .object-depth { inset: 10px 38px 24px 18px; border-radius: 9px 20px 9px 9px; }
.object-check .object-face, .object-check .object-depth { border-radius: 50%; inset: 17px 26px 25px 14px; }
.object-stack .object-face, .object-stack .object-depth { inset: 34px 22px 29px 6px; border-radius: 15px; }
.object-stack .object-depth { box-shadow: 0 8px 0 #96afd0, 0 11px 0 #e1eafa, 0 19px 0 #7694ba, 0 22px 0 #c5d5ec, 0 30px 25px -14px #15386755; }
.object-window .object-face, .object-window .object-depth { inset: 24px 16px 33px 0; border-radius: 13px; }
.object-window .object-face { color: #fff; background: linear-gradient(140deg, #365d94, #152b4e); border: 4px solid #c9d8ec; }
.object-spark .object-face, .object-spark .object-depth { inset: 13px 29px 26px 14px; border-radius: 30% 50% 35% 50%; }
.object-spark .object-face { background: conic-gradient(from 45deg, #fce9ff, #d7dfff, #d8f6ff, #fff, #fce9ff); color: #6951bc; }
.object-spark .object-face > svg { width: 60%; height: 60%; transform: rotate(calc(-25deg + var(--stage-progress) * 50deg)); }
.object-command .object-face, .object-command .object-depth { inset: 17px 28px 25px 10px; border-radius: 26px; }
.object-command .object-face { background: linear-gradient(145deg, #7d9eff, #4757bd); color: #fff; }
.object-macs .object-face, .object-macs .object-depth { inset: 25px 13px 28px 0; border-radius: 11px; }
.object-link .object-face, .object-link .object-depth { border-radius: 26px 26px 40px 40px; }
.capacity .narrative-current { stroke: #8abbff; }
.capacity .narrative-base { stroke: #91b2dd55; }
.capacity .narrative-dot { stroke: #9bceff; fill: #18375f; }
.setup-narrative { margin: var(--block-gap) 0 var(--grid-gap); }
.narrative [data-stage] p { max-width: 46ch; text-wrap: pretty; }
/* Disclosure and support */
.faq { max-width: 900px; }
.faq h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin-bottom: var(--block-gap); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.support { text-align: center; border-top: 1px solid var(--line); }
.support-mark img { margin: 0 auto var(--item-gap); filter: drop-shadow(0 14px 14px #15478424); }
.support .section-intro { margin-inline: auto; max-width: 510px; }
.support-safety { color: var(--muted); font-size: var(--type-caption); max-width: 390px; margin: var(--item-gap) auto 0; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--item-gap); border-top: 1px solid var(--line); padding-block: 35px 40px; flex-wrap: wrap; }
.footer-brand p { color: var(--muted); font-size: var(--type-caption); margin-top: 4px; }
.footer-links { display: flex; gap: var(--space-tight) var(--item-gap); font-size: var(--type-caption); flex-wrap: wrap; }
.footer-links a { min-height: var(--control-target); display: flex; align-items: center; gap: 9px; }
.footer-links a:hover { color: var(--blue); }
/* Policy and error pages */
.privacy-main { padding-block: 175px 100px; container: policy / inline-size; }
.policy-hero h1 { font-size: var(--type-title); white-space: pre-line; }
.policy-hero .section-intro { max-width: 700px; }
.draft-notice { margin-top: var(--block-gap); padding: var(--item-gap) var(--space-large); background: var(--wash); border: 1px solid var(--line); border-inline-start: 3px solid var(--blue); border-radius: 4px 18px 18px 4px; font-size: var(--type-small); }
.draft-notice strong { font-weight: 650; }
.draft-notice p { color: var(--muted); margin-top: 10px; line-height: 1.8; }
.policy-layout { display: grid; gap: var(--grid-gap); margin-top: var(--block-gap); }
.policy-nav { position: static; top: 120px; align-self: start; max-height: none; overflow-y: auto; scrollbar-width: thin; padding: 4px 8px 12px 0; }
.policy-nav h2 { font-size: var(--type-label); line-height: 1.5; letter-spacing: 0; font-weight: 650; margin-bottom: 17px; }
.policy-nav ol { padding-inline-start: 18px; font-size: var(--type-caption); color: var(--muted); }
.policy-nav li { padding: 3px 0; }
.policy-nav a { display: inline-block; padding-block: 5px; line-height: 1.5; }
.policy-nav a:hover { color: var(--blue); }
.print-policy { font-size: var(--type-caption); margin-top: 10px; }
.policy-section { padding-bottom: var(--block-gap); margin-bottom: var(--block-gap); border-bottom: 1px solid var(--line); }
.policy-section h2 { font-size: 1.65rem; letter-spacing: -.03em; line-height: 1.3; margin-bottom: var(--item-gap); }
.policy-section p { margin-top: var(--space-body); line-height: 1.85; color: var(--muted); font-size: var(--type-small); overflow-wrap: anywhere; }
.policy-reference { font-size: var(--type-label); margin-bottom: var(--space-large); }
.notfound { min-height: 80svh; padding-block: 200px 100px; }
.notfound h1 { font-size: clamp(2.25rem, 6vw, 5rem); white-space: pre-line; }
.policy-hero h1, .notfound h1 { overflow-wrap: anywhere; }
/* Motion lifecycle */
html[data-motion=paused] *, html[data-motion=paused] *::before, html[data-motion=paused] *::after { animation-play-state: paused !important; transition-duration: 0s !important; }
@keyframes hero-arrive { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
/* Responsive states: named containers, disjoint ranges. */
@container header (width > 48rem) {
  .desktop-nav { display: flex; }
  .menu-toggle { display: none; }
}
@container header (width <= 48rem) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions > .button { display: none; }
}
@container header (width <= 18rem) {
  .brand span { display: none; }
}
@container hero (width <= 18rem) {
  .task-label { display: none; }
}
@container hardware (width > 48rem) {
  .silicon-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container hardware (20rem < width <= 48rem) {
  .silicon-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container hardware (width <= 20rem) {
  .silicon-strip { grid-template-columns: minmax(0, 1fr); }
}
@container driver (width > 22rem) {
  .driver-key-list { display: none; }
}
@container driver (width <= 22rem) {
  .driver-object-labels { display: none; }
  .driver-key-list { display: grid; }
}
@container policy (width > 52rem) {
  .policy-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .policy-nav { position: sticky; max-height: calc(100svh - 150px); }
}
@container policy (width <= 52rem) {
  .policy-layout { grid-template-columns: 1fr; }
  .policy-nav { position: static; max-height: none; }
}
/* User accessibility preferences and print. */
@media (prefers-reduced-motion: reduce) {
  .silicon-strip { --silicon-progress: 1 !important; --silicon-x: 0 !important; --silicon-y: 0 !important; }
  .driver-explainer { --driver-x: 0 !important; --driver-y: 0 !important; }
  .cluster-explainer { --cluster-x: 0 !important; --cluster-y: 0 !important; }
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-art { --pointer-x: 0 !important; --pointer-y: 0 !important; --scroll-progress: 0 !important; }
  .ribbon-current { stroke-dasharray: none; opacity: .5; }
  .button, .icon-button, .explainer-controls button { scale: 1; }
  .narrative [data-stage] { --stage-progress: 1 !important; }
  .narrative { --narrative-x: 0 !important; --narrative-y: 0 !important; --narrative-progress: 1 !important; }
  .object-light, .narrative-dot { display: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass, .mobile-nav, .explainer-controls button[aria-pressed="true"] { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--muted); }
}
@media (prefers-contrast: more) {
  :root { --muted: light-dark(#364257, #d8e6f8); --line: light-dark(#748197, #8dabc7); }
  .capacity .section-intro, .capacity .feature p { color: #e3ebf8; }
  .task-label { color: #123d7a; background: #fff; border-color: #5e7596; }
}
@media print {
  :root { color-scheme: light; background: #fff; color: #000; font-size: 11pt; }
  body { background: #fff; color: #000; }
  .site-header, .skip-link, .site-footer, .policy-nav, .policy-reference, .policy-content > .button { display: none; }
  .wrap { width: 100%; }
  .privacy-main { padding: 0; }
  .policy-hero h1 { font-size: 36pt; }
  .policy-layout { display: block; margin-top: 30px; }
  .draft-notice { background: #fff; color: #000; border-color: #777; }
  .draft-notice p, .policy-section p, .section-intro { color: #222; font-size: 11pt; }
  .policy-section { margin-bottom: 20px; padding-bottom: 18px; border-color: #aaa; }
  .policy-section h2 { break-after: avoid; font-size: 17pt; }
  .policy-section p { widows: 3; orphans: 3; }
}
@media (forced-colors: active) {
  .glass, .button, .journey, .silicon-package { border: 1px solid CanvasText; }
  .button.primary { background: ButtonFace; color: ButtonText; }
  .hero h1 span, .text-link, .policy-content a:not(.button) { color: LinkText; }
}