:root{--bg:#070b15;--mint:#70f1cd;--blue:#7ab7ff;--muted:#b4c3d8;--pink:#f48fbb}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#070b15;color:#f5f7fd;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit}button{background:#1a2641;color:#eff6ff;border:1px solid #42506c;padding:9px 13px;border-radius:10px;cursor:pointer}button:hover{background:#2b4061}a{color:var(--mint);text-decoration:none}a:hover{text-decoration:underline}.hidden{display:none!important}.shell{max-width:1550px;margin:0 auto;padding:13px 20px 20px}.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 3px 14px}.brand{display:flex;align-items:center;font-weight:900;letter-spacing:2px;font-size:21px;white-space:nowrap}.brand span:nth-child(2){color:var(--mint)}.logomark{font-size:31px;margin-right:10px;color:var(--mint)}.brand small{margin-left:12px;font-size:10px;border:1px solid #526478;color:#a5c3d9;padding:6px 8px;border-radius:20px}.ctrl-right{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;font-size:12px}.ctrl-right #status{color:#a7bdc8;margin-right:8px}.play{background:var(--mint);border-color:var(--mint);color:#102a2a;font-weight:800}.speedlabel{display:flex;align-items:center;gap:6px;color:#b8c5da}.speedlabel select{background:#122038;border:1px solid #394d68;color:white;padding:9px 5px;border-radius:9px}.movie{position:relative;aspect-ratio:16/9;border:1px solid #35435e;border-radius:16px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 82% 6%,#204169 0,transparent 38%),radial-gradient(ellipse at 4% 90%,#1c5253 0,transparent 38%),linear-gradient(120deg,#131d31,#090d19 55%,#101b32);box-shadow:0 18px 60px #0009}.noise,.gridbg,.light{position:absolute;inset:0;pointer-events:none}.noise{opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E")}.gridbg{opacity:.2;background-image:linear-gradient(#93c2e018 1px,transparent 1px),linear-gradient(90deg,#93c2e018 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);animation:gridShift 24s linear infinite}.light{width:52%;height:70%;filter:blur(90px);opacity:.24}.light-a{background:#26daab;top:-40%;left:-12%;animation:lightA 9s ease-in-out infinite alternate}.light-b{background:#6369f5;top:30%;left:60%;animation:lightB 12s ease-in-out infinite alternate}@keyframes gridShift{to{transform:translate(-48px,-48px)}}@keyframes lightA{to{transform:translate(110px,150px)}}@keyframes lightB{to{transform:translate(-120px,-100px)}}
/* layout within video */
.title-screen,.chapter,.outro{position:absolute;inset:0 0 44px;z-index:1}.title-screen{padding:7.2% 7%;display:flex;flex-direction:column;justify-content:center}.intro-kicker{font-size:clamp(10px,1.14vw,18px);font-weight:850;letter-spacing:3px;color:var(--mint)}.intro-head{font-size:clamp(44px,6.5vw,110px);font-weight:950;letter-spacing:-.055em;line-height:1.01;margin:15px 0 20px;position:relative;z-index:2;text-shadow:0 9px 35px #0006}.intro-head span{color:var(--mint)}.intro-under{font-size:clamp(16px,1.95vw,30px);color:#e5f6ff;max-width:69%;font-weight:600;min-height:2.6em;transition:opacity .2s}.intro-mini{display:flex;gap:17px;align-items:center;color:#b8cfe5;letter-spacing:1.5px;font-size:clamp(10px,1vw,15px);margin-top:20px}.badgebox{background:#6aefd0;color:#072b27;font-weight:900;padding:10px 16px;border-radius:9px}.intro-showcase{position:absolute;right:8%;top:17%;width:30%;aspect-ratio:1;display:grid;place-items:center}.intro-orbit{position:absolute;width:90%;aspect-ratio:1;border:3px solid #81e3e277;border-radius:50%;animation:spin 14s linear infinite;box-shadow:0 0 80px #75e8ce15}.intro-orbit.second{width:66%;border:2px dashed #7f9fffa5;animation-duration:11s;animation-direction:reverse}.intro-symbol{font-size:clamp(74px,10.5vw,172px);filter:drop-shadow(0 15px 30px #0008)}.pop{animation:pop .65s cubic-bezier(.12,1.45,.31,1) both}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.chapter{display:grid;grid-template-columns:39.5% 60.5%;gap:0;padding:3.3% 3.4% 2.9%}.chapter-info{z-index:2;display:flex;flex-direction:column;min-width:0;padding:3% 6% 1% 2%;border-right:1px solid #9dc6ff29}.chapter-eyebrow{display:flex;align-items:center;gap:12px;letter-spacing:1.7px;font-size:clamp(9px,1vw,15px);color:#9ce7cc;font-weight:850}.rankbadge{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#91f3ce,#69baff);color:#082333;border-radius:12px;font-size:clamp(21px,2.6vw,43px);padding:5px 13px;font-weight:950;box-shadow:0 7px 30px #6deac84d}.chapter-info h1{font-size:clamp(26px,3.5vw,55px);line-height:1.08;letter-spacing:-2px;margin:20px 0 9px;overflow-wrap:anywhere}.starline{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.starline strong{font-size:clamp(23px,3.1vw,49px);font-variant-numeric:tabular-nums}.starline .gold{color:#ffd174}.starline small{color:#a9bcd3;font-size:clamp(9px,.91vw,13px);letter-spacing:.8px}.chapter-rule{height:1px;background:linear-gradient(90deg,#75ffcb8a,transparent);margin:22px 0 21px}.biglabel{font-size:clamp(10px,1.05vw,16px);font-weight:900;letter-spacing:2.4px;color:var(--mint)}.bigmessage{font-size:clamp(21px,2.25vw,36px);font-weight:850;line-height:1.16;letter-spacing:-.8px;margin:13px 0;min-height:2.4em}.smallmessage{color:#b9cde0;font-size:clamp(12px,1.15vw,18px);line-height:1.45;min-height:3em}.keywordrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.keywordrow span{background:#1c3445;border:1px solid #4c7886;padding:7px 10px;border-radius:40px;color:#a8f0da;font-size:clamp(9px,.9vw,13px)}.chapter-footer{margin-top:auto;border-radius:13px;padding:12px 15px;background:#091a26d9;border:1px solid #3c6470;display:flex;flex-direction:column;gap:8px}.install-top{font-size:10px;color:#91e5c6;letter-spacing:1.8px;font-weight:900}.chapter-footer code{font-family:ui-monospace,Consolas,monospace;color:#f0ffe9;font-size:clamp(10px,1vw,16px);overflow-wrap:anywhere}.chapter-footer a{font-size:clamp(11px,1vw,15px)}.install-note{color:#a7bdc6;font-size:clamp(9px,.85vw,13px);line-height:1.3}.visual-stage{z-index:2;min-width:0;margin-left:3.3%;display:flex;flex-direction:column;border-radius:22px;background:linear-gradient(140deg,#111d30dc,#091420ed);border:1px solid #527a9c55;box-shadow:0 15px 60px #0009;overflow:hidden}.visual-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;color:#8fd8f5;font-size:clamp(11px,.96vw,15px);letter-spacing:1.6px;font-weight:800;background:#14243b99}.phase-pill{color:#effff8;background:#28565c;border:1px solid #69c2ad66;border-radius:12px;padding:6px 11px}.visual-body{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;padding:16px}.visual-caption{min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center;padding:7px 18px;color:#cbe5f0;font-size:clamp(12px,1.12vw,18px)}.phase-dots{display:flex;justify-content:center;gap:9px;padding:8px 12px 14px}.phase-dots i{height:5px;width:22px;border-radius:6px;background:#34516d}.phase-dots i.on{width:48px;background:linear-gradient(90deg,#78eed1,#65a9ff)}.visual-stack{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;animation:sceneUp .65s ease both}.huge-emoji{font-size:clamp(72px,11vw,175px);filter:drop-shadow(0 14px 40px #0007);animation:scaleFloat 4s ease-in-out infinite}.huge-tag{font-size:clamp(26px,3.4vw,57px);font-weight:950;letter-spacing:-2px;text-align:center}.huge-sub{font-size:clamp(14px,1.65vw,26px);color:#b1d7e3;text-align:center;max-width:90%;line-height:1.4}.diagram{display:flex;align-items:center;justify-content:center;gap:13px;width:100%}.diagram-node{min-width:0;flex:1;aspect-ratio:1.05;background:linear-gradient(145deg,#1b3b50,#15253c);border:2px solid #4b9698;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;box-shadow:0 15px 35px #0006;animation:nodePulse 2.5s ease-in-out infinite alternate}.diagram-node:nth-of-type(2){animation-delay:.3s}.diagram-node:nth-of-type(3){animation-delay:.7s}.node-icon{font-size:clamp(34px,5vw,80px)}.diagram-node b{font-size:clamp(12px,1.35vw,20px)}.diagram-arrow{font-size:clamp(22px,3vw,55px);color:var(--mint);animation:arrow 1.4s ease-in-out infinite}.demo-window{width:95%;height:93%;border-radius:16px;background:#eaf3f8;color:#17243a;overflow:hidden;box-shadow:0 25px 55px #0008;animation:sceneUp .6s both}.demo-head{height:38px;display:flex;align-items:center;gap:6px;padding:0 15px;background:#d9e5ef}.demo-head i{display:block;width:10px;height:10px;border-radius:50%;background:#fa706a}.demo-head i:nth-child(2){background:#e9bf61}.demo-head i:nth-child(3){background:#6ac69d}.demo-url{margin:auto;color:#667a90;background:#f5f9fc;border-radius:6px;padding:4px 30px;font-size:12px}.demo-content{position:relative;padding:5% 6%;height:calc(100% - 38px)}.demo-big{font-size:clamp(22px,2.8vw,45px);font-weight:900;margin-bottom:20px}.demo-row{display:flex;gap:9px;flex-wrap:wrap}.demo-box{padding:9px 13px;border:1px solid #afc4d4;border-radius:7px;background:#fff;color:#294052;font-size:clamp(11px,1.15vw,16px)}.demo-highlight{background:#b6f2df;border-color:#58d8ad}.demo-console{white-space:pre-line;background:#152a3e;color:#c3ffe8;border-radius:11px;font-family:ui-monospace,monospace;font-size:clamp(12px,1.25vw,19px);padding:19px 21px;line-height:1.9;margin-top:22px;box-shadow:0 10px 25px #0003}.demo-cursor{position:absolute;color:#2065a6;font-size:36px;right:18%;top:32%;animation:cursor 4s ease-in-out infinite}.compare{width:97%;display:grid;grid-template-columns:1fr 1fr;gap:17px}.compare-card{border:1px solid #c27b91;background:#3a1e39;border-radius:22px;min-height:290px;padding:22px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;animation:sceneUp .7s both}.compare-card.after{border-color:#76eac7;background:#154038;animation-delay:.12s}.compare-label{letter-spacing:2px;font-size:clamp(12px,1vw,16px);font-weight:900}.compare-icons{font-size:clamp(52px,6.5vw,103px)}.compare-message{font-size:clamp(15px,1.6vw,25px);font-weight:750;line-height:1.32}.repo-frame{position:relative;width:94%;height:92%;background:#fff;color:#1e293b;border-radius:15px;overflow:hidden;box-shadow:0 20px 50px #000a;animation:sceneUp .65s both}.repo-nav{padding:13px 16px;background:#202a3b;color:white;font-size:clamp(10px,.9vw,14px)}.repo-head{padding:15px 18px;color:#176abd;font-size:clamp(16px,1.6vw,25px)}.repo-stat{float:right;color:#765e13;background:#fff4c9;border-radius:8px;padding:5px 10px}.repo-tabs{display:flex;gap:15px;border-bottom:1px solid #d7dee9;padding:12px 18px;color:#536175;font-size:clamp(10px,.9vw,14px)}.repo-list{margin:10px 16px;border:1px solid #dce3ec;border-radius:8px;color:#4c5a68}.repo-list div{padding:11px 15px;border-bottom:1px solid #e7edf3}.repo-readme{padding:8px 20px}.repo-readme h3{font-size:clamp(22px,2.3vw,35px)}.repo-readme p{font-size:clamp(12px,1.1vw,17px);line-height:1.5}.repo-shot{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.repo-focus{position:absolute;right:10px;bottom:8px;border:2px solid #7ce7bd;border-radius:8px;width:22%;height:11%;animation:focusPulse 2s ease-in-out infinite alternate;pointer-events:none}.repo-foot{position:absolute;bottom:10px;left:18px;color:#1b6aa5;font-size:12px}.outro{padding:8%;display:flex;flex-direction:column;justify-content:center}.outro-symbol{font-size:70px;color:var(--mint);animation:spin 20s linear infinite;width:max-content}.outro h2{font-size:clamp(44px,6vw,98px);line-height:1.05;letter-spacing:-3px;margin:13px 0}.outro em{font-family:Georgia,serif;font-weight:400;color:var(--mint)}.outro p{color:#d2e5f2;font-size:clamp(16px,1.7vw,27px)}.outro-row{display:flex;gap:20px;letter-spacing:2px;color:#96efcd;margin-top:25px;font-weight:800;font-size:clamp(10px,1.05vw,15px)}.chapter-progress{position:absolute;z-index:5;left:20px;right:20px;bottom:18px;display:grid;grid-template-columns:140px 1fr 155px;gap:14px;align-items:center;font-size:12px;letter-spacing:1px;color:#a8ccda}.track{height:8px;border-radius:20px;background:#32516a;overflow:hidden}.track #prog{height:100%;background:linear-gradient(90deg,#70edbf,#66aeff);width:0%;border-radius:20px}.mini-timeline{display:flex;gap:5px;position:absolute;left:20px;right:20px;bottom:5px;height:5px;z-index:8}.mini-timeline span{height:4px;background:#45617a66;flex:1;border-radius:4px;overflow:hidden}.mini-timeline b{display:block;width:0;height:100%;background:#7feacc}.lower{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 5px 0;font-size:13px}.lower strong{margin-right:18px}.lower #helper{color:#95a8bd}.rightlower{display:flex;align-items:center;gap:10px}.rightlower label{white-space:nowrap}.rightlower button{font-size:12px}
@keyframes sceneUp{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleFloat{50%{transform:scale(1.075) translateY(-10px)}}@keyframes arrow{50%{transform:translateX(7px);opacity:.55}}@keyframes nodePulse{to{transform:translateY(-10px);box-shadow:0 23px 36px #0008}}@keyframes cursor{0%{transform:translate(-150px,-60px)}45%{transform:translate(0,0)}52%{transform:scale(.85)}65%,100%{transform:translate(30px,-25px)}}@keyframes focusPulse{to{box-shadow:0 0 20px #5ceebc}}
.recording .controls,.recording .lower{display:none}.recording .shell{max-width:none;padding:0}.recording .movie{height:100vh;aspect-ratio:auto;border:0;border-radius:0}
@media(max-width:1050px){.controls{flex-direction:column;align-items:flex-start}.chapter{grid-template-columns:42% 58%;padding:2.5%}.chapter-info{padding-right:5%}.chapter-info h1{font-size:clamp(22px,3.5vw,40px)}.chapter-rule{margin:12px 0}.visual-top{padding:11px}.chapter-footer{padding:8px}.smallmessage{min-height:0}.keywordrow{margin-top:6px}.intro-head{font-size:6vw}}
@media(max-width:650px){.shell{padding:8px}.controls{gap:7px}.brand{font-size:17px}.ctrl-right{justify-content:flex-start}.movie{aspect-ratio:9/16;min-height:600px}.title-screen,.chapter,.outro{bottom:35px}.chapter{display:flex;flex-direction:column;gap:10px;padding:12px}.chapter-info{flex:0 0 auto;border-right:0;padding:2px 0}.chapter-info h1{font-size:24px;margin:8px 0}.chapter-rule,.keywordrow,.install-note{display:none}.starline strong{font-size:20px}.bigmessage{font-size:20px;min-height:0;margin:5px 0}.biglabel{font-size:10px}.smallmessage{font-size:12px;min-height:0}.chapter-footer{padding:7px;margin-top:8px}.chapter-footer code{font-size:10px}.visual-stage{margin:0;min-height:290px;flex:1}.visual-top{padding:8px}.visual-body{padding:9px}.huge-emoji{font-size:70px}.huge-tag{font-size:26px}.huge-sub{font-size:14px}.diagram-node{gap:6px}.node-icon{font-size:30px}.diagram-node b{font-size:10px}.diagram-arrow{font-size:22px}.compare-card{min-height:200px;padding:8px;gap:10px}.compare-icons{font-size:50px}.compare-message{font-size:12px}.intro-head{font-size:clamp(33px,8vw,55px)}.intro-under{max-width:100%;font-size:17px}.intro-showcase{right:3%;top:11%;opacity:.5}.intro-mini{gap:6px;font-size:9px;flex-wrap:wrap}.outro h2{font-size:40px}.chapter-progress{grid-template-columns:60px 1fr 100px;left:10px;right:10px;font-size:10px}.lower{flex-direction:column;align-items:flex-start}.rightlower{flex-wrap:wrap}}

/* V7: semantic stage choreography. These movement patterns use the actual audio progress. */
.motion-enter {animation: visualSceneEnter .6s cubic-bezier(.16,1,.3,1) both;}
@keyframes visualSceneEnter {0%{opacity:0;filter:blur(10px);transform:translateY(25px) scale(.96)}100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
.demo-window .demo-console {overflow:hidden;animation: terminalOpen .85s steps(8,end) both;animation-delay:.3s;}
@keyframes terminalOpen {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.demo-window .demo-box {animation: chipEnter .6s ease both;}
.demo-window .demo-box:nth-child(1) {animation-delay:.25s}.demo-window .demo-box:nth-child(2) {animation-delay:.45s}.demo-window .demo-box:nth-child(3) {animation-delay:.65s}
@keyframes chipEnter {from{opacity:0;transform:translateY(18px) rotate(-4deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
.repo-frame {animation: repoZoom .9s cubic-bezier(.2,.85,.2,1) both;}
@keyframes repoZoom {from{opacity:0;transform:perspective(1200px) rotateY(14deg) scale(.82) translateX(90px)}to{opacity:1;transform:perspective(1200px) rotateY(0) scale(1) translateX(0)}}
.repo-frame .repo-shot {animation: shotPan 14s linear infinite alternate;}
@keyframes shotPan {from{object-position:center top}to{object-position:center 65%}}
.compare-card {animation: leftCompare .65s cubic-bezier(.2,.9,.2,1) both}.compare-card.after {animation: rightCompare .8s cubic-bezier(.2,.9,.2,1) .25s both}
@keyframes leftCompare {from{opacity:0;transform:translateX(-70px) rotate(-3deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes rightCompare {from{opacity:0;transform:translateX(70px) rotate(3deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
.diagram-node {animation: nodeEntrance .65s cubic-bezier(.2,1.3,.3,1) both}
.diagram-node:nth-child(1){animation-delay:.05s}.diagram-node:nth-child(3){animation-delay:.4s}.diagram-node:nth-child(5){animation-delay:.8s}
@keyframes nodeEntrance{0%{opacity:0;transform:scale(.4) translateY(50px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.chapter-info .bigmessage {transition:opacity .15s;animation: captionEnter .5s ease both}
@keyframes captionEnter {from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Transitions are allowed to complete while audio is paused, preventing invisible first frames. */
@media (prefers-reduced-motion:reduce){.movie *,.movie *::before,.movie *::after{animation:none!important;transition:none!important}}

/* V8 Cinematic Intro: six distinct demonstrations synchronized to the new intro recording */
.title-screen{overflow:hidden;isolation:isolate}
.title-screen::before{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(110deg,rgba(7,17,28,.0),rgba(7,17,28,.08) 48%,rgba(43,145,161,.09));z-index:-1}
.title-screen .intro-kicker{position:relative;z-index:4;font-size:clamp(10px,1vw,17px);background:rgba(5,20,30,.65);width:max-content;padding:9px 15px;border:1px solid #6df4c54a;border-radius:100px}
.title-screen .intro-head{max-width:67%;font-size:clamp(55px,6.5vw,118px);margin:23px 0 20px;line-height:1.025;letter-spacing:-.053em;text-wrap:balance}
.title-screen .intro-under{max-width:62%;font-size:clamp(17px,1.9vw,29px);color:#f5faff;text-wrap:balance;line-height:1.23;font-weight:750}
.title-screen .intro-showcase{position:absolute;right:3.5%;top:15%;width:43%;height:66%;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;z-index:3;filter:drop-shadow(0 30px 40px #0009)}
.title-screen .intro-mini{position:relative;z-index:5;margin-top:24px}
.intro-subline{position:relative;z-index:3;color:#b5d8e6;font-size:clamp(13px,1.15vw,18px);max-width:60%;margin-top:15px}
.intro-scene-meter{position:absolute;z-index:5;left:7%;bottom:8%;display:flex;gap:10px;align-items:center}
.intro-scene-meter i{width:32px;height:5px;border-radius:12px;background:#426475;transition:background .3s,width .3s}
.intro-scene-meter i.active{background:#91ffd3;width:65px;box-shadow:0 0 20px #7fefd48a}
.beat-transition .intro-head{animation:cinematicTitle .75s cubic-bezier(.18,.9,.25,1) both}
.beat-transition .intro-under{animation:cinematicTitle .75s cubic-bezier(.18,.9,.25,1) .12s both}
.beat-transition .intro-showcase>*{animation:cinematicPanel .8s cubic-bezier(.18,1,.25,1) both}
@keyframes cinematicTitle{from{opacity:0;transform:translateY(38px) skewY(2deg);filter:blur(12px)}to{opacity:1;transform:translateY(0) skewY(0);filter:blur(0)}}
@keyframes cinematicPanel{from{opacity:0;transform:perspective(950px) rotateY(-22deg) translateX(90px) scale(.88)}to{opacity:1;transform:perspective(950px) rotateY(0deg) translateX(0px) scale(1)}}
.intro-demo-browser{position:relative;width:100%;height:83%;border-radius:20px;overflow:hidden;background:#f1f8fc;color:#16263b;border:1px solid #9ab7ca;box-shadow:0 20px 80px #0009}
.idb-bar{background:#dcebf4;display:flex;align-items:center;justify-content:space-between;padding:17px;font-size:14px}.idb-bar b{color:#eb7e75;letter-spacing:3px}.idb-body{padding:20px}.idb-tab{padding:13px;background:#d6f7e9;border:1px solid #74d3a8;color:#176447;font-size:14px;font-weight:850;border-radius:10px;display:flex;justify-content:space-between}.online{width:10px;height:10px;border-radius:50%;background:#21b17b;box-shadow:0 0 14px #21b17b;animation:idbGlow 1.4s infinite alternate}.idb-form{margin:20px auto;background:#fff;border:1px solid #d6e3eb;padding:24px;border-radius:15px;box-shadow:0 10px 30px #97b5c544;max-width:82%;font-weight:900;font-size:22px}.idb-field{background:#f5f8fb;color:#566778;font-size:15px;padding:13px;margin-top:14px;border:1px solid #d4e0e9;border-radius:7px}.idb-field b{color:#172d47;display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation:typing 3s steps(18) infinite alternate}.idb-field:nth-child(3) b{animation-delay:1.1s}.idb-button{margin-top:16px;background:#19bd85;padding:13px;border-radius:8px;color:#fff;font-size:14px;text-align:center;animation:idbGlow 1.6s infinite alternate}.idb-pointer{position:absolute;right:19%;bottom:17%;font-size:40px;color:#275bbb;text-shadow:0 3px 4px #fff;animation:pointerTravel 4.5s ease-in-out infinite}@keyframes typing{0%,15%{max-width:0}80%,100%{max-width:180px}}@keyframes pointerTravel{0%{transform:translate(-90px,-90px) rotate(-20deg)}40%{transform:translate(0,0)}55%{transform:translate(-70px,-45px) scale(.8)}100%{transform:translate(0,0)}}@keyframes idbGlow{to{filter:brightness(1.1);box-shadow:0 0 23px #2efcb560}}
.intro-modules{height:100%;width:100%;position:relative;display:grid;place-items:center}.im-center{height:140px;width:140px;border:3px solid #76ffd3;box-shadow:0 0 60px #3de2b955;background:radial-gradient(circle at 25% 15%,#246c78,#101d38);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:1000;font-size:85px;z-index:2;animation:imFloat 3s ease-in-out infinite}.im-center small{font-size:11px;letter-spacing:2px}.im-card{position:absolute;min-width:150px;display:flex;flex-direction:column;gap:8px;background:#132a3e;border:1px solid #4bc1bb9d;border-radius:17px;padding:16px 20px;font-size:35px;box-shadow:0 14px 35px #0007;animation:imFloat 3.5s ease-in-out infinite}.im-card b{font-size:20px}.im-card small{font-size:13px;color:#a8d7e9}.im-one{top:1%;left:3%}.im-two{top:0;right:1%;animation-delay:.6s}.im-three{bottom:2%;left:0%;animation-delay:1.1s}.im-four{bottom:1%;right:3%;animation-delay:1.7s}.im-spark{position:absolute;inset:10%;border:2px dashed #68eecc66;border-radius:50%;animation:spin 14s linear infinite}@keyframes imFloat{50%{transform:translateY(-13px)}}
.intro-pipeline{width:100%;display:flex;align-items:stretch;gap:4px}.ip-card{width:30%;border:1px solid #73dcd085;border-radius:16px;background:#17314a;padding:20px 12px;min-height:180px;display:flex;flex-direction:column;gap:16px;justify-content:center;text-align:center;box-shadow:0 20px 40px #0005}.ip-card span{color:#89f3ca;font-size:16px;letter-spacing:2px}.ip-card b{font-size:clamp(14px,1.4vw,24px)}.ip-card small{color:#c2dbe8;font-size:13px}.ip-arrow{font-size:30px;display:grid;place-items:center;color:#6af4c8;animation:ipMove 1.1s ease infinite alternate}.ip-b{animation:ipPulse 1.7s infinite alternate}.ip-c{border-color:#6cf4a0}.ip-dots{display:flex;justify-content:center;gap:9px}.ip-dots i{height:10px;width:10px;border-radius:50%;background:#79ffd0;animation:ipDots .8s infinite alternate}.ip-dots i:nth-child(2){animation-delay:.2s}.ip-dots i:nth-child(3){animation-delay:.4s}@keyframes ipDots{to{opacity:.2;transform:translateY(-8px)}}@keyframes ipPulse{to{box-shadow:0 0 40px #67eac855}}@keyframes ipMove{to{transform:translateX(7px)}}
.intro-stars{width:97%;background:#12233a;padding:25px;border:1px solid #5987a0;border-radius:19px;box-shadow:0 25px 65px #0008}.is-title{font-weight:950;letter-spacing:3px;color:#91f7d2;font-size:16px;margin-bottom:20px}.is-row{display:grid;grid-template-columns:25px 125px 1fr;align-items:center;gap:13px;margin:13px 0;font-size:14px}.is-row span{color:#ffd073}.is-row i{height:16px;border-radius:14px;background:linear-gradient(90deg,#6ed9c6,#5e93ff);width:var(--w);transform-origin:left;animation:growBar 1.8s cubic-bezier(.16,1,.3,1) both}.is-row:nth-child(3) i{animation-delay:.25s}.is-row:nth-child(4) i{animation-delay:.45s}.is-row:nth-child(5) i{animation-delay:.7s}.is-note{margin-top:21px;font-size:13px;color:#bcd1e8}@keyframes growBar{from{transform:scaleX(.01)}to{transform:scaleX(1)}}
.intro-podium{position:relative;display:flex;align-items:end;justify-content:center;gap:15px;width:100%;height:70%}.pod{width:27%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px 10px;border:1px solid #8cdaf4;background:linear-gradient(155deg,#1f4666,#121f39);border-radius:13px 13px 0 0;box-shadow:0 17px 25px #0006;animation:podiumRise 1s cubic-bezier(.15,1,.3,1) both}.pod b{font-size:45px}.pod span{font-size:50px;font-weight:1000}.pod-third{height:47%;animation-delay:.1s}.pod-first{height:90%;border-color:#ffe29c;background:linear-gradient(145deg,#735d30,#172640);animation-delay:.5s}.pod-first span{color:#ffdc8f}.pod-second{height:65%;animation-delay:.3s}.pod-mystery{position:absolute;bottom:1%;font-weight:950;color:#fff8b9;background:#1a2d42;padding:14px 24px;border-radius:11px;box-shadow:0 8px 30px #0008;letter-spacing:2px;animation:imFloat 3s infinite}@keyframes podiumRise{from{opacity:0;transform:translateY(200px)}to{opacity:1;transform:translateY(0)}}
.intro-final-number{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center}.intro-final-number strong{font-size:clamp(190px,25vw,370px);line-height:1;font-weight:1000;color:#d9fff3;text-shadow:0 0 30px #4cfaca88,0 0 130px #25dbbb66;animation:final10 1.7s cubic-bezier(.15,.95,.21,1) both}.ifn-top,.ifn-bottom{letter-spacing:2px;font-weight:850;font-size:13px;color:#a9f9e3}.ifn-bars{display:flex;align-items:end;gap:5px;height:30px}.ifn-bars i{width:7px;height:8px;border-radius:3px;background:#7cf5c7;animation:barBeat .55s ease-in-out infinite alternate}.ifn-bars i:nth-child(2){animation-delay:.1s}.ifn-bars i:nth-child(3){animation-delay:.22s}.ifn-bars i:nth-child(4){animation-delay:.31s}.ifn-bars i:nth-child(5){animation-delay:.17s}@keyframes final10{0%{opacity:0;transform:scale(3.7) rotate(-11deg);filter:blur(18px)}100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}}@keyframes barBeat{to{height:29px}}
.outro-cloud{display:flex;gap:18px;font-size:48px;filter:drop-shadow(0 7px 20px #0007)}.outro-cloud span{animation:imFloat 3s infinite}.outro-cloud span:nth-child(2){animation-delay:.6s}.outro-cloud span:nth-child(3){animation-delay:1.2s}.outro-cloud span:nth-child(4){animation-delay:1.8s}
@media(max-width:1050px){.title-screen .intro-head{font-size:5.7vw}.title-screen .intro-showcase{width:38%;right:2%}.intro-pipeline{transform:scale(.83)}.is-row{grid-template-columns:18px 85px 1fr;gap:7px;font-size:11px}.im-card{min-width:105px;padding:10px;font-size:25px}.im-card b{font-size:14px}.im-card small{font-size:10px}}
@media(max-width:650px){.title-screen .intro-head{max-width:100%;font-size:9vw}.title-screen .intro-under{max-width:100%;font-size:16px}.title-screen .intro-showcase{top:46%;right:4%;width:92%;height:38%;opacity:.7}.title-screen .intro-mini{display:none}.intro-subline{display:none}.idb-form{padding:10px;font-size:13px}.idb-field{padding:6px;margin-top:5px}.idb-button{padding:7px}.intro-scene-meter{bottom:7%}.intro-pipeline{transform:scale(.75)}.is-row{grid-template-columns:18px 90px 1fr}}
/* Reserve a clear visual column for the opening demonstrations. */
@media(min-width:1051px){.title-screen .intro-head{font-size:clamp(48px,5.25vw,92px);max-width:57%}.title-screen .intro-under{max-width:54%}.title-screen .intro-showcase{right:3%;width:42%}}