@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Fira+Code:wght@400;500;700&display=swap";:root{--opa-bg: #081019;--opa-card: rgba(12, 22, 32, .9);--opa-primary: #0df259;--opa-cyan: #22d3ee;--opa-amber: #f59e0b;--opa-pink: #fb7185;--opa-text: #e8fff2}html{scroll-behavior:smooth}.opa-page{min-height:100vh;font-family:Chakra Petch,sans-serif;color:var(--opa-text);background:radial-gradient(circle at 15% 20%,rgba(13,242,89,.12),transparent 30%),radial-gradient(circle at 85% 10%,rgba(34,211,238,.15),transparent 28%),linear-gradient(150deg,#03070b 0%,var(--opa-bg) 100%)}#opa-progress{position:fixed;top:0;left:0;height:4px;width:0%;background:linear-gradient(90deg,var(--opa-primary),var(--opa-cyan));box-shadow:0 0 16px #0df259b3;z-index:200}.opa-shell{max-width:1220px;margin:0 auto;padding:2rem 1rem 4rem}.opa-hero{min-height:88vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.2rem;align-items:center}.opa-copy,.opa-visual{grid-column:span 12}@media(min-width:1280px){.opa-copy,.opa-visual{grid-column:span 6}}.opa-badge{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.3rem .8rem;background:#22d3ee1a;border:1px solid rgba(34,211,238,.35);font-family:Fira Code,monospace;font-size:.76rem}.opa-title{font-size:clamp(1.5rem,4vw,3rem);line-height:.98;font-weight:700;margin-top:.9rem;max-width:10.5ch}@media(max-width:1279px){.opa-title{max-width:none}.opa-hero{min-height:auto}}.opa-sub{max-width:62ch;color:#e8fff2d1;font-size:1.03rem}.opa-pills{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}.opa-pill{min-width:160px;border-radius:1rem;padding:.9rem 1rem;background:#0df25912;border:1px solid rgba(13,242,89,.22)}.opa-pill strong{display:block;color:var(--opa-primary);font-size:1.15rem}.opa-visual-box,.opa-card{border-radius:1.2rem;background:var(--opa-card);border:1px solid rgba(13,242,89,.18);box-shadow:0 0 35px #0df2590f}.opa-visual-box{padding:1.1rem}.opa-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}.opa-card{grid-column:span 12;padding:1rem}@media(min-width:1024px){.opa-card.span-4{grid-column:span 4}.opa-card.span-5{grid-column:span 5}.opa-card.span-6{grid-column:span 6}.opa-card.span-7{grid-column:span 7}.opa-card.span-8{grid-column:span 8}}.opa-section{padding:2.4rem 0;opacity:0;transform:translateY(36px);transition:opacity .75s ease,transform .75s ease}.opa-section.visible{opacity:1;transform:translateY(0)}.opa-section-title{font-size:clamp(1.8rem,4vw,3rem);line-height:1.04;margin-bottom:.75rem}.opa-section-sub{max-width:65ch;color:#e8fff2cc}.opa-array{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.6rem}.opa-slot{border-radius:1rem;border:1px solid rgba(34,211,238,.28);background:#22d3ee14;padding:.85rem .45rem;text-align:center;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.opa-slot.active{transform:translateY(-4px);border-color:var(--opa-primary);box-shadow:0 0 18px #0df25933}.opa-slot.moving{border-color:var(--opa-amber);box-shadow:0 0 18px #f59e0b3d}.opa-index{display:block;font-family:Fira Code,monospace;color:var(--opa-cyan);font-size:.76rem}.opa-value{display:block;margin-top:.35rem;font-size:1.25rem;font-weight:700}.opa-mini-title{font-family:Fira Code,monospace;font-size:.8rem;color:#e8fff2b3;margin-bottom:.8rem}.opa-code{border-radius:1rem;background:#040a0ee0;border:1px solid rgba(34,211,238,.22);padding:1rem;font-family:Fira Code,monospace;font-size:.84rem;line-height:1.75;overflow-x:auto}.opa-code [data-line]{display:block;padding:.1rem .35rem;border-radius:.6rem}.opa-code .active{background:linear-gradient(90deg,#0df25933,#0df25908)}.kw{color:#7dd3fc}.tp{color:#fbbf24}.fn{color:#86efac}.st{color:#fde68a}.nu{color:#fca5a5}.opa-state{display:grid;gap:.6rem}.opa-state-item{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .85rem;border-radius:.85rem;background:#22d3ee14;border:1px solid rgba(34,211,238,.2);font-family:Fira Code,monospace;font-size:.84rem}.opa-state-item strong{color:var(--opa-primary)}.opa-copy-box{border-radius:.95rem;border:1px solid rgba(13,242,89,.2);background:#0df2590f;padding:.9rem;min-height:92px}.opa-controls{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.8rem}.opa-btn{border-radius:.8rem;border:1px solid rgba(13,242,89,.34);background:#0df2591f;color:var(--opa-text);padding:.58rem .95rem;font-weight:600;transition:all .2s ease}.opa-btn:hover:not(:disabled){transform:translateY(-1px);background:#0df25933}.opa-btn:disabled{opacity:.45;cursor:not-allowed}.opa-track{height:.55rem;border-radius:999px;background:#e8fff21f;overflow:hidden;margin-top:.85rem}.opa-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--opa-primary),var(--opa-cyan));transition:width .25s ease}.opa-console{border-radius:1rem;overflow:hidden;border:1px solid rgba(34,211,238,.25);background:#040a0ee0}.opa-console-head{display:flex;justify-content:space-between;padding:.55rem .8rem;font-family:Fira Code,monospace;font-size:.74rem;background:#22d3ee1f}.opa-console-body{min-height:130px;padding:.8rem;font-family:Fira Code,monospace;font-size:.82rem}.opa-log{opacity:0;transform:translateY(8px);animation:opaLog .32s ease forwards;color:#dffdff}.opa-tip{border-left:4px solid var(--opa-amber);background:#f59e0b14;padding:.9rem 1rem;border-radius:0 1rem 1rem 0}.opa-warn{border-left-color:var(--opa-pink);background:#fb718514}.opa-back{display:inline-block;margin-top:1.8rem;text-decoration:none;color:var(--opa-cyan);border-bottom:1px dashed rgba(34,211,238,.5)}@keyframes opaLog{to{opacity:1;transform:translateY(0)}}