:root {
  color-scheme: light dark;
  --paper: #fafbfe; --surface: #fff; --ink: #101c31; --muted: #526179;
  --blue: #075fd6; --wash: #edf2fa; --line: #d7dfec;
  --glass: rgb(249 252 255 / .76); --glass-edge: rgb(255 255 255 / .94);
  --shadow: 0 18px 48px rgb(22 46 84 / .12), 0 3px 8px rgb(22 46 84 / .06);
  --page-gutter: 48px; --section-space: 110px; --scroll-clearance: 115px;
  --block-gap: 56px; --item-gap: 24px; --grid-gap: 42px; --space-large: 32px; --control-target: 44px;
  --ease-response: cubic-bezier(.22, 1, .36, 1);
  --motion-response: 280ms; --motion-reveal: 800ms;
  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;
}
* { box-sizing: border-box; }
body { margin: 0; }
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: clamp(4rem, 7.5vw, 7.25rem); font-weight: 650; letter-spacing: -.055em; line-height: .99; }
h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 620; letter-spacing: -.06em; line-height: 1.07; white-space: pre-line; }
h3 { font-size: 1.2rem; 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: #b7d5ff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.wrap { width: min(1160px, calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.eyebrow { font-size: .83rem; letter-spacing: .045em; font-weight: 650; margin-bottom: 25px; }
.section-intro { color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.28rem); line-height: 1.65; max-width: 600px; margin-top: 26px; text-wrap: pretty; }
.section-heading { margin-bottom: var(--block-gap); }
.actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.button { min-height: 50px; padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border-radius: 100px; font-size: .9rem; font-weight: 600; border: 1px solid transparent; line-height: 1.5; 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: 16px; font-size: .8rem; }
.text-link { font-size: .9rem; font-weight: 600; display: inline-flex; gap: 14px; align-items: center; min-height: var(--control-target); }
.text-link:hover { color: var(--blue); }
.glass { background: var(--glass); backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%); 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); }
.site-header { container-type: inline-size; position: fixed; z-index: 30; inset-block-start: 20px; inset-inline: 0; width: min(1240px, calc(100% - 48px)); margin-inline: auto; min-height: 70px; padding: 8px 12px 8px 18px; border-radius: 100px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 660; font-size: 1.08rem; letter-spacing: -.045em; }
.brand img { width: 40px; height: 40px; flex-shrink: 0; }
.desktop-nav { position: relative; display: flex; justify-content: center; gap: 8px; margin-inline: auto; padding: 4px; isolation: isolate; }
.desktop-nav a { position: relative; z-index: 1; font-size: .8rem; font-weight: 550; color: var(--muted); min-height: var(--control-target); padding-inline: 14px; 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: 100px; background: rgb(223 233 246 / .8); 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: 8px; }
.icon-button { width: var(--control-target); height: var(--control-target); border: 0; border-radius: 50%; background: transparent; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; }
.icon-button:hover { background: var(--wash); }
.motion-toggle { color: var(--muted); }
.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: absolute; top: calc(100% + 9px); inset-inline: 0; padding: 18px; border-radius: 25px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); }
.mobile-nav a { display: flex; align-items: center; min-height: 50px; padding-inline: 12px; }
.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; }
.hero { position: relative; min-height: min(960px, 100svh); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-block: 165px 130px; overflow: clip; overflow-clip-margin: 24px; }
.hero-copy { position: relative; min-width: 0; z-index: 8; }
.hero .eyebrow { margin-bottom: 28px; display: flex; align-items: center; gap: 10px; }
.tiny-bridge { color: var(--blue); width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.hero h1 { font-size: clamp(4.4rem, 7.5vw, 7.25rem); }
.hero h1 span { color: var(--blue); }
.hero-description { color: var(--muted); font-size: 1.14rem; line-height: 1.65; max-width: 420px; margin-top: 30px; }
.availability { color: var(--muted); font-size: .7rem; margin-top: 24px; }
.hero-visual { width: 100%; max-width: 620px; min-width: 0; justify-self: center; }
.hero-art { --pointer-x: 0; --pointer-y: 0; --scroll-progress: 0; --signal-progress: 0; width: 100%; aspect-ratio: 1; position: relative; isolation: isolate; perspective: 1200px; }
.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: 115 760; stroke-dashoffset: calc(875 - var(--signal-progress) * 875); }
.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 { color: #075bc6; }
.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-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%; filter: drop-shadow(0 27px 20px #00122e70) drop-shadow(0 4px 3px #05245240); }
.hero-captions { display: flex; justify-content: space-between; gap: 24px; margin: 16px 12px 0; }
.art-label { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.art-label strong { display: block; font-size: .8rem; font-weight: 620; letter-spacing: -.015em; }
.art-label span:not(.label-dot) { display: block; color: var(--muted); font-size: .75rem; margin-top: 3px; }
.label-dot { width: 6px; height: 6px; border-radius: 50%; background: #6e809c; }
.label-dot.blue { background: var(--blue); box-shadow: 0 0 0 3px #428dff12; }
.task-label { position: absolute; z-index: 7; padding: 8px 14px; font-size: .68rem; font-weight: 650; color: #1757ac; border: 1px solid #d0e0f5; border-radius: 10px; background: #f6faff; 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%; }
.scroll-hint { position: absolute; bottom: 40px; left: 0; right: 0; display: flex; align-items: center; gap: 15px; color: var(--muted); font-size: .71rem; }
.scroll-line { width: 38px; height: 1px; background: #95a6be; }
.scroll-hint > span:last-child { margin-inline-start: auto; font-size: 1.15rem; }
.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(3, 1fr); gap: 35px; margin-top: var(--block-gap); padding-top: var(--space-large); border-top: 1px solid var(--line); }
.principle { display: flex; align-items: center; gap: 17px; }
.principle svg { width: 27px; height: 27px; color: var(--blue); }
.principle strong { display: block; font-size: .95rem; font-weight: 600; }
.principle > div:last-child > span { display: block; color: var(--muted); font-size: .75rem; margin-top: 3px; }
.how { padding-bottom: 65px; }
.how .section-heading { margin-bottom: 15px; }
.story-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; position: relative; }
.story-sticky { position: sticky; top: 140px; align-self: start; padding-block: 55px; }
.journey { aspect-ratio: 600/440; position: relative; border: 1px solid #dce4ef; border-radius: 34px; background: linear-gradient(145deg, #fff 5%, #f6f9ff 45%, #dce8f8); box-shadow: 0 2px 3px #fff inset, 0 28px 60px -30px #304e7c40, 0 5px 14px #2a4b7a0a; overflow: hidden; }
.journey-grid { position: absolute; inset: 0; border-radius: inherit; 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(1.2); 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: 3 5; }
.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%; }
.editor-screen { aspect-ratio: 1.5; background: linear-gradient(135deg, #1b365a, #0c1b31); border: 6px solid #b7c5d9; border-radius: 9px 9px 4px 4px; padding: 11px 10px; box-shadow: 0 11px 15px #253b5c26, inset 0 1px 0 #000; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 3px; gap: 5px; }
.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: 8px; 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; }
.snapshot-packet { position: absolute; top: 31%; left: 49%; padding: 10px; background: var(--surface); color: var(--blue); border: 1px solid #b9cceb; border-radius: 13px; box-shadow: 0 4px 0 #c3d1e3, 0 17px 22px #1e4b8b24; opacity: .95; transform: translate(-50%, -50%) rotate(calc(-9deg + var(--story-progress, 0) * 18deg)); }
.journey-label { position: absolute; top: 79%; color: var(--muted); font-size: .72rem; font-weight: 600; }
.journey-editor { left: 17%; }
.journey-worker { right: 11%; }
.journey-check { position: absolute; top: 40%; right: 9%; width: 29px; height: 29px; display: grid; place-items: center; background: var(--blue); color: #fff; border-radius: 50%; font-size: .9rem; opacity: var(--result-opacity, 0); transform: scale(var(--result-scale, .6)); }
.journey-icon { position: absolute; left: 6%; top: 6%; }
.diagram-caption { color: var(--muted); font-size: .66rem; margin: 16px 16px 0; }
.story-step { min-height: 65vh; display: flex; flex-direction: column; justify-content: center; padding-block: 70px; }
.story-step .eyebrow { color: var(--blue); margin-bottom: 18px; }
.story-step h3 { font-size: clamp(2.3rem, 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: .98rem; line-height: 1.75; margin-top: 24px; max-width: 415px; }
.story-step .step-note { padding-top: 21px; border-top: 1px solid var(--line); font-size: .79rem !important; }
.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: 340px; }
.capacity-heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--block-gap); }
.feature { padding-top: 30px; border-top: 1px solid #ffffff30; }
.feature svg { width: 30px; height: 30px; color: #93c2ff; margin-bottom: 26px; }
.feature p { color: #bdc9da; font-size: .85rem; line-height: 1.8; margin-top: 15px; }
.capacity-note { border-top: 1px solid #ffffff30; margin-top: 48px; padding-top: 22px; color: #b5c3d9; font-size: .75rem; max-width: 820px; }
.stack-section { position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--paper)); }
.silicon-strip { --silicon-progress: 0; --silicon-x: 0; --silicon-y: 0; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 32px; margin-block: var(--block-gap); padding: 10px; }
.silicon-vendor { --silicon-accent: #8e99aa; --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-accent: #76b900; --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-accent: #ed1c24; --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-accent: #0068b5; --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%; }
.silicon-caption { grid-column: 1 / -1; max-width: 760px; color: var(--muted); font-size: .72rem; line-height: 1.7; }
@media (max-width: 820px) {
  .silicon-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8rem, calc((100% - 24px) / 2))), 1fr)); gap: var(--item-gap); margin-block: var(--block-gap); }
}
@media (max-width: 600px) {
  .silicon-strip { padding-inline: 8px; }
  .silicon-vendor figcaption { font-size: 1.1rem; }
  .silicon-caption { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .silicon-strip { --silicon-progress: 1 !important; --silicon-x: 0 !important; --silicon-y: 0 !important; } }
.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; }
.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: 4px; padding: 5px; border-radius: 28px; margin-top: 25px; }
.explainer-controls button { display: inline-flex; justify-content: center; align-items: center; flex: 1 1 auto; min-height: var(--control-target); padding: 9px 16px; border: 1px solid transparent; border-radius: 22px; background: transparent; color: var(--muted); font-size: .78rem; line-height: 1.4; font-weight: 600; }
.explainer-controls button[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 2px 7px #16345814, inset 0 1px 1px #fff5; }
.explainer-controls button:hover { color: var(--ink); }
.driver-stage, .cluster-stage { position: relative; width: 100%; max-width: 640px; 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: 14%; top: 27%; z-index: 2; background: linear-gradient(135deg, #eef3f9, #cad7e8); color: #5f748e; }
.driver-serving { left: 21%; top: 18%; 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: 64%; top: 20%; width: 22%; height: 35%; 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-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 9px 16px; margin-top: 18px; font-size: .73rem; line-height: 1.6; color: var(--muted); }
.driver-legend > span { display: flex; align-items: baseline; gap: 8px; }
.driver-legend > span::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 2px; background: #3e628c; }
.driver-legend > .driver-key-installed::before { background: #9aafca; }
.driver-legend > .driver-key-serving::before { background: #2879c8; }
.driver-legend > .driver-key-profile::before { border-radius: 1px 4px 1px 1px; background: #d4e3f6; border: 1px solid #7d9fc8; }
.driver-legend > .driver-key-reservation::before { border-radius: 50%; background: #457fbf; }
.explainer-illustration { margin-top: 18px; color: var(--muted); font-size: .71rem; line-height: 1.75; }
.driver-captions { display: grid; margin-top: 19px; }
.driver-captions > p { grid-area: 1 / 1; font-size: .9rem; line-height: 1.8; color: var(--muted); }
.driver-captions > p[data-active="false"] { opacity: 0; visibility: hidden; pointer-events: none; }
.driver-busy-toggle { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--blue); text-align: start; text-decoration: underline; text-underline-offset: 4px; font-size: .78rem; }
.explainer-details { margin-top: var(--item-gap); padding-top: 15px; border-top: 1px solid var(--line); }
.cluster-explainer .explainer-details { margin-top: auto; }
.explainer-details summary { cursor: pointer; min-height: var(--control-target); padding-block: 9px; color: var(--ink); font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.explainer-details p { margin-top: 15px; color: var(--muted); font-size: .86rem; line-height: 1.85; overflow-wrap: anywhere; }
.cluster-stage { overflow: clip; overflow-clip-margin: 0px; }
.cluster-ground { position: absolute; z-index: -1; inset: 20% 5% 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); }
.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: 24px; margin-top: 17px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.cluster-labels > span:last-child { text-align: end; }
@media (max-width: 600px) {
  .stack-explainers { gap: var(--block-gap); padding-top: var(--block-gap); }
  .stack-explainers h3 { font-size: 1.8rem; }
  .explainer-controls { margin-top: 22px; }
  .explainer-controls button { padding-inline: 12px; font-size: .76rem; }
  .driver-stage, .cluster-stage { margin-top: 23px; }
  .driver-legend { font-size: .75rem; gap: 8px 14px; }
  .cluster-labels { font-size: .75rem; gap: 18px; }
  .driver-record { border-radius: 7px; }
  .cluster-editor-screen { border-width: 3px; border-radius: 6px 6px 3px 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .driver-explainer { --driver-x: 0 !important; --driver-y: 0 !important; }
  .cluster-explainer { --cluster-x: 0 !important; --cluster-y: 0 !important; }
}
.roadmap-note { display: grid; grid-template-columns: 1fr 1.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: .75rem; color: var(--blue); margin-bottom: 18px; }
.roadmap-note p { margin-top: 0; font-size: .95rem; 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: .82rem; 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 { gap: var(--grid-gap); margin-top: var(--block-gap); }
.app-features .feature p { color: var(--muted); }
.app-features .feature svg { color: var(--blue); }
.setup { background: linear-gradient(145deg, var(--wash), var(--paper)); border-block: 1px solid var(--line); }
.setup-steps { list-style: none; padding: 0; margin: 65px 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; counter-reset: setup; }
.setup-steps li { counter-increment: setup; position: relative; padding-top: 58px; border-top: 1px solid #c7d4e7; }
.setup-steps li::before { content: '0' counter(setup); position: absolute; top: 16px; font-size: .8rem; color: var(--blue); font-variant-numeric: tabular-nums; font-weight: 650; }
.setup-steps p { margin-top: 16px; font-size: .87rem; line-height: 1.8; color: var(--muted); }
.faq { max-width: 900px; }
.faq h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin-bottom: 42px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 80px; padding-block: 22px; font-size: .98rem; font-weight: 550; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.45rem; font-weight: 350; color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 40px 28px 0; font-size: .92rem; line-height: 1.8; color: var(--muted); }
.support { text-align: center; border-top: 1px solid var(--line); padding-top: 80px; }
.support-mark img { margin: 0 auto 25px; filter: drop-shadow(0 14px 14px #15478424); }
.support .section-intro { margin-inline: auto; max-width: 510px; }
.support .button { margin-top: 32px; }
.support-safety { color: var(--muted); font-size: .7rem; max-width: 390px; margin: 20px auto 0; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-top: 1px solid var(--line); padding-block: 35px 40px; }
.footer-brand p { color: var(--muted); font-size: .7rem; margin-top: 4px; }
.footer-links { display: flex; gap: 28px; font-size: .75rem; 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); }
.privacy-main { padding-block: 175px 100px; }
.policy-hero h1 { font-size: clamp(4rem, 7vw, 6.2rem); white-space: pre-line; }
.policy-hero .section-intro { max-width: 700px; }
.draft-notice { margin-top: 44px; padding: 26px 30px; background: var(--wash); border: 1px solid var(--line); border-inline-start: 3px solid var(--blue); border-radius: 4px 18px 18px 4px; font-size: .86rem; }
.draft-notice strong { font-weight: 650; }
.draft-notice p { color: var(--muted); margin-top: 10px; line-height: 1.8; }
.policy-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 80px; margin-top: 70px; }
.policy-nav { position: sticky; top: 120px; align-self: start; max-height: calc(100svh - 150px); overflow-y: auto; scrollbar-width: thin; padding: 4px 8px 12px 0; }
.policy-nav h2 { font-size: .85rem; line-height: 1.5; letter-spacing: 0; font-weight: 650; margin-bottom: 17px; }
.policy-nav ol { padding-inline-start: 18px; font-size: .75rem; 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: .75rem; margin-top: 10px; }
.policy-section { padding-bottom: 42px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.policy-section h2 { font-size: 1.65rem; letter-spacing: -.03em; line-height: 1.3; margin-bottom: 22px; }
.policy-section p { margin-top: 18px; line-height: 1.85; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.policy-content a:not(.button) { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.policy-reference { font-size: .8rem; margin-bottom: 36px; }
.notfound { min-height: 80svh; padding-block: 200px 100px; }
.notfound h1 { font-size: clamp(2.25rem, 6vw, 5rem); white-space: pre-line; }
.notfound .button { margin-top: 32px; }
@keyframes hero-arrive { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.hero-copy, .hero-art { animation: hero-arrive var(--motion-reveal) var(--ease-response) both; }
html[data-motion=paused] *, html[data-motion=paused] *::before, html[data-motion=paused] *::after { animation-play-state: paused !important; transition-duration: 0s !important; }
.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; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #0b101b; --surface: #131c2c; --ink: #edf3fc; --muted: #a6b4ca; --blue: #8cbfff; --wash: #141f32; --line: #2b3b55; --glass: rgb(19 28 44 / .86); --glass-edge: rgb(165 192 234 / .18); --shadow: 0 10px 35px rgb(0 0 0 / .2); }
  .button.primary { color: #fff; }
  .scene-well { box-shadow: inset 0 1px 2px #a5d2ff77, inset 0 -2px 3px #020a15, 0 30px 70px -24px #000b; }
  .task-label { color: #b3d5ff; background: #142a47; border-color: #3b5c85; box-shadow: 0 3px 0 #07152b, 0 12px 17px #0005, inset 0 1px 0 #5d85b84d; }
  .journey { border-color: #324866; background: linear-gradient(145deg, #1b2d47, #12223b 55%, #18365b); box-shadow: inset 0 1px 1px #8bafd524, 0 28px 60px -30px #000b; }
  .nav-indicator { background: #304663b3; box-shadow: inset 0 1px 1px #abc8ef22; }
  .capacity { background: radial-gradient(ellipse at 78% 0%, #1a447b 0, transparent 48%), #0c192c; color: #f0f5fc; }
  .setup-steps li { border-color: var(--line); }
}
@media (min-width: 1450px) { .hero { min-height: 850px; } }
@media (max-width: 1100px) {
  :root { --page-gutter: 36px; }
  .hero h1 { font-size: clamp(4.6rem, 8.5vw, 6.7rem); }
  .story-layout { gap: 50px; }
  .capacity-heading { gap: 40px; }
  .capacity .section-intro { max-width: 300px; font-size: 1.05rem; }
  .policy-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 45px; }
}
@media (max-width: 820px) {
  :root { --page-gutter: 24px; --section-space: 80px; --block-gap: 40px; --grid-gap: 28px; }
  .site-header { width: calc(100% - 28px); inset-block-start: 14px; padding: 6px 8px 6px 12px; min-height: 62px; gap: 8px; }
  .brand { font-size: .98rem; }
  .brand img { width: 36px; height: 36px; }
  .desktop-nav { gap: 0; }
  .desktop-nav a { font-size: .7rem; padding-inline: 9px; }
  .header-actions { gap: 2px; }
  .hero { min-height: auto; padding-block: 150px 100px; grid-template-columns: 1fr; }
  .hero-copy { max-width: 580px; }
  .hero h1 { font-size: clamp(4.5rem, 12vw, 6.7rem); }
  .hero-description { max-width: 450px; }
  .scroll-hint { bottom: 15px; }
  .story-layout { gap: 35px; grid-template-columns: 1fr 1fr; }
  .story-sticky { top: 130px; padding-block: 40px; }
  .story-step { min-height: 60vh; }
  .editor-screen { padding: 7px; gap: 3px; grid-auto-rows: 2px; border-width: 4px; }
  .journey { border-radius: 23px; }
  .journey-label { font-size: .63rem; }
  .journey-icon { width: 38px; height: 38px; }
  .snapshot-packet { padding: 6px; border-radius: 9px; }
  .snapshot-packet svg { width: 19px; height: 19px; }
  .journey-check { width: 23px; height: 23px; font-size: .7rem; }
  .capacity-heading { display: block; }
  .capacity .section-intro { max-width: 540px; margin-top: 28px; font-size: 1.1rem; }
  .feature-grid { gap: 26px; }
  .feature h3 { font-size: 1rem; }
  .feature p { font-size: .8rem; }
  .setup-steps { gap: 26px; }
  .site-footer { align-items: flex-start; }
  .footer-links { gap: 10px 22px; justify-content: flex-end; }
  .policy-layout { grid-template-columns: 1fr; margin-top: 40px; gap: 40px; }
  .policy-nav { position: static; max-height: none; }
  .policy-nav ol { columns: 2; column-gap: 40px; }
  .policy-nav li { break-inside: avoid; }
  .privacy-main { padding-top: 140px; }
}
@media (max-width: 600px) {
  :root { --page-gutter: 20px; --section-space: 66px; }
  h1 { font-size: 4.1rem; }
  h2 { font-size: clamp(2.45rem, 9.5vw, 3.5rem); }
  .eyebrow { font-size: .73rem; margin-bottom: 21px; }
  .section-intro { font-size: 1rem; margin-top: 23px; }
  .desktop-nav { display: none; }
  .header-actions { margin-inline-start: auto; }
  .header-actions .button { display: none; }
  .site-header { border-radius: 32px; padding-inline: 8px 6px; }
  .icon-button { width: var(--control-target); height: var(--control-target); }
  .hero { padding-top: 135px; padding-bottom: 70px; overflow: clip; }
  .hero .eyebrow { font-size: .71rem; gap: 8px; }
  .hero h1 { font-size: clamp(3.8rem, 16vw, 5.5rem); }
  .hero-description { font-size: 1rem; margin-top: 25px; }
  .actions { gap: 20px; margin-top: 25px; }
  .button { font-size: .8rem; gap: 18px; padding-inline: 20px; }
  .text-link { font-size: .8rem; }
  .availability { font-size: .63rem; margin-top: 19px; }
  .scroll-hint { font-size: .62rem; gap: 10px; bottom: 15px; }
  .scroll-line { width: 22px; }
  .principles { gap: var(--item-gap); margin-top: var(--block-gap); padding-top: var(--item-gap); }
  .principle { display: block; }
  .principle svg { margin-bottom: 10px; width: 24px; }
  .principle strong { font-size: .8rem; }
  .principle > div:last-child > span { font-size: .63rem; }
  .how { padding-bottom: 10px; }
  .how .section-heading { margin-bottom: 0; }
  .story-layout { display: block; }
  .story-sticky { position: relative; top: auto; padding-block: 35px 10px; }
  .journey { max-width: 490px; margin-inline: auto; }
  .story-step { min-height: auto; padding-block: 36px; border-bottom: 1px solid var(--line); }
  .story-step h3 { font-size: 2.5rem; }
  .story-step > p:not(.eyebrow) { font-size: .94rem; max-width: none; }
  .story-step .step-note { margin-top: 20px !important; }
  .feature-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .feature { padding-top: 24px; }
  .feature svg { width: 26px; height: 26px; margin-bottom: 17px; }
  .feature h3 { font-size: 1.13rem; }
  .feature p { font-size: .9rem; margin-top: 12px; }
  .capacity-note { font-size: .72rem; line-height: 1.8; margin-top: 32px; }
  .roadmap-note { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
  .roadmap-note p { font-size: .9rem; }
  .app .section-heading { text-align: start; }
  .setup-steps { grid-template-columns: 1fr; margin-top: 40px; gap: 27px; }
  .setup-steps li { padding-top: 20px; padding-inline-start: 40px; }
  .setup-steps li::before { top: 22px; left: 0; }
  .setup-steps p { margin-top: 13px; }
  .faq summary { font-size: .9rem; min-height: 76px; }
  .faq details p { padding-right: 10px; font-size: .87rem; }
  .support-mark img { width: 90px; height: 90px; }
  .site-footer { display: block; padding-bottom: 32px; }
  .footer-links { justify-content: flex-start; margin-top: 23px; gap: 3px 24px; }
  .privacy-main { padding-block: 135px 65px; }
  .policy-hero h1 { font-size: clamp(2.5rem, 14vw, 5rem); }
  .draft-notice { padding: 21px 20px; font-size: .8rem; margin-top: 30px; }
  .policy-nav ol { columns: 1; font-size: .83rem; padding-left: 21px; }
  .policy-nav li { padding-block: 0; }
  .policy-nav a { padding-block: 8px; }
  .policy-section h2 { font-size: 1.45rem; }
  .policy-section p { font-size: .9rem; }
  .notfound { padding-top: 150px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: clamp(3.25rem, 16vw, 3.8rem); }
  .hero .eyebrow { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  :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; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--muted); }
}
@media (prefers-contrast: more) {
  :root { --muted: #364257; --line: #748197; }
  .capacity .section-intro, .capacity .feature p, .capacity-note { color: #e3ebf8; }
  .task-label { color: #123d7a; background: #fff; border-color: #5e7596; }
  .art-label strong, .art-label span:not(.label-dot) { color: var(--ink); }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root { --muted: #d8e6f8; --line: #8dabc7; } }
@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; }
}
.menu-toggle { display: none; }
@media (max-width: 600px) { .menu-toggle { display: inline-flex; } }
@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; }
}

.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); }
.route-end { fill: #dff6ff; stroke: #65b8ff; stroke-width: 3; }
.button, .icon-button, .explainer-controls button, .driver-busy-toggle { 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%); }
@container (max-width: 43rem) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions { margin-inline-start: auto; }
  .header-actions > .button { display: none; }
}
@container (max-width: 18rem) { .brand span { display: none; } }
@media (max-width: 820px) {
  .hero-visual { max-width: 540px; margin-top: 35px; }
  .hero-captions { margin-inline: 8px; }
}
@media (max-width: 600px) {
  .hero { padding-bottom: 90px; }
  .hero-visual { margin-top: 38px; }
  .hero-captions { gap: 16px; margin-inline: 0; }
  .art-label strong { font-size: .78rem; }
  .art-label span:not(.label-dot) { font-size: .7rem; }
  .task-label { font-size: .65rem; padding: 5px 8px; border-radius: 7px; }
  .story-sticky { position: sticky; top: 85px; z-index: 6; padding-block: 16px 12px; background: var(--paper); }
  .journey { max-width: 350px; }
  .diagram-caption { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .button, .icon-button, .explainer-controls button, .driver-busy-toggle { scale: 1; } }

.narrative { container-type: inline-size; 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; }
.narrative-object { position: relative; width: 132px; height: 132px; margin-bottom: 22px; 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; }
.principles.narrative { padding-top: 20px; }
.principles.narrative .principle { display: block; }
.principles.narrative .principle strong { font-size: 1rem; }
.principles.narrative .principle > div:last-child > span { font-size: .8rem; }
.feature-grid.narrative .feature { padding-top: 0; border-top: 0; }
.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); }
.setup-narrative .setup-steps { margin: 0; }
.setup-narrative .setup-steps li { padding-top: 0; border-top: 0; }
.setup-narrative .setup-steps li::before { top: 128px; left: auto; right: 0; color: var(--muted); }
@media (max-width: 820px) { .hero { overflow-clip-margin: 0px; } }
@media (max-width: 600px) {
  .principles.narrative { grid-template-columns: 1fr; gap: 25px; }
  .narrative .narrative-object { width: 108px; height: 124px; margin: 0; grid-column: 1; grid-row: 1 / span 2; }
  .narrative .principle, .narrative .feature, .setup-narrative .setup-steps li { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 15px; align-items: start; }
  .narrative .principle > div:last-child { padding-top: 35px; }
  .narrative .feature h3, .setup-narrative li h3 { grid-column: 2; padding-top: 15px; }
  .narrative .feature p, .setup-narrative li p { grid-column: 2; margin-top: 10px; }
  .setup-narrative .setup-steps li { padding-inline-start: 0; }
  .setup-narrative .setup-steps li::before { top: 0; right: 0; font-size: .65rem; }
  .narrative .object-shadow { left: 0; width: 88px; }
  .narrative .object-satellite { right: 0; }
  .narrative .object-face, .narrative .object-depth { inset-inline-start: 0; inset-inline-end: 20px; }
  .narrative .object-file .object-face, .narrative .object-file .object-depth { inset-inline-start: 9px; inset-inline-end: 28px; }
}
@media (max-width: 370px) {
  .narrative .principle, .narrative .feature, .setup-narrative .setup-steps li { grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; }
  .narrative .narrative-object { width: 80px; height: 110px; }
  .narrative .object-satellite { width: 28px; height: 28px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .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; }
}

.narrative [data-stage] h3 { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .narrative [data-stage] { container-type: inline-size; }
}
@container (max-width: 14rem) {
  .narrative-object { grid-column: 1 / -1 !important; grid-row: auto !important; }
  h3, p, .principle > div:last-child { grid-column: 1 / -1 !important; }
}

@container (max-width: 14rem) { .narrative-route { display: none; } }

.policy-hero h1, .notfound h1 { overflow-wrap: anywhere; }