@font-face{font-family:Syne;src:url('./fonts/syne-latin-variable.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}@font-face{font-family:Manrope;src:url('./fonts/manrope-latin-variable.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#000}body{--surface:0,0,0;--ink:242,243,247;--muted:145,150,160;--glass:255,255,255;margin:0;background:rgb(var(--surface));color:rgb(var(--ink));font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid rgb(var(--ink));outline-offset:5px}::selection{background:#a4c4e74a}.stage{position:fixed;inset:0;width:100%;height:100dvh;background:rgb(var(--surface));isolation:isolate;z-index:0;overflow:hidden}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#core-canvas{touch-action:pan-y;transform:translateY(-4vh)}#depth-canvas{pointer-events:none}.grain{position:absolute;inset:0;pointer-events:none;opacity:.023;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.4' d='M0 0h120v120H0z'/%3E%3C/svg%3E")}
.site-header{position:fixed;z-index:20;top:max(26px,env(safe-area-inset-top));left:clamp(24px,4.5vw,80px);right:clamp(24px,4.5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.site-header a,.site-header button{pointer-events:auto}.wordmark{font-family:Syne,sans-serif;font-size:29px;line-height:1;letter-spacing:-.07em;font-weight:600;display:flex;align-items:flex-end;gap:5px}.brand-dot{width:4px;height:4px;border-radius:50%;background:currentColor;margin-bottom:3px;opacity:.65}.header-caption{position:absolute;left:50%;transform:translateX(-50%);color:rgb(var(--muted));font-size:11px;white-space:nowrap;letter-spacing:.025em}.header-actions{display:flex;align-items:center;gap:8px}.glass{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(var(--glass),.15);background:linear-gradient(135deg,rgba(var(--glass),.11),rgba(var(--glass),.035) 55%,rgba(var(--glass),.075));box-shadow:inset 0 1px 0 rgba(var(--glass),.14),inset 0 -1px 0 rgba(var(--glass),.025),0 8px 28px #00000012;backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);border-radius:40px}.glass::before{content:"";position:absolute;z-index:-1;inset:-50% -100%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(var(--glass),.02) 43%,rgba(var(--glass),.14) 49%,rgba(var(--glass),.025) 55%,transparent 64%);transform:translateX(-30%);animation:glass-current 9s ease-in-out infinite}.glass::after{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(var(--glass),.07)}@keyframes glass-current{0%,20%{transform:translateX(-28%) rotate(-8deg);opacity:0}30%{opacity:1}65%{transform:translateX(30%) rotate(8deg);opacity:1}75%,100%{transform:translateX(40%);opacity:0}}.header-cta{padding:12px 18px;font-size:11px;font-weight:500;display:flex;align-items:center;gap:20px;transition:background .25s,transform .25s}.header-cta:hover,.primary-cta:hover{background-color:rgba(var(--glass),.08);transform:translateY(-1px)}.pause-button{width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:14px;color:rgb(var(--muted))}.pause-button span{transform:scaleX(.8)}.pause-button:disabled{opacity:.5;cursor:default}
.narrative{position:fixed;inset:0;z-index:5;pointer-events:none}.scene-copy{position:absolute;left:24px;right:24px;bottom:clamp(105px,13vh,175px);text-align:center;opacity:0;transform:translateY(18px);will-change:opacity,transform;pointer-events:none}.scene-copy h1,.scene-copy h2{font-family:Syne,sans-serif;font-size:clamp(36px,4.4vw,66px);line-height:1.05;letter-spacing:-.05em;font-weight:500;margin:18px 0 0;text-wrap:balance}.scene-copy p{font-size:clamp(13px,1.1vw,15px);line-height:1.8;color:rgb(var(--muted));margin:22px 0 0;text-wrap:pretty;font-weight:400}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:500;color:rgb(var(--muted));line-height:1.5}.intro-copy{opacity:1}.intro-copy h1{font-size:clamp(32px,3.5vw,54px)}.intro-copy p{margin-top:15px}.scroll-cue{display:block;margin-top:23px;font-size:18px;color:rgb(var(--muted));opacity:.65}.side-copy{top:32%;bottom:auto;text-align:left;width:clamp(260px,25vw,380px);left:auto;right:auto}.copy-left{left:clamp(36px,7vw,130px)}.copy-right{right:clamp(36px,7vw,130px)}.birth-copy{top:44%;width:265px}.birth-copy h2{font-size:clamp(56px,6vw,90px);margin-top:14px;line-height:.95}.birth-copy p{font-size:15px;margin-top:20px}.fine-note{display:block;font-size:10px;color:rgb(var(--muted));line-height:1.6;letter-spacing:.015em;margin-top:21px}.state-copy{--accent:176,197,222}.state-number{display:block;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:rgb(var(--muted));opacity:.6;margin-bottom:29px}.state-copy .eyebrow{color:rgb(var(--accent));display:flex;align-items:center;gap:8px}.status-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 10px rgba(var(--accent),.7)}[data-copy=speaking]{--accent:153,167,238}[data-copy=anger]{--accent:247,129,103}[data-copy=joy]{--accent:134,234,215}.state-copy h2{font-size:clamp(38px,4.1vw,64px)}.state-copy p{max-width:315px}.motion-signature{height:27px;display:flex;align-items:center;gap:5px;margin-top:28px}.motion-signature span{width:2px;height:6px;border-radius:3px;background:rgba(var(--accent),.8);animation:signature 3s ease-in-out infinite;animation-delay:calc(var(--n)*-.2s)}.motion-signature span:nth-child(1){--n:1}.motion-signature span:nth-child(2){--n:2;height:12px}.motion-signature span:nth-child(3){--n:3;height:19px}.motion-signature span:nth-child(4){--n:4;height:26px}.motion-signature span:nth-child(5){--n:5;height:18px}.motion-signature span:nth-child(6){--n:6;height:12px}.motion-signature span:nth-child(7){--n:7;height:5px}.signature-speaking span{animation-duration:.8s}.signature-anger span{animation-duration:.36s;border-radius:0}.signature-joy span{animation-duration:1.6s}@keyframes signature{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}.state-copy .fine-note{margin-top:11px}.equilibrium-copy h2{font-size:clamp(30px,3.4vw,52px)}.equilibrium-copy p{margin-top:15px}
.specimen-copy{top:26%;width:clamp(275px,25vw,360px)}.specimen-label{display:flex;align-items:center;gap:14px;color:rgb(var(--muted));font-size:10px;letter-spacing:.02em}.specimen-cross{font-size:23px;font-weight:200;line-height:1}.specimen-label b{font-size:10px;font-weight:500;margin-left:28px;opacity:.5;font-variant-numeric:tabular-nums}.specimen-copy h2,.code-copy h2{font-size:clamp(40px,4.2vw,64px);margin-top:26px}.specimen-copy p{max-width:290px;font-size:13px;line-height:1.9;margin-top:24px}.specimen-rule{height:1px;max-width:265px;margin:25px 0 20px;background:linear-gradient(90deg,rgba(var(--glass),.18),rgba(var(--glass),0))}.specimen-facts{display:flex;gap:32px;font-size:9px;color:rgb(var(--muted));line-height:1.8}.specimen-facts b{display:block;font-size:10px;font-weight:400;color:rgb(var(--ink))}.scene-control{margin-top:28px;pointer-events:auto}.specimen-copy .fine-note,.code-copy .fine-note{margin-top:15px;font-size:9px}.orbital-key{display:flex;gap:16px;align-items:center;margin-top:28px}.orbit-symbol{font-size:39px;color:rgb(var(--muted));line-height:1}.orbital-key b{font-size:11px;font-weight:500}.orbital-key small{display:block;font-size:9px;color:rgb(var(--muted));margin-top:6px}.code-copy{top:29%;width:clamp(270px,25vw,355px)}.code-copy p{max-width:260px;font-size:13px}.code-sample{display:flex;align-items:center;gap:14px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;color:rgb(var(--muted));margin-top:30px}.code-sample span:nth-child(2){opacity:.65}.code-sample span:nth-child(3){opacity:.4}.code-sample i{height:14px;width:1px;background:currentColor;animation:cursor 1.1s steps(1) infinite}@keyframes cursor{50%{opacity:0}}
.segmented{display:flex;align-items:center;gap:3px;padding:5px;width:max-content;max-width:100%}.segmented button{position:relative;background:transparent;color:rgb(var(--muted));border-radius:30px;padding:12px 24px;font-size:12px;white-space:nowrap;transition:color .35s,background .35s,box-shadow .35s}.segmented button[aria-pressed=true]{background:linear-gradient(140deg,rgba(var(--glass),.14),rgba(var(--glass),.055));color:rgb(var(--ink));box-shadow:inset 0 1px 0 rgba(var(--glass),.1)}.segmented button:hover{color:rgb(var(--ink));background-color:rgba(var(--glass),.05)}.compact button{font-size:11px;padding:9px 15px}.scene-control button{min-width:78px}.control-label{font-size:10px;color:rgb(var(--muted));padding:0 8px 0 10px}.return-copy h2{font-size:clamp(32px,3.7vw,56px)}.final-copy{bottom:clamp(80px,10vh,130px)}.final-copy h2{font-size:clamp(32px,4vw,60px)}.final-copy p{margin-top:15px}.final-actions{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:27px;pointer-events:auto}.primary-cta{display:flex;align-items:center;gap:34px;padding:17px 26px;font-size:12px;font-weight:500;transition:background .25s,transform .25s}.restart-link{font-size:10px;color:rgb(var(--muted));padding:14px 4px;display:flex;align-items:center;gap:9px}.restart-link:hover{color:rgb(var(--ink))}
.lab{position:absolute;inset:0;opacity:0;pointer-events:none}.lab.is-active{pointer-events:none}.lab-heading{position:absolute;top:clamp(105px,13vh,145px);left:20px;right:20px;text-align:center;pointer-events:none}.lab-heading h2{font-family:Syne,sans-serif;font-size:clamp(28px,3.1vw,43px);letter-spacing:-.05em;font-weight:500;margin:12px 0 0}.lab-controls{position:absolute;left:16px;right:16px;bottom:clamp(74px,10vh,112px);display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}.lab-controls .segmented{pointer-events:auto}.lab-effects{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%}.lab-hint{font-size:10px;line-height:1.5;color:rgb(var(--muted));margin:3px 0 0;text-align:center}.close-lab{position:absolute;right:clamp(24px,4.5vw,80px);top:86px;display:flex;align-items:center;gap:12px;font-size:10px;padding:10px 14px;color:rgb(var(--muted));pointer-events:auto}.story-footer{position:fixed;z-index:10;bottom:max(24px,env(safe-area-inset-bottom));left:clamp(24px,4.5vw,80px);right:clamp(24px,4.5vw,80px);display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.025em;color:rgb(var(--muted));pointer-events:none}.chapter-jump{background:none;padding:12px 0;display:flex;align-items:center;gap:12px;color:rgb(var(--muted));font-size:10px;pointer-events:auto;transition:color .3s}.chapter-jump:hover{color:rgb(var(--ink))}.chapter-count{font-variant-numeric:tabular-nums}.count-divider{opacity:.4;margin:0 5px}.progress-track{position:absolute;left:50%;transform:translateX(-50%);width:110px;height:1px;overflow:hidden;background:rgba(var(--glass),.15);border-radius:2px}.progress-track span{display:block;width:100%;height:100%;background:rgb(var(--ink));transform:scaleX(0);transform-origin:left;opacity:.7}.scroll-section{height:calc(var(--length)*100svh);position:relative;pointer-events:none}#story{position:relative;z-index:-1;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:50;top:16px;left:16px;padding:12px 18px;transform:translateY(-150%);font-size:13px}.skip-link:focus{transform:none}.no-script{position:fixed;z-index:40;inset:0;display:grid;place-items:center;padding:24px;background:#000;color:#fff}.is-lab .scene-copy{opacity:0!important}.is-lab .story-footer{opacity:.65}.is-lab .header-cta{visibility:hidden}.is-lab #core-canvas{cursor:grab}.is-lab #core-canvas:active{cursor:grabbing}.is-paused .glass::before,.is-paused .motion-signature span,.is-paused .code-sample i{animation-play-state:paused}
@media(min-width:681px) and (max-width:1100px){.side-copy{width:250px}.copy-left{left:5vw}.copy-right{right:5vw}.state-copy h2{font-size:43px}.specimen-copy h2,.code-copy h2{font-size:46px}.scene-copy p{font-size:12px}}
@media(max-width:680px){.site-header{top:max(20px,env(safe-area-inset-top));left:22px;right:22px}.wordmark{font-size:25px}.header-caption{display:none}.header-cta{padding:12px 15px;gap:14px;font-size:10px}.scene-copy{left:24px;right:24px;bottom:105px}.scene-copy h1,.scene-copy h2{font-size:34px}.scene-copy p{font-size:12px;line-height:1.75;max-width:320px;margin:17px auto 0}.intro-copy h1{font-size:32px}.intro-copy .eyebrow{font-size:9px}.intro-copy{bottom:112px}.scroll-cue{margin-top:18px}.side-copy{top:auto;bottom:102px;width:auto;text-align:left;left:27px;right:27px}.birth-copy{bottom:118px}.birth-copy h2{font-size:60px}.birth-copy p{margin-left:0}.birth-copy .fine-note{margin-top:15px;font-size:9px}.state-number{position:absolute;right:0;top:0;margin:0;font-size:9px}.state-copy .eyebrow{font-size:9px}.state-copy h2{font-size:36px;margin-top:14px;line-height:1.05}.state-copy h2 br{display:none}.state-copy p{max-width:330px;margin-left:0;margin-top:16px}.motion-signature{position:absolute;right:0;bottom:2px;margin:0;height:19px;opacity:.75}.state-copy .fine-note{margin-top:20px;font-size:9px}.equilibrium-copy{bottom:123px}.equilibrium-copy h2{font-size:32px}.specimen-copy,.code-copy{bottom:95px}.specimen-label{font-size:9px;gap:11px}.specimen-label b{margin-left:17px;font-size:9px}.specimen-cross{font-size:19px}.specimen-copy h2,.code-copy h2{font-size:34px;margin-top:16px}.specimen-copy h2 br,.code-copy h2 br{display:none}.specimen-copy p,.code-copy p{font-size:11px;line-height:1.8;margin:14px 0 0;max-width:325px}.specimen-rule,.specimen-facts,.orbital-key,.code-sample{display:none}.scene-control{margin-top:17px}.scene-control button{min-width:80px}.specimen-copy .fine-note,.code-copy .fine-note{margin-top:12px;font-size:8px}.segmented button{padding:12px 20px;font-size:11px}.compact button{padding:9px 13px;font-size:10px}.final-copy{bottom:88px}.final-copy h2{font-size:34px}.final-actions{margin-top:22px;gap:13px;flex-direction:column}.primary-cta{padding:15px 23px;gap:27px}.restart-link{padding:0 4px}.story-footer{left:22px;right:22px;bottom:max(19px,env(safe-area-inset-bottom))}.progress-track{width:65px}.lab-heading{top:112px}.lab-heading h2{font-size:30px}.close-lab{right:22px;top:78px}.lab-controls{bottom:76px;gap:9px}.lab-effects{flex-direction:column;gap:7px}.compact{padding:4px}.control-label{padding:0 7px;font-size:10px}.lab-hint{max-width:290px;font-size:9px;margin-top:5px}.eyebrow{font-size:9px;letter-spacing:.12em}}
@media(max-width:370px){.segmented button{padding:12px 16px}.compact button{padding:9px 10px}.compact .control-label{padding:0 6px}.scene-copy h1,.scene-copy h2{font-size:30px}.state-copy h2,.specimen-copy h2,.code-copy h2{font-size:31px}.side-copy{left:24px;right:24px}.lab-heading h2{font-size:28px}.header-cta{font-size:9px;gap:10px}}
@media(max-height:740px){.state-copy{top:28%}.specimen-copy{top:22%}.side-copy h2{font-size:46px}.side-copy p{font-size:12px;line-height:1.7;margin-top:18px}.state-number{margin-bottom:20px}.motion-signature{margin-top:20px}.specimen-rule{margin:18px 0 14px}.scene-control{margin-top:19px}.birth-copy{top:40%}.birth-copy h2{font-size:70px}.lab-heading{top:98px}.lab-heading h2{font-size:34px}.lab-controls{bottom:63px;gap:9px}.lab-hint{display:none}}
@media(max-width:680px) and (max-height:740px){.side-copy{top:auto;bottom:87px}.side-copy h2{font-size:31px}.side-copy p{font-size:10px;line-height:1.7;margin-top:12px}.birth-copy h2{font-size:58px}.state-number{margin:0}.motion-signature{margin:0}.scene-control{margin-top:13px}.specimen-copy .fine-note,.code-copy .fine-note{margin-top:9px}.intro-copy{bottom:92px}.intro-copy h1{font-size:29px}.equilibrium-copy{bottom:100px}.equilibrium-copy h2{font-size:29px}.final-copy{bottom:82px}.final-copy h2{font-size:30px}.final-actions{margin-top:18px;gap:8px}.is-lab .lab-heading{top:97px}.is-lab .lab-heading h2{font-size:28px}.is-lab .lab-controls{bottom:61px}}
@media(pointer:coarse){.pause-button{width:44px;height:44px}.header-cta{min-height:44px}.segmented button{min-height:44px}.primary-cta{min-height:48px}.restart-link{min-height:44px}.close-lab{min-height:44px}.chapter-jump{min-height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.glass::before,.motion-signature span,.code-sample i{animation:none}.segmented button,.header-cta,.primary-cta{transition:none}}
/* Product edition: optically layered glass and a quieter, more useful narrative. */
.primary-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:5px;pointer-events:auto}
.primary-nav a{display:block;padding:10px 18px;border-radius:28px;font-size:11px;line-height:18px;color:rgb(var(--muted));transition:color .25s,background .25s,box-shadow .25s}
.primary-nav a:hover{color:rgb(var(--ink));background:rgba(var(--glass),.05)}
.primary-nav a[aria-current=page]{color:rgb(var(--ink));background:linear-gradient(130deg,rgba(var(--glass),.16),rgba(var(--glass),.04));box-shadow:inset 0 1px 0 rgba(var(--glass),.16),0 2px 10px #0000000a}
.glass{--glass-x:42%;--glass-y:12%;border-color:rgba(var(--glass),.14);background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(var(--glass),.17),transparent 60%),linear-gradient(150deg,rgba(var(--glass),.075),rgba(var(--glass),.018) 47%,rgba(var(--glass),.075));box-shadow:inset 0 1px 1px rgba(var(--glass),.28),inset 1px 0 1px rgba(var(--glass),.08),inset 0 -1px 2px rgba(var(--glass),.08),0 10px 35px #00000016;backdrop-filter:blur(30px) saturate(180%) contrast(105%);-webkit-backdrop-filter:blur(30px) saturate(180%) contrast(105%);transition:box-shadow .35s,border-color .35s,background-color .35s}
.glass::before{inset:-140% -65%;background:radial-gradient(ellipse at 45% 55%,transparent 32%,rgba(var(--glass),.11) 38%,transparent 46%),conic-gradient(from 120deg,transparent,rgba(var(--glass),.025) 65deg,rgba(var(--glass),.12) 105deg,transparent 140deg,transparent 250deg,rgba(var(--glass),.08) 280deg,transparent 320deg);filter:blur(6px);animation:glass-caustic 13s ease-in-out infinite;opacity:.65}
.glass::after{inset:0;padding:1px;border-radius:inherit;background:linear-gradient(140deg,rgba(var(--glass),.5),rgba(var(--glass),.035) 25%,rgba(var(--glass),.06) 60%,rgba(var(--glass),.24) 86%,rgba(var(--glass),.04));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;box-shadow:none}
.glass:hover{border-color:rgba(var(--glass),.24);box-shadow:inset 0 1px 2px rgba(var(--glass),.38),inset 0 -1px 2px rgba(var(--glass),.1),0 12px 38px #0000001c}
.glass:active{box-shadow:inset 0 1px 4px rgba(var(--glass),.22),inset 0 -1px 4px rgba(var(--glass),.09),0 3px 12px #00000012}
@keyframes glass-caustic{0%,100%{transform:translateX(-5%) rotate(-12deg) scale(1);opacity:.4}50%{transform:translateX(8%) rotate(20deg) scale(1.08);opacity:.85}}
.birth-copy{top:30%;width:clamp(330px,30vw,465px)}
.birth-copy h2{font-size:clamp(58px,5.6vw,86px);line-height:1.04;margin-top:19px}
.birth-copy p{font-size:clamp(14px,1.15vw,17px);line-height:1.85;max-width:350px;margin-top:27px}
.hero-actions{pointer-events:auto;margin-top:28px;width:max-content}
.hero-actions .primary-cta{padding:15px 23px;font-size:11px;gap:29px}
.birth-copy .fine-note{font-size:9px;margin-top:20px;max-width:320px}
.state-copy{top:29%}.state-copy h2{font-size:clamp(38px,4.15vw,64px)}.state-copy p{max-width:325px}
.solution-copy{top:24%;width:clamp(280px,28vw,405px)}.solution-copy h2{font-size:clamp(40px,4.15vw,64px)}.solution-copy>p{max-width:335px}

.concept-note{font-size:8px;opacity:.68;margin-top:19px}.final-copy h2{font-size:clamp(30px,3.65vw,56px)}
@media(min-width:681px) and (max-width:1000px){.primary-nav{top:57px}.birth-copy{top:31%;width:300px}.birth-copy h2{font-size:58px}.birth-copy p{font-size:13px}.hero-actions .primary-cta{padding:13px 19px}.solution-copy{width:270px}.side-copy{top:30%}.specimen-copy,.code-copy{top:27%}}
@media(max-width:680px){.site-header{top:max(16px,env(safe-area-inset-top));left:22px;right:22px}.primary-nav{top:54px;gap:2px;padding:4px;white-space:nowrap}.primary-nav a{padding:10px 17px;font-size:10px;min-height:40px;line-height:20px}.header-cta{min-height:40px}.pause-button{height:40px;width:40px}.birth-copy,.state-copy,.solution-copy{top:auto}.birth-copy{width:auto;bottom:98px}.birth-copy h2{font-size:44px;line-height:1.03;margin-top:14px}.birth-copy h2 br{display:none}.birth-copy p{font-size:12px;line-height:1.8;margin:16px 0 0;max-width:310px}.birth-copy p br{display:none}.hero-actions{margin-top:20px}.hero-actions .primary-cta{padding:12px 19px;font-size:10px}.birth-copy .fine-note{font-size:8px;margin-top:14px}.state-copy h2{font-size:36px}.state-copy p{max-width:330px}.solution-copy{width:auto;bottom:85px}.solution-copy h2{font-size:34px;margin-top:14px}.solution-copy>p{font-size:11px;line-height:1.75;margin:13px 0 0;max-width:330px}.concept-note{margin-top:13px;font-size:7px}.final-copy h2{font-size:31px}.lab-heading{top:133px}.close-lab{top:122px}.lab-heading h2{font-size:28px}.is-lab .primary-nav{visibility:hidden}}
@media(max-width:370px){.primary-nav a{padding:10px 14px}.birth-copy h2{font-size:38px}.birth-copy p{font-size:11px}.state-copy h2{font-size:31px}.solution-copy h2{font-size:30px}.solution-copy>p{font-size:10px}.final-copy h2{font-size:28px}}
@media(max-width:680px) and (max-height:740px){.birth-copy{bottom:83px}.birth-copy h2{font-size:38px}.birth-copy p{font-size:10px;margin-top:12px}.hero-actions{margin-top:15px}.birth-copy .fine-note{font-size:7px;margin-top:11px}.state-copy h2{font-size:31px}.solution-copy{bottom:68px}.solution-copy h2{font-size:30px}.solution-copy>p{font-size:10px;line-height:1.7;margin-top:11px}.is-lab .lab-heading{top:125px}.is-lab .lab-heading h2{font-size:25px}.close-lab{top:115px}.concept-note{margin-top:11px}.final-copy h2{font-size:28px}}
@media(pointer:coarse){.primary-nav a{min-height:44px}.pause-button{height:44px;width:44px}}
@media(prefers-reduced-motion:reduce){.glass::before{animation:none}.primary-nav a,.glass{transition:none}}
/* Quiet navigation, matched captions, and a small orbital wayfinder. */
.primary-nav{gap:28px;padding:0;background:none;border:0;box-shadow:none;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none}
.primary-nav a{padding:10px 0;border-radius:0;background:none!important;box-shadow:none!important;font-size:11px;line-height:20px;letter-spacing:.01em;color:rgb(var(--muted));transition:color .3s}
.primary-nav a:hover,.primary-nav a[aria-current=page]{color:rgb(var(--ink))}
.eyebrow,.specimen-label{font-size:10px;line-height:1.5;font-weight:500}
.specimen-label{gap:12px}.specimen-cross{font-size:21px}
.signal-caption{display:flex;align-items:center;gap:16px;margin-top:27px;min-height:28px}
.signal-caption .motion-signature{position:static;flex:none;margin:0;width:52px;gap:5px;height:27px}
.signal-caption .fine-note{margin:0;font-size:10px;line-height:1.5;letter-spacing:.015em}
.specimen-copy .fine-note,.code-copy .fine-note,.birth-copy .fine-note{font-size:9px;line-height:1.6}
.final-actions{flex-direction:column;gap:10px;margin-top:27px}
.final-actions .restart-link{padding:10px 12px;font-size:10px;gap:10px;min-height:40px}
.story-footer{font-family:ui-monospace,SFMono-Regular,monospace;font-size:8px;letter-spacing:.09em;min-height:36px;bottom:max(14px,env(safe-area-inset-bottom))}
.field-coordinate{opacity:.58;font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;gap:12px}
.journey-orbit{position:absolute;left:50%;transform:translateX(-50%);width:76px;height:44px;background:none;color:rgb(var(--ink));padding:0;pointer-events:auto;border-radius:26px;transition:opacity .3s,filter .3s}
.journey-orbit:hover{filter:brightness(1.4)}.journey-orbit svg{width:72px;height:44px;display:block;margin:auto;overflow:visible}
.journey-track{stroke:currentColor;stroke-width:.35;fill:none;opacity:.12}.journey-center{fill:currentColor;opacity:.3}
.journey-grain{fill:currentColor;transition:opacity .5s}.journey-orbit #journey-head{fill:currentColor}.journey-orbit #journey-aura{fill:currentColor;opacity:.5}
.is-lab .story-footer{opacity:0}.is-lab .primary-nav{visibility:hidden}.lab{transition:opacity .35s}.lab.is-active{opacity:1}
@media(max-width:1000px) and (min-width:681px){.primary-nav{gap:26px;top:49px}}
@media(max-width:680px){.primary-nav{top:45px;gap:25px;padding:0}.primary-nav a{padding:9px 0;font-size:10px;min-height:40px;line-height:22px}.header-cta{min-height:44px}.eyebrow,.specimen-label{font-size:9px;line-height:1.5}.specimen-label{gap:10px}.specimen-cross{font-size:19px}.signal-caption{margin-top:19px;gap:13px;min-height:22px}.signal-caption .motion-signature{width:45px;height:22px;gap:4px}.signal-caption .fine-note{font-size:9px}.specimen-copy .fine-note,.code-copy .fine-note,.birth-copy .fine-note{font-size:8px}.story-footer{left:24px;right:24px;bottom:max(12px,env(safe-area-inset-bottom));font-size:7px;min-height:36px}.field-coordinate{gap:8px}.journey-orbit{height:42px;width:68px}.journey-orbit svg{width:64px}.final-actions{gap:8px;margin-top:23px}.final-actions .restart-link{min-height:40px;padding:10px 12px;font-size:9px}.final-copy{bottom:80px}.lab-heading{top:111px}.close-lab{top:64px}.is-lab .lab-heading{top:111px}.lab-heading h2{font-size:28px}}
@media(max-width:680px) and (max-height:740px){.signal-caption{margin-top:14px}.signal-caption .fine-note{font-size:8px}.signal-caption .motion-signature{height:19px}.final-copy{bottom:66px}.final-actions{margin-top:18px;gap:4px}.is-lab .lab-heading{top:94px}.is-lab .lab-heading h2{font-size:25px}.close-lab{top:61px}.solution-copy{bottom:76px}}
@media(max-width:370px){.primary-nav{gap:24px}.primary-nav a{padding:9px 0}.signal-caption{gap:11px}}
@media(prefers-reduced-motion:reduce){.journey-grain,.journey-orbit,.lab{transition:none}}
/* Ten expressions, one compact playground. The field stays open to touch. */
.lab{--lab-accent:185,207,232}
.lab-state-caption h2{transition:color .55s}
.lab-state-caption p{max-width:460px;margin:11px auto 0;color:rgb(var(--muted));font-size:11px;line-height:1.65;letter-spacing:.01em;text-wrap:balance}
.lab .lab-controls{bottom:max(28px,env(safe-area-inset-bottom));gap:12px}
.lab .state-switch{pointer-events:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px;width:min(570px,100%);border-radius:29px}
.lab .state-switch button{position:relative;min-width:0;min-height:40px;padding:10px 12px;border-radius:24px;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;color:rgb(var(--muted));font-size:11px;line-height:18px;white-space:nowrap;transition:color .4s,background .4s,box-shadow .4s}
.lab .state-switch button i{width:4px;height:4px;flex:none;border-radius:50%;background:rgb(var(--state-color));opacity:.46;box-shadow:0 0 0 rgba(var(--state-color),0);transition:opacity .45s,box-shadow .45s}
.lab .state-switch button:hover{color:rgb(var(--ink));background:rgba(var(--glass),.025)}
.lab .state-switch button[aria-pressed=true]{color:rgb(var(--ink));background:linear-gradient(140deg,rgba(var(--state-color),.11),rgba(var(--state-color),.025));box-shadow:inset 0 1px 0 rgba(var(--state-color),.25),inset 0 -1px 0 rgba(var(--state-color),.04)}
.lab .state-switch button[aria-pressed=true] i{opacity:1;box-shadow:0 0 9px rgba(var(--state-color),.72)}
.lab .state-switch button:focus-visible{outline-offset:-3px}
.lab .lab-effects{gap:10px}
.lab .lab-hint{margin:0;font-size:9px;letter-spacing:.025em}
@media(pointer:coarse){.lab .state-switch button{min-height:44px}}
@media(max-width:680px){
 .lab .lab-heading,.is-lab .lab-heading{top:104px;left:25px;right:25px}
 .lab .lab-heading h2{font-size:29px;margin-top:9px}
 .lab-state-caption p{font-size:9px;line-height:1.65;max-width:300px;margin-top:9px;min-height:30px}
 .lab .lab-controls{left:18px;right:18px;bottom:max(20px,env(safe-area-inset-bottom));gap:9px}
 .lab .state-switch{width:min(400px,100%);padding:4px;gap:2px;border-radius:26px}
 .lab .state-switch button{min-height:44px;font-size:10px;padding:10px 4px;gap:5px;line-height:16px}
 .lab .state-switch button i{width:3px;height:3px}
 .lab .lab-effects{gap:6px}
 .lab .lab-effects .compact button{font-size:9px;padding:8px 13px;min-height:38px}
 .lab .lab-effects .control-label{font-size:9px}
 .lab .lab-hint{font-size:8px}
}
@media(max-width:370px){.lab .state-switch button{font-size:9px;gap:4px;padding:10px 2px}.lab .lab-heading h2{font-size:27px}.lab .lab-effects .compact button{padding:8px 11px}}
@media(max-width:680px) and (max-height:740px){.lab .lab-heading,.is-lab .lab-heading{top:114px}.lab .lab-heading h2{font-size:25px}.lab-state-caption p{margin-top:7px}.lab .lab-controls{bottom:max(15px,env(safe-area-inset-bottom));gap:7px}}
@media(max-height:520px) and (min-width:681px){.lab .lab-heading,.is-lab .lab-heading{top:73px}.lab .lab-heading h2{font-size:27px;margin-top:7px}.lab-state-caption p{margin-top:7px}.lab .lab-controls{bottom:15px;gap:7px}.lab .state-switch{width:510px}.lab .state-switch button{min-height:32px;padding:6px 12px}.lab .lab-effects .compact button{padding-top:6px;padding-bottom:6px;min-height:32px}}
@media(prefers-reduced-motion:reduce){.lab .state-switch button,.lab .state-switch button i,.lab-state-caption h2{transition:none}}
/* Two individual agents, one deliberately shared project context. */
.sync-copy{bottom:clamp(90px,11vh,140px);left:24px;right:24px}
.sync-copy h2{font-size:clamp(38px,4.3vw,65px);margin-top:15px}
.sync-copy>p{max-width:490px;margin:17px auto 0;font-size:13px;line-height:1.8}
.sync-copy .fine-note{font-size:9px;margin-top:14px}
.sync-agents{position:fixed;inset:0;pointer-events:none;--connection:0;font-family:Manrope,sans-serif}
.sync-agent{position:absolute;top:59%;font-size:10px;line-height:1.6;letter-spacing:.02em;color:rgb(var(--muted));white-space:nowrap;display:flex;align-items:center;gap:8px;transform:translateX(-50%)}
.sync-agent i{width:4px;height:4px;display:block;border-radius:50%;background:rgb(var(--agent-color));box-shadow:0 0 12px rgba(var(--agent-color),.65)}
.sync-agent-design{left:calc(30% + var(--connection)*18%);--agent-color:134,214,255;opacity:var(--separate-opacity,1)}
.sync-agent-project{left:calc(70% - var(--connection)*18%);--agent-color:200,169,255;opacity:var(--separate-opacity,1)}
.sync-agent-shared{left:50%;--agent-color:185,222,255;opacity:var(--shared-opacity,0)}
.sync-agent-shared i{background:linear-gradient(135deg,#8bdbff,#d1b7ff);box-shadow:0 0 14px #c1ceff8a}
.sync-copy .sync-preview{opacity:.65}
@media(min-width:681px) and (max-height:740px){.sync-copy{bottom:72px}.sync-copy h2{font-size:43px}.sync-copy>p{font-size:12px;margin-top:12px}.sync-copy .fine-note{margin-top:10px}.sync-agent{top:54%}}
@media(max-width:680px){.sync-copy{bottom:86px}.sync-copy h2{font-size:37px;max-width:330px;margin:13px auto 0;line-height:1.08}.sync-copy>p{font-size:11px;line-height:1.8;max-width:310px;margin-top:15px}.sync-copy .fine-note{font-size:8px;margin-top:12px}.sync-agent{top:48%;font-size:8px;gap:6px}}
@media(max-width:680px) and (max-height:740px){.sync-copy{bottom:74px}.sync-copy h2{font-size:31px;max-width:280px}.sync-copy>p{font-size:10px;max-width:290px;margin-top:12px}.sync-copy .fine-note{margin-top:10px}.sync-agent{top:46%}}
@media(max-width:370px){.sync-copy h2{font-size:31px}.sync-copy>p{max-width:270px}}

/* A quiet continuation of the numeric scene. */
.numeric-bridge h2{margin-top:41px}
.numeric-bridge p{max-width:310px}
@media(max-width:680px){.numeric-bridge{top:57%;bottom:auto;left:27px;right:27px;width:auto}.numeric-bridge h2{margin-top:0;font-size:36px}.numeric-bridge p{font-size:11px;line-height:1.8;margin-top:18px}}
@media(max-width:680px) and (max-height:740px){.numeric-bridge{top:55%}.numeric-bridge h2{font-size:31px}.numeric-bridge p{font-size:10px;margin-top:14px}}

/* One mobile reading line, with a dedicated upper field for the animation. */
@media(max-width:680px){
 .intro-copy{top:49%;bottom:auto;left:27px;right:27px}
 .intro-copy h1{font-size:32px;line-height:1.09;margin-top:18px}
 .intro-copy p{margin-top:19px}
 .intro-copy .scroll-cue{margin-top:22px}
 .birth-copy{top:51%;bottom:auto;left:27px;right:27px;width:auto}
 .birth-copy h2{font-size:40px;line-height:1.05}
 .birth-copy p{font-size:12px;line-height:1.8;margin-top:17px}
 .birth-copy .hero-actions{margin-top:22px}
 .birth-copy .fine-note{margin-top:16px}
 .state-copy{top:55%;bottom:auto;left:27px;right:27px;width:auto}
 .state-copy h2{font-size:34px;line-height:1.07;margin-top:15px}
 .state-copy p{font-size:12px;line-height:1.8;margin-top:17px;max-width:330px}
 .state-copy .signal-caption{margin-top:21px}
 .equilibrium-copy{top:57%;bottom:auto}
 .specimen-copy{top:55%;bottom:auto}
 .code-copy{top:56%;bottom:auto;left:27px;right:27px;width:auto}
 .code-copy h2{font-size:34px;line-height:1.08;margin-top:17px}
 .code-copy p{font-size:12px;line-height:1.8;margin-top:16px}
 .code-copy .fine-note{margin-top:15px}
 .numeric-bridge h2{margin-top:0}
 .sync-copy{top:59%;bottom:auto}
 .sync-copy h2{font-size:35px;line-height:1.08}
 .sync-copy>p{font-size:12px;line-height:1.8}
 .final-copy{top:55%;bottom:auto;left:27px;right:27px}
 .final-copy h2{font-size:32px;line-height:1.09;margin-top:15px}
 .final-copy p{font-size:12px;line-height:1.8;margin-top:17px}
 .final-copy .final-actions{margin-top:23px}
}
@media(max-width:680px) and (max-height:740px){
 .intro-copy{top:46%}
 .intro-copy h1{font-size:29px;margin-top:15px}
 .intro-copy p{margin-top:16px}
 .intro-copy .scroll-cue{margin-top:17px}
 .birth-copy{top:48%}
 .birth-copy h2{font-size:35px}
 .birth-copy p{font-size:11px;line-height:1.7;margin-top:14px}
 .birth-copy .hero-actions{margin-top:17px}
 .birth-copy .fine-note{margin-top:12px}
 .state-copy{top:52%}
 .state-copy h2{font-size:31px;margin-top:13px}
 .state-copy p{font-size:11px;line-height:1.75;margin-top:14px}
 .state-copy .signal-caption{margin-top:17px}
 .equilibrium-copy{top:54%}
 .specimen-copy{top:52%}
 .code-copy{top:54%}
 .code-copy h2{font-size:31px;margin-top:14px}
 .code-copy p{font-size:11px;line-height:1.75;margin-top:14px}
 .numeric-bridge h2{margin-top:0}
 .sync-copy{top:56%}
 .sync-copy h2{font-size:31px}
 .sync-copy>p{font-size:11px;line-height:1.75}
 .final-copy{top:51%}
 .final-copy h2{font-size:29px}
 .final-copy p{font-size:11px;line-height:1.75;margin-top:14px}
 .final-copy .final-actions{margin-top:19px}
}
@media(max-width:370px){
 .intro-copy,.birth-copy,.state-copy,.code-copy,.final-copy{left:24px;right:24px}
 .intro-copy h1{font-size:28px}
 .birth-copy h2{font-size:33px}
 .state-copy h2,.code-copy h2{font-size:29px}
 .final-copy h2{font-size:27px}
}
@media(max-width:680px) and (max-height:620px){
 .intro-copy{top:44%}
 .birth-copy{top:44%}
 .birth-copy h2{font-size:31px}
 .birth-copy p{font-size:11px;line-height:1.65;margin-top:12px}
 .birth-copy .hero-actions{margin-top:14px}
 .birth-copy .fine-note{margin-top:10px}
 .state-copy{top:48%}
 .state-copy h2{font-size:28px}
 .state-copy p{line-height:1.65;margin-top:12px}
 .state-copy .signal-caption{margin-top:13px}
 .specimen-copy{top:47%}
 .code-copy{top:44.5%}
 .code-copy h2{font-size:28px}
 .code-copy p{line-height:1.65;margin-top:12px}
 .sync-copy{top:51%}
 .sync-copy h2{font-size:28px}
 .sync-copy>p{line-height:1.65;margin-top:13px}
 .final-copy{top:47%}
 .final-copy h2{font-size:26px;margin-top:12px}
 .final-copy p{margin-top:13px}
 .final-copy .final-actions{margin-top:16px;gap:3px}
}