.gsap-article {
    --gsap-green: #9dff52;
    --gsap-green-deep: #62d824;
    --gsap-ink: #07120c;
    --gsap-panel: #111b18;
    --gsap-border: rgba(157, 255, 82, .24);
}

.gsap-article .gsap-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 30%, rgba(157, 255, 82, .16), transparent 29%),
        linear-gradient(135deg, #080e0b 0%, #101a16 52%, #07110b 100%);
}

.gsap-article .gsap-hero::after {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(157,255,82,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(157,255,82,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    pointer-events: none;
}

.gsap-article .gsap-hero .blog-container { position: relative; z-index: 1; }

.gsap-series-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

.gsap-series-line > span {
    display: inline-flex;
    padding: 7px 12px;
    border: 1px solid var(--gsap-border);
    border-radius: 999px;
    color: var(--gsap-green);
    background: rgba(157, 255, 82, .07);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gsap-article .article-featured {
    border: 1px solid var(--gsap-border);
    background: #101b17;
}

.gsap-callout {
    margin: 30px 0;
    padding: 22px 24px;
    border: 1px solid var(--gsap-border);
    border-left: 4px solid var(--gsap-green);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(157,255,82,.09), rgba(157,255,82,.025));
}

.gsap-callout strong { display: block; margin-bottom: 7px; color: var(--gsap-green); }
.gsap-callout p { margin: 0; }
.gsap-callout--challenge { border-left-color: #7ed7ff; }
.gsap-callout--challenge strong { color: #7ed7ff; }

.gsap-learning-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 26px 0 34px;
}

.gsap-learning-grid > div {
    position: relative;
    padding: 15px 16px 15px 58px;
    border: 1px solid var(--blog-border);
    border-radius: 10px;
    background: var(--blog-surface-soft);
}

.gsap-learning-grid > div > span {
    position: absolute;
    top: 15px;
    left: 16px;
    color: var(--gsap-green);
    font-weight: 900;
}

.gsap-learning-grid p { margin: 0; }

.gsap-syntax-flow {
    display: grid;
    grid-template-columns: repeat(9, auto);
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    padding: 26px 20px;
    border: 1px solid var(--gsap-border);
    border-radius: 16px;
    background: #0d1713;
}

.gsap-syntax-flow span,
.gsap-syntax-flow strong {
    padding: 10px 12px;
    border-radius: 7px;
    color: var(--blog-text);
    background: rgba(157,255,82,.09);
    font-size: 13px;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gsap-syntax-flow strong { color: #061007; background: var(--gsap-green); }
.gsap-syntax-flow i { color: var(--gsap-green); font-size: 20px; font-style: normal; }

.gsap-demo {
    margin: 30px 0 38px;
    padding: clamp(18px, 4vw, 30px);
    border: 1px solid var(--gsap-border);
    border-radius: 18px;
    background: linear-gradient(145deg, #101c17, #0a110e);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.gsap-demo__stage {
    display: flex;
    min-height: 150px;
    align-items: center;
    overflow: hidden;
    padding: 22px;
    border: 1px dashed rgba(157,255,82,.35);
    border-radius: 12px;
    background: repeating-linear-gradient(90deg, rgba(157,255,82,.035) 0, rgba(157,255,82,.035) 1px, transparent 1px, transparent 30px);
}

.gsap-box {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border: 2px solid #d7ffc1;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--gsap-green), #38d997);
    box-shadow: 0 0 0 7px rgba(157,255,82,.08), 0 0 35px rgba(157,255,82,.25);
    will-change: transform;
}

.gsap-box span { display: grid; width: 100%; height: 100%; place-items: center; color: var(--gsap-ink); font-weight: 950; }

.gsap-demo__controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.gsap-button {
    min-height: 45px;
    padding: 10px 20px;
    border: 1px solid var(--gsap-green);
    border-radius: 8px;
    color: var(--gsap-ink);
    background: var(--gsap-green);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.gsap-button:hover { background: #bcff8b; }
.gsap-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gsap-button--secondary { color: var(--blog-text); background: transparent; }
.gsap-button--secondary:hover { color: var(--gsap-ink); background: var(--gsap-green); }
.gsap-button:disabled { opacity: .55; cursor: not-allowed; }
.gsap-demo__status { min-height: 25px; margin: 14px 0 0 !important; color: var(--blog-muted); font-size: 15px; }

.gsap-ease-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 28px 0;
}

.gsap-ease-compare > div { padding: 18px; border: 1px solid var(--blog-border); border-radius: 12px; background: var(--blog-surface-soft); }
.gsap-ease-compare span { display: block; margin-bottom: 14px; font-weight: 800; }
.gsap-ease-compare small:last-child { float: right; }
.gsap-ease-line { position: relative; height: 8px; margin-bottom: 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
.gsap-ease-line i { position: absolute; inset: 0; display: block; border-radius: inherit; background: var(--gsap-green); transform-origin: left; }
.gsap-ease-line--linear i { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
.gsap-ease-line--out i { clip-path: polygon(0 0,72% 0,100% 80%,100% 100%,0 100%); }

.gsap-mistake-list { display: grid; gap: 12px; margin: 26px 0; }
.gsap-mistake-list > div { padding: 17px 19px; border: 1px solid var(--blog-border); border-radius: 10px; background: var(--blog-surface-soft); }
.gsap-mistake-list b { color: var(--gsap-green); }
.gsap-mistake-list p { margin: 5px 0 0; }

.gsap-challenge-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 28px 0; }
.gsap-challenge-cards article { padding: 22px; border: 1px solid var(--gsap-border); border-radius: 14px; background: linear-gradient(150deg, rgba(157,255,82,.09), var(--blog-surface-soft)); }
.gsap-challenge-cards span { display: inline-grid; min-width: 44px; height: 44px; place-items: center; border-radius: 10px; color: var(--gsap-ink); background: var(--gsap-green); font-weight: 900; }
.gsap-challenge-cards h3 { margin: 16px 0 7px; font-size: 21px; }
.gsap-challenge-cards p { margin: 0; font-size: 16px; }

.gsap-roadmap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 28px; margin: 28px 0 42px !important; padding: 0; list-style: none; counter-reset: roadmap; }
.gsap-roadmap li { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 13px 15px; border: 1px solid var(--blog-border); border-radius: 10px; background: var(--blog-surface-soft); }
.gsap-roadmap li span { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 50%; color: var(--gsap-ink); background: var(--gsap-green); font-size: 12px; font-weight: 900; }

.gsap-next-lesson { margin-top: 55px; padding: clamp(24px,5vw,42px); border: 1px solid var(--gsap-border); border-radius: 18px; background: radial-gradient(circle at 85% 15%, rgba(157,255,82,.2), transparent 32%), #101a16; }
.gsap-next-lesson > span:first-child { color: var(--gsap-green); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gsap-next-lesson h2 { margin: 13px 0 10px; padding: 0; font-size: clamp(27px,4vw,36px); }
.gsap-next-lesson p { margin-bottom: 20px; }
.gsap-next-lesson__status { display: inline-flex; padding: 8px 13px; border-radius: 999px; color: var(--gsap-ink); background: var(--gsap-green); font-size: 14px; font-weight: 900; text-decoration: none; }
.gsap-next-lesson__status:hover { color: var(--gsap-ink); background: #bcff8b; }

.gsap-targeting-article .target-pipeline {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 9px;
    align-items: center;
    justify-content: center;
    margin: 30px 0 38px;
    padding: 26px 20px;
    border: 1px solid var(--gsap-border);
    border-radius: 16px;
    background: #0d1713;
}

.gsap-targeting-article .target-pipeline > div {
    display: grid;
    min-height: 82px;
    gap: 8px;
    align-content: center;
    padding: 12px 14px;
    border: 1px solid rgba(157,255,82,.18);
    border-radius: 9px;
    background: rgba(157,255,82,.06);
    text-align: center;
}

.gsap-targeting-article .target-pipeline small { color: var(--blog-muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.gsap-targeting-article .target-pipeline code { padding: 0; border: 0; color: var(--gsap-green); background: transparent; }
.gsap-targeting-article .target-pipeline i { color: var(--gsap-green); font-size: 20px; font-style: normal; transform: rotate(-90deg); }
.gsap-targeting-article .target-pipeline__result { color: var(--gsap-ink); background: var(--gsap-green) !important; }
.gsap-targeting-article .target-pipeline__result small { color: rgba(6,16,7,.7); }

.gsap-targeting-article .selector-demo-box {
    display: grid;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    place-items: center;
    border: 2px solid #d7ffc1;
    border-radius: 16px;
    color: var(--gsap-ink);
    background: linear-gradient(135deg, var(--gsap-green), #38d997);
    box-shadow: 0 0 0 7px rgba(157,255,82,.08), 0 0 35px rgba(157,255,82,.2);
    font-size: 14px;
    font-weight: 900;
    will-change: transform;
}

.gsap-targeting-article .selector-reference {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin: 26px 0;
}

.gsap-targeting-article .selector-reference > div,
.gsap-targeting-article .selector-gallery > div {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    padding: 17px 19px;
    border: 1px solid var(--blog-border);
    border-radius: 10px;
    background: var(--blog-surface-soft);
}

.gsap-targeting-article .selector-reference code,
.gsap-targeting-article .selector-gallery code { color: var(--gsap-green); font-size: 15px; font-weight: 800; }
.gsap-targeting-article .selector-reference span,
.gsap-targeting-article .selector-gallery span { color: var(--blog-muted); font-size: 14px; }

.gsap-targeting-article .target-card-row,
.gsap-targeting-article .target-box-row {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    padding: 30px 18px 18px;
    border: 1px dashed rgba(157,255,82,.3);
    border-radius: 12px;
    background: rgba(0,0,0,.12);
}

.gsap-targeting-article .target-demo-card {
    min-height: 96px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gsap-border);
    border-radius: 12px;
    color: var(--blog-text);
    background: linear-gradient(145deg,rgba(157,255,82,.12),var(--blog-surface-soft));
    font-weight: 850;
    will-change: transform, opacity;
}

.gsap-targeting-article .selector-tree {
    margin: 28px 0;
    padding: 24px;
    border: 1px solid var(--gsap-border);
    border-radius: 14px;
    background: #0d1713;
}

.gsap-targeting-article .selector-tree > code { display: inline-block; color: var(--gsap-ink); background: var(--gsap-green); }
.gsap-targeting-article .selector-tree div { display: flex; align-items: center; margin: 16px 0 0 28px; }
.gsap-targeting-article .selector-tree div span { width: 35px; height: 22px; margin-right: 10px; border-bottom: 1px solid var(--gsap-green); border-left: 1px solid var(--gsap-green); }

.gsap-targeting-article .one-many-diagram {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin: 28px 0;
}

.gsap-targeting-article .one-many-diagram > div { display: grid; gap: 14px; justify-items: center; padding: 22px; border: 1px solid var(--blog-border); border-radius: 13px; background: var(--blog-surface-soft); }
.gsap-targeting-article .one-many-diagram i { color: var(--gsap-green); font-size: 22px; font-style: normal; }
.gsap-targeting-article .one-many-card,
.gsap-targeting-article .one-many-cards b { padding: 10px 12px; border: 1px solid var(--gsap-border); border-radius: 8px; color: var(--gsap-green); background: rgba(157,255,82,.06); font-size: 13px; }
.gsap-targeting-article .one-many-cards { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.gsap-targeting-article .selector-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 28px 0; }

.gsap-targeting-article .target-box {
    min-height: 116px;
    display: grid;
    gap: 3px;
    align-content: center;
    justify-items: center;
    border: 1px solid var(--gsap-border);
    border-radius: 14px;
    color: var(--blog-text);
    background: linear-gradient(145deg,rgba(157,255,82,.14),var(--blog-surface-soft));
    will-change: transform;
}

.gsap-targeting-article .target-box span { color: var(--blog-muted); font-size: 12px; text-transform: uppercase; }
.gsap-targeting-article .target-box b { color: var(--gsap-green); font-size: 30px; }

.gsap-article .target-solution { margin: 26px 0 38px; border: 1px solid var(--gsap-border); border-radius: 12px; background: rgba(157,255,82,.04); }
.gsap-article .target-solution summary { padding: 18px 20px; color: var(--gsap-green); font-weight: 850; }
.gsap-article .target-solution .code-block { margin: 0; border-width: 1px 0 0; border-radius: 0 0 11px 11px; }

.gsap-article .gsap-lesson-nav {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px;
    margin-top: 48px;
}

.gsap-article .gsap-lesson-nav > a,
.gsap-article .gsap-lesson-nav > div {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 22px;
    border: 1px solid var(--gsap-border);
    border-radius: 13px;
    color: var(--blog-text);
    background: linear-gradient(145deg,rgba(157,255,82,.08),var(--blog-surface-soft));
    text-decoration: none;
}

.gsap-article .gsap-lesson-nav > a:hover { border-color: var(--gsap-green); color: var(--blog-text); }
.gsap-article .gsap-lesson-nav span { color: var(--gsap-green); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.gsap-article .gsap-lesson-nav b { line-height: 1.4; }
.gsap-article .gsap-lesson-nav small { color: var(--blog-muted); }

.gsap-to-article .to-state-diagram {
    display: grid;
    grid-template-columns: minmax(150px,1fr) auto auto auto minmax(150px,1fr);
    gap: 12px;
    align-items: center;
    margin: 30px 0 38px;
    padding: 26px;
    border: 1px solid var(--gsap-border);
    border-radius: 16px;
    background: #0d1713;
}

.gsap-to-article .to-state-diagram > div { display: grid; gap: 13px; justify-items: center; padding: 18px; border: 1px solid rgba(157,255,82,.18); border-radius: 12px; background: rgba(157,255,82,.05); }
.gsap-to-article .to-state-diagram small { color: var(--blog-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gsap-to-article .to-state-diagram > i { color: var(--gsap-green); font-size: 21px; font-style: normal; transform: rotate(-90deg); }
.gsap-to-article .to-state-diagram > strong { padding: 9px 12px; border-radius: 8px; color: var(--gsap-ink); background: var(--gsap-green); font-size: 14px; }
.gsap-to-article .to-state-box,
.gsap-to-article .to-state-track b { display: grid; width: 62px; height: 50px; place-items: center; border: 2px solid var(--gsap-green); border-radius: 9px; color: var(--gsap-green); font-size: 13px; }
.gsap-to-article .to-state-track { display: flex; width: 100%; justify-content: flex-end; border-bottom: 1px dashed rgba(157,255,82,.3); }

.gsap-to-article .to-anatomy { display: grid; grid-template-columns: repeat(7,auto); gap: 9px; align-items: center; justify-content: center; margin: 28px 0; padding: 24px 18px; border: 1px solid var(--gsap-border); border-radius: 14px; background: var(--blog-surface-soft); }
.gsap-to-article .to-anatomy > div { display: grid; min-height: 90px; gap: 8px; align-content: center; justify-items: center; padding: 13px; border: 1px solid var(--blog-border); border-radius: 9px; text-align: center; }
.gsap-to-article .to-anatomy code { color: var(--gsap-green); font-weight: 850; }
.gsap-to-article .to-anatomy span { color: var(--blog-muted); font-size: 12px; }
.gsap-to-article .to-anatomy i { color: var(--gsap-green); font-style: normal; transform: rotate(-90deg); }

.gsap-to-article .to-demo-box {
    display: grid;
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    place-items: center;
    border: 2px solid #d7ffc1;
    border-radius: 16px;
    color: var(--gsap-ink);
    background: linear-gradient(135deg,var(--gsap-green),#38d997);
    box-shadow: 0 0 0 7px rgba(157,255,82,.08),0 0 34px rgba(157,255,82,.22);
    font-size: 13px;
    font-weight: 900;
    will-change: transform,opacity;
}

.gsap-to-article .to-axis { position: relative; display: grid; width: min(100%,390px); height: 260px; margin: 28px auto; place-items: center; border: 1px solid var(--gsap-border); border-radius: 16px; background: linear-gradient(rgba(157,255,82,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(157,255,82,.04) 1px,transparent 1px),#0d1713; background-size: 25px 25px; }
.gsap-to-article .to-axis::before,.gsap-to-article .to-axis::after { position: absolute; content:""; background: rgba(157,255,82,.5); }
.gsap-to-article .to-axis::before { width: 78%; height: 1px; }
.gsap-to-article .to-axis::after { width: 1px; height: 78%; }
.gsap-to-article .to-axis b { position: relative; z-index: 2; display: grid; width: 70px; height: 55px; place-items: center; border-radius: 10px; color: var(--gsap-ink); background: var(--gsap-green); text-transform: uppercase; }
.gsap-to-article .to-axis span { position: absolute; z-index: 2; padding: 4px 8px; border-radius: 5px; color: var(--gsap-green); background: #0d1713; font-weight: 800; }
.gsap-to-article .to-axis__up { top: 13px; }.gsap-to-article .to-axis__down { bottom: 13px; }.gsap-to-article .to-axis__left { left: 13px; }.gsap-to-article .to-axis__right { right: 13px; }

.gsap-to-article .to-centered-stage { display: grid; min-height: 170px; place-items: center; border: 1px dashed rgba(157,255,82,.3); border-radius: 12px; background: rgba(0,0,0,.12); }
.gsap-to-article .to-demo-box--diamond { border-radius: 8px 22px 8px 22px; }

.gsap-to-article .to-scale-reference,
.gsap-to-article .to-opacity-reference { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 30px 0; }
.gsap-to-article .to-scale-reference > div,
.gsap-to-article .to-opacity-reference > div { display: grid; min-height: 150px; gap: 10px; place-items: center; align-content: center; border: 1px solid var(--blog-border); border-radius: 12px; background: var(--blog-surface-soft); }
.gsap-to-article .to-scale-reference i { display: block; width: 45px; height: 45px; border-radius: 9px; background: var(--gsap-green); transform: scale(var(--scale)); }
.gsap-to-article .to-scale-reference span,
.gsap-to-article .to-opacity-reference span { color: var(--blog-muted); font-size: 13px; }
.gsap-to-article .to-opacity-reference > div::before { width: 58px; height: 58px; border: 2px solid var(--gsap-green); border-radius: 10px; background: var(--gsap-green); content:""; opacity:var(--opacity); }

.gsap-to-article .to-duration-chart { display: grid; gap: 14px; margin: 28px 0; }
.gsap-to-article .to-duration-chart > div { display: grid; grid-template-columns: 55px 1fr 75px; gap: 13px; align-items: center; padding: 14px 17px; border: 1px solid var(--blog-border); border-radius: 10px; background: var(--blog-surface-soft); }
.gsap-to-article .to-duration-chart span { position: relative; display: block; width: var(--line); height: 5px; border-radius: 99px; background: var(--gsap-green); }
.gsap-to-article .to-duration-chart span::before,.gsap-to-article .to-duration-chart span::after { position:absolute; top:50%; width:9px; height:9px; border-radius:50%; background:var(--gsap-green); content:""; transform:translateY(-50%); }
.gsap-to-article .to-duration-chart span::before { left:0; }.gsap-to-article .to-duration-chart span::after { right:0; }
.gsap-to-article .to-duration-chart b { color: var(--blog-muted); font-size: 13px; text-align: right; }

.gsap-to-article .to-flow-diagram { display: grid; grid-template-columns: repeat(7,auto); gap: 10px; align-items: center; justify-content: center; margin: 28px 0; padding: 24px; border: 1px solid var(--gsap-border); border-radius: 14px; background: #0d1713; }
.gsap-to-article .to-flow-diagram span { padding: 11px 13px; border: 1px solid rgba(157,255,82,.2); border-radius: 8px; background: rgba(157,255,82,.06); font-size: 13px; text-align:center; }
.gsap-to-article .to-flow-diagram i { color: var(--gsap-green); font-style: normal; }

.gsap-to-article .to-ease-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 26px 0; }
.gsap-to-article .to-ease-list code { padding: 16px 8px; border: 1px solid var(--blog-border); border-radius: 9px; color: var(--gsap-green); background: var(--blog-surface-soft); text-align: center; }

.gsap-to-article .to-yoyo-diagram { display: grid; gap: 10px; margin: 28px 0; padding: 24px; border: 1px solid var(--gsap-border); border-radius: 14px; background: #0d1713; }
.gsap-to-article .to-yoyo-diagram > div { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items:center; }
.gsap-to-article .to-yoyo-diagram b { padding: 9px 12px; border-radius: 7px; color: var(--gsap-ink); background: var(--gsap-green); font-size: 12px; }
.gsap-to-article .to-yoyo-diagram span { overflow:hidden; color:var(--gsap-green); text-align:center; letter-spacing:.45em; }
.gsap-to-article .to-yoyo-diagram small { color: var(--blog-muted); font-weight: 800; text-transform: uppercase; }

.gsap-to-article .to-origin-reference { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:28px 0; }
.gsap-to-article .to-origin-reference > div { display:grid; min-height:150px; gap:14px; place-items:center; align-content:center; border:1px solid var(--blog-border); border-radius:12px; background:var(--blog-surface-soft); }
.gsap-to-article .to-origin-reference span { position:relative; display:block; width:70px; height:70px; border:2px solid var(--gsap-green); border-radius:9px; }
.gsap-to-article .to-origin-reference span::after { position:absolute; top:50%; left:50%; width:10px; height:10px; border-radius:50%; background:var(--gsap-green); content:""; transform:translate(-50%,-50%); }
.gsap-to-article .to-origin-reference > div:last-child span::after { top:0; left:0; }

.gsap-to-article .to-playground__stage { display:grid; min-height:265px; overflow:hidden; padding:24px; place-items:center start; border:1px dashed rgba(157,255,82,.3); border-radius:12px; 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; }
.gsap-to-article .to-playground__box { display:grid; width:92px; height:92px; flex:0 0 92px; place-items:center; border:2px solid #d7ffc1; border-radius:18px; color:var(--gsap-ink); background:linear-gradient(135deg,var(--gsap-green),#38d997); box-shadow:0 0 34px rgba(157,255,82,.2); font-size:12px; font-weight:900; will-change:transform,opacity; }
.gsap-to-article .to-card-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:28px 0; }
.gsap-to-article .to-card-row div { display:grid; min-height:95px; place-items:center; border:1px solid var(--gsap-border); border-radius:12px; color:var(--gsap-green); background:var(--blog-surface-soft); font-weight:850; }

.gsap-to-article .to-interaction-demo { display:grid; min-height:170px; margin:28px 0; gap:14px; place-items:center; align-content:center; border:1px solid var(--gsap-border); border-radius:14px; background:linear-gradient(145deg,rgba(157,255,82,.08),var(--blog-surface-soft)); }
.gsap-to-article .to-hover-button { min-height:52px; padding:12px 24px; border:1px solid var(--gsap-green); border-radius:9px; color:var(--gsap-ink); background:var(--gsap-green); font:inherit; font-weight:900; cursor:pointer; will-change:transform; }
.gsap-to-article .to-interaction-demo > span { color:var(--blog-muted); font-size:13px; }
.gsap-to-article .to-hover-card { width:min(100% - 30px,390px); padding:24px; border:1px solid var(--gsap-border); border-radius:14px; color:var(--blog-text); background:#101a16; will-change:transform; }
.gsap-to-article .to-hover-card small { color:var(--gsap-green); font-weight:800; text-transform:uppercase; }
.gsap-to-article .to-hover-card h3 { margin:12px 0 7px; font-size:22px; }.gsap-to-article .to-hover-card p { margin:0; color:var(--blog-muted); font-size:15px; }

.gsap-to-article .to-mental-model { display:grid; gap:14px; margin:30px 0 42px; padding:clamp(22px,4vw,34px); border:1px solid var(--gsap-border); border-radius:17px; background:radial-gradient(circle at 85% 12%,rgba(157,255,82,.14),transparent 30%),#0d1713; }
.gsap-to-article .to-mental-model > strong { color:var(--gsap-green); font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.gsap-to-article .to-mental-model > i { color:var(--gsap-green); font-size:22px; font-style:normal; text-align:center; }
.gsap-to-article .to-mental-state,.gsap-to-article .to-mental-code { padding:18px; border:1px solid rgba(157,255,82,.18); border-radius:10px; background:rgba(157,255,82,.05); }
.gsap-to-article .to-mental-state small { display:block; margin-bottom:10px; color:var(--blog-muted); font-weight:800; text-transform:uppercase; }
.gsap-to-article .to-mental-model code { padding:0; border:0; color:var(--gsap-green); background:transparent; line-height:1.7; }

.gsap-from-article .from-state-diagram {
    display:grid;
    grid-template-columns:minmax(150px,1fr) auto auto auto minmax(150px,1fr);
    gap:12px;
    align-items:center;
    margin:30px 0 38px;
    padding:26px;
    border:1px solid var(--gsap-border);
    border-radius:16px;
    background:#0d1713;
}

.gsap-from-article .from-state-diagram > div { display:grid; gap:13px; justify-items:center; padding:18px; border:1px solid rgba(157,255,82,.18); border-radius:12px; background:rgba(157,255,82,.05); }
.gsap-from-article .from-state-diagram small { color:var(--blog-muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.gsap-from-article .from-state-diagram > i { color:var(--gsap-green); font-size:21px; font-style:normal; transform:rotate(-90deg); }
.gsap-from-article .from-state-diagram > strong { padding:9px 12px; border-radius:8px; color:var(--gsap-ink); background:var(--gsap-green); font-size:14px; }
.gsap-from-article .from-state-box,
.gsap-from-article .from-state-track b { display:grid; width:62px; height:50px; place-items:center; border:2px solid var(--gsap-green); border-radius:9px; color:var(--gsap-green); font-size:13px; }
.gsap-from-article .from-state-track { display:flex; width:100%; justify-content:flex-start; border-bottom:1px dashed rgba(157,255,82,.3); }

.gsap-from-article .from-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:28px 0; }
.gsap-from-article .from-comparison article { padding:24px; border:1px solid var(--blog-border); border-radius:14px; background:var(--blog-surface-soft); }
.gsap-from-article .from-comparison article:last-child { border-color:var(--gsap-border); background:linear-gradient(145deg,rgba(157,255,82,.09),var(--blog-surface-soft)); }
.gsap-from-article .from-comparison span { color:var(--gsap-green); font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.gsap-from-article .from-comparison h3 { margin:14px 0; font-size:22px; }
.gsap-from-article .from-comparison code { display:block; margin-bottom:15px; color:var(--gsap-green); }
.gsap-from-article .from-comparison p { margin:0; color:var(--blog-muted); font-size:15px; }

.gsap-from-article .from-stage { display:flex; min-height:155px; overflow:hidden; padding:24px; align-items:center; border:1px dashed rgba(157,255,82,.3); border-radius:12px; background:linear-gradient(90deg,rgba(157,255,82,.035) 1px,transparent 1px); background-size:28px 28px; }
.gsap-from-article .from-demo-box { display:grid; width:80px; height:80px; flex:0 0 80px; place-items:center; border:2px solid #d7ffc1; border-radius:16px; color:var(--gsap-ink); background:linear-gradient(135deg,var(--gsap-green),#38d997); box-shadow:0 0 0 7px rgba(157,255,82,.08),0 0 34px rgba(157,255,82,.22); font-size:12px; font-weight:900; will-change:transform,opacity; }
.gsap-from-article .from-centered-stage { display:grid; min-height:165px; place-items:center; overflow:hidden; border:1px dashed rgba(157,255,82,.3); border-radius:12px; background:rgba(0,0,0,.12); }
.gsap-from-article .from-fade-card { padding:22px 26px; border:1px solid var(--gsap-border); border-radius:12px; color:var(--gsap-green); background:var(--blog-surface-soft); font-weight:850; will-change:opacity; }

.gsap-from-article .from-directions { position:relative; display:grid; width:min(100%,430px); height:290px; margin:28px auto; place-items:center; border:1px solid var(--gsap-border); border-radius:16px; background:linear-gradient(rgba(157,255,82,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(157,255,82,.04) 1px,transparent 1px),#0d1713; background-size:28px 28px; }
.gsap-from-article .from-directions b { display:grid; width:110px; height:70px; place-items:center; border-radius:11px; color:var(--gsap-ink); background:var(--gsap-green); text-align:center; }
.gsap-from-article .from-directions span { position:absolute; padding:6px 9px; border-radius:6px; color:var(--gsap-green); background:#0d1713; font-size:13px; font-weight:750; }
.gsap-from-article .from-directions__top { top:18px; }.gsap-from-article .from-directions__bottom { bottom:18px; }.gsap-from-article .from-directions__left { left:12px; }.gsap-from-article .from-directions__right { right:12px; }

.gsap-from-article .from-hero-demo { display:grid; gap:15px; margin:30px 0; padding:clamp(25px,5vw,45px); overflow:hidden; border:1px solid var(--gsap-border); border-radius:17px; background:radial-gradient(circle at 85% 20%,rgba(157,255,82,.16),transparent 30%),#0d1713; }
.gsap-from-article .from-hero-demo > p,.gsap-from-article .from-hero-demo > h3 { margin:0; }
.gsap-from-article .from-hero-demo > h3 { max-width:570px; font-size:clamp(29px,5vw,46px); }
.gsap-from-article .from-hero-demo > p:not(.from-hero-eyebrow) { color:var(--blog-muted); }
.gsap-from-article .from-hero-eyebrow { color:var(--gsap-green); font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.gsap-from-article .from-hero-demo > a { width:max-content; padding:10px 15px; border-radius:8px; color:var(--gsap-ink); background:var(--gsap-green); font-size:14px; font-weight:850; text-decoration:none; }
.gsap-from-article .from-hero-demo > button { width:max-content; margin-top:8px; }
.gsap-from-article .from-hero-demo > span { color:var(--blog-muted); font-size:13px; }

.gsap-from-article .from-card-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:28px 0; }
.gsap-from-article .from-card-row div { display:grid; min-height:95px; place-items:center; border:1px solid var(--gsap-border); border-radius:12px; color:var(--gsap-green); background:var(--blog-surface-soft); font-weight:850; }

.gsap-from-article .from-playground__stage { display:grid; min-height:270px; overflow:hidden; padding:25px; place-items:center; border:1px dashed rgba(157,255,82,.3); border-radius:12px; background:linear-gradient(rgba(157,255,82,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(157,255,82,.035) 1px,transparent 1px); background-size:29px 29px; }
.gsap-from-article .from-playground__card { display:grid; width:min(100%,245px); min-height:120px; gap:8px; place-items:center; align-content:center; border:1px solid var(--gsap-border); border-radius:17px; color:var(--blog-text); background:linear-gradient(145deg,rgba(157,255,82,.16),#101a16); box-shadow:0 18px 45px rgba(0,0,0,.2); will-change:transform,opacity; }
.gsap-from-article .from-playground__card small { color:var(--blog-muted); text-transform:uppercase; }.gsap-from-article .from-playground__card b { color:var(--gsap-green); font-size:21px; }

.gsap-from-article .from-ui-demo,
.gsap-from-article .from-service-demo { display:grid; gap:16px; margin:28px 0; padding:24px; overflow:hidden; border:1px solid var(--gsap-border); border-radius:14px; background:var(--blog-surface-soft); }
.gsap-from-article .from-ui-demo nav { display:flex; flex-wrap:wrap; gap:10px; }
.gsap-from-article .from-ui-demo nav a { padding:10px 14px; border:1px solid var(--blog-border); border-radius:8px; color:var(--blog-text); background:#101a16; text-decoration:none; will-change:transform,opacity; }
.gsap-from-article .from-ui-demo button,.gsap-from-article .from-service-demo button { width:max-content; }
.gsap-from-article .from-ui-demo > span,.gsap-from-article .from-service-demo > span { color:var(--blog-muted); font-size:13px; }
.gsap-from-article .from-service-demo article { padding:24px; border:1px solid var(--gsap-border); border-radius:13px; background:linear-gradient(145deg,rgba(157,255,82,.1),#101a16); will-change:transform,opacity; }
.gsap-from-article .from-service-demo article small { color:var(--gsap-green); font-weight:850; text-transform:uppercase; }.gsap-from-article .from-service-demo article h3 { margin:12px 0 8px; font-size:23px; }.gsap-from-article .from-service-demo article p { margin:0; color:var(--blog-muted); font-size:15px; }

.gsap-from-article .from-css-diagram { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr); gap:12px; align-items:center; margin:28px 0; padding:24px; border:1px solid var(--gsap-border); border-radius:15px; background:#0d1713; }
.gsap-from-article .from-css-diagram > div { display:grid; gap:8px; padding:18px; border:1px solid rgba(157,255,82,.18); border-radius:10px; background:rgba(157,255,82,.05); }
.gsap-from-article .from-css-diagram small { color:var(--blog-muted); text-transform:uppercase; }.gsap-from-article .from-css-diagram code { color:var(--gsap-green); line-height:1.7; }.gsap-from-article .from-css-diagram > i { color:var(--gsap-green); font-size:22px; font-style:normal; }.gsap-from-article .from-css-diagram > strong { color:var(--gsap-ink); padding:9px 12px; border-radius:8px; background:var(--gsap-green); }

.gsap-from-article .from-mental-model { display:grid; gap:14px; margin:30px 0 42px; padding:clamp(22px,4vw,34px); border:1px solid var(--gsap-border); border-radius:17px; background:radial-gradient(circle at 85% 12%,rgba(157,255,82,.14),transparent 30%),#0d1713; }
.gsap-from-article .from-mental-model > strong { color:var(--gsap-green); font-size:13px; letter-spacing:.12em; text-transform:uppercase; }.gsap-from-article .from-mental-model > div,.gsap-from-article .from-mental-model > pre { margin:0; padding:18px; border:1px solid rgba(157,255,82,.18); border-radius:10px; background:rgba(157,255,82,.05); }.gsap-from-article .from-mental-model > i { color:var(--gsap-green); font-size:22px; font-style:normal; text-align:center; }.gsap-from-article .from-mental-model small { display:block; margin-bottom:8px; color:var(--blog-muted); font-weight:850; text-transform:uppercase; }.gsap-from-article .from-mental-model code { padding:0; border:0; color:var(--gsap-green); background:transparent; line-height:1.7; }

/* Blog 05: gsap.fromTo() */
.gsap-fromto-article .fromto-track-graphic,
.gsap-fromto-article .fromto-state-pair,
.gsap-fromto-article .fromto-value-pair { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px; align-items:center; margin:30px 0; padding:24px; border:1px solid var(--gsap-border); border-radius:16px; background:#0d1713; }
.gsap-fromto-article .fromto-track-graphic > div,
.gsap-fromto-article .fromto-state-pair > div { display:grid; gap:10px; justify-items:center; padding:18px; border:1px solid rgba(157,255,82,.18); border-radius:12px; background:rgba(157,255,82,.05); }
.gsap-fromto-article .fromto-track-graphic small,.gsap-fromto-article .fromto-state-pair small { color:var(--blog-muted); font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.gsap-fromto-article .fromto-track-graphic code,.gsap-fromto-article .fromto-state-pair code { color:var(--gsap-green); line-height:1.7; }
.gsap-fromto-article .fromto-track-graphic b { display:grid; width:64px; height:52px; place-items:center; border:2px solid var(--gsap-green); border-radius:10px; color:var(--gsap-green); }
.gsap-fromto-article .fromto-track-graphic > span,.gsap-fromto-article .fromto-state-pair > i,.gsap-fromto-article .fromto-value-pair > span { color:var(--gsap-green); font-size:22px; font-style:normal; text-align:center; }
.gsap-fromto-article .fromto-track-graphic em { display:block; margin-bottom:7px; color:var(--blog-muted); font-size:12px; font-style:normal; }
.gsap-fromto-article .fromto-anatomy { display:grid; grid-template-columns:repeat(9,auto); gap:8px; align-items:center; margin:30px 0; padding:22px; overflow-x:auto; border:1px solid var(--gsap-border); border-radius:15px; background:#0d1713; }
.gsap-fromto-article .fromto-anatomy > div { min-width:125px; padding:17px 13px; border:1px solid rgba(157,255,82,.18); border-radius:10px; background:rgba(157,255,82,.05); text-align:center; }
.gsap-fromto-article .fromto-anatomy code { display:block; margin-bottom:8px; color:var(--gsap-green); font-weight:850; }.gsap-fromto-article .fromto-anatomy span { color:var(--blog-muted); font-size:12px; }.gsap-fromto-article .fromto-anatomy i { color:var(--gsap-green); font-style:normal; transform:rotate(-90deg); }
.gsap-fromto-article .fromto-method-grid,.gsap-fromto-article .fromto-state-matrix { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:28px 0; }
.gsap-fromto-article .fromto-method-grid article,.gsap-fromto-article .fromto-state-matrix > div { padding:22px; border:1px solid var(--blog-border); border-radius:14px; background:var(--blog-surface-soft); }
.gsap-fromto-article .fromto-method-grid article:last-child,.gsap-fromto-article .fromto-state-matrix > div:last-child { border-color:var(--gsap-border); background:linear-gradient(145deg,rgba(157,255,82,.1),var(--blog-surface-soft)); }
.gsap-fromto-article .fromto-method-grid span,.gsap-fromto-article .fromto-state-matrix code,.gsap-fromto-article .fromto-state-matrix i { color:var(--gsap-green); }.gsap-fromto-article .fromto-method-grid h3 { margin:13px 0; font-size:20px; }.gsap-fromto-article .fromto-method-grid p { margin-bottom:0; color:var(--blog-muted); font-size:14px; }
.gsap-fromto-article .fromto-stage { display:flex; min-height:165px; overflow:hidden; padding:24px; align-items:center; justify-content:center; border:1px dashed rgba(157,255,82,.3); border-radius:12px; background:linear-gradient(90deg,rgba(157,255,82,.035) 1px,transparent 1px); background-size:28px 28px; }
.gsap-fromto-article .fromto-demo-box,.gsap-fromto-article .fromto-playground__box { display:grid; width:82px; height:82px; flex:0 0 82px; place-items:center; border:2px solid #d7ffc1; border-radius:16px; color:var(--gsap-ink); background:linear-gradient(135deg,var(--gsap-green),#38d997); box-shadow:0 0 34px rgba(157,255,82,.22); font-size:11px; font-weight:900; text-align:center; will-change:transform,opacity; }
.gsap-fromto-article .fromto-position-line { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; margin:30px 0; padding:25px; border:1px solid var(--gsap-border); border-radius:15px; background:#0d1713; }.gsap-fromto-article .fromto-position-line > div { display:grid; gap:7px; justify-items:center; color:var(--gsap-green); }.gsap-fromto-article .fromto-position-line b { display:grid; width:58px; height:48px; place-items:center; border:2px solid var(--gsap-green); border-radius:9px; }.gsap-fromto-article .fromto-position-line span { position:relative; border-bottom:2px dashed rgba(157,255,82,.35); }.gsap-fromto-article .fromto-position-line i { position:absolute; left:50%; bottom:-11px; padding:2px 7px; color:var(--blog-muted); background:#0d1713; font-size:11px; font-style:normal; transform:translateX(-50%); }
.gsap-fromto-article .fromto-value-pair > div { display:grid; gap:12px; justify-items:center; }.gsap-fromto-article .fromto-value-pair i { display:block; width:calc(76px * var(--size)); height:calc(76px * var(--size)); border:2px solid var(--gsap-green); border-radius:12px; background:rgba(157,255,82,.12); }.gsap-fromto-article .fromto-value-pair b { color:var(--blog-muted); }
.gsap-fromto-article .fromto-hero-demo { display:grid; gap:14px; margin:30px 0; padding:clamp(27px,5vw,46px); overflow:hidden; border:1px solid var(--gsap-border); border-radius:17px; background:radial-gradient(circle at 85% 20%,rgba(157,255,82,.17),transparent 31%),#0d1713; }.gsap-fromto-article .fromto-hero-demo > span { color:var(--gsap-green); font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }.gsap-fromto-article .fromto-hero-demo h3 { margin:0; font-size:clamp(29px,5vw,46px); }.gsap-fromto-article .fromto-hero-demo p,.gsap-fromto-article .fromto-hero-demo small { margin:0; color:var(--blog-muted); }.gsap-fromto-article .fromto-hero-demo button { width:max-content; margin-top:8px; }
.gsap-fromto-article .fromto-service-demo { display:grid; gap:15px; margin:28px 0; padding:24px; overflow:hidden; border:1px solid var(--gsap-border); border-radius:14px; background:var(--blog-surface-soft); }.gsap-fromto-article .fromto-service-demo article { padding:24px; border:1px solid var(--gsap-border); border-radius:13px; background:linear-gradient(145deg,rgba(157,255,82,.1),#101a16); will-change:transform,opacity; }.gsap-fromto-article .fromto-service-demo h3 { margin:0 0 9px; }.gsap-fromto-article .fromto-service-demo p,.gsap-fromto-article .fromto-service-demo small { margin:0; color:var(--blog-muted); }.gsap-fromto-article .fromto-service-demo button { width:max-content; }
.gsap-fromto-article .fromto-button-demo { display:grid; min-height:170px; gap:14px; place-items:center; align-content:center; margin:28px 0; border:1px solid var(--gsap-border); border-radius:14px; background:linear-gradient(145deg,rgba(157,255,82,.08),var(--blog-surface-soft)); }.gsap-fromto-article .fromto-button-demo button { min-height:52px; padding:12px 24px; border:1px solid var(--gsap-green); border-radius:9px; color:var(--gsap-ink); background:var(--gsap-green); font:inherit; font-weight:900; cursor:pointer; will-change:transform; }.gsap-fromto-article .fromto-button-demo span { color:var(--blog-muted); font-size:13px; }
.gsap-fromto-article .fromto-card-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:28px 0; }.gsap-fromto-article .fromto-card-row div { display:grid; min-height:95px; place-items:center; border:1px solid var(--gsap-border); border-radius:12px; color:var(--gsap-green); background:var(--blog-surface-soft); font-weight:850; }
.gsap-fromto-article .fromto-playground__stage { display:grid; min-height:275px; overflow:hidden; padding:25px; place-items:center; border:1px dashed rgba(157,255,82,.3); border-radius:12px; background:linear-gradient(rgba(157,255,82,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(157,255,82,.035) 1px,transparent 1px); background-size:29px 29px; }.gsap-fromto-article .fromto-playground__box { width:94px; height:94px; flex-basis:94px; }
.gsap-fromto-article .fromto-yoyo { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 18px; align-items:center; margin:28px 0; padding:24px; border:1px solid var(--gsap-border); border-radius:15px; background:#0d1713; }.gsap-fromto-article .fromto-yoyo small { color:var(--blog-muted); font-weight:800; }.gsap-fromto-article .fromto-yoyo div { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }.gsap-fromto-article .fromto-yoyo b { width:26px; height:26px; border:2px solid var(--gsap-green); border-radius:7px; background:rgba(157,255,82,.13); }.gsap-fromto-article .fromto-yoyo span { color:var(--gsap-green); border-bottom:1px dashed rgba(157,255,82,.3); text-align:center; }
.gsap-fromto-article .fromto-state-matrix > div { display:grid; gap:10px; justify-items:center; text-align:center; }.gsap-fromto-article .fromto-state-matrix span { color:var(--blog-muted); }.gsap-fromto-article .fromto-state-matrix i { font-style:normal; }
.gsap-fromto-article .fromto-progress-track { height:28px; overflow:hidden; margin:12px 0 23px; border:1px solid var(--gsap-border); border-radius:99px; background:#0d1713; }.gsap-fromto-article .fromto-progress-track div { width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gsap-green),#38d997); transform:scaleX(0); transform-origin:left center; will-change:transform; }
.gsap-fromto-article .fromto-decision { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:28px 0; }.gsap-fromto-article .fromto-decision > div { display:grid; gap:12px; padding:22px; border:1px solid var(--gsap-border); border-radius:14px; background:#0d1713; }.gsap-fromto-article .fromto-decision > div > span { color:var(--gsap-green); font-weight:850; }.gsap-fromto-article .fromto-decision > div > div { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:12px; border-radius:9px; background:rgba(157,255,82,.05); }.gsap-fromto-article .fromto-decision i,.gsap-fromto-article .fromto-decision code { color:var(--gsap-green); }.gsap-fromto-article .fromto-decision i { font-style:normal; text-align:center; }
.gsap-fromto-article .fromto-mental { display:grid; gap:13px; margin:30px 0 42px; padding:clamp(22px,4vw,34px); border:1px solid var(--gsap-border); border-radius:17px; background:radial-gradient(circle at 85% 12%,rgba(157,255,82,.14),transparent 30%),#0d1713; }.gsap-fromto-article .fromto-mental > strong { color:var(--gsap-green); letter-spacing:.1em; text-transform:uppercase; }.gsap-fromto-article .fromto-mental > div { padding:18px; border:1px solid rgba(157,255,82,.18); border-radius:10px; background:rgba(157,255,82,.05); }.gsap-fromto-article .fromto-mental small { display:block; margin-bottom:8px; color:var(--blog-muted); font-weight:850; text-transform:uppercase; }.gsap-fromto-article .fromto-mental code { color:var(--gsap-green); line-height:1.7; }.gsap-fromto-article .fromto-mental > i { color:var(--gsap-green); font-size:22px; font-style:normal; text-align:center; }.gsap-fromto-article .fromto-mental > b { width:max-content; margin:auto; padding:9px 14px; border-radius:8px; color:var(--gsap-ink); background:var(--gsap-green); }
.gsap-fromto-article .fromto-stagger-preview { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin:28px 0; }.gsap-fromto-article .fromto-stagger-preview > div { display:grid; min-height:100px; gap:7px; place-items:center; align-content:center; border:1px solid var(--gsap-border); border-radius:13px; background:var(--blog-surface-soft); }.gsap-fromto-article .fromto-stagger-preview b { color:var(--gsap-green); }.gsap-fromto-article .fromto-stagger-preview small,.gsap-fromto-article .fromto-stagger-preview > i { color:var(--blog-muted); font-style:normal; text-align:center; }

@media (max-width: 767px) {
    .gsap-learning-grid, .gsap-ease-compare, .gsap-challenge-cards, .gsap-roadmap { grid-template-columns: 1fr; }
    .gsap-syntax-flow { grid-template-columns: 1fr; text-align: center; }
    .gsap-syntax-flow i { transform: rotate(90deg); }
    .gsap-demo__stage { min-height: 125px; padding: 15px; }
    .gsap-box { width: 58px; height: 58px; flex-basis: 58px; }
    .gsap-demo__controls .gsap-button { flex: 1 1 130px; }
    .gsap-targeting-article .target-pipeline { grid-template-columns: 1fr; }
    .gsap-targeting-article .target-pipeline i { transform: none; }
    .gsap-targeting-article .selector-reference,
    .gsap-targeting-article .selector-gallery,
    .gsap-targeting-article .one-many-diagram,
    .gsap-article .gsap-lesson-nav { grid-template-columns: 1fr; }
    .gsap-targeting-article .target-card-row,
    .gsap-targeting-article .target-box-row { gap: 8px; padding-inline: 10px; }
    .gsap-targeting-article .target-demo-card { min-height: 78px; font-size: 14px; }
    .gsap-targeting-article .target-box { min-height: 96px; }
    .gsap-targeting-article .selector-demo-box { width: 60px; height: 60px; flex-basis: 60px; font-size: 12px; }
    .gsap-to-article .to-state-diagram,
    .gsap-to-article .to-anatomy,
    .gsap-to-article .to-flow-diagram { grid-template-columns:1fr; text-align:center; }
    .gsap-to-article .to-state-diagram > i,
    .gsap-to-article .to-anatomy i { transform:none; }
    .gsap-to-article .to-scale-reference,
    .gsap-to-article .to-opacity-reference,
    .gsap-to-article .to-card-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
    .gsap-to-article .to-scale-reference > div,
    .gsap-to-article .to-opacity-reference > div { min-height:125px; }
    .gsap-to-article .to-ease-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .gsap-to-article .to-playground__stage { min-height:230px; padding:16px; }
    .gsap-to-article .to-playground__box { width:72px; height:72px; flex-basis:72px; }
    .gsap-to-article .to-demo-box { width:60px; height:60px; flex-basis:60px; }
    .gsap-from-article .from-state-diagram,
    .gsap-from-article .from-css-diagram { grid-template-columns:1fr; text-align:center; }
    .gsap-from-article .from-state-diagram > i { transform:none; }
    .gsap-from-article .from-comparison { grid-template-columns:1fr; }
    .gsap-from-article .from-demo-box { width:62px; height:62px; flex-basis:62px; }
    .gsap-from-article .from-card-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
    .gsap-from-article .from-card-row div { min-height:78px; font-size:14px; }
    .gsap-from-article .from-playground__stage { min-height:235px; padding:15px; }
    .gsap-from-article .from-directions { height:260px; }
    .gsap-from-article .from-directions span { font-size:11px; }
    .gsap-fromto-article .fromto-track-graphic,.gsap-fromto-article .fromto-state-pair,.gsap-fromto-article .fromto-value-pair,.gsap-fromto-article .fromto-anatomy { grid-template-columns:1fr; text-align:center; }
    .gsap-fromto-article .fromto-anatomy i { transform:none; }
    .gsap-fromto-article .fromto-method-grid,.gsap-fromto-article .fromto-state-matrix,.gsap-fromto-article .fromto-decision { grid-template-columns:1fr; }
    .gsap-fromto-article .fromto-card-row { gap:7px; }.gsap-fromto-article .fromto-card-row div { min-height:78px; font-size:14px; }
    .gsap-fromto-article .fromto-playground__stage { min-height:235px; padding:15px; }.gsap-fromto-article .fromto-playground__box { width:72px; height:72px; flex-basis:72px; }.gsap-fromto-article .fromto-demo-box { width:62px; height:62px; flex-basis:62px; }
    .gsap-fromto-article .fromto-position-line { gap:9px; padding:18px 12px; }.gsap-fromto-article .fromto-stagger-preview { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .gsap-article *, .gsap-article *::before, .gsap-article *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}