.pd-state{box-sizing:border-box;position:relative;isolation:isolate;width:100%;padding:24px 20px;border:1px solid #ffffff12;border-radius:20px;background:radial-gradient(ellipse at 0 0,#ffffff04,transparent 75%),#0d0f12;color:#f0f2f5;font-family:Play,sans-serif;text-align:left;overflow:hidden}
.pd-state-heading{display:flex;align-items:flex-start;gap:16px}
.pd-state-symbol{display:grid;place-items:center;flex:0 0 56px;width:56px;height:60px;border-radius:16px;background:linear-gradient(145deg,#272a30,#121418);box-shadow:inset 0 1px #ffffff18,0 6px 16px #0003;color:#c6cbd2}
.pd-state-symbol svg{width:43px;height:43px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pd-state-front{fill:#1b1e24}.pd-state-accent{stroke:#ec3345;fill:#ec334514}
.pd-state-copy{flex:1;min-width:0;padding-top:2px}
.pd-state .pd-state-copy h3{font-family:Play,sans-serif;font-size:var(--pd-type-body);font-weight:700;line-height:24px;letter-spacing:0;text-transform:none;color:#f0f2f5;margin:0 0 8px}
.pd-state .pd-state-copy p{font-family:Play,sans-serif;font-size:var(--pd-type-label);font-weight:400;line-height:21px;color:#a1a7b2;margin:0}
.pd-state .pd-state-action{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:24px 0 0}.pd-state-action svg{width:18px;height:18px;flex:none}
.pd-state--error .pd-state-symbol{background:linear-gradient(145deg,#372127,#171316)}
.pd-state-preview{position:relative;display:flex;align-items:center;gap:12px;margin-top:24px;padding:16px 0 0;border-top:1px solid #ffffff0b;overflow:hidden}
.pd-state-preview>span{height:38px;width:30px;border-radius:5px;background:#24272d;transform:rotate(-7deg)}
.pd-state-preview>div{flex:1;display:grid;gap:8px}.pd-state-preview i{display:block;height:7px;width:65%;border-radius:4px;background:#24272d}.pd-state-preview i+i{width:42%;background:#1c1f24}.pd-state-preview b{height:18px;width:64px;border-radius:5px;background:#24272d}
.pd-state-preview:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 25%,#ffffff09 50%,transparent 75%);animation:pd-state-sheen 1.8s ease-in-out infinite}
.cc-panel>.pd-state{border:0;background:transparent}.cc-analytics>.pd-state{padding-left:0;padding-right:0}
@keyframes pd-state-sheen{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.pd-state-preview:after{animation:none;display:none}}