.pd-live-demo{background:#1a2215;border-bottom:1px solid #39492d}.pd-live-heading{display:flex;align-items:end;justify-content:space-between;gap:35px}.pd-live-heading h2{margin-top:23px}.pd-live-heading>p{max-width:340px;color:#b2c4a1;font-size:16px;line-height:1.7}.pd-playground{--run-progress:0;margin-top:44px;border:1px solid #66834a;border-radius:13px;overflow:hidden;background:#10160d;box-shadow:0 25px 70px #0003}.pd-playground-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #39492d;padding:16px 25px;font-size:10px;letter-spacing:1.2px;color:#bfceae}.pd-playground-bar b{color:#c3f75c;font-size:22px;vertical-align:middle;margin-right:10px}.pd-simulated{color:#b5c79e;border:1px solid #465d32;padding:4px 8px;border-radius:4px;font-size:8px;white-space:nowrap}.pd-playground-body{display:grid;grid-template-columns:.8fr 1.2fr;min-height:425px}.pd-body .pd-run-steps{padding:32px 27px;margin:0;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:12px;border-right:1px solid #39492d;background:#192113}.pd-run-steps li{display:flex;align-items:center;gap:13px;padding:16px 12px;border:1px solid transparent;border-radius:7px;color:#96a887;transition:background .25s,border-color .25s,color .25s}.pd-run-steps li>span{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border:1px solid #61724e;color:#a7be92;border-radius:50%;font-size:11px}.pd-run-steps strong{display:block;font-size:14px;font-weight:500;line-height:1.4}.pd-run-steps small{display:block;font-size:11px;color:#859874;line-height:1.5;margin-top:4px}.pd-run-steps li.is-active{border-color:#9bbd654f;background:#c3f75c0c;color:#edffda}.pd-run-steps li.is-active>span{background:#c3f75c;color:#14210a;border-color:#c3f75c}.pd-run-steps li.is-done>span{border-color:#b0e764;color:#c3f75c}.pd-run-steps i{margin-left:auto;font-style:normal;font-size:16px;color:#c3f75c}.pd-run-steps .is-done i:after{content:'✓'}.pd-run-stage{position:relative;padding:35px 42px;display:grid;align-items:center;background:radial-gradient(ellipse at 80% 20%,#8eca2520,transparent 65%)}.pd-run-panel{width:100%;animation:pd-demo-enter .35s ease-out both}.pd-run-kicker{font-size:10px!important;letter-spacing:1.3px;line-height:1.5;color:#a6c388!important;margin-bottom:18px!important}.pd-body .pd-run-panel h3{font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-1.7px;color:#f2f8ed}.pd-run-panel>p:not(.pd-run-kicker){color:#aabb99;font-size:14px;line-height:1.7;margin-top:19px;max-width:440px}.pd-run-start-icon,.pd-run-finish-icon{display:grid;place-items:center;border:1px solid #b0e5626b;background:#c3f75c14;color:#c3f75c;border-radius:12px;width:59px;height:59px;font-size:35px;margin-bottom:23px;box-shadow:0 0 40px #b9f25812}.pd-run-finish-icon{border-radius:50%;background:#c3f75c;color:#1a2a0d;font-size:31px;width:48px;height:48px;margin-bottom:17px}.pd-incoming{background:#f1f6e9;border-radius:10px;padding:24px;color:#213318;box-shadow:0 15px 35px #0003}.pd-demo-person{display:flex;align-items:center;gap:11px;padding-bottom:18px;border-bottom:1px solid #ccd6bf}.pd-demo-person>span{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#d6e8bd;color:#3b5823;font-size:16px}.pd-demo-person strong{display:block;font-size:13px;font-weight:600;color:#213318}.pd-demo-person small{font-size:10px;color:#647852}.pd-incoming>p{color:#273d1b!important;font-size:16px;line-height:1.7;margin-top:19px!important}.pd-run-tag{display:inline-block;color:#c3f75c;border:1px solid #516d35;border-radius:5px;padding:6px 10px;font-size:11px;margin-top:18px}.pd-demo-record{margin:23px 0 0;display:grid;gap:0;border:1px solid #40572e;border-radius:8px;padding:0 19px;background:#23341a}.pd-demo-record>div{padding:12px 0;border-bottom:1px solid #40572e}.pd-demo-record>div:last-child{border:0}.pd-demo-record dt{font-size:10px;letter-spacing:.6px;color:#abc790}.pd-demo-record dd{font-size:14px;color:#e7f5db;margin:4px 0 0;line-height:1.5}.pd-response{border:1px solid #728959;border-radius:9px;padding:24px;background:#283820;box-shadow:0 20px 50px #0002}.pd-response>span{font-size:10px;letter-spacing:1px;color:#c3f75c;text-transform:uppercase}.pd-response>p{font-size:15px!important;color:#e2eed6!important;line-height:1.8;margin-top:15px!important}.pd-draft-footer{font-size:11px;color:#c8daba;border-top:1px solid #62764c;padding-top:15px;margin-top:20px}.pd-draft-footer>span{color:#c3f75c;margin-right:8px}.pd-run-finish .pd-button{margin-top:22px;padding:13px 18px;min-height:48px;font-size:14px}.pd-run-controls{display:flex;align-items:center;flex-wrap:wrap;gap:18px;padding:22px 27px;border-top:1px solid #39492d;background:#182211}.pd-body .pd-run-controls .pd-button{font-size:13px;min-height:47px;padding:13px 18px;gap:17px;white-space:normal;text-align:left}.pd-body .pd-run-controls .pd-button:disabled{cursor:default;background:#2b3a20;color:#c2d5ad!important;border-color:#50683a;box-shadow:none;transform:none}.pd-body .pd-run-skip{border:0;border-bottom:1px solid #7a945c;background:none;color:#c3f75c;padding:7px 0;font-size:12px;cursor:pointer;border-radius:0}.pd-run-status{font-size:11px;color:#9db28b;margin-left:auto}.pd-run-progress{height:3px;background:#354528}.pd-run-progress>span{display:block;width:100%;height:100%;background:#c3f75c;box-shadow:0 0 20px #c3f75c;transform:scaleX(var(--run-progress));transform-origin:left;transition:transform .5s ease}.pd-demo-footnote{font-size:11px;color:#9cae8c;margin-top:17px!important}@keyframes pd-demo-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.pd-playground-body{grid-template-columns:.9fr 1.1fr}.pd-body .pd-run-steps{padding:24px 15px}.pd-run-stage{padding:27px}.pd-run-steps strong{font-size:12px}.pd-run-steps small{font-size:10px}.pd-run-steps li{padding:14px 8px;gap:9px}.pd-live-heading>p{font-size:14px;max-width:270px}.pd-run-controls{gap:15px}.pd-run-status{font-size:10px}.pd-body .pd-run-panel h3{font-size:32px}.pd-incoming{padding:20px}.pd-incoming>p{font-size:14px}}
@media(max-width:800px){.pd-live-heading{display:block}.pd-live-heading>p{margin-top:20px;max-width:500px;font-size:16px}.pd-playground{margin-top:30px}.pd-playground-body{grid-template-columns:1fr}.pd-body .pd-run-steps{display:grid;grid-template-columns:repeat(4,1fr);padding:16px;border-right:0;border-bottom:1px solid #39492d;gap:7px}.pd-run-steps li{display:flex;justify-content:center;flex-direction:column;padding:9px 4px;gap:7px;text-align:center}.pd-run-steps small,.pd-run-steps i{display:none}.pd-run-steps strong{font-size:10px;line-height:1.4}.pd-run-steps li>span{width:25px;height:25px;font-size:10px}.pd-run-stage{min-height:360px;padding:28px}.pd-run-panel{max-width:540px;margin:auto}.pd-run-controls{padding:19px;gap:13px}.pd-run-status{margin-left:0}.pd-playground-bar{padding:13px 18px;font-size:9px;letter-spacing:.7px}.pd-simulated{font-size:7px}.pd-playground-bar b{font-size:18px;margin-right:6px}.pd-body .pd-run-panel h3{font-size:34px}.pd-response>p{font-size:14px!important}.pd-run-start-icon{width:48px;height:48px;font-size:29px}}
@media(max-width:480px){.pd-playground-bar{gap:8px;padding:13px 12px;font-size:8px;letter-spacing:.2px}.pd-simulated{font-size:6px;padding:4px 5px;letter-spacing:.3px}.pd-body .pd-run-steps{padding:12px 9px;gap:5px}.pd-run-steps strong{font-size:9px}.pd-run-stage{min-height:390px;padding:23px 19px}.pd-body .pd-run-panel h3{font-size:31px}.pd-run-panel>p:not(.pd-run-kicker){font-size:13px}.pd-run-kicker{font-size:9px!important;letter-spacing:.8px}.pd-demo-person strong{font-size:11px}.pd-demo-person small{font-size:9px}.pd-incoming{padding:17px}.pd-incoming>p{font-size:14px}.pd-response{padding:18px}.pd-response>p{font-size:13px!important}.pd-demo-record dd{font-size:13px}.pd-run-controls{padding:16px;gap:12px}.pd-body .pd-run-controls .pd-button{width:100%;font-size:12px;justify-content:space-between}.pd-run-status{font-size:10px}.pd-run-skip+.pd-run-status{margin-left:auto}.pd-demo-footnote{font-size:10px}.pd-run-finish .pd-button{width:100%;font-size:13px}}
@media(prefers-reduced-motion:reduce){.pd-run-panel{animation:none}.pd-run-progress>span,.pd-run-steps li{transition:none}}
.pd-playground,.pd-run-stage{scroll-margin-top:100px}