.immersive{--night:#0c1914;--glow:#d6ef80}
.immersive .header{position:absolute;inset:0 0 auto;z-index:5;height:100px;color:#edf1e8;border-color:#d2e2c51c}
.immersive .header .brand img{background:var(--glow);border-radius:8px;padding:5px;width:34px;height:34px}
.immersive .header .beta{color:#b1bdae;border-color:#b2c4aa30}
.immersive .desktop-nav a:hover{color:var(--glow)}
.header-actions{display:flex;align-items:center;gap:24px}
.immersive .nav-install{border-color:#c4d2b74d;border-radius:30px;padding-inline:20px;gap:22px}
.immersive .nav-install:hover{background:#d6ef8017}
.motion-toggle{background:none;border:0;display:flex;align-items:center;gap:9px;color:#c2cfb8;font:9px var(--mono);padding:10px 0;min-height:44px}
.motion-bars{height:15px;display:flex;align-items:center;gap:3px}
.motion-bars i{display:block;width:2px;height:12px;background:var(--glow);animation:equalizer 1s ease-in-out infinite alternate}
.motion-bars i:nth-child(2){animation-delay:-.4s;height:7px}
.motion-bars i:nth-child(3){animation-delay:-.7s;height:10px}
.past-hero .motion-toggle{position:fixed;right:22px;bottom:20px;z-index:20;border:1px solid #9bb77e50;background:#173024;color:#cbdcb7;padding:10px 17px;border-radius:30px;box-shadow:0 6px 22px #0002}
.past-hero .motion-toggle-label{display:inline}
.immersive .hero{display:flow-root;position:relative;width:100%;max-width:none;margin:0;min-height:min(860px,100svh);padding:0;isolation:isolate;background:radial-gradient(ellipse at 78% 38%,#223d29 0,transparent 43%),var(--night);color:#f1f3e9;overflow:clip}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.19;background-image:linear-gradient(#a9cb8b1c 1px,transparent 1px),linear-gradient(90deg,#a9cb8b1c 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(90deg,transparent 20%,#000 75%);transform:perspective(600px) rotateX(63deg) scale(1.7);transform-origin:50% 100%}
.immersive .hero-text{padding-block:178px 144px;position:relative;z-index:2;pointer-events:none}
.hero-text a{pointer-events:auto}
.immersive .hero-text>.eyebrow{color:#afc19c;margin-bottom:30px;font-size:9px;letter-spacing:1.5px}
.immersive .hero .status-dot{background:var(--glow);box-shadow:0 0 15px #d6ef8080}
.immersive .hero h1{font-size:clamp(66px,6.9vw,105px);max-width:630px;line-height:1.01;letter-spacing:-5.8px;font-weight:450}
.title-line{display:block;position:relative;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.title-line>span:not(.hero-asterisk),.title-line>em{display:inline-block;animation:title-arrive 1.4s cubic-bezier(.16,1,.3,1) both}
.title-line:nth-child(2)>span{animation-delay:.12s}
.title-line:nth-child(3)>em{animation-delay:.24s}
.immersive .hero h1 em{font-size:1.18em;color:var(--glow);letter-spacing:-3px;line-height:1.01}
.immersive .hero-asterisk{display:inline-block;position:static;font-size:70px;line-height:1;color:var(--glow);vertical-align:middle;margin-left:37px;animation:asterisk-turn 24s linear infinite;transform-origin:center}
.immersive .hero-copy{color:#aab8a4;max-width:390px;font-size:14px;margin-top:25px;line-height:1.85}
.immersive .hero-actions{gap:27px;margin-top:28px}
.immersive .hero .button{background:var(--glow);color:#1b3524;border-radius:30px;min-height:52px;padding-inline:23px}
.immersive .hero .button:hover{background:#e3f8a9;box-shadow:0 4px 25px #b9e56a22}
.immersive .hero .text-link{font-size:11px;color:#e2e9d9}
.immersive .hero .play-icon{border-color:#9aa98a6b}
.immersive .availability{font-size:9px;color:#8d9f80;margin-top:21px}
.immersive .hero-art{position:absolute;z-index:1;top:100px;right:-1%;bottom:55px;width:63%;height:auto;min-height:0;border-radius:0;background:transparent;color:#c1d4ab;overflow:visible}
.immersive .hero-sculpture{object-fit:contain;object-position:center;opacity:.8;mask-image:radial-gradient(ellipse,#000 35%,transparent 72%);transition:opacity .8s;pointer-events:none}
.immersive .hero-art:hover .hero-sculpture{transform:none}
#circuit-scene{display:block;position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity 1.1s}
#circuit-scene:active{cursor:grabbing}
#circuit-scene:focus-visible{outline:1px solid #d6ef8080;outline-offset:-30px;border-radius:60px}
[data-scene=ready] #circuit-scene{opacity:1}
[data-scene=ready] .hero-sculpture{opacity:0}
.scene-caption{position:absolute;right:11%;top:43px;font:8px/1.8 var(--mono);letter-spacing:1.1px;display:flex;gap:14px;pointer-events:none;color:#a3ba8f}
.scene-cross{font:25px/1 var(--mono)}
.scene-controls{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:23px;font:9px var(--mono);color:#9bb08b;white-space:nowrap}
.scene-controls #scene-hint>span{margin-left:12px;color:#d6ef80}
.scene-controls button{border:1px solid #7f9c633d;border-radius:50%;background:#253a2380;color:#b9cda2;width:36px;height:36px;font-size:20px;transition:background .3s}
.scene-controls button:hover{background:#d6ef8030}
.hero-baseline{position:absolute;bottom:0;left:0;right:0;z-index:3;border-top:1px solid #bed1ac25;min-height:66px;display:flex;align-items:center;justify-content:space-between;font:8px var(--mono);letter-spacing:1.2px;color:#849977}
.hero-baseline>a{display:flex;gap:14px;align-items:center;color:#cad8bc;min-height:44px}
.scroll-cue{font-size:17px;animation:scroll-nudge 2s ease-in-out infinite}
.hero-coordinate{color:#a6bb95}
.immersive .compatibility{width:100%;max-width:none;padding:0 max(56px,calc((100% - 1320px)/2));background:#11231a;color:#d9e4cf;border-color:#bdcfab20;min-height:118px}
.immersive .compatibility-label{color:#94a884}
.immersive .client-names .claude-symbol{color:#cedea4}
.immersive .compatibility-divider{background:#bdcfab25}
.immersive .browser-names{color:#a8bb99}
.immersive .intro.section{padding-top:105px;padding-bottom:112px}
.immersive .intro-grid h2{font-size:clamp(43px,4.4vw,65px)}
.connection-story{margin-top:58px;background:#11271b;position:relative;border-radius:10px;overflow:hidden;box-shadow:0 25px 50px #172c2012}
.connection-stage{height:360px;position:relative;background:radial-gradient(ellipse at 50% 50%,#294630,transparent 58%);perspective:900px;overflow:hidden}
.connection-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#a3ba8124 1px,transparent 1px);background-size:20px 20px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.signal-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.signal-track{stroke:#a7c67a36;stroke-width:1}
.signal-track.faint{stroke:#a7c67a20}
.signal-pulse{stroke:#dfff9b;stroke-width:2;stroke-linecap:round;stroke-dasharray:9 91;filter:drop-shadow(0 0 5px #d6ef80);animation:signal-send 5s linear infinite}
.pulse-two{animation-delay:1.2s}
.signal-return{stroke:#b7d68a;stroke-width:1.5;stroke-dasharray:3 97;animation:signal-send 6s linear infinite;animation-delay:3.2s;opacity:.6}
.flow-node{position:absolute;top:92px;width:148px;height:148px;transform-style:preserve-3d;animation:node-float 7s ease-in-out infinite}
.agent-node{left:calc(13% - 74px);--node-turn:-16deg}
.bridge-node{left:calc(50% - 74px);--node-turn:0deg;animation-delay:-2.3s}
.browser-node{left:calc(87% - 74px);--node-turn:16deg;animation-delay:-4.6s}
.node-layer,.node-face{position:absolute;inset:0;border:1px solid #a9c68c3d;border-radius:22px}
.node-layer{background:linear-gradient(135deg,#b1d58c38,#4b793d18);box-shadow:0 10px 25px #0003}
.layer-back{transform:translateZ(-38px) translate(12px,18px)}
.layer-middle{transform:translateZ(-20px) translate(6px,9px)}
.node-face{background:linear-gradient(145deg,#476644,#193621 70%);box-shadow:inset 0 1px 1px #e5ffb766,0 15px 40px #0004;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#d8edba;transform:translateZ(4px)}
.node-face>span:last-child{font:8px var(--mono);letter-spacing:1.1px}
.node-glyph{font-size:61px;line-height:.9;color:#d1e6ac}
.node-face>img{background:#d9edac;padding:9px;border-radius:13px;width:57px;height:57px}
.node-face>svg{width:58px;height:48px;stroke:#d5e9b7;stroke-width:1.6;fill:none}
.bridge-node .node-face{background:linear-gradient(145deg,#d6eeab,#adc685);color:#173923;border-color:#f0ffd0b0;box-shadow:inset 0 1px 2px #fff8,0 15px 55px #bddd7133}
.bridge-node .node-face>img{background:none;padding:0;width:52px;height:52px}
.node-orbit{position:absolute;inset:-36px;border:1px solid #c2da9c2b;border-radius:50%;transform:rotateX(65deg);box-shadow:0 0 0 14px #c2da9c05}
.signal-caption{position:absolute;top:292px;color:#8ca579;font:9px var(--mono);text-align:center}
.signal-caption-one{left:23%;width:18%}
.signal-caption-two{left:59%;width:18%}
.connection-story-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 27px;border-top:1px solid #b1c79820;color:#a8bd92;font:8px/1.5 var(--mono);letter-spacing:.6px}
.connection-story-foot>span:first-child{display:flex;align-items:center;gap:8px}
.connection-story-foot i{width:5px;height:5px;border-radius:50%;background:#d6ef80;box-shadow:0 0 9px #d6ef8055}
.connection-story-foot>span:nth-child(2){font:12px var(--sans);letter-spacing:0;color:#c5d7b3}
.connection-story-foot>span:last-child{font-size:18px}
.immersive .capability-rows{margin-top:38px}
.immersive .playground-section{position:relative;background:#142c20;padding-block:100px 70px;overflow:hidden}
.immersive .playground-section:before{content:"";position:absolute;inset:15% -30% 0;background:radial-gradient(ellipse at center,#4662383d,transparent 65%);pointer-events:none}
.immersive .playground-section>.wrap{position:relative;perspective:1800px}
.immersive .demo-frame{border-color:#9bb77e80;box-shadow:0 38px 80px #0005,0 3px 0 #b9c7a480,0 7px 0 #60745180;transform:rotateX(2deg);transform-origin:center top;transition:transform .6s}
.immersive .demo-frame:focus-within{transform:rotateX(0)}
.immersive .demo-tabs button{border-radius:30px}
.immersive .demo-request{transition:background .45s,border-color .45s,box-shadow .45s}
.immersive .demo-frame[data-state=reading] .demo-request{box-shadow:0 0 22px #c8e78c25;border-color:#c4d5a8}
.immersive .demo-frame[data-state=handoff] .demo-request{background:#f2eedc;border-color:#d6c998}
.immersive .demo-frame[data-state=paused] .demo-request{background:#e8ebe3;border-color:#c5cdbd}
.immersive .demo-frame[data-state=complete] .agent-status-dot{background:#709a44;box-shadow:0 0 0 4px #709a441a}
.immersive .control-art{min-height:380px;perspective:800px;background:radial-gradient(ellipse at center,#e9eedc,#d9e2cc);overflow:hidden}
.immersive .orbit{border-color:#78965059;width:320px;height:320px;transform:translate(-50%,-50%) rotateX(64deg) rotateY(-14deg);box-shadow:0 1px 0 #fff8,inset 0 1px 0 #fff7;animation:orbit-precess 18s linear infinite}
.immersive .orbit-two{width:410px;height:410px;animation-delay:-6s;opacity:.75}
.immersive .orbit-three{width:510px;height:510px;animation-delay:-12s;opacity:.4}
.immersive .orbit-one:before,.immersive .orbit-one:after{background:#567b38;border-color:#dce5ce;box-shadow:0 0 20px #93b96755}
.immersive .control-switch{transform:rotateX(12deg) rotateY(-13deg) rotateZ(-4deg);box-shadow:5px 9px 0 #becbac,12px 24px 40px #48632b38;animation:control-float 7s ease-in-out infinite}
.immersive .orbit-label-top{top:39px}
.immersive .orbit-label-bottom{bottom:54px}
.immersive .closing{position:relative;overflow:hidden;isolation:isolate;background:#0f2319}
.immersive .closing>.wrap{position:relative;z-index:1}
.closing-orbits{position:absolute;width:550px;height:550px;right:-90px;top:-35px;perspective:700px;opacity:.2;z-index:0;pointer-events:none}
.closing-orbits i{position:absolute;inset:0;border:25px solid #b2d783;border-radius:100px;transform:rotateX(45deg) rotateY(30deg) rotateZ(30deg);box-shadow:inset 3px 2px 0 #ecffbd,8px 7px 0 #56743d;animation:closing-turn 25s linear infinite}
.closing-orbits i:nth-child(2){inset:50px;animation-delay:-8s}
.closing-orbits i:nth-child(3){inset:100px;animation-delay:-16s}
.connection-story:not(.in-view) *,.control-art:not(.in-view) *,.closing:not(.in-view) *,.hero:not(.in-view) .hero-asterisk{animation-play-state:paused}
[data-motion=off] *,[data-motion=off] *:before,[data-motion=off] *:after{animation-play-state:paused!important}
[data-motion=off] .title-line>span,[data-motion=off] .title-line>em{animation:none;transform:none;opacity:1}
[data-motion=off] .demo-frame,[data-motion=off] #circuit-scene{transition:none}
@keyframes title-arrive{from{transform:translateY(115%) rotate(3deg)}to{transform:translateY(0) rotate(0)}}
@keyframes asterisk-turn{to{transform:rotate(360deg)}}
@keyframes scroll-nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes equalizer{to{transform:scaleY(.35)}}
@keyframes signal-send{from{stroke-dashoffset:100}to{stroke-dashoffset:-100}}
@keyframes node-float{0%,100%{transform:translateY(4px) rotateX(12deg) rotateY(var(--node-turn)) rotateZ(-3deg)}50%{transform:translateY(-11px) rotateX(17deg) rotateY(var(--node-turn)) rotateZ(1deg)}}
@keyframes orbit-precess{0%{transform:translate(-50%,-50%) rotateX(64deg) rotateY(-14deg) rotateZ(0)}50%{transform:translate(-50%,-50%) rotateX(54deg) rotateY(14deg) rotateZ(180deg)}100%{transform:translate(-50%,-50%) rotateX(64deg) rotateY(-14deg) rotateZ(360deg)}}
@keyframes control-float{0%,100%{transform:translateY(6px) rotateX(12deg) rotateY(-13deg) rotateZ(-4deg)}50%{transform:translateY(-7px) rotateX(5deg) rotateY(-6deg) rotateZ(-2deg)}}
@keyframes closing-turn{to{transform:rotateX(45deg) rotateY(30deg) rotateZ(390deg)}}
@media(min-width:1600px){.immersive .hero-text{padding-block:190px 160px}.immersive .hero-art{right:1%;width:61%}}
@media(max-width:1180px){.header-actions{gap:16px}.motion-toggle-label{display:none}.immersive .hero h1{font-size:76px;letter-spacing:-4.5px}.immersive .hero-art{width:61%;right:-3%;top:125px;bottom:90px}.immersive .hero-text{padding-block:175px 145px}.immersive .hero-asterisk{font-size:56px;margin-left:23px}.immersive .hero-baseline{min-height:60px}.immersive .compatibility{padding-inline:40px}.immersive .browser-names{gap:12px}.scene-caption{right:14%;top:5px}}
@media(max-width:960px){.immersive .hero h1{font-size:67px}.immersive .hero-art{width:64%;right:-9%;top:165px;bottom:93px}.immersive .hero-text>.eyebrow{font-size:8px}.immersive .hero-copy{font-size:12px;max-width:305px}.immersive .hero-actions{gap:17px}.immersive .hero .button{font-size:11px;padding-inline:18px}.immersive .hero .text-link{font-size:10px}.immersive .hero-asterisk{font-size:49px;margin-left:20px}.scene-caption{display:none}.scene-controls{bottom:0;left:53%}.immersive .compatibility{padding-inline:32px}.hero-baseline>span:nth-child(2){display:none}.flow-node{width:120px;height:120px;top:110px}.agent-node{left:calc(15% - 60px)}.bridge-node{left:calc(50% - 60px)}.browser-node{left:calc(85% - 60px)}.node-face{border-radius:17px}.node-glyph{font-size:48px}.node-face>svg{width:48px;height:39px}.node-face>img{width:44px;height:44px}.bridge-node .node-face>img{width:44px;height:44px}.signal-caption{font-size:8px}}
@media(max-width:700px){.immersive .header{height:83px}.immersive .header .brand{font-size:21px}.immersive .header .brand img{width:30px;height:30px}.immersive .nav-install{font-size:10px;min-height:40px;padding:10px 13px;gap:13px}.header-actions{gap:15px}.motion-toggle{min-width:20px}.immersive .hero{min-height:0}.immersive .hero-text{padding-block:132px 0}.immersive .hero-text>.eyebrow{font-size:8px;margin-bottom:23px;letter-spacing:1px}.immersive .hero h1{font-size:clamp(57px,10.6vw,78px);max-width:590px;letter-spacing:-4px}.immersive .hero-asterisk{font-size:48px;margin-left:28px}.immersive .hero-copy{font-size:13px;max-width:350px;margin-top:23px}.immersive .hero-copy br{display:none}.immersive .hero-actions{margin-top:24px;gap:25px}.immersive .hero .button{min-height:48px;font-size:11px;padding-inline:20px}.immersive .hero .text-link{font-size:11px}.immersive .availability{font-size:8px;margin-top:17px}.immersive .hero-art{position:relative;top:auto;bottom:auto;right:auto;width:110%;height:420px;margin:-15px -5% 65px;aspect-ratio:auto}.scene-controls{bottom:5px;left:50%;font-size:8px}.scene-controls button{width:34px;height:34px}.immersive .hero-baseline{min-height:57px;font-size:7px}.immersive .compatibility{padding:28px 24px;gap:25px;min-height:0}.immersive .intro.section{padding-block:70px}.immersive .intro-grid h2{font-size:43px}.connection-story{margin-top:34px}.connection-stage{height:280px}.flow-node{width:90px;height:90px;top:83px}.agent-node{left:calc(16% - 45px)}.bridge-node{left:calc(50% - 45px)}.browser-node{left:calc(84% - 45px)}.node-face{gap:11px;border-radius:13px}.node-face>span:last-child{font-size:6px;letter-spacing:.5px}.node-glyph{font-size:35px}.node-face>svg{width:36px;height:29px}.bridge-node .node-face>img{width:33px;height:33px}.node-layer{border-radius:13px}.layer-back{transform:translateZ(-24px) translate(7px,12px)}.layer-middle{transform:translateZ(-12px) translate(3px,6px)}.node-orbit{inset:-18px}.signal-caption{top:220px;font-size:7px}.signal-caption-one{left:15%;width:30%}.signal-caption-two{left:56%;width:35%}.connection-story-foot{padding:16px;gap:14px;font-size:7px;letter-spacing:.2px}.connection-story-foot>span:nth-child(2){display:none}.immersive .playground-section{padding-block:70px 45px}.immersive .demo-frame{transform:none}.immersive .control-art{min-height:330px}.closing-orbits{width:400px;height:400px;right:-170px;top:20px}.immersive .closing h2{position:relative}.immersive .hero-grid{opacity:.1}}
@media(max-width:420px){.immersive .hero-art{height:355px;margin-top:-7px;margin-bottom:60px}.immersive .hero h1{font-size:clamp(49px,14.7vw,59px);letter-spacing:-3.4px}.immersive .hero-text{padding-top:122px}.immersive .hero-asterisk{font-size:39px;margin-left:27px}.immersive .header .brand{font-size:19px;gap:7px}.immersive .header .brand img{width:28px;height:28px}.header-actions{gap:12px}.immersive .nav-install{padding-inline:11px;gap:9px;font-size:9px}.immersive .nav-install .icon{width:14px}.immersive .hero-copy{font-size:12px}.immersive .hero .text-link{font-size:10px}.immersive .hero-actions{gap:19px}.immersive .hero .button{font-size:10px;padding-inline:17px}.flow-node{width:77px;height:85px}.agent-node{left:calc(15% - 38px)}.bridge-node{left:calc(50% - 38px)}.browser-node{left:calc(85% - 38px)}.signal-caption{font-size:6px}.node-face>span:last-child{font-size:5px}.immersive .intro-grid h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.immersive *,.immersive *:before,.immersive *:after{animation:none!important;transition:none!important}.immersive .title-line>span,.immersive .title-line>em{transform:none;opacity:1}.flow-node{transform:rotateX(12deg) rotateY(var(--node-turn))}.signal-pulse,.signal-return{stroke-dasharray:2 8}.hero-grid{transform:none}}