.gsap-scrolltrigger-article{--st-lime:#9dff52;--st-cyan:#43dcff;--st-violet:#9b70ff;--st-pink:#ff5bc8;--st-panel:#0d1713;--st-soft:#111d18}
.gsap-scrolltrigger-article .article-content>h2{scroll-margin-top:100px}.st-graphic{display:grid;gap:14px;margin:28px 0 38px;padding:clamp(20px,4vw,32px);overflow:hidden;border:1px solid rgba(157,255,82,.24);border-radius:16px;background:radial-gradient(circle at 88% 12%,rgba(67,220,255,.09),transparent 32%),var(--st-panel)}.st-graphic figcaption{grid-column:1/-1;color:var(--blog-muted);font-size:14px}.st-graphic b{color:var(--st-lime)}.st-graphic i{color:var(--st-cyan);font-style:normal;text-align:center}
.st-load-vs-scroll{grid-template-columns:repeat(2,minmax(0,1fr))}.st-load-vs-scroll>div{display:grid;gap:9px;padding:20px;border:1px solid var(--blog-border);border-radius:11px}.st-load-vs-scroll span{padding:9px;border-radius:7px;background:rgba(157,255,82,.055);text-align:center}
.st-viewport{justify-items:center}.st-viewport-box{position:relative;width:min(100%,500px);height:300px;overflow:hidden;border:2px solid rgba(67,220,255,.52);border-radius:14px;background:linear-gradient(rgba(67,220,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(67,220,255,.04) 1px,transparent 1px);background-size:26px 26px}.st-viewport-box::before{position:absolute;inset:13px auto auto 13px;color:var(--st-cyan);font-size:11px;font-weight:850;letter-spacing:.1em;content:"VIEWPORT"}.st-viewport-box>i{position:absolute;top:var(--line);left:0;width:100%;border-top:2px dashed var(--st-lime);color:var(--st-lime);font-size:11px;font-style:normal;font-weight:900;text-align:right;transform:translateY(-50%)}.st-viewport-box>span{position:absolute;right:14%;bottom:8%;display:grid;min-width:145px;min-height:62px;place-items:center;border:1px solid var(--st-violet);border-radius:10px;color:#fff;background:rgba(155,112,255,.18);font-size:12px;font-weight:850;will-change:transform,opacity}.st-viewport>strong{color:var(--st-lime);font-size:15px}
.st-equation{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}.st-equation>div{display:grid;min-height:145px;gap:9px;place-content:center;padding:18px;border:1px solid var(--blog-border);border-radius:11px;text-align:center}.st-equation>i{font-size:24px}.st-equation span{color:var(--blog-muted)}.st-equation code{color:var(--st-cyan)}
.st-trigger-map{justify-items:center}.st-trigger-map>span{color:var(--st-lime);font-weight:850}.st-target-trigger{grid-template-columns:1fr auto 1fr;align-items:center}.st-target-trigger>div{display:grid;gap:8px;padding:22px;border:1px solid var(--blog-border);border-radius:11px;text-align:center}.st-target-trigger>i{font-size:25px}.st-target-trigger span{color:var(--st-cyan)}.st-target-trigger small{color:var(--blog-muted)}.st-start-diagram{justify-items:center}.st-start-diagram strong{color:var(--st-lime)}
.st-start-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:26px 0}.st-start-options>div{display:grid;gap:7px;padding:17px;border:1px solid var(--blog-border);border-radius:10px;background:var(--st-soft)}.st-start-options code{width:max-content;color:var(--st-lime)}.st-start-options span{color:var(--blog-muted);font-size:14px}.st-start-playground{display:grid;gap:18px}.st-start-playground .st-viewport-box{margin:auto}.st-start-playground [data-trigger-block]{bottom:3%}
.st-markers>div{position:relative;display:grid;min-height:230px;place-items:center;border:1px solid var(--blog-border);border-radius:12px;background:linear-gradient(rgba(157,255,82,.035) 1px,transparent 1px);background-size:28px 28px}.st-markers b{padding:19px;border:1px solid rgba(155,112,255,.4);border-radius:10px;background:rgba(155,112,255,.1)}.st-marker{position:absolute;left:0;width:100%;border-top:2px dashed;font-size:12px;font-weight:900;text-align:right}.st-marker--start{top:32%;border-color:var(--st-lime);color:var(--st-lime)}.st-marker--end{top:76%;border-color:var(--st-pink);color:var(--st-pink)}
.st-range{justify-items:center}.st-range>i{display:block;width:2px;height:62px;background:linear-gradient(var(--st-lime),var(--st-pink))}.st-range>span{padding:8px 15px;border-radius:99px;color:#061007;background:var(--st-lime);font-weight:900}.st-range>span:nth-last-of-type(1){background:var(--st-pink)}.st-range>strong{color:var(--st-cyan)}
.st-scroll-card-wrap,.st-heading-demo,.st-image-demo{display:grid;min-height:300px;margin:28px 0;place-items:center;overflow:hidden;border:1px dashed rgba(157,255,82,.3);border-radius:15px;background:linear-gradient(rgba(157,255,82,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(157,255,82,.035) 1px,transparent 1px);background-size:28px 28px}.st-scroll-card{display:grid;width:min(100% - 32px,460px);gap:9px;padding:27px;border:1px solid rgba(157,255,82,.3);border-radius:14px;background:linear-gradient(145deg,rgba(157,255,82,.12),var(--st-panel));box-shadow:0 20px 50px rgba(0,0,0,.22);will-change:transform,opacity}.st-scroll-card span,.st-heading-demo>span,.st-split-demo>div>span,.st-seq-label{color:var(--st-lime);font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.st-scroll-card h3,.st-scroll-card p{margin:0}.st-scroll-card p{color:var(--blog-muted)}
.st-heading-demo{min-height:240px;align-content:center;justify-items:start;padding:clamp(24px,5vw,45px)}.st-heading-demo h3{max-width:650px;margin:12px 0 0;font-size:clamp(28px,5vw,44px);will-change:transform,opacity}.st-paragraph-demo{margin:28px 0;padding:28px;border:1px solid var(--blog-border);border-radius:13px;background:var(--st-soft);will-change:transform,opacity}
.st-image-placeholder{position:relative;display:grid;width:min(100%,520px);min-height:260px;gap:8px;place-content:center;place-items:center;overflow:hidden;border:1px solid rgba(67,220,255,.34);border-radius:17px;background:radial-gradient(circle at 68% 32%,rgba(155,112,255,.25),transparent 20%),linear-gradient(145deg,rgba(67,220,255,.1),rgba(157,255,82,.05)),var(--st-panel);will-change:transform,opacity}.st-image-placeholder::before,.st-image-placeholder::after{position:absolute;border:1px solid rgba(67,220,255,.18);border-radius:50%;content:""}.st-image-placeholder::before{width:220px;height:220px}.st-image-placeholder::after{width:150px;height:150px}.st-image-placeholder i{z-index:1;width:75px;height:75px;border:10px solid var(--st-lime);border-top-color:var(--st-violet);border-radius:50%;box-shadow:0 0 28px rgba(157,255,82,.24)}.st-image-placeholder b,.st-image-placeholder span{z-index:1}.st-image-placeholder b{color:var(--st-lime)}.st-image-placeholder span{color:var(--blog-muted);font-size:12px}
.st-split-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;align-items:center;margin:28px 0;padding:clamp(24px,5vw,40px);overflow:hidden;border:1px solid rgba(157,255,82,.23);border-radius:17px;background:var(--st-panel)}.st-split-demo>div:first-child{display:grid;gap:13px}.st-split-demo h3,.st-split-demo p{margin:0}.st-split-demo h3{font-size:clamp(26px,4vw,38px)}.st-split-demo p{color:var(--blog-muted)}.st-split-demo a{width:max-content;padding:9px 14px;border-radius:7px;color:#061007;background:var(--st-lime);font-weight:850;text-decoration:none}
.st-services-grid,.st-stat-grid,.st-portfolio-grid,.st-direction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0}.st-services-grid article,.st-stat-grid article,.st-portfolio-grid article,.st-direction-grid article{display:grid;min-height:120px;gap:8px;align-content:center;padding:19px;border:1px solid var(--blog-border);border-radius:12px;background:linear-gradient(145deg,rgba(157,255,82,.07),var(--st-soft));will-change:transform,opacity}.st-services-grid b,.st-stat-grid b,.st-portfolio-grid b{color:var(--st-lime)}.st-services-grid span,.st-stat-grid span,.st-portfolio-grid span{color:var(--blog-muted);font-size:13px}.st-flow{justify-items:center}.st-flow>span{padding:9px 14px;border:1px solid rgba(157,255,82,.25);border-radius:8px;color:var(--st-lime)}.st-flow>div{color:var(--st-cyan)}
.st-group-individual{grid-template-columns:repeat(2,minmax(0,1fr))}.st-group-individual>div{display:grid;gap:10px;padding:20px;border:1px solid var(--blog-border);border-radius:11px}.st-group-individual span{padding:9px;border-radius:7px;background:rgba(67,220,255,.05)}.st-group-individual i{font-size:12px;text-align:left}
.st-practical{display:grid;gap:14px;margin:28px 0;padding:clamp(24px,5vw,40px);overflow:hidden;border:1px solid rgba(157,255,82,.24);border-radius:17px;background:radial-gradient(circle at 88% 15%,rgba(67,220,255,.12),transparent 30%),var(--st-panel)}.st-practical h3,.st-practical p{margin:0}.st-practical h3{font-size:clamp(29px,5vw,44px)}.st-practical p{color:var(--blog-muted)}.st-about-features{display:flex;flex-wrap:wrap;gap:8px}.st-about-features i{padding:7px 11px;border:1px solid rgba(67,220,255,.25);border-radius:99px;color:var(--st-cyan);font-size:12px;font-style:normal;will-change:transform,opacity}.st-stat-grid article{min-height:105px}.st-stat-grid b{font-size:23px}.st-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.st-portfolio-grid article{min-height:135px;align-content:end}.st-direction-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.st-direction-grid article{place-items:center;color:var(--st-cyan);font-weight:850}
.st-debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:26px 0}.st-debug-grid>div{display:flex;gap:11px;align-items:center;padding:14px;border:1px solid var(--blog-border);border-radius:9px;background:var(--st-soft)}.st-debug-grid span{display:grid;width:31px;height:31px;flex:0 0 31px;place-items:center;border-radius:50%;color:#061007;background:var(--st-lime);font-size:11px;font-weight:900}
.st-lab{display:grid;gap:17px;margin:28px 0;padding:clamp(20px,4vw,32px);overflow:hidden;border:1px solid rgba(157,255,82,.25);border-radius:18px;background:var(--st-panel)}.st-lab-stage{display:grid;gap:14px;padding:clamp(22px,4vw,38px);border:1px dashed rgba(157,255,82,.33);border-radius:14px;background:radial-gradient(circle at 84% 15%,rgba(155,112,255,.18),transparent 27%),#09120f}.st-lab-stage>span{color:var(--st-lime);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.st-lab-stage h3,.st-lab-stage p{margin:0}.st-lab-stage h3{font-size:clamp(28px,5vw,45px)}.st-lab-stage p{color:var(--blog-muted)}.st-lab-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.st-lab-cards article{padding:18px;border:1px solid rgba(157,255,82,.22);border-radius:10px;color:var(--st-lime);background:rgba(157,255,82,.055);will-change:transform,opacity}.st-lab-stage button{width:max-content;padding:10px 16px;border:0;border-radius:8px;color:#061007;background:var(--st-lime);font:inherit;font-weight:900}.st-lab-map{grid-template-columns:1fr 1fr;align-items:center;margin-bottom:0}.st-lab-map .st-viewport-box{height:260px}
.st-trigger-playground>div:first-child{display:grid;gap:10px;padding:22px;border:1px dashed rgba(157,255,82,.3);border-radius:12px}.st-trigger-playground>div:first-child>span{color:var(--st-lime);font-size:12px;font-weight:900}.st-trigger-playground article{padding:18px;border:1px solid var(--st-violet);border-radius:9px;background:rgba(155,112,255,.08)}
.st-mini-project{display:grid;gap:14px;margin:28px 0;padding:clamp(24px,5vw,40px);overflow:hidden;border:1px solid rgba(157,255,82,.25);border-radius:17px;background:radial-gradient(circle at 83% 14%,rgba(255,91,200,.12),transparent 28%),var(--st-panel)}.st-mini-project>span{color:var(--st-lime);font-size:12px;font-weight:900;text-transform:uppercase}.st-mini-project h3,.st-mini-project p{margin:0}.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-cards article{padding:18px;border:1px solid var(--blog-border);border-radius:10px;color:var(--st-cyan);background:rgba(67,220,255,.05);will-change:transform,opacity}
.st-cheat{grid-template-columns:repeat(5,minmax(0,1fr))}.st-cheat>div{display:grid;gap:9px;padding:17px;border:1px solid var(--blog-border);border-radius:10px}.st-cheat span{color:var(--blog-muted);font-size:13px}.st-final-model{justify-items:center;text-align:center}.st-final-model>span{padding:10px 16px;border:1px solid rgba(157,255,82,.25);border-radius:9px;color:var(--st-lime)}.st-final-model>small{color:var(--blog-muted)}
.st-lifecycle,.st-refresh-map{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}.st-lifecycle div,.st-refresh-map div{display:grid;min-height:118px;gap:7px;place-content:center;padding:18px;border:1px solid rgba(67,220,255,.28);border-radius:14px;background:rgba(5,12,20,.7);text-align:center}.st-lifecycle span,.st-refresh-map span,.st-motion-choice span{color:var(--st-cyan);font-size:11px;font-weight:900;letter-spacing:.1em}.st-lifecycle>i,.st-refresh-map>i{color:var(--st-lime);font-size:22px}.st-refresh-map div:nth-of-type(2){border-color:rgba(157,255,82,.5)}.st-refresh-map code,.st-refresh-map small{color:var(--blog-muted);font-size:11px}
.st-performance-map{grid-template-columns:repeat(3,minmax(0,1fr))}.st-performance-map div{display:grid;gap:8px;padding:22px 16px;border:1px solid rgba(155,112,255,.32);border-radius:14px;background:linear-gradient(150deg,rgba(155,112,255,.12),rgba(5,12,20,.82));text-align:center}.st-performance-map b{font-size:12px;letter-spacing:.1em}.st-performance-map span{color:#fff}.st-performance-map small{color:var(--blog-muted)}
.st-motion-choice{grid-template-columns:1fr auto 1fr;align-items:center}.st-motion-choice div{display:grid;gap:8px;padding:24px;border:1px solid rgba(67,220,255,.3);border-radius:14px;background:rgba(5,12,20,.75);text-align:center}.st-motion-choice>i{color:var(--st-pink);font-size:12px;font-weight:900}.st-motion-choice small{color:var(--blog-muted)}
.st-responsive-map{display:flex;min-height:285px;align-items:end;justify-content:center;gap:26px}.st-device{display:grid;gap:7px;place-content:center;padding:16px;border:2px solid rgba(67,220,255,.45);border-radius:20px;background:linear-gradient(180deg,rgba(67,220,255,.1),rgba(5,12,20,.86));text-align:center}.st-device--phone{width:118px;height:210px}.st-device--tablet{width:180px;height:245px}.st-device--desktop{width:285px;height:190px}.st-device span{color:#fff}.st-device small{color:var(--blog-muted)}
.gsap-scrolltrigger-article button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:991px){.st-services-grid,.st-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.st-lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.st-cheat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.st-load-vs-scroll,.st-equation,.st-target-trigger,.st-group-individual,.st-split-demo,.st-lab-map,.st-lifecycle,.st-refresh-map,.st-performance-map,.st-motion-choice{grid-template-columns:1fr}.st-equation>i,.st-target-trigger>i,.st-lifecycle>i,.st-refresh-map>i{transform:rotate(90deg)}.st-start-options,.st-debug-grid,.st-portfolio-grid,.st-direction-grid{grid-template-columns:1fr}.st-cheat{grid-template-columns:1fr}.st-viewport-box{height:260px}.st-image-placeholder{min-height:220px}.st-responsive-map{align-items:center;flex-direction:column}.st-device--phone,.st-device--tablet,.st-device--desktop{width:min(100%,290px);height:auto;min-height:132px}}
@media(max-width:480px){.st-services-grid,.st-stat-grid,.st-lab-cards,.mini-cards{grid-template-columns:1fr}.st-viewport-box>span{right:8%;min-width:125px}.st-graphic{padding:17px}}
@media(prefers-reduced-motion:reduce){.gsap-scrolltrigger-article *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}