.demo{display:grid;gap:16px;max-width:1100px}.demo-steps{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:8px;border-top:1px solid var(--rule)}@media(min-width:720px){.demo-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}.demo-steps li{display:flex;gap:10px;align-items:flex-start;font-family:var(--sans);font-size:.9rem;line-height:1.35;color:var(--ink-2)}.demo-steps li .n{flex:none;width:26px;height:26px;border:1.5px solid var(--rule-strong);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem}.demo-steps li.current{color:var(--ink);font-weight:700}.demo-steps li.current .n{border-color:var(--ink);background:var(--ink);color:#fff}.demo-steps li.done{color:var(--stamp)}.demo-steps li.done .n{border-color:var(--stamp);background:var(--stamp);color:#fff}.demo-steps li.done .n:before{content:"✓"}.demo-steps li.done .n{font-size:0}.demo-steps li.done .n:before{font-size:.8rem}.demo-tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.demo-tab{min-height:44px;padding:8px 16px;border-radius:4px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--sans);font-weight:700;cursor:pointer}.demo-tab.is-active{background:var(--ink);color:#fff}.demo-reset{margin-left:auto}.demo-live{min-height:1.4em;margin:0;font-weight:600;color:var(--stamp)}.demo .pp{border:1px solid var(--rule-strong);border-radius:14px;overflow:hidden}.demo .pp .bar{position:static}.demo .pp>main{padding:16px}.demo .pp .viewer{position:static;height:min(56vh,520px);min-height:280px}@media(min-width:1024px){.demo .pp .review{grid-template-columns:minmax(0,1fr) clamp(320px,38%,400px);height:min(64vh,600px)}.demo .pp .viewer{height:100%;min-height:0}}.demo .pp .stage img{max-height:100%}.pp-sub{color:var(--muted);margin:0 0 16px;font-family:inherit;font-size:.95rem}.pp-admin{--ink: #303030;--muted: #616161;--line: #e3e3e3;--bg: #f1f1f1;--card: #ffffff;background:var(--bg);color:var(--ink);border:1px solid var(--rule-strong);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45}.pp-page{max-width:760px;margin:0 auto;padding:20px 16px}.pp-title{font-family:inherit;font-weight:700;font-size:1.3rem;margin:0 0 2px;letter-spacing:0;display:flex;align-items:center;gap:8px}.pp-card.admin{border-radius:12px;box-shadow:0 1px #1a1a1a12,0 0 0 1px #0000000a;border:0}.pp-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.pp-admin .pp-wi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:1rem}.pp-badge{display:inline-block;font-size:.78rem;font-weight:500;padding:2px 8px;border-radius:8px;background:#e3e3e3;color:#303030;white-space:nowrap}.pp-badge:before{display:none}.pp-badge.success,.pp-badge.ok{background:#cdfee1;color:#0c5132}.pp-badge.info{background:#e0f0ff;color:#00527c}.pp-badge.warning{background:#ffeb78;color:#4f4700}.pp-badge.attention,.pp-badge.warn{background:#ffd6a4;color:#5e4200}.pp-muted{color:var(--muted);font-size:.9rem}.pp-banner{background:#eaf4ff;border:1px solid #b4d4f5;border-radius:8px;padding:10px 12px;margin:12px 0}.pp-banner p{margin:2px 0 0}.pp-hr{border:0;border-top:1px solid var(--rule);margin:12px 0}.pp-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pp-admin .pp-btn{min-height:32px;padding:5px 12px;font-size:.85rem;border-radius:8px}.pp-btn.primary{background:#303030;color:#fff}.pp-btn.secondary{background:#fff;color:#303030;border:1px solid #c9c9c9}.pp-btn:disabled{background:#e3e3e3;color:#8a8a8a;border-color:transparent;cursor:not-allowed}.pp-history{list-style:none;margin:4px 0 0;padding:0;font-size:.9rem}.pp-history li{padding:4px 0;border-top:1px solid var(--rule)}@media(prefers-reduced-motion:no-preference){.pp-customer,.pp-admin{transition:opacity .16s ease}}