.cp{--cp-green:#d3414f;z-index:2;flex-direction:column;justify-content:flex-start;gap:11px;width:100%;max-width:460px;min-height:380px;display:flex;position:relative}.cp-header{color:#b4c2d0;font:700 11px var(--font-body,"DM Sans", system-ui, sans-serif);letter-spacing:.13em;text-transform:uppercase;justify-content:space-between;align-items:center;padding:0 3px;display:flex}.cp-header .cp-live{color:#f5ccd0;align-items:center;gap:8px;display:inline-flex}.cp-live:before{content:"";background:#d3414f;border-radius:50%;width:6px;height:6px;box-shadow:0 0 12px #d3414f70}.cp-stage{isolation:isolate;background:radial-gradient(at 50% 52%,#2a314760 0%,#0000 50%),linear-gradient(150deg,#1a1f2e,#12161f);border:1px solid #4d5c6b44;border-radius:12px;height:340px;position:relative;overflow:hidden}.cp-stage:before{content:"";opacity:.16;pointer-events:none;background-image:linear-gradient(#b4c2d01b 1px,#0000 1px),linear-gradient(90deg,#b4c2d01b 1px,#0000 1px);background-size:29px 29px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000);mask-image:linear-gradient(90deg,#0000,#000 30% 70%,#0000)}.cp-stage:after{content:"";pointer-events:none;border:1px solid #ffffff0a;border-radius:12px;position:absolute;inset:0}.cp-lines{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.cp-wire{fill:none;stroke:#d3414f;stroke-width:1.5px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #a9d68a33)}.cp-signal-trail{fill:#e66b7a;opacity:.46;filter:drop-shadow(0 0 4px #e66b7a)}.cp-card[data-pulse=true]{border-color:#e8ffc1;box-shadow:0 8px 24px #09150d4a,0 0 26px #d3414f42}.cp-signal{fill:#f5ccd0;filter:drop-shadow(0 0 5px #f5ccd0)drop-shadow(0 0 10px #e66b7a)}.cp-card{z-index:3;width:38%;height:78px;transform:translateY(calc((1 - var(--lit,0)) * 3px));isolation:isolate;background:linear-gradient(140deg,#2a3147,#232a3f);border:1px solid #4d5c6b55;border-radius:7px;align-items:center;gap:11px;padding:12px 11px;transition:background .35s,border-color .35s,box-shadow .45s,transform .45s;display:flex;position:absolute;box-shadow:0 6px 18px #07090f30}.cp-card:after{content:"";opacity:var(--lit,0);pointer-events:none;border-radius:9px;position:absolute;inset:-1px;box-shadow:0 0 22px #d3414f27,inset 0 0 18px #d3414f10}.cp-card[data-active=true]{background:linear-gradient(138deg,#5a2e36,#44232a);border-color:#d3414f9a;transform:none;box-shadow:0 8px 24px #09150d4a,0 0 20px #d3414f17}.cp-card:nth-of-type(odd){left:4%}.cp-card[data-side=right]{left:auto;right:4%}.cp-card[data-row="0"]{top:13%}.cp-card[data-row="1"]{top:40%}.cp-card[data-row="2"]{top:67%}.cp-ico{color:#7a8b99;background:#b4c2d013;border:1px solid #4d5c6b65;border-radius:6px;flex:none;place-items:center;width:31px;height:31px;transition:color .45s,background .45s,border-color .45s;display:grid}.cp-card[data-active=true] .cp-ico{color:#d3414f;background:#d3414f17;border-color:#d3414f65}.cp-ico svg{stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:16px;height:16px}.cp-text strong{font:700 clamp(11px, 1vw, 14px) var(--font-display,"Manrope", system-ui, sans-serif);letter-spacing:-.03em;color:#b4c2d0;transition:color .45s;display:block}.cp-text small{color:#b4c2d0;margin-top:5px;font-size:11px;transition:color .45s;display:block}.cp-card[data-active=true] .cp-text strong{color:#f4f8fa}.cp-card[data-active=true] .cp-text small{color:#d4d9e0}.cp-hub{opacity:0;z-index:4;color:#fff;width:62px;height:62px;font:800 20px var(--font-display,"Manrope", system-ui, sans-serif);letter-spacing:-.1em;background:linear-gradient(145deg,#e66b7a,#d3414f);border:4px solid #2a3147;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.8);box-shadow:0 0 0 1px #d3414f55,0 0 42px #d3414f33}.cp-hub:before{content:"";border:1px solid #e66b7a66;border-radius:50%;position:absolute;inset:-12px}.cp-hub span{margin-left:-2px}.cp-footer{justify-content:space-between;align-items:center;gap:8px;min-height:40px;display:flex}.cp-caption{min-width:0}.cp-kicker{font:700 11px var(--font-body,"DM Sans", system-ui, sans-serif);color:#f5ccd0;letter-spacing:.12em;text-transform:uppercase}.cp-message{color:#e5e8ec;margin-top:5px;font-size:13px;line-height:1.3}.cp-replay{color:#f5ccd0;font:700 11px var(--font-body,"DM Sans", system-ui, sans-serif);white-space:nowrap;background:0 0;border:1px solid #4d5c6b66;border-radius:4px;align-items:center;gap:6px;padding:6px 10px;transition:background .2s,border-color .2s;display:flex}.cp-replay:hover{background:#d3414f16;border-color:#d3414f}.cp-replay span{font-size:11px;line-height:1;display:inline-block}.cp-replay:focus-visible{outline-offset:4px;outline:3px solid #f5ccd0}.cp-progress{background:#4d5c6b45;border-radius:2px;width:100%;height:2px;overflow:hidden}.cp-progress-fill{transform-origin:0;background:#d3414f;width:0%;height:100%}.cp-fallback{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:1120px){.cp-card{gap:7px;height:78px;padding:10px 9px}.cp-ico{width:28px;height:28px}.cp-text small{font-size:11px}.cp-hub{width:56px;height:56px;font-size:18px}}@media (max-width:760px){.cp{max-width:540px;min-height:auto}.cp-stage{height:clamp(330px,87vw,445px)}.cp-card{width:37%;height:70px}.cp-text strong,.cp-text small{font-size:11px}.cp-hub{width:56px;height:56px}}@media (max-width:380px){.cp-card{gap:5px;width:38%;padding:8px 6px}.cp-ico{width:24px;height:24px}.cp-ico svg{width:14px;height:14px}.cp-text strong{font-size:11px}.cp-text small{display:none}.cp-hub{width:47px;height:47px;font-size:16px}}@media (prefers-reduced-motion:reduce){.cp-card,.cp-ico,.cp-text strong,.cp-text small{transition:none!important}.cp-progress-fill{width:100%}}
