.gsap-scrub-article{--scrub-lime:#b8ff22;--scrub-cyan:#28d7ff;--scrub-violet:#9b6cff;--scrub-orange:#ff9d2e;--scrub-panel:#071321;--scrub-soft:#101c2e;--scrub-line:rgba(40,215,255,.25)}
.gsap-scrub-article .article-content>h2{scroll-margin-top:100px}.scrub-graphic,.scrub-demo{margin:28px 0 38px}.scrub-graphic{display:grid;gap:16px;padding:clamp(20px,4vw,34px);overflow:hidden;border:1px solid rgba(184,255,34,.22);border-radius:19px;background:radial-gradient(circle at 88% 12%,rgba(155,108,255,.13),transparent 30%),linear-gradient(rgba(40,215,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(40,215,255,.035) 1px,transparent 1px),var(--scrub-panel);background-size:auto,28px 28px,28px 28px,auto}.scrub-graphic figcaption{grid-column:1/-1;color:var(--blog-muted);font-size:14px}.scrub-graphic b,.scrub-graphic strong{color:var(--scrub-lime)}.scrub-graphic i{color:var(--scrub-cyan);font-style:normal}.scrub-graphic span{color:#fff}
.scrub-core>div{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px}.scrub-core>div>b{grid-column:1/-1}.scrub-core>strong{text-align:center;text-transform:uppercase;letter-spacing:.1em}.scrub-core>div>i{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.1)}.scrub-core>div>i::before{position:absolute;inset:0 45% 0 0;border-radius:inherit;background:linear-gradient(90deg,var(--scrub-cyan),var(--scrub-violet));content:""}.scrub-core em{position:absolute;top:50%;left:55%;width:22px;height:22px;border:4px solid #fff;border-radius:6px;background:var(--scrub-orange);transform:translate(-50%,-50%)}
.progress-map>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:14px;border:1px solid var(--scrub-line);border-radius:12px}.progress-map>div span{text-align:right}.progress-map>div b{color:var(--scrub-cyan)}
.comparison{grid-template-columns:repeat(2,minmax(0,1fr))}.comparison>div{display:grid;gap:12px;align-content:center;min-height:220px;padding:22px;border:1px solid var(--scrub-line);border-radius:15px;text-align:center;background:rgba(6,13,23,.7)}.comparison>div:last-child{border-color:rgba(184,255,34,.35)}.comparison small{color:var(--blog-muted)}
.scrub-demo{display:grid;gap:18px;min-height:220px;padding:clamp(20px,4vw,32px);overflow:hidden;border:1px solid rgba(40,215,255,.25);border-radius:19px;background:radial-gradient(circle at 90% 8%,rgba(184,255,34,.1),transparent 30%),var(--scrub-panel)}.comparison-demo{grid-template-columns:1fr 1fr;align-items:center;min-height:420px}.comparison-demo>div{display:grid;gap:16px}.comparison-demo>div>span{color:var(--blog-muted);font-size:12px;font-weight:900;letter-spacing:.1em}.comparison-demo i{display:grid;width:70px;height:70px;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--scrub-cyan),var(--scrub-violet));color:#06101a;font-style:normal;font-weight:950;will-change:transform}.comparison-demo>div:last-of-type i{background:linear-gradient(135deg,var(--scrub-lime),#42e1bd)}.comparison-demo>p{grid-column:1/-1}
.scrub-track{position:relative;display:flex;align-items:center;justify-content:space-between;min-width:0;height:120px;padding:0 7px;border-radius:16px;background:linear-gradient(90deg,rgba(40,215,255,.09),rgba(155,108,255,.1));box-shadow:inset 0 0 0 1px var(--scrub-line)}.scrub-track::after{position:absolute;right:20px;left:20px;top:50%;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--scrub-cyan),var(--scrub-violet));content:""}.scrub-track>span{position:relative;z-index:2;padding:5px 8px;border-radius:6px;background:#071321;color:var(--blog-muted);font-size:10px;font-weight:900}.scrub-track>i{position:relative;z-index:3;display:grid;width:92px;height:62px;flex:0 0 92px;place-items:center;border:3px solid #fff;border-radius:14px;background:linear-gradient(135deg,var(--scrub-orange),#ff5c55);box-shadow:0 12px 30px rgba(255,157,46,.25);color:#07111d;font-size:11px;font-style:normal;font-weight:950;will-change:transform}.tall-scrub{min-height:620px;align-content:center}
.direction-map{grid-template-columns:repeat(2,minmax(0,1fr))}.direction-map>div{display:grid;gap:10px;padding:24px;border:1px solid var(--scrub-line);border-radius:14px;text-align:center}.direction-map>div:last-child{border-color:rgba(155,108,255,.4)}.direction-map>div span{font-size:28px}.direction-map>div strong{color:var(--scrub-cyan)}
.range-ruler{grid-template-columns:auto 1fr auto;align-items:center}.range-ruler>i{position:relative;height:4px;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-cyan),var(--scrub-violet))}.range-ruler>i::before,.range-ruler>i::after{position:absolute;top:50%;width:15px;height:15px;border:3px solid currentColor;border-radius:50%;background:var(--scrub-panel);content:"";transform:translateY(-50%)}.range-ruler>i::before{left:0}.range-ruler>i::after{right:0}.range-ruler em{position:absolute;top:12px;color:var(--blog-muted);font-size:11px;font-style:normal}.range-ruler em:nth-child(1){left:25%}.range-ruler em:nth-child(2){left:50%}.range-ruler em:nth-child(3){left:75%}
.range-compare>div{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center}.range-compare i{display:block;width:var(--range);height:7px;border-radius:99px;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-violet))}.range-compare span{grid-column:2;color:var(--blog-muted);font-size:13px}.range-stage{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.range-stage>i{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--scrub-cyan),var(--scrub-lime));transform:scaleX(.65);transform-origin:left}.range-stage>b{grid-column:1/-1;text-align:center}.scrub-readout,.lab-readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}.scrub-readout>div,.lab-readouts>div{padding:14px;border:1px solid var(--scrub-line);border-radius:11px;background:var(--scrub-soft)}.scrub-readout dt,.lab-readouts dt{color:var(--blog-muted);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.scrub-readout dd,.lab-readouts dd{margin:6px 0 0;color:#fff}
.catchup>div{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:14px}.catchup>div i{position:relative;height:5px;background:rgba(255,255,255,.12)}.catchup>div i::after{position:absolute;top:50%;left:var(--position);width:20px;height:20px;border-radius:50%;background:var(--scrub-lime);content:"";transform:translate(-50%,-50%)}.catchup>div:nth-child(2) i::after{background:var(--scrub-orange)}.catchup>strong{text-align:center}.smoothing-lab,.ease-lab{min-height:520px;align-content:center}.smoothing-lab .gsap-button[aria-pressed=true],.ease-lab .gsap-button[aria-pressed=true],.range-lab .gsap-button[aria-pressed=true]{color:#06100c;background:var(--scrub-lime);box-shadow:0 0 0 2px rgba(184,255,34,.2)}
.duration-model>div{display:grid;grid-template-columns:130px auto 1fr auto;align-items:center;gap:12px}.duration-model>div i{height:5px;background:linear-gradient(90deg,var(--scrub-cyan),var(--scrub-violet))}.timeline-map>b{text-align:center}.timeline-map>i{height:5px;border-radius:99px;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-cyan),var(--scrub-violet))}.timeline-map>div{position:relative;height:145px;border:1px solid var(--scrub-line);border-radius:12px}.timeline-map span{position:absolute;top:calc(16px + var(--start)*.7);left:var(--start);width:var(--size);padding:8px;border-radius:7px;background:linear-gradient(90deg,rgba(184,255,34,.9),rgba(40,215,255,.9));color:#07111d;font-size:10px;font-weight:950}.ratio-map>div{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px}.ratio-map i{display:block;width:var(--size);height:24px;border-radius:6px;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-cyan))}.ratio-map>div:nth-child(2) i{background:linear-gradient(90deg,var(--scrub-violet),var(--scrub-orange))}.ratio-map>span{color:var(--blog-muted)}
.card-sequence,.services-scrub{grid-template-columns:repeat(4,minmax(0,1fr));min-height:470px;align-content:center}.card-sequence article,.services-scrub article{display:grid;min-height:120px;gap:8px;place-content:center;padding:16px;border:1px solid var(--scrub-line);border-radius:14px;background:linear-gradient(145deg,rgba(184,255,34,.08),rgba(155,108,255,.1));text-align:center;will-change:transform,opacity}.card-sequence article span{color:var(--scrub-cyan);font-size:11px}.card-sequence article b{color:#fff}
.live-progress{min-height:520px;place-content:center;text-align:center}.live-progress>strong{color:#fff;font-size:clamp(58px,12vw,110px)}.live-progress>strong span{color:var(--scrub-lime)}.live-progress>div,.lab-progress{width:min(100%,620px);height:12px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.12)}.live-progress>div i,.lab-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-cyan),var(--scrub-violet));transform:scaleX(0);transform-origin:left;will-change:transform}.object-track{min-height:480px;align-content:center}.transform-demo{grid-template-columns:1fr 1fr;min-height:470px;place-items:center}.transform-demo>i:first-child{display:grid;width:130px;height:130px;place-items:center;border-radius:22px;background:linear-gradient(135deg,var(--scrub-lime),var(--scrub-cyan));color:#07111d;font-style:normal;font-weight:950;will-change:transform}.transform-demo>i:last-child{width:100px;height:100px;border:12px solid var(--scrub-violet);border-top-color:var(--scrub-orange);border-radius:30px;will-change:transform}
.image-scrub{min-height:620px;align-content:center}.image-scrub>div{overflow:hidden;border:1px solid var(--scrub-line);border-radius:17px}.image-scrub img{display:block;width:100%;height:auto;will-change:transform}.parallax-demo{position:relative;min-height:560px;place-items:center;text-align:center}.parallax-demo>div{position:relative;z-index:2}.parallax-demo span{color:var(--scrub-lime);font-size:12px;font-weight:950;letter-spacing:.12em}.parallax-demo h3{margin:12px 0;color:#fff;font-size:clamp(35px,7vw,72px);line-height:.95}.parallax-back,.parallax-front{position:absolute;border-radius:50%;filter:blur(1px);will-change:transform}.parallax-back{top:12%;left:10%;width:220px;height:220px;background:radial-gradient(circle,var(--scrub-violet),transparent 66%);opacity:.3}.parallax-front{right:11%;bottom:10%;width:130px;height:130px;border:18px solid var(--scrub-cyan);opacity:.35}.distance-compare,.concept-trio{grid-template-columns:repeat(2,minmax(0,1fr))}.distance-compare>div,.concept-trio>div{display:grid;gap:8px;padding:20px;border:1px solid var(--scrub-line);border-radius:13px}.distance-compare small,.concept-trio span{color:var(--blog-muted)}.concept-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.practical-hero{position:relative;min-height:560px;align-content:center;padding:clamp(28px,7vw,70px)}.practical-hero>i{position:absolute;right:8%;width:200px;height:200px;border:28px solid rgba(40,215,255,.25);border-radius:45px;will-change:transform}.practical-hero>span,.practical-hero>h3,.practical-hero>p{position:relative;z-index:2}.practical-hero>span{color:var(--scrub-lime);font-weight:900}.practical-hero h3{max-width:700px;margin:8px 0;font-size:clamp(36px,7vw,76px);line-height:1}.services-scrub{min-height:540px}.process-scrub{position:relative;grid-template-columns:repeat(4,minmax(0,1fr));min-height:600px;align-content:center}.process-scrub article{position:relative;z-index:2;display:grid;gap:7px;padding:20px;border:1px solid var(--scrub-line);border-radius:14px;background:var(--scrub-soft);will-change:transform,opacity}.process-scrub article span{color:var(--scrub-cyan);font-size:11px}.process-line{position:absolute;top:50%;right:6%;left:6%;height:5px;background:rgba(255,255,255,.1)}.process-line em{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-cyan));transform:scaleX(0);transform-origin:left;will-change:transform}.playhead-model>span{position:relative;padding-bottom:25px;border-bottom:4px solid rgba(255,255,255,.13)}.playhead-model>span i{position:absolute;left:var(--point);bottom:-12px;width:20px;height:20px;border-radius:50%;background:var(--scrub-lime);transform:translateX(-50%)}.playhead-model>span:nth-child(2) i{background:var(--scrub-orange)}
.main-scrub-lab{display:grid;gap:18px;margin:30px 0;padding:clamp(20px,4vw,36px);overflow:hidden;border:1px solid rgba(184,255,34,.35);border-radius:22px;background:radial-gradient(circle at 88% 8%,rgba(155,108,255,.2),transparent 30%),var(--scrub-panel)}.main-scrub-lab header{display:grid;gap:7px}.main-scrub-lab header>span{color:var(--scrub-lime);font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.main-scrub-lab h3,.main-scrub-lab p{margin:0}.main-scrub-lab h3{font-size:clamp(30px,5vw,50px);will-change:transform}.main-track{position:relative;display:flex;align-items:center;justify-content:space-between;height:125px;border:1px solid var(--scrub-line);border-radius:16px}.main-track::after{position:absolute;right:20px;left:20px;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--scrub-cyan),var(--scrub-violet));content:""}.main-track>span{position:relative;z-index:2;padding:6px 8px;background:var(--scrub-panel);color:var(--blog-muted);font-size:10px}.main-track>i{position:relative;z-index:3;display:grid;width:100px;height:65px;flex:0 0 100px;place-items:center;border-radius:15px;background:linear-gradient(135deg,var(--scrub-orange),#ff5f62);color:#08111b;font-style:normal;font-weight:950;will-change:transform}.lab-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.lab-cards article{padding:18px;border:1px solid var(--scrub-line);border-radius:11px;background:rgba(40,215,255,.055);text-align:center;will-change:transform,opacity}.lab-controls{display:grid;gap:12px}.lab-controls fieldset{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid var(--scrub-line);border-radius:12px}.lab-controls legend{width:auto;margin:0 10px 0 0;color:var(--scrub-lime);font-size:11px;font-weight:950;text-transform:uppercase}.lab-controls button{padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:#111d30;color:#fff}.lab-controls button[aria-pressed=true]{border-color:var(--scrub-lime);background:var(--scrub-lime);color:#07111d}.lab-readouts{grid-template-columns:repeat(3,minmax(0,1fr))}.lab-progress{width:100%}.main-scrub-lab button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.scrub-challenge{display:grid;gap:15px;margin:28px 0;padding:clamp(24px,5vw,40px);overflow:hidden;border:1px solid rgba(184,255,34,.28);border-radius:19px;background:radial-gradient(circle at 85% 10%,rgba(255,157,46,.13),transparent 30%),var(--scrub-panel)}.scrub-challenge h3,.scrub-challenge p{margin:0}.challenge-label{color:var(--scrub-lime);font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.challenge-track{height:105px;padding:15px;border:1px solid var(--scrub-line);border-radius:14px;background:rgba(255,255,255,.03)}.challenge-track i{display:grid;width:76px;height:76px;place-items:center;border-radius:15px;background:linear-gradient(135deg,var(--scrub-lime),var(--scrub-cyan));color:#07111d;font-style:normal;font-weight:950;will-change:transform}.challenge-progress{height:10px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.challenge-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-cyan));transform:scaleX(0);transform-origin:left}.cheat-sheet{grid-template-columns:1fr 1fr}.cheat-sheet>div{display:grid;gap:10px;padding:20px;border:1px solid var(--scrub-line);border-radius:13px}.cheat-sheet>div i{height:5px;background:linear-gradient(90deg,var(--scrub-lime),var(--scrub-violet))}.cheat-sheet code{padding:10px;border:1px solid var(--scrub-line);border-radius:9px;color:var(--scrub-cyan);text-align:center}.final-model{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;text-align:center}.final-model>div{display:grid;gap:5px;padding:16px;border:1px solid var(--scrub-line);border-radius:12px}.final-model>div span{color:var(--blog-muted);font-size:12px}.final-model>strong{grid-column:1/-1;padding-top:8px}
.gsap-scrub-article button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:991px){.card-sequence,.services-scrub,.process-scrub,.lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.concept-trio{grid-template-columns:1fr}.final-model{grid-template-columns:1fr}.final-model>i{transform:rotate(0deg)}.process-line{display:none}}
@media(max-width:767px){.comparison,.direction-map,.distance-compare,.cheat-sheet,.comparison-demo,.transform-demo{grid-template-columns:1fr}.comparison-demo>p{grid-column:1}.scrub-core>div{grid-template-columns:auto auto 1fr auto}.range-ruler{grid-template-columns:1fr;text-align:center}.range-ruler>i{margin:15px 0 26px}.range-compare>div,.catchup>div,.duration-model>div,.ratio-map>div{grid-template-columns:1fr}.scrub-readout,.lab-readouts{grid-template-columns:1fr}.card-sequence,.services-scrub,.process-scrub,.lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.scrub-track>i,.main-track>i{width:78px;flex-basis:78px;font-size:9px}.image-scrub{min-height:480px}.parallax-demo,.practical-hero{min-height:450px}.practical-hero>i{right:-45px}.main-scrub-lab{padding:18px}.lab-controls fieldset{align-items:flex-start}.lab-controls legend{width:100%;margin-bottom:7px}.gsap-scrub-article .article-content{min-width:0}}
@media(max-width:480px){.card-sequence,.services-scrub,.process-scrub,.lab-cards{grid-template-columns:1fr}.scrub-graphic,.scrub-demo{padding:17px}.scrub-core>div{grid-template-columns:1fr;text-align:center}.scrub-core>div>i{width:100%}.progress-map>div{grid-template-columns:1fr;text-align:center}.progress-map>div span{text-align:center}.range-stage{grid-template-columns:1fr}.range-stage>i{width:100%}.timeline-map span{font-size:8px}.parallax-demo h3{font-size:34px}}
@media(prefers-reduced-motion:reduce){.gsap-scrub-article *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.timeline-map span:nth-child(1){top:16px}.timeline-map span:nth-child(2){top:58px}.timeline-map span:nth-child(3){top:100px}