/* Compact demonstrations: fixed state geometry, clear decisions, no controls required. */
.ps-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #e8edf4;font-size:14px}.ps-setting b{font-size:12px;font-weight:500;border:1px solid #dce4ef;border-radius:6px;padding:3px 10px;color:#64748b;background:#f5f7fa}.ps-setting b.enabled{background:#edf3fd;border-color:#b6cdef;color:#215fae}
.ps-request-wait{margin-top:16px;padding:24px 16px;border:1px solid #dce4ef;border-radius:8px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f8fafc;text-align:center}.ps-request-wait strong{font-size:14px;font-weight:500}.ps-request-wait>span:last-child{font-size:12px;color:#718096}.ps-request-progress{width:18px;height:18px;background:#526f92;mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;animation:cr-spin 1.2s linear infinite}@keyframes cr-spin{to{transform:rotate(360deg)}}
.ec-platform-strip{padding:16px 16px 0}.ec-platform-strip .ec-platform-logos{margin-bottom:20px}
@media(prefers-reduced-motion:reduce){.ps-request-progress{animation:none}}
.cr-demo{padding:24px;border-radius:16px;background:#edf3fc;color:#17263c;font:400 14px/1.5 var(--ui-font,Inter,sans-serif)}
.cr-demo[data-commerce-scene="stepup"]{background:#f8f2e8}.cr-demo[data-commerce-scene="rules"]{background:#eaf3ef}
.cr-frames{display:grid}.cr-frame{grid-area:1/1;visibility:hidden;pointer-events:none;min-width:0}.cr-frame.current{visibility:visible;pointer-events:auto}
.cr-pair{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:start;gap:0}
.cr-panel{min-width:0;background:#fff;border:1px solid #dce4ef;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #14243c05,0 8px 20px -16px #14243c30}
.cr-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:14px 16px;background:linear-gradient(#fff,#f8fafc);border-bottom:1px solid #e8edf4}
.cr-panel strong{font-weight:500}.cr-body{padding:20px}.cr-field{padding:10px 12px;border:1px solid #e0e6ee;border-radius:8px;background:linear-gradient(#fafbfd,#fff);margin-bottom:12px}
.cr-field>span,.cr-field-label{display:block;color:#64748b;font-size:12px;margin-bottom:4px}.cr-field strong{display:block;line-height:1.5}.cr-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #e8edf4}.cr-row>span{color:#64748b}.cr-row>strong{text-align:right}
.cr-badge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 7px;border:1px solid #dce4ef;border-radius:6px;font-size:12px;line-height:1.4;color:#52647b;background:#f8fafc;white-space:nowrap}
.cr-badge.warning,.cr-result.warning{background:#fff8eb;color:#92621c;border-color:#eeddb8}.cr-badge.success,.cr-result.success{background:#edf8f2;color:#235d44;border-color:#cde8da}
.cr-result{border:1px solid #dce4ef;background:#f5f7fa;border-radius:8px;padding:12px 14px;margin-top:20px;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:4px}.cr-result>span{font-size:13px;line-height:1.5;color:#64748b}.cr-result:first-child{margin-top:0}
.cr-arrow{align-self:center;width:16px;height:16px;justify-self:center;background:#8099b5;mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.cr-options{margin-top:20px;display:grid;gap:8px}.cr-options>div{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid #e0e6ee;border-radius:8px}.cr-options>div.selected{border-color:#a9c5f3;background:#f4f8ff}.cr-options span{font-size:12px;color:#718096;text-align:right}
.cr-digits{display:flex;gap:8px;margin:8px 0 16px}.cr-digits>span{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cad5e4;border-radius:8px;background:linear-gradient(#fff,#f6f8fc);font-size:20px;font-variant-numeric:tabular-nums}
.cr-note,.cr-example{font-size:12px;color:#718096;margin:16px 0 0}.cr-example{margin:0 0 12px}
.product-family [data-product-scene="apiRequest"] .ps-code{font-size:12px;line-height:1.65}.product-family [data-product-scene="apiRequest"] .ps-pair{gap:20px}.product-family [data-product-scene="ssnResponse"] .ps-pair{align-items:start}
.product-family [data-product-scene="nameDashboard"] .na-log-record{font-size:12px}.product-family [data-product-scene="nameDashboard"] .na-log-record code{overflow-wrap:anywhere}
.product-family .photo-lifecycle-track>span.current{background:#eaf1ff;border-color:#b6cdef;color:#215fae}.product-family .photo-lifecycle-track>span.done{background:#edf8f2;border-color:#cde8da;color:#235d44}
.product-family .ec-card-3 .ec-order-feature{border:1px solid #dce4ef;border-radius:16px;background:#f3f7fc;margin-bottom:16px;padding:24px}.product-family .ec-card-3 .ec-order-summary{gap:16px}.product-family .ec-card-3 .ec-history{margin-bottom:0}
.product-family .ec-card-3 .ec-large-verified{font-size:12px;padding:4px 8px;border-radius:6px;background:#edf8f2;border:1px solid #cde8da;color:#235d44}.product-family .ec-card-3 .ec-activity{box-shadow:none;border:1px solid #dce4ef;border-radius:12px;margin:0 16px 16px}
.product-family .ec-card-3 .ec-table-row{font-size:13px}.product-family .ec-card-3 .ec-result{font-size:12px}
@media(max-width:780px){.cr-demo{padding:16px}.cr-pair{grid-template-columns:minmax(0,1fr);gap:12px}.cr-arrow{transform:rotate(90deg)}.cr-body{padding:16px}.product-family .ec-card-3 .ec-order-feature{padding:16px}.cr-result{min-height:88px}.cr-options>div{flex-wrap:wrap}}