:root{color-scheme:dark;--bg:#030611;--ink:#f2f4ff;--muted:#8e9abb;--cyan:#72f6e4;--violet:#a792ff;--blue:#7397ff;--line:rgba(177,194,255,.2);--mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;--sans:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans)}button,a{color:inherit;font:inherit}a{text-decoration:none}button{cursor:pointer}#cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:-5}.nebula{position:fixed;z-index:-4;width:75vw;aspect-ratio:1;border-radius:50%;filter:blur(90px);opacity:.2;pointer-events:none;transition:transform 2s ease,background 2s ease}.nebula-a{left:-26vw;top:-35vw;background:radial-gradient(circle,rgba(64,98,218,.8),transparent 66%)}.nebula-b{right:-32vw;bottom:-42vw;background:radial-gradient(circle,rgba(126,69,214,.7),transparent 68%)}.grain{position:fixed;z-index:20;inset:0;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}.vignette{position:fixed;z-index:19;inset:0;pointer-events:none;box-shadow:inset 0 0 15vw 3vw rgba(0,0,0,.72);background:linear-gradient(180deg,rgba(1,3,11,.3),transparent 25%,transparent 75%,rgba(1,3,11,.5))}.hud-header,.player-hud{position:fixed;z-index:30;left:clamp(22px,4.5vw,76px);right:clamp(22px,4.5vw,76px);display:flex;align-items:center}.hud-header{top:clamp(18px,3.5vw,46px);justify-content:space-between}.brand{display:flex;gap:11px;align-items:center;font:700 11px var(--mono);letter-spacing:.08em}.brand em{color:#717e9f;font-style:normal;font-weight:400}.brand-sigil{position:relative;display:grid;width:26px;height:26px;place-items:center}.brand-sigil:after{width:7px;height:7px;content:"";border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.brand-sigil i{position:absolute;width:25px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan));transform:rotate(var(--r))}.brand-sigil i:nth-child(1){--r:0deg}.brand-sigil i:nth-child(2){--r:60deg}.brand-sigil i:nth-child(3){--r:120deg}.hud-status{position:absolute;left:50%;display:flex;gap:9px;align-items:center;transform:translateX(-50%);color:#7c89ac;font:9px var(--mono);letter-spacing:.15em}.hud-status i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.8s ease-in-out infinite}.skip-button{padding:8px 0;border:0;background:none;color:#9ba7c7;font:10px var(--mono);letter-spacing:.06em}.skip-button span{margin-left:8px;color:var(--cyan)}.cinema{position:relative;width:100%;height:100%}.scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);gap:5vw;align-items:center;padding:clamp(90px,10vh,130px) clamp(28px,7vw,120px) clamp(100px,12vh,140px);visibility:hidden;opacity:0;transform:scale(1.025);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.1,1),visibility 1.1s}.scene.active{visibility:visible;opacity:1;transform:none}.scene-copy{position:relative;z-index:4;max-width:720px}.scene-code{display:flex;gap:12px;align-items:center;margin:0 0 23px;color:var(--cyan);font:10px var(--mono);letter-spacing:.16em}.scene-code:before{width:38px;height:1px;content:"";background:var(--cyan);box-shadow:0 0 8px var(--cyan)}h1,h2{margin:0;font-size:clamp(46px,6vw,92px);line-height:1.05;letter-spacing:-.07em}h1 em,h2 em{color:#afa4ff;font-style:normal;text-shadow:0 0 45px rgba(156,137,255,.22)}.scene-copy>p:last-child,.scene-copy>p:nth-last-child(2){max-width:530px;margin:27px 0 0;color:#a8b4d2;font-size:clamp(14px,1.2vw,18px);line-height:1.9}.scene-visual{position:relative;width:min(620px,48vw);aspect-ratio:1;justify-self:center}.coordinate{position:absolute;color:#6e7b9e;font:8px var(--mono);letter-spacing:.13em}.coord-a{left:5%;bottom:13%}.coord-b{right:2%;top:14%;color:#7fe5d9}.signal-core,.agent-core,.network-core{position:absolute;inset:0;display:grid;margin:auto;place-content:center;text-align:center;border-radius:50%}.signal-core{width:25%;height:25%;border:1px solid #b9b4ff;background:radial-gradient(circle at 36% 30%,#fff,#a99aff 12%,#34307c 48%,#090d26 75%);box-shadow:0 0 70px rgba(122,107,255,.7);font:500 clamp(40px,6vw,80px) var(--mono);animation:corePulse 3s ease-in-out infinite}.signal-ring{position:absolute;inset:15%;border:1px solid rgba(129,157,255,.28);border-radius:50%;transform:rotateX(68deg) rotateZ(var(--z));animation:orbit 10s linear infinite}.signal-ring:after{position:absolute;top:48%;left:-4px;width:8px;height:8px;content:"";border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.ring-1{--z:0deg}.ring-2{inset:24%;--z:80deg;animation-duration:13s;animation-direction:reverse}.ring-3{inset:34%;--z:145deg;animation-duration:8s}.code-window{position:absolute;inset:17% 3% 20% 4%;overflow:hidden;border:1px solid rgba(163,180,255,.3);border-radius:12px;background:linear-gradient(150deg,rgba(32,41,85,.76),rgba(5,9,24,.85));box-shadow:0 35px 90px rgba(0,0,0,.45),0 0 60px rgba(85,91,235,.18);transform:perspective(900px) rotateY(-12deg) rotateX(5deg)}.window-bar{display:flex;gap:7px;align-items:center;height:42px;padding:0 15px;border-bottom:1px solid var(--line);background:rgba(22,29,61,.9)}.window-bar i{width:7px;height:7px;border-radius:50%;background:#ee7497}.window-bar i:nth-child(2){background:#e8bf70}.window-bar i:nth-child(3){background:#66d8c1}.window-bar span{margin-left:7px;color:#7582a9;font:9px var(--mono)}.code-window pre{margin:0;padding:12% 8%;color:#b6c1dc;font:clamp(11px,1vw,15px)/2.5 var(--mono)}.code-window pre span{color:#546284}.code-window pre b{color:#ae9fff}.code-window pre em{color:#70e2d4;font-style:normal}.code-window pre strong{color:#e7c884}.code-cursor{display:inline-block;width:8px;height:17px;background:var(--cyan);vertical-align:middle;animation:blink 1s steps(1) infinite}.scan-beam{position:absolute;left:13%;right:1%;top:28%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 22px 3px var(--cyan);animation:codeScan 3.8s ease-in-out infinite}.loop-orbit{position:absolute;inset:15%;border:1px solid rgba(132,159,255,.28);border-radius:50%;animation:slowSpin 18s linear infinite}.loop-orbit:before,.loop-orbit:after{position:absolute;inset:10%;content:"";border:1px dashed rgba(159,141,255,.24);border-radius:50%}.loop-orbit:after{inset:27%;border-style:solid}.agent-core{width:32%;height:32%;background:radial-gradient(circle at 38% 31%,#eafcff,#6fdecf 10%,#315f82 42%,#111331 72%);box-shadow:0 0 65px rgba(93,220,210,.38);font:700 clamp(17px,2vw,28px) var(--mono)}.agent-core small,.network-core small{display:block;margin-top:6px;color:#a4b2d1;font-size:7px;letter-spacing:.14em}.loop-node{position:absolute;display:flex;gap:9px;align-items:center;color:#c1cbe5;font:11px var(--mono)}.loop-node i{width:9px;height:9px;border:1px solid #cde7ff;border-radius:50%;background:var(--cyan);box-shadow:0 0 13px var(--cyan)}.node-perceive{top:12%;left:19%}.node-plan{top:23%;right:5%}.node-act{right:11%;bottom:17%}.node-reflect{left:12%;bottom:15%}.loop-pulse{position:absolute;inset:5%;border:1px solid rgba(114,246,228,.15);border-radius:50%;animation:wave 3s ease-out infinite}.network-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.network-lines path{fill:none;stroke:rgba(117,238,226,.3);stroke-width:1;stroke-dasharray:5 9;animation:dash 11s linear infinite}.network-core{width:25%;height:25%;border:1px solid rgba(197,207,255,.6);background:radial-gradient(circle,#5e51b9,#1a2047 55%,#090d21 72%);box-shadow:0 0 55px rgba(143,121,255,.55);font:700 19px var(--mono)}.agent-node{position:absolute;display:grid;gap:7px;place-items:center;color:#aebbd9;font:10px var(--mono)}.agent-node i{display:grid;width:63px;aspect-ratio:1;place-items:center;border:1px solid rgba(126,232,221,.5);border-radius:50%;background:rgba(12,24,45,.8);box-shadow:0 0 25px rgba(96,228,214,.17);color:var(--cyan);font:normal 17px var(--mono)}.n1{top:20%;left:18%}.n2{top:17%;right:15%}.n3{right:12%;bottom:18%}.n4{left:15%;bottom:16%}.visual-gate{perspective:900px}.gate-halo{position:absolute;inset:12%;border:1px solid rgba(152,140,255,.28);border-radius:50%;animation:halo 7s ease-in-out infinite}.halo-2{inset:21%;animation-delay:-2s}.halo-3{inset:30%;animation-delay:-4s}.gate{position:absolute;inset:23%;display:grid;place-items:center;border:1px solid rgba(221,223,255,.65);border-radius:50%;background:radial-gradient(circle,rgba(223,234,255,.95),rgba(134,111,255,.38) 15%,rgba(47,35,112,.38) 40%,rgba(5,8,24,.94) 71%);box-shadow:0 0 90px rgba(124,102,255,.55),inset 0 0 45px rgba(0,0,0,.8);animation:gatePulse 3.4s ease-in-out infinite}.gate-depth{position:absolute;inset:17%;border:1px solid rgba(122,245,228,.47);border-radius:50%;box-shadow:inset 0 0 45px rgba(95,232,217,.22),0 0 25px rgba(95,232,217,.25)}.gate span{color:rgba(218,228,255,.55);font:8px var(--mono);letter-spacing:.23em}.gate-floor{position:absolute;left:16%;right:16%;bottom:8%;height:30%;background:repeating-linear-gradient(90deg,transparent 0 8%,rgba(111,138,224,.14) 8.3% 8.5%),linear-gradient(rgba(113,242,226,.16) 1px,transparent 1px);background-size:auto,100% 18%;transform:rotateX(72deg);mask-image:linear-gradient(transparent,#000)}.final-prompt{margin-top:42px;opacity:0;transform:translateY(15px);transition:opacity .7s 1.4s,transform .7s 1.4s}.scene.active .final-prompt{opacity:1;transform:none}.final-prompt>span{display:block;margin-bottom:13px;color:var(--cyan);font:10px var(--mono);letter-spacing:.12em}.start-button{position:relative;display:inline-flex;min-width:210px;height:57px;padding:0 20px;align-items:center;justify-content:space-between;overflow:hidden;border:1px solid rgba(194,192,255,.5);border-radius:7px;background:linear-gradient(110deg,#dcd7ff,#9a92ff 55%,#72eadf);box-shadow:0 18px 45px rgba(102,100,220,.23);color:#071020;font-weight:800;transition:transform .2s,box-shadow .2s}.start-button:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(114,234,223,.29)}.start-button i{font-size:20px;font-style:normal}.start-button b{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-130%);animation:buttonShine 3.2s 2s ease-in-out infinite}.player-hud{bottom:clamp(20px,4vw,48px);gap:18px}.play-toggle{display:grid;flex:0 0 36px;width:36px;height:36px;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(11,16,38,.5);backdrop-filter:blur(10px)}.pause-icon{width:8px;height:11px;border-left:2px solid #ced6ef;border-right:2px solid #ced6ef}.paused .pause-icon{width:0;height:0;margin-left:3px;border:5px solid transparent;border-left:8px solid #ced6ef;border-right:0}.timeline{display:flex;flex:1;gap:6px}.timeline-step{position:relative;flex:1;height:22px;padding:0;border:0;background:none}.timeline-step:before{position:absolute;left:0;right:0;top:10px;height:1px;content:"";background:rgba(163,178,224,.22)}.timeline-step i{position:absolute;left:0;top:10px;width:0;height:1px;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 8px var(--cyan)}.timeline-step.complete i{width:100%}.timeline-step.active i{width:var(--progress)}.timeline-step span{position:absolute;left:0;top:-8px;color:#697799;font:7px var(--mono);letter-spacing:.1em}.timeline-step.active span{color:var(--cyan)}.timecode{display:flex;gap:7px;color:#8995b6;font:9px var(--mono)}.timecode i{color:#465272;font-style:normal}.orientation-note{display:none}.paused .signal-ring,.paused .signal-core,.paused .code-cursor,.paused .scan-beam,.paused .loop-orbit,.paused .loop-pulse,.paused .network-lines path,.paused .gate-halo,.paused .gate,.paused .start-button b{animation-play-state:paused}@keyframes blink{50%{opacity:.25}}@keyframes corePulse{50%{transform:scale(1.06);filter:brightness(1.15)}}@keyframes orbit{to{transform:rotateX(68deg) rotateZ(calc(var(--z) + 360deg))}}@keyframes slowSpin{to{transform:rotate(360deg)}}@keyframes codeScan{0%,100%{top:27%;opacity:0}20%,80%{opacity:1}90%{top:73%;opacity:0}}@keyframes wave{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.15);opacity:0}}@keyframes dash{to{stroke-dashoffset:-140}}@keyframes halo{50%{transform:scale(1.1) rotate(5deg);border-color:rgba(117,242,227,.3)}}@keyframes gatePulse{50%{transform:scale(1.035);filter:brightness(1.14)}}@keyframes buttonShine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}body[data-scene="1"] .nebula-a{transform:translate(32vw,18vh);background:radial-gradient(circle,rgba(64,114,218,.9),transparent 66%)}body[data-scene="2"] .nebula-b{transform:translate(-25vw,-22vh);background:radial-gradient(circle,rgba(54,170,171,.65),transparent 68%)}body[data-scene="3"] .nebula-a{transform:translate(16vw,30vh)}body[data-scene="3"] .nebula-b{transform:translate(-34vw,-31vh)}body[data-scene="4"] .nebula-a{transform:translate(45vw,20vh);background:radial-gradient(circle,rgba(111,82,218,.9),transparent 66%)}body[data-scene="4"] .nebula-b{transform:translate(-38vw,-28vh);background:radial-gradient(circle,rgba(54,181,176,.55),transparent 68%)}
@media(max-width:900px){.scene{grid-template-columns:1fr;gap:0;padding-top:110px}.scene-copy{align-self:start;padding-top:7vh}.scene-visual{position:absolute;z-index:-1;right:-12vw;bottom:7vh;width:min(590px,76vw);opacity:.58}.scene-copy>p:last-child,.scene-copy>p:nth-last-child(2){max-width:460px}.hud-status{display:none}.final-copy{padding-top:2vh}.visual-gate{opacity:.7}.player-hud{gap:10px}.timecode{display:none}}@media(max-width:600px){.hud-header{left:18px;right:18px}.brand em{display:none}.scene{padding:105px 22px 90px}.scene-copy{padding-top:6vh}h1,h2{font-size:clamp(40px,13vw,64px)}.scene-copy>p:last-child,.scene-copy>p:nth-last-child(2){max-width:90%;font-size:13px}.scene-visual{right:-26vw;bottom:10vh;width:100vw;opacity:.42}.player-hud{left:18px;right:18px}.timeline-step span{display:none}.final-prompt{margin-top:30px}.start-button{height:53px}.coordinate{display:none}}@media(max-height:500px) and (orientation:landscape){.scene{padding-top:70px;padding-bottom:70px}.scene-copy{padding-top:0}h1,h2{font-size:clamp(36px,8vw,58px)}.scene-copy>p:last-child,.scene-copy>p:nth-last-child(2){margin-top:14px;line-height:1.6}.final-prompt{margin-top:14px}.hud-header{top:14px}.player-hud{bottom:12px}}@media(max-width:480px) and (orientation:portrait){.orientation-note{position:fixed;z-index:50;right:10px;bottom:80px;display:block;color:#536180;font:7px var(--mono);letter-spacing:.1em;writing-mode:vertical-rl}}@media(prefers-reduced-motion:reduce){.nebula,.scene{transition:none}.signal-ring,.signal-core,.code-cursor,.scan-beam,.loop-orbit,.loop-pulse,.network-lines path,.gate-halo,.gate,.start-button b{animation:none!important}}