.hc{height:clamp(450px,40vw,560px);margin-left:auto;max-width:600px;position:relative;width:100%}.hc__grid{background-image:linear-gradient(to right,color-mix(in oklab,var(--neutral-300) 45%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklab,var(--neutral-300) 45%,transparent) 1px,transparent 1px);background-size:38px 38px;border-radius:16px;opacity:.55;z-index:0}.hc__grid,.hc__links{inset:0;pointer-events:none;position:absolute}.hc__links{height:100%;overflow:visible;width:100%;z-index:1}.hc__link{fill:none;opacity:.75;stroke-linecap:round;stroke-width:1.4}.hc__packet{opacity:0}.hc__mono{font-family:var(--api-mono)}.hc__card{background-color:var(--neutral-25);border:1px solid var(--neutral-200);border-radius:14px;box-shadow:0 22px 48px -32px rgba(0,0,0,.85);position:absolute}.hc__code{left:0;overflow:hidden;top:0;width:64%;z-index:2}.hc__card-bar{align-items:center;background-color:var(--neutral-50);border-bottom:1px solid var(--neutral-200);display:flex;gap:var(--size-000);padding:8px 12px}.hc__dots{display:inline-flex;gap:4px}.hc__dots i{background-color:var(--neutral-400);border-radius:50%;height:7px;width:7px}.hc__endpoint{color:var(--neutral-300);font-size:var(--api-fs-sm)}.hc__code-body{margin:0;overflow:hidden;padding:12px 14px}.hc__code-body code{font-family:var(--api-mono);font-size:var(--api-fs-sm);line-height:1.6;white-space:pre}.hc__photo{border-color:var(--neutral-300);height:56%;overflow:hidden;right:0;top:24%;width:43%;z-index:4}.hc__photo-img{display:block;height:100%;object-fit:cover;width:100%}.hc__photo--empty{background:radial-gradient(120% 120% at 72% 18%,color-mix(in oklab,var(--brand-400) 50%,var(--neutral-200)),var(--neutral-25) 72%)}.hc__photo-fallback{align-items:center;color:color-mix(in oklab,var(--neutral-950) 82%,transparent);display:flex;font-family:var(--api-mono);font-size:2.2rem;font-weight:var(--fw-bold);inset:0;justify-content:center;position:absolute}.hc__photo-scrim{background:linear-gradient(0deg,rgba(8,8,10,.88),transparent);bottom:0;height:58%;left:0;pointer-events:none;position:absolute;right:0}.hc__photo-chip{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:color-mix(in oklab,var(--neutral-50) 58%,transparent);border:1px solid color-mix(in oklab,var(--neutral-950) 14%,transparent);border-radius:10px;bottom:9px;display:flex;gap:6px;left:9px;padding:6px 9px;position:absolute;right:9px}.hc__photo-chip-dot{animation:hc-pulse 1.8s ease-out infinite;background-color:var(--green-300);border-radius:50%;flex:0 0 auto;height:7px;width:7px}.hc__photo-chip-name{color:var(--neutral-950);font-size:var(--font-size-000);font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hc__photo-chip-status{color:var(--green-300);flex:0 0 auto;font-family:var(--api-mono);font-size:var(--api-fs-2xs);letter-spacing:.06em;margin-left:auto;text-transform:uppercase}.hc__events{bottom:0;left:5%;padding:12px 14px;width:62%;z-index:3}.hc__events-title{color:var(--neutral-700);font-size:var(--api-fs-2xs);letter-spacing:.14em;text-transform:uppercase}.hc__event-list{display:flex;flex-direction:column;gap:7px;list-style:none;margin:9px 0 0;padding:0}.hc__event{align-items:center;display:flex;gap:var(--size-000)}.hc__event-node{background-color:var(--hc-accent);border-radius:50%;box-shadow:0 0 0 3px color-mix(in oklab,var(--hc-accent) 18%,transparent);flex:0 0 auto;height:9px;width:9px}.hc__event-name{color:var(--neutral-700);font-size:var(--font-size-000)}.hc__event.is-signed .hc__event-name{color:var(--neutral-950);font-weight:var(--fw-semibold)}.hc__event-time{font-size:var(--api-fs-xs);margin-left:auto}.hc__port{background-color:var(--neutral-400);border-radius:1px;height:7px;position:absolute;width:7px;z-index:5}[data-hc-port=code-out]{bottom:-3.5px;right:24%}[data-hc-port=photo-in]{left:-3.5px;margin-top:-3.5px;top:50%}[data-hc-port=photo-out]{bottom:-3.5px;left:32%}[data-hc-port=events-in]{right:-3.5px;top:28%}@keyframes hc-pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--green-300) 60%,transparent)}70%{box-shadow:0 0 0 6px transparent}to{box-shadow:0 0 0 0 transparent}}.hc__endpoint{color:var(--neutral-600)}.hc__code-body code{color:var(--neutral-700)}.hc__events-title{color:var(--neutral-600)}.hc__event-time{color:var(--neutral-700)}.hc__photo-chip{--green-300:oklch(0.8 0.132 165.95);background-color:rgba(16,16,20,.55);border-color:hsla(0,0%,100%,.16)}.hc__photo-chip-name{color:#fff}@media (max-width:900px){.hc{display:flex;flex-direction:column;gap:16px;height:auto;margin:0 auto;max-width:460px}.hc__card{position:static;width:100%}.hc__photo{height:240px;position:relative}.hc__grid,.hc__links,.hc__port{display:none}}@media (prefers-reduced-motion:reduce){.hc__photo-chip-dot{animation:none}}