.gsap-start-end-article{--se-lime:#b8ff22;--se-cyan:#28d7ff;--se-violet:#9b6cff;--se-pink:#ff57bd;--se-panel:#081321;--se-soft:#101b2c;--se-line:rgba(40,215,255,.24)}
.gsap-start-end-article .article-content>h2{scroll-margin-top:100px}.se-graphic{display:grid;gap:16px;margin:28px 0 38px;padding:clamp(20px,4vw,34px);overflow:hidden;border:1px solid rgba(184,255,34,.22);border-radius:18px;background:radial-gradient(circle at 88% 12%,rgba(40,215,255,.1),transparent 31%),linear-gradient(rgba(40,215,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(40,215,255,.035) 1px,transparent 1px),var(--se-panel);background-size:auto,28px 28px,28px 28px,auto}.se-graphic figcaption{grid-column:1/-1;color:var(--blog-muted);font-size:14px}.se-graphic i{color:var(--se-cyan);font-style:normal;text-align:center}.se-graphic b,.se-graphic strong{color:var(--se-lime)}
.se-core-model{grid-template-columns:1fr auto 1fr;align-items:center}.se-core-model>strong{grid-column:1/-1;text-align:center}.se-trigger-box,.se-viewport-map{position:relative;display:grid;min-height:280px;align-content:space-between;padding:28px;border:2px solid rgba(40,215,255,.4);border-radius:16px;background:rgba(4,11,19,.68)}.se-trigger-box span,.se-viewport-map span{position:relative;color:#fff;font-size:12px;font-weight:850}.se-trigger-box span::before{display:inline-block;width:11px;height:11px;margin-right:8px;border:2px solid var(--se-lime);border-radius:50%;content:""}.se-viewport-map span{position:absolute;top:var(--point);left:22px;width:calc(100% - 44px);border-top:2px dashed var(--se-cyan);color:var(--se-cyan);transform:translateY(-50%)}.se-viewport-map span:first-of-type{top:12%}.se-viewport-map span:last-of-type{top:88%}
.se-syntax{justify-items:center}.se-syntax>code{padding:18px 24px;border:1px solid var(--se-line);border-radius:12px;color:#fff;background:#050b14;font-size:clamp(18px,4vw,30px)}.se-syntax>code b{color:var(--se-lime)}.se-syntax>code em{color:var(--se-cyan);font-style:normal}.se-syntax>div{display:grid;width:min(100%,650px);grid-template-columns:1fr 1fr;gap:12px}.se-syntax>div span{display:grid;gap:5px;padding:16px;border:1px solid var(--blog-border);border-radius:11px;color:var(--blog-muted)}.se-syntax em{color:var(--se-cyan);font-style:normal}
.se-box-points{justify-items:center}.se-box-points>div{display:grid;width:min(100%,560px);min-height:270px;align-content:space-between;padding:24px;border:2px solid var(--se-violet);border-radius:16px;background:rgba(155,108,255,.08)}.se-box-points span{display:flex;align-items:center;gap:10px;color:#fff;font-size:12px;font-weight:900}.se-box-points span::before{width:13px;height:13px;border:3px solid var(--se-lime);border-radius:50%;content:""}.se-viewport-lines{justify-items:center}.se-viewport-lines>div{position:relative;width:min(100%,560px);height:320px;border:2px solid rgba(40,215,255,.45);border-radius:16px}.se-viewport-lines span{position:absolute;top:var(--point);left:0;width:100%;border-top:2px dashed var(--se-cyan);color:var(--se-cyan);font-size:12px;font-weight:900;transform:translateY(-50%)}.se-viewport-lines span:first-child{top:7%}.se-viewport-lines span:last-child{top:93%}
.se-meeting{justify-items:center}.se-meeting>i{width:min(100%,600px);border-top:2px dashed var(--se-cyan)}.se-meeting>div{display:grid;width:min(100%,480px);min-height:150px;place-items:center;border:2px solid var(--se-violet);border-radius:14px;color:#fff;background:rgba(155,108,255,.1);font-weight:900}.se-position-card{justify-items:center}.se-position-card>div{position:relative;width:min(100%,560px);height:320px;border:2px solid rgba(40,215,255,.45);border-radius:16px}.se-position-card>div>i{position:absolute;top:var(--line);left:0;width:100%;border-top:2px dashed var(--se-lime);color:var(--se-lime);font-size:12px;font-weight:900;text-align:right}.se-position-card>div>span{position:absolute;top:calc(var(--line) + 2px);right:13%;display:grid;width:170px;height:80px;place-items:center;border:2px solid var(--se-violet);border-radius:11px;color:#fff;background:rgba(155,108,255,.18);font-size:12px;font-weight:900}
.se-position-playground,.se-start-playground,.se-end-playground,.se-combined-playground{display:grid;gap:18px}.se-live-viewport{position:relative;width:min(100%,580px);height:330px;margin:auto;overflow:hidden;border:2px solid rgba(40,215,255,.48);border-radius:16px;background:linear-gradient(rgba(40,215,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(40,215,255,.035) 1px,transparent 1px);background-size:28px 28px}.se-live-viewport::before{position:absolute;top:13px;left:15px;color:var(--se-cyan);font-size:11px;font-weight:900;letter-spacing:.1em;content:"VIEWPORT"}.se-live-viewport>i{position:absolute;top:var(--line);left:0;width:100%;border-top:2px dashed var(--se-lime);color:var(--se-lime);font-size:11px;font-weight:900;text-align:right;transform:translateY(-50%)}.se-live-viewport>span{position:absolute;right:14%;bottom:7%;display:grid;width:170px;height:76px;place-items:center;border:2px solid var(--se-violet);border-radius:11px;color:#fff;background:rgba(155,108,255,.18);font-size:12px;font-weight:900;will-change:transform,opacity}.se-position-playground .gsap-button[aria-pressed=true],.se-start-playground .gsap-button[aria-pressed=true],.se-end-playground .gsap-button[aria-pressed=true]{color:#07100c;background:var(--se-lime);box-shadow:0 0 0 2px rgba(184,255,34,.2)}
.se-percent-scale{gap:8px}.se-percent-scale>div{display:grid;grid-template-columns:58px 1fr;gap:13px;align-items:center}.se-percent-scale b{font-size:12px}.se-percent-scale i{border-top:1px dashed var(--se-cyan)}.se-percent-scale>div:nth-child(5) i{border-color:var(--se-lime);box-shadow:0 0 9px rgba(184,255,34,.35)}.se-center-meet{grid-template-columns:1fr auto 1fr;align-items:center}.se-center-meet>div{display:grid;min-height:160px;place-items:center;border:1px solid var(--se-line);border-radius:14px}.se-center-meet>div i{padding:10px;border:2px solid var(--se-lime);border-radius:50%}.se-center-meet>span{color:var(--se-pink);font-size:24px;font-weight:900}.se-center-meet>strong{grid-column:1/-1;text-align:center}.se-compare{grid-template-columns:1fr auto 1fr;align-items:center}.se-compare>div{display:grid;min-height:140px;gap:8px;place-content:center;padding:20px;border:1px solid var(--se-line);border-radius:13px;text-align:center}.se-compare code{color:var(--se-lime)}.se-compare span{color:var(--blog-muted);font-size:14px}
.se-active-range{justify-items:center}.se-active-range>i{width:3px;height:62px;background:linear-gradient(var(--se-lime),var(--se-pink))}.se-active-range>b{padding:8px 16px;border-radius:99px;color:#061007;background:var(--se-lime)}.se-active-range>b:last-of-type{color:#fff;background:var(--se-pink)}.se-range-map>div,.se-marker-map>div{position:relative;display:grid;min-height:330px;place-items:center;border:2px solid rgba(40,215,255,.35);border-radius:16px}.se-range-map span,.se-marker-map span{position:absolute;left:0;width:100%;border-top:2px dashed;font-size:11px;font-weight:900;text-align:right}.se-range-map span:first-child,.se-marker-map span:first-child{top:22%;border-color:var(--se-lime);color:var(--se-lime)}.se-range-map span:last-child,.se-marker-map span:last-child{top:80%;border-color:var(--se-pink);color:var(--se-pink)}.se-range-map article,.se-marker-map article{display:grid;width:52%;min-height:135px;place-items:center;border:2px solid var(--se-violet);border-radius:13px;color:#fff;background:rgba(155,108,255,.12);font-weight:900}.se-scroll-progress{justify-items:center}.se-scroll-progress>span{padding:11px 15px;border:1px solid var(--se-line);border-radius:9px}.se-scroll-progress>i{display:grid;width:3px;height:90px;place-items:center;background:linear-gradient(var(--se-lime),var(--se-pink));writing-mode:vertical-rl;font-size:11px;font-weight:900}
.se-start-playground>header{display:flex;align-items:center;justify-content:space-between;gap:14px}.se-start-playground>header span{color:var(--blog-muted);font-size:12px;font-weight:900;letter-spacing:.08em}.se-start-playground>header strong{color:var(--se-lime);font-family:monospace}.se-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.se-readout>div{padding:15px;border:1px solid var(--blog-border);border-radius:10px;background:var(--se-soft)}.se-readout dt{color:var(--blog-muted);font-size:11px;letter-spacing:.07em;text-transform:uppercase}.se-readout dd{margin:5px 0 0;color:#fff}.se-dual-range,.se-combined-display{display:grid;justify-items:center;gap:8px;padding:24px;border:1px solid var(--se-line);border-radius:14px;background:var(--se-panel)}.se-dual-range>span:first-child,.se-combined-display>span:first-child{color:var(--se-lime)}.se-dual-range>span:last-child,.se-combined-display>span:last-child{color:var(--se-pink)}.se-dual-range>i{display:block;width:3px;height:120px;background:linear-gradient(var(--se-lime),var(--se-pink))}.se-combined-display>i{display:grid;width:4px;height:100px;place-items:center;background:linear-gradient(var(--se-lime),var(--se-pink));color:#fff;font-size:10px;font-weight:900;writing-mode:vertical-rl}.se-combined-playground>label,.se-lab-config>label{display:grid;gap:7px;color:var(--blog-muted);font-size:12px;font-weight:800}.se-combined-playground select,.se-lab-config select{width:100%;padding:11px 12px;border:1px solid var(--se-line);border-radius:9px;color:#fff;background:#08111f;font:inherit}
.se-offset{grid-template-columns:1fr auto 1fr;align-items:center}.se-offset>span{padding:18px;border:1px solid var(--se-line);border-radius:11px;text-align:center}.se-distance{grid-template-columns:auto 1fr auto;align-items:center}.se-distance>i{position:relative;height:3px;background:linear-gradient(90deg,var(--se-lime),var(--se-pink))}.se-distance>i::before,.se-distance>i::after{position:absolute;top:50%;width:12px;height:12px;border:3px solid currentColor;border-radius:50%;background:var(--se-panel);content:"";transform:translateY(-50%)}.se-distance>i::before{left:0;color:var(--se-lime)}.se-distance>i::after{right:0;color:var(--se-pink)}.se-distance>i span{position:absolute;bottom:10px;left:50%;color:var(--blog-muted);font-size:12px;transform:translateX(-50%)}
.se-size-compare{grid-template-columns:1fr 1fr;align-items:end}.se-size-compare>div{display:grid;align-content:space-between;padding:18px;border:2px solid var(--se-violet);border-radius:14px;background:rgba(155,108,255,.08)}.se-size-compare .is-small{min-height:160px}.se-size-compare .is-large{min-height:310px}.se-size-compare span{color:var(--blog-muted);font-size:11px}.se-device-compare{grid-template-columns:2fr 1fr;align-items:center}.se-device-compare>div{position:relative;display:grid;min-height:260px;place-items:center;border:2px solid rgba(40,215,255,.42);border-radius:18px}.se-device-compare>div:last-child{width:min(100%,220px);justify-self:center}.se-device-compare i{position:absolute;top:var(--line);left:0;width:100%;border-top:2px dashed var(--se-lime);color:var(--se-lime);font-size:11px;text-align:right}
.se-practical{display:grid;min-height:270px;margin:28px 0;place-content:center;padding:clamp(24px,5vw,44px);overflow:hidden;border:1px solid rgba(184,255,34,.22);border-radius:17px;background:radial-gradient(circle at 82% 18%,rgba(155,108,255,.17),transparent 30%),var(--se-panel)}.se-practical>span{color:var(--se-lime);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.se-practical h3{max-width:680px;margin:12px 0 0;font-size:clamp(28px,5vw,45px);will-change:transform,opacity}.se-image-reveal>div{display:grid;width:min(100%,520px);min-height:230px;gap:10px;place-items:center;place-content:center;border:2px solid rgba(40,215,255,.4);border-radius:16px;background:linear-gradient(rgba(40,215,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(40,215,255,.04) 1px,transparent 1px);background-size:26px 26px;will-change:transform,opacity}.se-image-reveal i{width:90px;height:90px;border:10px solid var(--se-cyan);border-top-color:var(--se-lime);border-radius:24px}.se-image-reveal b{color:var(--se-lime)}.se-image-reveal span{color:var(--blog-muted);font-size:12px}.se-card-grid,.se-multi-sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:28px 0}.se-card-grid article,.se-multi-sections article{display:grid;min-height:125px;gap:7px;align-content:center;padding:18px;border:1px solid var(--se-line);border-radius:12px;background:linear-gradient(145deg,rgba(184,255,34,.06),var(--se-soft));will-change:transform,opacity}.se-card-grid b,.se-multi-sections b{color:var(--se-lime)}.se-card-grid span,.se-multi-sections span{color:var(--blog-muted);font-size:12px}.se-multi-sections{grid-template-columns:repeat(3,minmax(0,1fr))}
.se-workflow{display:grid;gap:9px;margin:28px 0;padding:0;list-style:none;counter-reset:workflow}.se-workflow li{display:flex;gap:13px;align-items:center;padding:15px;border:1px solid var(--blog-border);border-radius:10px;background:var(--se-soft);counter-increment:workflow}.se-workflow li::before{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border-radius:50%;color:#07100c;background:var(--se-lime);font-size:11px;font-weight:900;content:counter(workflow)}.se-time-model{grid-template-columns:auto auto 1fr auto;align-items:center}.se-time-model>i{height:3px;background:linear-gradient(90deg,var(--se-lime),var(--se-cyan))}.se-debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:28px 0}.se-debug-grid article{display:grid;gap:7px;padding:18px;border:1px solid var(--se-line);border-radius:12px;background:var(--se-soft)}.se-debug-grid b{color:var(--se-lime)}.se-debug-grid span{color:var(--blog-muted)}
.se-main-lab{display:grid;gap:18px;margin:28px 0;padding:clamp(20px,4vw,34px);overflow:hidden;border:1px solid rgba(184,255,34,.3);border-radius:19px;background:radial-gradient(circle at 88% 10%,rgba(155,108,255,.18),transparent 28%),var(--se-panel)}.se-lab-stage{display:grid;gap:13px;padding:clamp(22px,4vw,38px);border:1px dashed rgba(184,255,34,.34);border-radius:15px;background:#07111d}.se-lab-stage>span{color:var(--se-lime);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.se-lab-stage h3,.se-lab-stage p{margin:0}.se-lab-stage h3{font-size:clamp(30px,5vw,48px)}.se-lab-stage p{color:var(--blog-muted)}.se-lab-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.se-lab-cards article{padding:18px;border:1px solid var(--se-line);border-radius:10px;color:var(--se-lime);background:rgba(184,255,34,.055);will-change:transform,opacity}.se-lab-config{display:grid;grid-template-columns:1fr 1fr;gap:12px}.se-marker-toggle{display:flex!important;align-items:center;gap:9px!important}.se-marker-toggle input{width:18px;height:18px;accent-color:var(--se-lime)}.se-lab-visual{position:relative;display:grid;min-height:330px;place-items:center;border:2px solid rgba(40,215,255,.38);border-radius:16px;background:linear-gradient(rgba(40,215,255,.035) 1px,transparent 1px);background-size:28px 28px}.se-lab-visual>span{position:absolute;left:0;width:100%;border-top:2px dashed;font-size:11px;font-weight:900;text-align:right}.se-lab-visual>span:first-child{top:var(--line);border-color:var(--se-lime);color:var(--se-lime)}.se-lab-visual>span:last-child{top:88%;border-color:var(--se-pink);color:var(--se-pink)}.se-lab-visual>article{display:grid;width:52%;min-height:125px;place-items:center;border:2px solid var(--se-violet);border-radius:13px;color:#fff;background:rgba(155,108,255,.15);font-weight:900}.se-lab-visual>i{position:absolute;right:8%;top:30%;height:45%;border-left:3px solid var(--se-cyan);color:var(--se-cyan);font-size:10px;font-weight:900;writing-mode:vertical-rl}.se-lab-visual.has-markers{box-shadow:inset 0 0 0 3px rgba(255,87,189,.22)}.se-lab-visual.has-markers::after{position:absolute;top:12px;right:12px;padding:6px 9px;border-radius:6px;color:#fff;background:var(--se-pink);font-size:10px;font-weight:900;content:"DEBUG MARKERS ON"}
.se-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center}.se-flow>span{padding:14px;border:1px solid var(--se-line);border-radius:10px;text-align:center}.start-end-challenge{display:grid;gap:14px;margin:28px 0;padding:clamp(24px,5vw,40px);overflow:hidden;border:1px solid rgba(184,255,34,.25);border-radius:17px;background:radial-gradient(circle at 85% 15%,rgba(255,87,189,.13),transparent 28%),var(--se-panel)}.challenge-label{color:var(--se-lime);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.start-end-challenge h3,.start-end-challenge p{margin:0}.challenge-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.challenge-card{padding:18px;border:1px solid var(--se-line);border-radius:10px;color:var(--se-cyan);background:rgba(40,215,255,.05);will-change:transform,opacity}.se-cheat{grid-template-columns:repeat(3,minmax(0,1fr))}.se-cheat>div{display:grid;gap:9px;padding:19px;border:1px solid var(--se-line);border-radius:12px}.se-cheat code{color:var(--se-cyan)}.se-cheat span{color:var(--blog-muted);font-size:13px}.se-final-model{justify-items:center;text-align:center}.se-final-model>code{padding:11px 16px;border:1px solid var(--se-line);border-radius:9px;color:var(--se-lime)}.se-final-model>span{color:var(--blog-muted)}
.gsap-start-end-article button:focus-visible,.gsap-start-end-article select:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:991px){.se-card-grid,.se-lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.se-core-model,.se-device-compare{grid-template-columns:1fr}.se-core-model>i{transform:rotate(90deg)}.se-device-compare>div:last-child{width:min(100%,300px)}.se-flow{grid-template-columns:1fr}.se-flow>i{transform:rotate(90deg)}}
@media(max-width:767px){.se-syntax>div,.se-center-meet,.se-compare,.se-size-compare,.se-readout,.se-debug-grid,.se-cheat,.se-lab-config,.se-multi-sections{grid-template-columns:1fr}.se-center-meet>span,.se-compare>i{transform:rotate(90deg);text-align:center}.se-live-viewport{height:280px}.se-core-model .se-trigger-box,.se-core-model .se-viewport-map{min-height:240px}.se-time-model{grid-template-columns:1fr;text-align:center}.se-time-model>i{height:55px;width:3px;justify-self:center}.se-offset{grid-template-columns:1fr}.se-distance>i span{white-space:nowrap}.se-lab-visual>article{width:65%}}
@media(max-width:480px){.se-card-grid,.se-lab-cards,.challenge-cards{grid-template-columns:1fr}.se-graphic{padding:17px}.se-position-card>div>span,.se-live-viewport>span{right:7%;width:140px}.se-dual-range,.se-combined-display{padding:18px}.se-start-playground>header{align-items:flex-start;flex-direction:column}.se-lab-visual{min-height:290px}.se-lab-visual>article{width:72%;font-size:12px}}
@media(prefers-reduced-motion:reduce){.gsap-start-end-article *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}