.hc-wrap{max-width:420px;margin:28px auto 0}@media (hover:hover){.hc-wrap{will-change:transform;transition:transform .15s ease-out}}.hc-browser{border:1px solid var(--c-accent-15);border-radius:var(--br-md);box-shadow:0 20px 60px #0006, 0 0 40px var(--c-accent-06);background:#050d19b3;overflow:hidden}.hc-bar{border-bottom:1px solid var(--c-accent-08);background:#0a1a2ee6;align-items:center;gap:6px;padding:10px 14px;display:flex}.hc-dot{border-radius:50%;width:8px;height:8px}.hc-dot-r{background:#ff5f57}.hc-dot-y{background:#ffbd2e}.hc-dot-g{background:#28ca41}.hc-url{color:var(--c-text-dim);background:var(--c-accent-05);border-radius:var(--br-pill);flex:1;margin-left:12px;padding:3px 12px;font-size:11px}.hc-code{min-height:120px;padding:18px 20px;font-family:Courier New,monospace;font-size:13px;line-height:1.8}.hc-line{opacity:0;white-space:pre;transition:opacity .4s,transform .4s;transform:translateY(6px)}.hc-line--vis{opacity:1;transform:translateY(0)}.hc-tag{color:var(--c-accent)}.hc-attr{color:#f9a825}.hc-str{color:#66bb6a}.hc-cursor{background:var(--c-accent);vertical-align:middle;width:2px;height:14px;animation:1s step-end infinite hcBlink;display:inline-block}@keyframes hcBlink{0%,to{opacity:1}50%{opacity:0}}@media (max-width:768px){.hc-code{padding:14px 16px;font-size:11px}}