.gsap-snap-article{--snap-lime:#b7ff00;--snap-cyan:#31dfff;--snap-violet:#9d68ff;--snap-panel:#10192b;--snap-border:rgba(49,223,255,.24)}
.gsap-snap-article .snap-panel,.gsap-snap-article .snap-graphic,.gsap-snap-article .snap-lab,.gsap-snap-article .snap-story,.gsap-snap-article .snap-challenge{margin:1.3rem 0;padding:clamp(1rem,3vw,1.8rem);overflow:hidden;border:1px solid var(--snap-border);border-radius:20px;background:radial-gradient(circle at 90% 8%,rgba(183,255,0,.1),transparent 35%),var(--snap-panel)}
.gsap-snap-article .snap-graphic figcaption,.gsap-snap-article .snap-poster figcaption{margin-top:.8rem;color:#aeb8ce;text-align:center;font-size:.9rem}
.gsap-snap-article .snap-posters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.4rem 0}
.gsap-snap-article .snap-poster{margin:0}.gsap-snap-article .snap-poster img{display:block;width:100%;height:auto;border:1px solid var(--snap-border);border-radius:18px}
.gsap-snap-article .snap-progress{position:relative;height:16px;margin:2.5rem .5rem 3.2rem;border-radius:999px;background:#27334a}
.gsap-snap-article .snap-progress__fill{display:block;width:43%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--snap-lime),var(--snap-cyan))}
.gsap-snap-article .snap-progress__point{position:absolute;top:50%;display:grid;width:34px;height:34px;place-items:center;border:3px solid #07111d;border-radius:50%;background:var(--snap-cyan);transform:translate(-50%,-50%);box-shadow:0 0 20px rgba(49,223,255,.6)}
.gsap-snap-article .snap-progress__point::after{content:attr(data-label);position:absolute;top:38px;color:#fff;font-size:.8rem;font-weight:800;white-space:nowrap}
.gsap-snap-article .snap-progress__marker{position:absolute;top:-46px;left:43%;padding:.35rem .55rem;border-radius:8px;background:var(--snap-lime);color:#07111d;font-weight:900;transform:translateX(-50%)}
.gsap-snap-article .snap-progress__marker::after{content:"";position:absolute;left:50%;bottom:-7px;border:7px solid transparent;border-top-color:var(--snap-lime);transform:translateX(-50%)}
.gsap-snap-article .snap-flow,.gsap-snap-article .snap-responsibility,.gsap-snap-article .snap-use-grid,.gsap-snap-article .snap-config-grid,.gsap-snap-article .snap-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.gsap-snap-article .snap-flow div,.gsap-snap-article .snap-responsibility div,.gsap-snap-article .snap-use-grid section,.gsap-snap-article .snap-config-grid div,.gsap-snap-article .snap-cards article{display:grid;gap:.35rem;align-content:start;min-width:0;padding:1rem;border:1px solid rgba(157,104,255,.25);border-radius:14px;background:#151f34}
.gsap-snap-article .snap-flow b,.gsap-snap-article .snap-responsibility b,.gsap-snap-article .snap-config-grid b{color:var(--snap-lime)}
.gsap-snap-article .snap-flow span,.gsap-snap-article .snap-responsibility span,.gsap-snap-article .snap-config-grid span{color:#b7c1d4}
.gsap-snap-article .snap-range-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.gsap-snap-article .snap-range{padding:1rem;border-radius:14px;background:#111c30;text-align:center}.gsap-snap-article .snap-range code{display:block;margin-top:.5rem;color:var(--snap-cyan)}
.gsap-snap-article .snap-calculator{display:grid;gap:1rem}.gsap-snap-article .snap-calculator label,.gsap-snap-article .snap-lab label{display:grid;gap:.4rem;color:#fff;font-weight:800}.gsap-snap-article .snap-calculator input,.gsap-snap-article .snap-lab input,.gsap-snap-article .snap-lab select{width:100%;padding:.75rem;border:1px solid rgba(49,223,255,.35);border-radius:10px;background:#08111f;color:#fff;accent-color:var(--snap-lime)}
.gsap-snap-article .snap-calculator output,.gsap-snap-article .snap-lab output{display:block;padding:1rem;border-radius:12px;background:#08111f;color:var(--snap-lime);font-family:monospace;overflow-wrap:anywhere}
.gsap-snap-article .snap-stage{display:grid;place-items:center;min-height:310px;margin:1rem 0;padding:1rem;border:1px solid rgba(183,255,0,.24);border-radius:18px;background:linear-gradient(145deg,#0a1424,#142039)}
.gsap-snap-article .snap-stage__object{display:grid;width:110px;height:110px;place-items:center;border-radius:25px;background:linear-gradient(135deg,var(--snap-lime),#3edfc4);color:#07111d;font-weight:1000;box-shadow:0 20px 50px rgba(183,255,0,.2)}
.gsap-snap-article .snap-stage__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;width:100%;margin-top:1rem}.gsap-snap-article .snap-stage__cards article{padding:1rem .5rem;border-radius:12px;background:#1a2840;text-align:center;color:#fff;font-weight:800}
.gsap-snap-article .snap-lab__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin:1rem 0}.gsap-snap-article .snap-toggle{display:flex!important;align-items:center;grid-template-columns:auto 1fr!important}.gsap-snap-article .snap-toggle input{width:auto}
.gsap-snap-article .snap-button-row{display:flex;gap:.6rem;flex-wrap:wrap}.gsap-snap-article .snap-button-row button{padding:.7rem 1rem;border:1px solid rgba(183,255,0,.4);border-radius:10px;background:#17243a;color:#fff;font-weight:800}.gsap-snap-article .snap-button-row button:hover,.gsap-snap-article .snap-button-row button:focus-visible{border-color:var(--snap-lime);outline:2px solid var(--snap-lime);outline-offset:2px}
.gsap-snap-article .snap-meter{display:grid;gap:.7rem}.gsap-snap-article .snap-meter__bar{height:14px;border-radius:99px;background:#27334a;overflow:hidden}.gsap-snap-article .snap-meter__bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--snap-lime),var(--snap-cyan),var(--snap-violet))}
.gsap-snap-article .snap-status{min-height:1.5em;color:var(--snap-cyan);font-weight:800}
.gsap-snap-article .snap-story{min-height:70vh;display:grid;align-content:center}.gsap-snap-article .snap-story__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.gsap-snap-article .snap-story__steps article{padding:1.2rem;border:1px solid rgba(49,223,255,.25);border-radius:15px;background:#162238}.gsap-snap-article .snap-story__steps strong{display:block;color:var(--snap-lime);font-size:1.5rem}
.gsap-snap-article .snap-challenge-inner{text-align:center}.gsap-snap-article .challenge-label{color:var(--snap-lime);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.gsap-snap-article .challenge-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.gsap-snap-article .challenge-step{padding:1.2rem;border-radius:14px;background:#17243a}.gsap-snap-article .challenge-step strong{display:block;color:var(--snap-cyan);font-size:1.6rem}
.gsap-snap-article .snap-use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-snap-article .snap-use-grid h3{margin-top:0}.gsap-snap-article .snap-use-grid .good h3{color:var(--snap-lime)}.gsap-snap-article .snap-use-grid .poor h3{color:#ff9579}
.gsap-snap-article .snap-debug{counter-reset:snap-debug;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;padding:0;list-style:none}.gsap-snap-article .snap-debug li{position:relative;padding:.85rem .85rem .85rem 3rem;border-radius:11px;background:#141f33}.gsap-snap-article .snap-debug li::before{counter-increment:snap-debug;content:counter(snap-debug);position:absolute;left:.75rem;top:.65rem;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--snap-violet);color:#fff;font-weight:900}
.gsap-snap-article .snap-note{padding:1rem 1.1rem;border-left:4px solid var(--snap-lime);border-radius:0 12px 12px 0;background:rgba(183,255,0,.08)}
.gsap-snap-article .snap-code-inline{color:var(--snap-lime)}
.gsap-snap-article .snap-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.gsap-snap-article .snap-table-wrap table{min-width:720px}
@media(max-width:900px){.gsap-snap-article .snap-flow,.gsap-snap-article .snap-responsibility,.gsap-snap-article .snap-config-grid,.gsap-snap-article .snap-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-snap-article .snap-story__steps,.gsap-snap-article .challenge-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gsap-snap-article .snap-posters,.gsap-snap-article .snap-use-grid,.gsap-snap-article .snap-range-grid,.gsap-snap-article .snap-lab__controls,.gsap-snap-article .snap-debug{grid-template-columns:1fr}.gsap-snap-article .snap-flow,.gsap-snap-article .snap-responsibility,.gsap-snap-article .snap-config-grid,.gsap-snap-article .snap-cards{grid-template-columns:1fr}.gsap-snap-article .snap-stage__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-snap-article .snap-progress{margin-inline:1rem}.gsap-snap-article .snap-progress__point::after{font-size:.7rem}.gsap-snap-article .article-content{min-width:0}}
@media(prefers-reduced-motion:reduce){.gsap-snap-article .snap-stage,.gsap-snap-article .snap-story,.gsap-snap-article .snap-challenge{min-height:auto}.gsap-snap-article *{scroll-behavior:auto!important}}