#open .op-head { text-align:center; } #open .op-head .lead { margin:0 auto; }
#open .op-stage { display:grid; grid-template-columns:1fr 260px 1fr; gap:28px 40px; align-items:center; margin:48px 0 36px; }
#open .op-col { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
#open .op-it { position:relative; padding:16px 20px; border-radius:16px; border:1px solid var(--line); background:var(--card); transition:transform .9s var(--ease) calc(var(--i)*90ms), opacity .9s var(--ease) calc(var(--i)*90ms), border-color .3s; }
#open .op-it b { display:block; font:600 18px/1.25 var(--head); color:var(--white); }
#open .op-it span { font-size:14.5px; color:var(--muted); }
#open .op-it::before { content:""; position:absolute; top:50%; width:40px; height:1px; background:linear-gradient(90deg, transparent, rgba(34,211,238,.6)); }
#open .op-l .op-it { text-align:right; } #open .op-l .op-it::before { left:100%; }
#open .op-r .op-it::before { right:100%; transform:scaleX(-1); }
#open .op-it:hover { border-color:rgba(34,211,238,.5); }
#open:not(.op-on) .op-l .op-it { opacity:0; transform:translateX(140px) scale(.85); }
#open:not(.op-on) .op-r .op-it { opacity:0; transform:translateX(-140px) scale(.85); }
.hx-static #open .op-it { opacity:1 !important; transform:none !important; }
#open .op-core { position:relative; display:grid; place-items:center; }
#open .op-shield { width:100%; max-width:240px; position:relative; z-index:1; filter:drop-shadow(0 0 30px rgba(34,211,238,.35)); }
#open .op-sh { fill:url(#opG); stroke:#22d3ee; stroke-width:3; }
#open .op-sh2 { fill:none; stroke:rgba(34,211,238,.35); stroke-width:1.5; }
#open .op-shackle { fill:none; stroke:#f5f9fc; stroke-width:9; stroke-linecap:round; transform-origin:122px 104px; transition:transform 1s var(--ease) .5s; }
#open .op-body { fill:#f5f9fc; } #open .op-key { fill:#0b1a2e; }
#open .op-shackle { transform:translateY(-16px) rotate(28deg); }
#open.op-on .op-shackle, .hx-static #open .op-shackle { transform:none; }
#open .op-chip rect { fill:rgba(6,16,31,.85); stroke:#22d3ee; stroke-width:1.5; }
#open .op-chip text { font:700 11px var(--body); letter-spacing:.08em; fill:#22d3ee; }
#open .op-ripple { position:absolute; width:240px; height:240px; border-radius:50%; border:1px solid rgba(34,211,238,.4); opacity:0; }
#open.op-on .op-ripple { animation:opRip 3s ease-out infinite 1.2s; }
@keyframes opRip { 0% { transform:scale(.6); opacity:.8; } 100% { transform:scale(1.8); opacity:0; } }
#open .op-dec { display:grid; grid-template-columns:auto 1fr auto auto; gap:18px; align-items:center; padding:18px 22px; border-radius:18px; border:1px dashed rgba(34,211,238,.35); background:rgba(5,12,23,.55); max-width:1000px; margin:0 auto; }
#open .op-meter { display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--text); }
#open .op-meter small { display:block; color:var(--cyan); font-weight:700; letter-spacing:.12em; font-size:11.5px; }
#open .op-meter svg { width:40px; height:40px; fill:none; stroke:var(--cyan); stroke-width:2; flex:none; } #open .op-meter .f { fill:var(--cyan); }
#open .op-pipe { position:relative; min-width:0; overflow:hidden; border-radius:10px; background:rgba(15,34,56,.9); padding:10px 14px; }
#open .op-hex { font:600 15px/1.3 ui-monospace,Menlo,monospace; color:#7dd3fc; white-space:nowrap; display:block; overflow:hidden; text-overflow:clip; }
#open .op-hex::after { content:"▍"; color:var(--cyan); animation:opBlink 1s steps(1) infinite; }
@keyframes opBlink { 50% { opacity:0; } }
#open .op-pkt { position:absolute; left:0; bottom:0; height:2px; width:60px; background:linear-gradient(90deg, transparent, #22d3ee); opacity:0; }
#open.op-on .op-pkt { animation:opPkt 2.2s linear infinite; }
@keyframes opPkt { 0% { left:-60px; opacity:1; } 100% { left:100%; opacity:1; } }
#open .op-step { font:600 14px var(--head); color:var(--cyan); padding:8px 12px; border-radius:999px; border:1px solid rgba(34,211,238,.4); white-space:nowrap; }
#open .op-out { display:flex; flex-direction:column; align-items:flex-end; }
#open .op-vlbl { font-size:12px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }
#open .op-vol { font:700 28px/1.1 var(--head); color:var(--white); white-space:nowrap; transition:opacity .4s, transform .4s var(--ease); }
#open .op-out em { font-size:12px; color:var(--muted); font-style:italic; }
#open .op-out.wait .op-vol { opacity:0; transform:translateY(8px); }
@media (max-width:900px) {
  #open .op-stage { grid-template-columns:1fr; } #open .op-core { order:-1; } #open .op-shield { max-width:160px; }
  #open .op-l .op-it { text-align:left; } #open .op-it::before { display:none; }
  #open:not(.op-on) .op-l .op-it, #open:not(.op-on) .op-r .op-it { transform:translateY(30px); }
  #open .op-dec { grid-template-columns:1fr; text-align:left; } #open .op-out { align-items:flex-start; }
  #open .op-step { justify-self:start; }
}
@media (prefers-reduced-motion: reduce) { #open .op-it, #open .op-shackle { transition:none; } #open .op-ripple, #open .op-pkt, #open .op-hex::after { animation:none !important; } }