/* Coordinates and crop match the existing 1824×863 hosting image, including its mobile crop. */
.sp-hosting .hb-beams{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:hidden}
.hb-route use{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.hb-halo{stroke:var(--hb-color);stroke-width:13;stroke-dasharray:18 102;opacity:.68}
.hb-trail{stroke:var(--hb-color);stroke-width:3.8;stroke-dasharray:18 102;opacity:.9}
.hb-route .hb-tip{stroke:#fffdf7;stroke-width:2.1;stroke-dasharray:4 116;}
.hb-node{opacity:.35;animation:hb-breathe 3.8s ease-in-out var(--hb-delay) infinite;animation-play-state:paused}
.hb-spill{opacity:.3}
.sp-hosting [data-hb-running=true] .hb-route use,.sp-hosting [data-hb-running=true] .hb-node{animation-play-state:running}
@keyframes hb-flow{from{stroke-dashoffset:18}to{stroke-dashoffset:-102}}
@keyframes hb-head{from{stroke-dashoffset:4}to{stroke-dashoffset:-116}}
@keyframes hb-breathe{0%,100%{opacity:.25}50%{opacity:.75}}
.sp-hosting .hb-toggle{position:absolute;z-index:3;left:52%;right:0;top:0;bottom:0;width:48%;height:100%;border:0;border-radius:0;padding:0;margin:0;background:transparent;appearance:none;cursor:pointer;color:inherit;font:inherit}
.sp-hosting .hb-toggle[hidden]{display:none!important}
.sp-hosting .hb-toggle:focus-visible{outline:2px solid #d9f7ff;outline-offset:-12px;border-radius:20px}
@media(max-width:760px){.sp-hosting .hb-beams{width:156.25%;height:auto;aspect-ratio:1824/863;transform:translateX(-36%);inset:0 auto auto 0}.sp-hosting .hb-toggle{left:0;right:0;top:auto;bottom:0;width:100%;height:auto;aspect-ratio:1.354}}
@media(prefers-reduced-motion:reduce){.sp-hosting .hb-beams,.sp-hosting .hb-toggle{display:none!important}.hb-route use,.hb-node{animation:none!important}}
/* Synchronized arrivals drive local flashes and independent photographic page swaps. */
.hb-burst{opacity:0;pointer-events:none}
.sp-hosting .hb-panels{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sp-hosting .hb-beams{z-index:2}
@media(prefers-reduced-motion:reduce){.hb-route{animation:none!important}}
/* Baked perspective surfaces avoid browser-dependent projection seams. */
.sp-hosting svg.hb-panels{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:hidden}
.hb-panels .hb-panel-stage,.hb-panels .hb-panel{transform:none;position:static;opacity:1}
.hb-panels .hb-panel{opacity:1}
.hb-panels .hb-panel-flare{fill:none;stroke:#fff8eb;stroke-width:3;stroke-linejoin:round;opacity:0}
@media(max-width:760px){.sp-hosting svg.hb-panels{width:156.25%;height:auto;aspect-ratio:1824/863;transform:translateX(-36%);inset:0 auto auto 0}}
.hb-panels g.hb-panel{width:auto;height:auto;overflow:visible;backface-visibility:visible;border-radius:0}

.hb-sweep{opacity:0;pointer-events:none}.hb-page{transform-box:view-box;transform-origin:0 0}

.hb-frame-rim{fill:none;stroke:#f7f2ed;stroke-width:5;stroke-linejoin:round;pointer-events:none}.hb-route{opacity:0}

/* The background, connection wires, and transparent screens are separate layers. */
.sp-hosting .hb-wires{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.hb-wire{fill:none;stroke:#fff1dc;stroke-width:1.25;stroke-linecap:round;opacity:.9}
.hb-wire-glow{fill:none;stroke:#ffdab7;stroke-width:5;opacity:.55}
@media(max-width:760px){.sp-hosting .hb-wires{width:156.25%;height:auto;aspect-ratio:1824/863;transform:translateX(-36%);inset:0 auto auto 0}}

/* Rounded photographic screens: slim illuminated edge, all states share one silhouette. */
.hb-frame-rim{stroke:#fff6e8;stroke-width:2;stroke-linejoin:round}.hb-panels .hb-panel-flare{stroke-width:2}

.hb-screen-shell{transform-box:fill-box;transform-origin:center}

.hb-screen-flash{fill:#fff8e9;opacity:0;pointer-events:none}

.hb-panel-aura{fill:none;stroke:#fff2d3;stroke-width:24;opacity:0;pointer-events:none}