.gsap-toggle-article{--ta-lime:#c7ff2f;--ta-cyan:#32dcff;--ta-violet:#a978ff;--ta-pink:#ff69cf;--ta-panel:#0a1525;--ta-soft:rgba(255,255,255,.045);--ta-line:rgba(127,205,255,.2)}
.toggle-graphic,.toggle-panel,.main-toggle-lab,.toggle-challenge{display:grid;gap:16px;margin:28px 0;padding:clamp(20px,4vw,36px);overflow:hidden;border:1px solid var(--ta-line);border-radius:20px;background:radial-gradient(circle at 90% 5%,rgba(169,120,255,.16),transparent 32%),var(--ta-panel)}
.toggle-graphic figcaption{grid-column:1/-1;color:var(--blog-muted);font-size:13px;text-align:center}.core-model{grid-template-columns:1fr 1fr}.core-model>div{display:grid;gap:9px;text-align:center}.core-model b{color:#fff}.core-model>div>span{color:var(--ta-lime);font-size:32px}.core-model strong{color:var(--ta-cyan)}.core-model i{padding:8px;border:1px solid var(--ta-lime);border-radius:8px;color:var(--ta-lime);font-style:normal}.core-model em{padding:28px 12px;border-right:2px dashed var(--ta-cyan);border-left:2px dashed var(--ta-cyan);color:#fff;font-style:normal;font-weight:800}
.syntax-map{grid-template-columns:repeat(4,minmax(0,1fr))}.syntax-map>code{grid-column:1/-1;padding:18px;border:1px solid rgba(199,255,47,.35);border-radius:12px;color:var(--ta-lime);font-size:clamp(15px,2.5vw,22px);text-align:center}.syntax-map>div{display:grid;gap:5px;padding:16px;border:1px solid var(--ta-line);border-radius:12px;text-align:center}.syntax-map span,.cheat-sheet span{display:grid;width:28px;height:28px;margin:auto;place-items:center;border-radius:50%;background:var(--ta-lime);color:#06101b;font-weight:900}.syntax-map b{font-size:12px}.syntax-map i{color:var(--ta-cyan);font-style:normal;text-transform:uppercase}
.event-grid,.action-grid,.debug-grid,.comparison-cards,.compact-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.event-grid article,.action-grid article,.debug-grid>div,.comparison-cards article,.compact-examples article{padding:18px;border:1px solid var(--ta-line);border-radius:13px;background:var(--ta-soft)}.event-grid span,.action-grid code,.comparison-cards b,.compact-examples b{color:var(--ta-lime);font-weight:900}.event-grid p,.action-grid p,.compact-examples p{margin:7px 0 0}.action-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.action-grid code{font-size:16px}.action-grid p{font-size:13px}.preset-list{display:grid;gap:9px;margin:22px 0}.preset-list>div{display:grid;grid-template-columns:minmax(210px,.7fr) 1fr;gap:15px;padding:14px 16px;border:1px solid var(--ta-line);border-radius:11px}.preset-list code{color:var(--ta-cyan)}
.decoder-controls,.lab-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.decoder-controls label,.lab-controls label{display:grid;gap:7px}.decoder-controls span,.lab-controls span{color:var(--ta-cyan);font-size:11px;font-weight:900}.decoder select,.main-toggle-lab select{width:100%;padding:10px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#101e31;color:#fff}.decoder output,.main-toggle-lab output{padding:16px;border:1px solid rgba(199,255,47,.35);border-radius:11px;color:var(--ta-lime);font-family:monospace;text-align:center}.decoder-result{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.decoder-result span{padding:10px;border-radius:8px;background:var(--ta-soft);font-size:12px;text-align:center}
.boundary-demo{min-height:560px;align-content:center;text-align:center}.boundary-line{padding:10px;border-top:2px dashed var(--ta-cyan);border-bottom:2px dashed var(--ta-cyan);color:var(--ta-cyan);font-weight:900}.boundary-card{display:grid;min-height:170px;place-items:center;border-radius:20px;background:linear-gradient(135deg,var(--ta-lime),var(--ta-cyan));color:#06101b;font-size:clamp(25px,5vw,52px);font-weight:950;will-change:transform,opacity}.toggle-status{margin:0;color:#fff}.compare-map,.trio-map{grid-template-columns:repeat(2,minmax(0,1fr));text-align:center}.compare-map>div,.trio-map>div{display:grid;gap:9px;padding:22px;border:1px solid var(--ta-line);border-radius:13px}.compare-map b,.trio-map b{color:var(--ta-lime)}.compare-map i{color:var(--ta-cyan);font-size:30px;font-style:normal}.trio-map{grid-template-columns:repeat(3,minmax(0,1fr))}.timeline-map{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;text-align:center}.timeline-map span{padding:16px;border:1px solid var(--ta-line);border-radius:10px;color:#fff}.timeline-map i{color:var(--ta-lime);font-style:normal}.timeline-map strong{grid-column:1/-1;color:var(--ta-cyan)}
.reveal-example{min-height:500px;align-content:center}.reveal-example>span,.main-toggle-lab header>span,.next-preview>span,.toggle-challenge>span{color:var(--ta-lime);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.reveal-example h3,.main-toggle-lab h3,.next-preview h3,.toggle-challenge h3{margin:0;color:#fff;font-size:clamp(30px,5vw,52px)}.reveal-example>div,.toggle-challenge>div,.lab-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.reveal-example article,.toggle-challenge article,.lab-cards article{padding:20px;border:1px solid var(--ta-line);border-radius:12px;background:var(--ta-soft);text-align:center;will-change:transform,opacity}.compact-examples{grid-template-columns:1fr 1fr}.comparison-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.comparison-cards article{display:grid;gap:7px}.comparison-cards span{color:var(--blog-muted)}
.event-logger{min-height:520px;align-content:center}.event-logger>div{display:grid;min-height:150px;place-items:center;border:1px solid var(--ta-lime);border-radius:16px;color:#fff;font-size:26px;font-weight:900}.event-logger ol{display:grid;gap:5px;max-height:170px;margin:0;padding:14px 14px 14px 40px;overflow:auto;border-radius:10px;background:#06101b;color:var(--ta-cyan)}
.main-toggle-lab{border-color:rgba(199,255,47,.4)}.main-toggle-lab header{display:grid;gap:8px}.lab-stage{display:grid;gap:15px;min-height:320px;align-content:center}.lab-stage>i{display:grid;width:110px;height:82px;place-items:center;border-radius:17px;background:linear-gradient(135deg,var(--ta-lime),var(--ta-cyan));color:#06101b;font-style:normal;font-weight:950;will-change:transform,opacity}.lab-presets{display:flex;gap:8px;flex-wrap:wrap}.lab-presets button{padding:9px 12px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#111f33;color:#fff}.lab-presets button:hover,.lab-presets button:focus-visible{border-color:var(--ta-lime);color:var(--ta-lime)}.main-toggle-lab>p{margin:0;color:var(--ta-cyan)}
.boundary-mental{grid-template-columns:1fr 1fr}.boundary-mental>div{display:grid;gap:8px;text-align:center}.boundary-mental b{color:#fff}.boundary-mental i{padding:7px;border:1px solid var(--ta-lime);border-radius:7px;color:var(--ta-lime);font-style:normal}.boundary-mental em{padding:24px;color:var(--ta-cyan);font-style:normal}.check-list{display:grid;gap:8px}.check-list li::marker{color:var(--ta-lime)}.debug-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.debug-grid span{display:inline-grid;width:28px;height:28px;margin-right:9px;place-items:center;border-radius:50%;background:var(--ta-cyan);color:#06101b;font-weight:900}.notice{margin:25px 0;padding:20px;border-left:4px solid var(--ta-lime);border-radius:0 12px 12px 0;background:var(--ta-soft)}.notice b{color:var(--ta-lime)}.toggle-challenge{min-height:460px;align-content:center}.cheat-sheet{grid-template-columns:repeat(4,minmax(0,1fr))}.cheat-sheet>code{grid-column:1/-1;color:var(--ta-lime);font-size:clamp(15px,2vw,20px);text-align:center}.cheat-sheet>div{display:grid;gap:6px;padding:15px;border:1px solid var(--ta-line);border-radius:11px;text-align:center}.cheat-sheet em{color:var(--ta-cyan);font-style:normal}.final-model{grid-template-columns:1fr repeat(7,auto);align-items:center;text-align:center}.final-model>b{grid-column:1/-1;color:var(--ta-lime);font-size:22px}.final-model>div{display:grid;gap:5px;padding:15px;border:1px solid var(--ta-line);border-radius:10px}.final-model>div span{color:var(--ta-cyan);font-size:28px;font-weight:950}.final-model>i{color:var(--ta-lime);font-style:normal}.poster-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.poster-grid figure{overflow:hidden;border:1px solid var(--ta-line);border-radius:14px;background:var(--ta-panel)}.poster-grid img{display:block;width:100%;height:auto}.poster-grid figcaption{padding:11px;color:var(--blog-muted);text-align:center}.next-preview{min-height:280px;align-content:center}.gsap-toggle-article button:focus-visible,.gsap-toggle-article select:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:991px){.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.decoder-controls,.lab-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-map,.final-model{grid-template-columns:1fr}.timeline-map i,.final-model>i{transform:rotate(90deg)}.comparison-cards{grid-template-columns:1fr}.final-model>b{grid-column:1}}
@media(max-width:767px){.core-model,.compare-map,.trio-map,.boundary-mental,.poster-grid,.compact-examples{grid-template-columns:1fr}.syntax-map,.cheat-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.event-grid,.debug-grid{grid-template-columns:1fr}.preset-list>div{grid-template-columns:1fr}.decoder-result,.reveal-example>div,.toggle-challenge>div,.lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.boundary-demo{min-height:460px}.gsap-toggle-article .article-content{min-width:0}}
@media(max-width:480px){.syntax-map,.action-grid,.decoder-controls,.lab-controls,.decoder-result,.reveal-example>div,.toggle-challenge>div,.lab-cards,.cheat-sheet{grid-template-columns:1fr}.toggle-graphic,.toggle-panel,.main-toggle-lab,.toggle-challenge{padding:17px}.syntax-map>code,.cheat-sheet>code{grid-column:1}.lab-presets{display:grid}.lab-presets button{width:100%}}
@media(prefers-reduced-motion:reduce){.gsap-toggle-article *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}