.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 .gsap-article-visual { margin:clamp(28px,5vw,48px) 0; overflow:hidden; border:1px solid var(--gsap-border); border-radius:18px; background:#080f1f; box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 1px rgba(157,255,82,.04); }
.gsap-fromto-article .gsap-article-visual img { display:block; width:100%; height:auto; aspect-ratio:40/21; object-fit:cover; background:#080f1f; }
.gsap-fromto-article .gsap-article-visual figcaption { margin:0; padding:15px 18px; border-top:1px solid rgba(157,255,82,.18); color:var(--blog-muted); background:linear-gradient(90deg,rgba(157,255,82,.07),rgba(130,75,255,.06)); font-size:14px; line-height:1.65; }
.gsap-fromto-article .gsap-article-visual figcaption code { color:var(--gsap-green); }
.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; }

/* Blog 06: GSAP stagger */
.gsap-stagger-article .stagger-mental { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin:30px 0; padding:24px; border:1px solid var(--gsap-border); border-radius:16px; background:#0d1713; }
.gsap-stagger-article .stagger-mental > div { display:grid; gap:9px; padding:18px; border:1px solid rgba(157,255,82,.18); border-radius:12px; background:rgba(157,255,82,.05); }.gsap-stagger-article .stagger-mental strong { margin-bottom:5px; color:var(--gsap-green); }.gsap-stagger-article .stagger-mental span { display:block; width:calc(100% - var(--offset,0) * 12%); margin-left:calc(var(--offset,0) * 12%); padding:7px 11px; border-radius:6px; color:var(--gsap-ink); background:linear-gradient(90deg,var(--gsap-green),#38d997); font-weight:900; }.gsap-stagger-article .stagger-mental > i { color:var(--gsap-green); font-size:22px; font-style:normal; }.gsap-stagger-article .stagger-mental small { color:var(--blog-muted); }
.gsap-stagger-article .stagger-timeline { display:grid; gap:10px; margin:28px 0; padding:24px; border:1px solid var(--gsap-border); border-radius:15px; background:#0d1713; }.gsap-stagger-article .stagger-timeline > b { color:var(--gsap-green); }.gsap-stagger-article .stagger-timeline > div { display:grid; grid-template-columns:75px 1fr; gap:12px; align-items:center; }.gsap-stagger-article .stagger-timeline span,.gsap-stagger-article .stagger-timeline small { color:var(--blog-muted); }.gsap-stagger-article .stagger-timeline i { display:block; width:calc(100% - var(--start) * 14%); height:18px; margin-left:calc(var(--start) * 14%); border-radius:99px; background:linear-gradient(90deg,var(--gsap-green),#a44cff); }
.gsap-stagger-article .stagger-syntax { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:25px 0; padding:20px; border:1px solid var(--gsap-border); border-radius:13px; background:var(--blog-surface-soft); }.gsap-stagger-article .stagger-syntax code { color:var(--gsap-green); }.gsap-stagger-article .stagger-syntax i { color:var(--blog-muted); font-style:normal; }
.gsap-stagger-article .stagger-demo-grid,.gsap-stagger-article .stagger-card-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-height:190px; padding:24px; align-items:center; overflow:hidden; border:1px dashed rgba(157,255,82,.3); border-radius:13px; 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-stagger-article .stagger-demo-grid > div { display:grid; min-height:95px; place-items:center; border:1px solid var(--gsap-border); border-radius:13px; color:var(--gsap-green); background:#101a16; font-weight:900; will-change:transform,opacity; }
.gsap-stagger-article .stagger-speed { display:grid; gap:13px; margin:28px 0; }.gsap-stagger-article .stagger-speed > div { display:grid; grid-template-columns:140px repeat(4,1fr); gap:9px; align-items:center; padding:16px; border:1px solid var(--blog-border); border-radius:11px; background:var(--blog-surface-soft); }.gsap-stagger-article .stagger-speed b { color:var(--gsap-green); }.gsap-stagger-article .stagger-speed span { display:grid; min-height:42px; place-items:center; border-radius:8px; color:var(--gsap-ink); background:var(--gsap-green); font-weight:900; }.gsap-stagger-article .stagger-speed > div:nth-child(2) span:nth-of-type(n+2) { transform:translateX(6px); }.gsap-stagger-article .stagger-speed > div:nth-child(3) span:nth-of-type(n+2) { transform:translateX(12px); }
.gsap-stagger-article .stagger-order,.gsap-stagger-article .stagger-amount { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:28px 0; }.gsap-stagger-article .stagger-order > div,.gsap-stagger-article .stagger-amount article { padding:22px; border:1px solid var(--gsap-border); border-radius:13px; background:var(--blog-surface-soft); }.gsap-stagger-article .stagger-order b,.gsap-stagger-article .stagger-amount b { display:block; margin-bottom:10px; color:var(--gsap-green); }.gsap-stagger-article .stagger-order span,.gsap-stagger-article .stagger-amount p { color:var(--blog-muted); }
.gsap-stagger-article .stagger-chain { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:center; margin:28px 0; }.gsap-stagger-article .stagger-chain b { padding:20px 12px; border:1px solid var(--gsap-border); border-radius:10px; color:var(--gsap-green); background:var(--blog-surface-soft); text-align:center; }.gsap-stagger-article .stagger-chain i { color:var(--blog-muted); font-style:normal; }
.gsap-stagger-article .stagger-grid-graphic,.gsap-stagger-article .stagger-play-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(100%,450px); gap:12px; margin:28px auto; padding:24px; overflow:hidden; border:1px solid var(--gsap-border); border-radius:16px; background:#0d1713; }.gsap-stagger-article .stagger-grid-graphic span,.gsap-stagger-article .stagger-play-grid div { display:grid; aspect-ratio:1; place-items:center; border:1px solid var(--gsap-border); border-radius:12px; color:var(--gsap-green); background:linear-gradient(145deg,rgba(157,255,82,.14),#101a16); font-weight:900; will-change:transform,opacity; }
.gsap-stagger-article .stagger-nav-demo,.gsap-stagger-article .stagger-service-demo,.gsap-stagger-article .stagger-hero-demo { display:grid; gap:17px; margin:28px 0; padding:25px; overflow:hidden; border:1px solid var(--gsap-border); border-radius:15px; background:#0d1713; }.gsap-stagger-article .stagger-nav-demo nav { display:flex; flex-wrap:wrap; gap:10px; }.gsap-stagger-article .stagger-nav-demo a,.gsap-stagger-article .stagger-hero-demo a { padding:10px 14px; border:1px solid var(--gsap-border); border-radius:8px; color:var(--gsap-green); text-decoration:none; will-change:transform,opacity; }.gsap-stagger-article .stagger-nav-demo button,.gsap-stagger-article .stagger-service-demo button,.gsap-stagger-article .stagger-hero-demo button { width:max-content; }
.gsap-stagger-article .stagger-service-demo > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.gsap-stagger-article .stagger-service-demo article { padding:20px; border:1px solid var(--gsap-border); border-radius:11px; background:var(--blog-surface-soft); will-change:transform,opacity; }.gsap-stagger-article .stagger-service-demo b,.gsap-stagger-article .stagger-hero-demo > span { color:var(--gsap-green); }.gsap-stagger-article .stagger-service-demo p,.gsap-stagger-article .stagger-hero-demo p { margin-bottom:0; color:var(--blog-muted); }.gsap-stagger-article .stagger-hero-demo h3 { margin:0; font-size:clamp(28px,5vw,44px); }.gsap-stagger-article .stagger-hero-demo > * { will-change:transform,opacity; }
.gsap-stagger-article .gsap-article-visual { margin:clamp(28px,5vw,48px) 0; overflow:hidden; border:1px solid var(--gsap-border); border-radius:18px; background:#080f1f; box-shadow:0 24px 60px rgba(0,0,0,.28); }.gsap-stagger-article .gsap-article-visual img { display:block; width:100%; height:auto; aspect-ratio:40/21; object-fit:cover; }.gsap-stagger-article .gsap-article-visual figcaption { padding:15px 18px; border-top:1px solid rgba(157,255,82,.18); color:var(--blog-muted); background:linear-gradient(90deg,rgba(157,255,82,.07),rgba(130,75,255,.06)); font-size:14px; }.gsap-stagger-article .gsap-article-visual code { color:var(--gsap-green); }
.gsap-stagger-article .stagger-easing { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:28px 0; }.gsap-stagger-article .stagger-easing div { padding:20px; border:1px solid var(--gsap-border); border-radius:11px; background:var(--blog-surface-soft); }.gsap-stagger-article .stagger-easing b { display:block; margin-bottom:8px; color:var(--gsap-green); }.gsap-stagger-article .stagger-easing span { color:var(--blog-muted); font-size:13px; }

/* Blog 07: easing */
.gsap-easing-article .ease-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0}.gsap-easing-article .ease-pair>div{padding:22px;border:1px solid var(--gsap-border);border-radius:13px;background:var(--blog-surface-soft)}.gsap-easing-article .ease-pair b{display:block;margin-bottom:8px;color:var(--gsap-green)}.gsap-easing-article .ease-pair span{color:var(--blog-muted)}
.gsap-easing-article .ease-track{display:flex;min-height:150px;align-items:center;overflow:hidden;padding:20px;border:1px dashed rgba(157,255,82,.3);border-radius:13px;background:linear-gradient(90deg,rgba(157,255,82,.04) 1px,transparent 1px);background-size:28px 28px}.gsap-easing-article [data-ease-box]{display:grid;width:72px;height:72px;flex:0 0 72px;place-items:center;border-radius:15px;color:var(--gsap-ink);background:linear-gradient(135deg,var(--gsap-green),#38d997);font-size:11px;font-weight:900;will-change:transform}
.gsap-easing-article .ease-races{display:grid;gap:12px;margin-bottom:20px}.gsap-easing-article .ease-races>div{position:relative;display:grid;grid-template-columns:110px 1fr;align-items:center;min-height:46px;border-bottom:1px dashed rgba(157,255,82,.25)}.gsap-easing-article .ease-races span{color:var(--blog-muted);font-size:12px}.gsap-easing-article .ease-races i{display:block;width:28px;height:28px;border-radius:8px;background:var(--gsap-green);will-change:transform}
.gsap-easing-article .ease-card,.gsap-easing-article .ease-bounce{display:grid;gap:14px;margin:28px 0;padding:26px;place-items:center;border:1px solid var(--gsap-border);border-radius:15px;background:#0d1713}.gsap-easing-article .ease-card b{color:var(--gsap-green);font-size:25px}.gsap-easing-article .ease-card span{color:var(--blog-muted)}.gsap-easing-article .ease-bounce{min-height:230px}.gsap-easing-article .ease-bounce i{display:block;width:55px;height:55px;border-radius:50%;background:linear-gradient(135deg,var(--gsap-green),#a44cff);will-change:transform}
.gsap-easing-article .gsap-article-visual{margin:clamp(28px,5vw,48px) 0;overflow:hidden;border:1px solid var(--gsap-border);border-radius:18px;background:#080f1f;box-shadow:0 24px 60px rgba(0,0,0,.28)}.gsap-easing-article .gsap-article-visual img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover}.gsap-easing-article .gsap-article-visual figcaption{padding:15px 18px;border-top:1px solid rgba(157,255,82,.18);color:var(--blog-muted);background:linear-gradient(90deg,rgba(157,255,82,.07),rgba(130,75,255,.06));font-size:14px}.gsap-easing-article .gsap-article-visual code{color:var(--gsap-green)}
@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; }
    .gsap-stagger-article .stagger-mental,.gsap-stagger-article .stagger-order,.gsap-stagger-article .stagger-amount { grid-template-columns:1fr; }.gsap-stagger-article .stagger-mental > i { transform:rotate(90deg); text-align:center; }
    .gsap-stagger-article .stagger-demo-grid { gap:7px; padding:14px; }.gsap-stagger-article .stagger-demo-grid > div { min-height:76px; font-size:13px; }
    .gsap-stagger-article .stagger-speed > div { grid-template-columns:1fr repeat(4,minmax(0,1fr)); padding:12px; }.gsap-stagger-article .stagger-speed b { grid-column:1/-1; }
    .gsap-stagger-article .stagger-chain { grid-template-columns:1fr; }.gsap-stagger-article .stagger-chain i { text-align:center; transform:rotate(90deg); }
    .gsap-stagger-article .stagger-service-demo > div { grid-template-columns:1fr; }.gsap-stagger-article .stagger-easing { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .gsap-stagger-article .stagger-grid-graphic,.gsap-stagger-article .stagger-play-grid { padding:15px; gap:8px; }
    .gsap-easing-article .ease-pair{grid-template-columns:1fr}.gsap-easing-article .ease-races>div{grid-template-columns:85px 1fr}.gsap-easing-article [data-ease-box]{width:58px;height:58px;flex-basis:58px}
}

@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; }
}

/* Blog 08: Power and Sine easing */
.gsap-power-sine-article .ease-token{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;padding:1rem 1.2rem;margin:1rem 0;border:1px solid rgba(159,245,65,.28);border-radius:16px;background:#11182a}.gsap-power-sine-article .ease-token b{font-size:1.35rem;color:#a8ff60}.gsap-power-sine-article .ease-token span{color:#aeb8ce}.gsap-power-sine-article .ease-token i{color:#7ee7ff;font-size:1.5rem}.gsap-power-sine-article .power-ladder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:.55rem;margin:1rem 0}.gsap-power-sine-article .power-ladder>*{padding:.85rem .5rem;text-align:center;border-radius:12px;background:#151d32}.gsap-power-sine-article .power-ladder b{color:#a8ff60;border:1px solid rgba(168,255,96,.25)}.gsap-power-sine-article .motion-hero{padding:clamp(1.2rem,4vw,2.7rem);overflow:hidden;border:1px solid rgba(126,231,255,.24);border-radius:20px;background:radial-gradient(circle at 85% 15%,rgba(168,255,96,.14),transparent 35%),#101729}.gsap-power-sine-article .motion-hero>span{display:block;color:#a8ff60;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.gsap-power-sine-article .motion-hero h3{margin:.5rem 0;color:#fff;font-size:clamp(1.55rem,4vw,2.7rem)}.gsap-power-sine-article .motion-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0}.gsap-power-sine-article .power-card{display:grid;gap:.35rem;min-height:130px;padding:1.2rem;border:1px solid rgba(126,231,255,.2);border-radius:16px;background:linear-gradient(145deg,#18213a,#101627)}.gsap-power-sine-article .power-card b{color:#7ee7ff}.gsap-power-sine-article .motion-cards>button{grid-column:1/-1;justify-self:start}.gsap-power-sine-article .sine-slide-card{display:grid;place-items:center;width:112px;height:58px;border-radius:14px;background:linear-gradient(135deg,#a8ff60,#39e8c2);color:#091018;font-weight:900}.gsap-power-sine-article .float-demo{display:flex;align-items:center;gap:1rem;min-height:120px;padding:1.2rem;border-radius:18px;background:#11182a}.gsap-power-sine-article .floating-dot{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#7ee7ff 25%,#8f64ff 75%);box-shadow:0 0 32px rgba(126,231,255,.4)}.gsap-power-sine-article .motion-system{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.gsap-power-sine-article .motion-system div{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid rgba(143,100,255,.25);border-radius:14px;background:#12192b}.gsap-power-sine-article .motion-system code{color:#a8ff60}.gsap-power-sine-article .easing-lab label{display:block;margin-bottom:.45rem;font-weight:800}.gsap-power-sine-article .easing-lab select{width:min(100%,320px);padding:.8rem 1rem;margin-bottom:1rem;border:1px solid rgba(126,231,255,.35);border-radius:12px;background:#0c1221;color:#fff}.gsap-power-sine-article .challenge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1rem 0}.gsap-power-sine-article .challenge-card{padding:1.25rem .7rem;text-align:center;border-radius:14px;background:linear-gradient(135deg,rgba(168,255,96,.17),rgba(126,231,255,.12));font-weight:800}.gsap-power-sine-article .direction-strip,.gsap-power-sine-article .family-model{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}.gsap-power-sine-article .direction-strip div,.gsap-power-sine-article .family-model div{display:grid;gap:.3rem;padding:1rem;border-radius:14px;background:#121a2d;text-align:center}.gsap-power-sine-article .direction-strip b,.gsap-power-sine-article .family-model h3{color:#a8ff60}.gsap-power-sine-article .family-model{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-power-sine-article .family-model p{color:#7ee7ff}.gsap-power-sine-article .ease-track{overflow:hidden}
@media(max-width:767px){.gsap-power-sine-article .power-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-power-sine-article .motion-cards,.gsap-power-sine-article .motion-system,.gsap-power-sine-article .family-model{grid-template-columns:1fr}.gsap-power-sine-article .challenge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-power-sine-article .direction-strip{grid-template-columns:1fr}.gsap-power-sine-article .motion-system div{flex-wrap:wrap}.gsap-power-sine-article .article-content{min-width:0}}

/* Blog 09: expressive easing */
.gsap-expressive-article .expressive-opening,.gsap-expressive-article .ease-decision{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin:1rem 0}.gsap-expressive-article .expressive-opening div,.gsap-expressive-article .ease-decision div{display:grid;gap:.4rem;padding:1.1rem;border:1px solid rgba(126,231,255,.2);border-radius:15px;background:#121a2d}.gsap-expressive-article .expressive-opening b,.gsap-expressive-article .ease-decision b{color:#a8ff60}.gsap-expressive-article .ease-anatomy{display:grid;grid-template-columns:repeat(3,auto 1fr);align-items:center;gap:.5rem;padding:1rem;border-radius:15px;background:#11182a}.gsap-expressive-article .ease-anatomy b{color:#7ee7ff;font-size:1.2rem}.gsap-expressive-article .back-service-card{padding:1.5rem;border:1px solid rgba(168,255,96,.28);border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(168,255,96,.15),transparent 35%),#11182a}.gsap-expressive-article .back-service-card>span{color:#a8ff60;font-weight:800;text-transform:uppercase}.gsap-expressive-article .button-demo{display:grid;place-items:center;min-height:150px;border-radius:18px;background:#11182a}.gsap-expressive-article .back-demo-button{padding:.9rem 1.3rem;border:0;border-radius:999px;background:linear-gradient(135deg,#a8ff60,#45dfc0);color:#081018;font-weight:900}.gsap-expressive-article .bounce-stage{position:relative;min-height:290px;padding:22px;overflow:hidden;border:1px solid rgba(255,190,72,.28);border-radius:18px;background:linear-gradient(#11182a,#151829)}.gsap-expressive-article .bounce-stage>i{display:block;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#ffbd48 30%,#ff6b55);box-shadow:0 0 25px rgba(255,189,72,.4)}.gsap-expressive-article .bounce-stage>span{position:absolute;right:20px;bottom:75px;color:#ffbd48}.gsap-expressive-article .bounce-stage .gsap-demo__controls{position:absolute;left:20px;bottom:18px}.gsap-expressive-article .notification-stage,.gsap-expressive-article .badge-stage{display:grid;gap:1rem;padding:1.2rem;overflow:hidden;border-radius:18px;background:#11182a}.gsap-expressive-article .bounce-notification{padding:1rem;border:1px solid rgba(168,255,96,.3);border-radius:14px;background:#162433;color:#dfffd0}.gsap-expressive-article .badge-stage{grid-template-columns:repeat(4,minmax(0,1fr))}.gsap-expressive-article .expressive-badge{padding:.75rem;text-align:center;border-radius:999px;background:rgba(143,100,255,.18);color:#ddd1ff}.gsap-expressive-article .badge-stage button{grid-column:1/-1;justify-self:start}.gsap-expressive-article .expo-hero-demo{padding:clamp(1.3rem,4vw,2.7rem);overflow:hidden;border-radius:20px;background:radial-gradient(circle at 85% 15%,rgba(126,231,255,.17),transparent 38%),#101729}.gsap-expressive-article .expo-hero-demo>span{color:#7ee7ff;font-weight:900;letter-spacing:.08em}.gsap-expressive-article .expo-hero-demo h3{font-size:clamp(1.5rem,4vw,2.6rem);color:#fff}.gsap-expressive-article .back-grid,.gsap-expressive-article .ease-challenge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1rem 0}.gsap-expressive-article .back-grid-card,.gsap-expressive-article .ease-challenge-grid div{padding:1.2rem .7rem;text-align:center;border:1px solid rgba(168,255,96,.22);border-radius:14px;background:#141d30;font-weight:800}.gsap-expressive-article .back-grid button{grid-column:1/-1;justify-self:start}.gsap-expressive-article .ease-decision{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-expressive-article .motion-language{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.gsap-expressive-article .motion-language div{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border-radius:13px;background:#121a2d}.gsap-expressive-article .motion-language code{color:#a8ff60}.gsap-expressive-article .ease-challenge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gsap-expressive-article .timeline-preview{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:1rem;border-radius:16px;background:#121a2d}.gsap-expressive-article .timeline-preview span{padding:.7rem 1rem;border:1px solid rgba(126,231,255,.25);border-radius:12px}.gsap-expressive-article .ease-track{overflow:hidden}
@media(max-width:767px){.gsap-expressive-article .expressive-opening,.gsap-expressive-article .ease-decision,.gsap-expressive-article .motion-language{grid-template-columns:1fr}.gsap-expressive-article .ease-anatomy{grid-template-columns:auto 1fr}.gsap-expressive-article .badge-stage,.gsap-expressive-article .back-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-expressive-article .ease-challenge-grid{grid-template-columns:1fr}.gsap-expressive-article .motion-language div{flex-wrap:wrap}.gsap-expressive-article .article-content{min-width:0}}

/* Blog 10: timelines */
.gsap-timeline-article .timeline-bars{display:grid;gap:.6rem;padding:1rem;margin:1rem 0;border-radius:16px;background:#11182a}.gsap-timeline-article .timeline-bars div{width:var(--size);margin-left:var(--start);padding:.65rem;border-radius:8px;background:linear-gradient(90deg,#a8ff60,#45dfc0);color:#081018;font-weight:900}.gsap-timeline-article .timeline-demo,.gsap-timeline-article .builder-demo{padding:1.2rem;overflow:hidden;border:1px solid rgba(126,231,255,.24);border-radius:18px;background:#11182a}.gsap-timeline-article .timeline-tracks{display:grid;gap:.7rem;margin-bottom:1rem}.gsap-timeline-article .timeline-tracks i{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#7ee7ff;color:#081018;font-weight:900}.gsap-timeline-article .control-sequence,.gsap-timeline-article .builder-cards,.gsap-timeline-article .service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1rem 0}.gsap-timeline-article .control-sequence i,.gsap-timeline-article .builder-cards i,.gsap-timeline-article .service-cards div{padding:1rem;text-align:center;border-radius:12px;background:#18233a;color:#7ee7ff;font-style:normal}.gsap-timeline-article .timeline-hero-demo,.gsap-timeline-article .service-timeline,.gsap-timeline-article .timeline-challenge{padding:clamp(1.3rem,4vw,2.5rem);overflow:hidden;border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(168,255,96,.15),transparent 35%),#101729}.gsap-timeline-article .timeline-hero-demo>span,.gsap-timeline-article .service-timeline>span{color:#a8ff60;font-weight:900}.gsap-timeline-article .timeline-hero-demo h3,.gsap-timeline-article .service-timeline h3{font-size:clamp(1.5rem,4vw,2.5rem);color:#fff}.gsap-timeline-article .service-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.gsap-timeline-article .step-sequence,.gsap-timeline-article .timeline-preview{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:1rem;border-radius:15px;background:#121a2d}.gsap-timeline-article .step-sequence span{padding:.7rem;border:1px solid rgba(126,231,255,.25);border-radius:10px}.gsap-timeline-article .concept-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.gsap-timeline-article .concept-pair div{display:grid;gap:.3rem;padding:1rem;border-radius:14px;background:#121a2d}.gsap-timeline-article .concept-pair b{color:#a8ff60}@media(max-width:767px){.gsap-timeline-article .service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-timeline-article .concept-pair{grid-template-columns:1fr}.gsap-timeline-article .article-content{min-width:0}}

/* Blog 11: timeline controls */
.gsap-controls-article .control-flow,.gsap-controls-article .direction-model,.gsap-controls-article .readout-grid,.gsap-controls-article .speed-model{display:grid;grid-template-columns:repeat(5,auto);align-items:center;gap:.7rem;margin:1rem 0;padding:1rem;border-radius:15px;background:#11182a}.gsap-controls-article .control-flow span,.gsap-controls-article .readout-grid div,.gsap-controls-article .speed-model span{padding:.8rem;border:1px solid rgba(126,231,255,.23);border-radius:11px}.gsap-controls-article .control-demo,.gsap-controls-article .mini-hero{padding:clamp(1.2rem,3vw,2rem);overflow:hidden;border:1px solid rgba(126,231,255,.25);border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(168,255,96,.13),transparent 35%),#101729}.gsap-controls-article .player-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1rem 0}.gsap-controls-article .player-cards i{padding:1rem;text-align:center;border-radius:12px;background:#18233a;color:#7ee7ff;font-style:normal}.gsap-controls-article .timeline-player-controls{display:grid;gap:.9rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(126,231,255,.18)}.gsap-controls-article .progress-buttons,.gsap-controls-article .speed-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.gsap-controls-article .progress-buttons button,.gsap-controls-article .speed-buttons button{padding:.55rem .75rem;border:1px solid rgba(168,255,96,.3);border-radius:9px;background:#141d30;color:#fff}.gsap-controls-article .timeline-player-controls label{display:grid;gap:.45rem}.gsap-controls-article .timeline-player-controls input{width:100%;accent-color:#a8ff60}.gsap-controls-article .player-readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}.gsap-controls-article .player-readouts span{padding:.7rem;border-radius:10px;background:#182238}.gsap-controls-article .readout-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gsap-controls-article .readout-grid div{display:grid;gap:.25rem}.gsap-controls-article .readout-grid b{color:#a8ff60}.gsap-controls-article .speed-model{grid-template-columns:repeat(3,minmax(0,1fr))}.gsap-controls-article .menu-control-demo{overflow:hidden;padding:1rem;border-radius:18px;background:#11182a}.gsap-controls-article .demo-menu-panel{display:grid;gap:.6rem;width:min(100%,360px);padding:1.1rem;margin-bottom:1rem;border-radius:15px;background:#19243b}.gsap-controls-article .demo-menu-panel b{color:#a8ff60}.gsap-controls-article .direction-model{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-controls-article .direction-model div{display:grid;gap:.4rem;padding:1rem;border-radius:12px;background:#182238}.gsap-controls-article .direction-model b{color:#7ee7ff}@media(max-width:767px){.gsap-controls-article .control-flow{grid-template-columns:1fr;text-align:center}.gsap-controls-article .control-flow i{transform:rotate(90deg)}.gsap-controls-article .player-readouts,.gsap-controls-article .readout-grid,.gsap-controls-article .speed-model,.gsap-controls-article .direction-model{grid-template-columns:1fr}.gsap-controls-article .article-content{min-width:0}}

/* Blog 12: timeline position parameter */
.gsap-position-article .syntax-grid{display:grid;grid-template-columns:repeat(3,auto 1fr);gap:.55rem;align-items:center;padding:1rem;border-radius:15px;background:#11182a}.gsap-position-article .syntax-grid b{color:#a8ff60}.gsap-position-article .position-demo,.gsap-position-article .label-demo{padding:1.2rem;overflow:hidden;border:1px solid rgba(126,231,255,.24);border-radius:18px;background:#11182a}.gsap-position-article .position-stage{display:grid;gap:.65rem;margin-bottom:1rem}.gsap-position-article .position-stage i{display:grid;place-items:center;width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,#a8ff60,#45dfc0);color:#081018;font-weight:900}.gsap-position-article .dynamic-bars{display:grid;gap:.35rem;overflow:hidden;margin-top:1rem}.gsap-position-article .dynamic-bars span{display:block;width:28%;padding:.35rem .6rem;border-radius:7px;background:linear-gradient(90deg,#7ee7ff,#8f64ff);color:#081018;font-weight:900}.gsap-position-article .position-hero{padding:clamp(1.3rem,4vw,2.6rem);overflow:hidden;border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(168,255,96,.15),transparent 35%),#101729}.gsap-position-article .position-hero>span{color:#a8ff60;font-weight:900}.gsap-position-article .position-hero h3{font-size:clamp(1.5rem,4vw,2.5rem);color:#fff}.gsap-position-article .label-scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}.gsap-position-article .label-scenes span{padding:1rem;text-align:center;border-radius:12px;background:#18233a;color:#7ee7ff}.gsap-position-article .concept-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.gsap-position-article .concept-pair div{display:grid;gap:.3rem;padding:1rem;border-radius:14px;background:#121a2d}.gsap-position-article .concept-pair b{color:#a8ff60}@media(max-width:767px){.gsap-position-article .syntax-grid{grid-template-columns:auto 1fr}.gsap-position-article .label-scenes,.gsap-position-article .concept-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.gsap-position-article .article-content{min-width:0}}