:root{--pd-bg:#08111f;--pd-panel:#101b2d;--pd-panel2:#142238;--pd-line:#28405f;--pd-text:#f8fbff;--pd-muted:#9fb3c8;--pd-accent:#8bd3ff;--pd-good:#9ee6a0;--pd-warn:#ffd580}
.demo-page{background:linear-gradient(180deg,#f7fafc 0,#eef4f8 100%)}.demo-wrap{max-width:1240px;margin:0 auto;padding:28px 18px 80px}.demo-trust{display:flex;gap:10px;align-items:flex-start;border:1px solid #c9d9e6;background:#fff;border-radius:14px;padding:14px 16px;margin:18px 0 24px;color:#324b60}.tour{background:var(--pd-bg);color:var(--pd-text);border-radius:26px;overflow:hidden;border:1px solid #20334c;box-shadow:0 28px 80px rgba(13,31,52,.24)}.tour-top{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--pd-line);background:#0d1829}.tour-brand{display:flex;gap:11px;align-items:center}.tour-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#17324f;font-weight:900;color:var(--pd-accent)}.tour-brand small{display:block;color:var(--pd-muted);margin-top:2px}.tour-badge{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;background:#dff4ff;color:#17324f;padding:7px 10px;border-radius:999px}.tour-progress{display:grid;grid-template-columns:repeat(var(--steps,5),1fr);gap:5px;padding:0 20px 14px;background:#0d1829}.tour-progress button{height:5px;border:0;border-radius:999px;background:#28405f;padding:0;cursor:pointer;overflow:hidden;position:relative}.tour-progress button::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:var(--pd-accent)}.tour-progress button.done::after{transform:scaleX(1)}.tour-progress button.active::after{animation:tourFill var(--scene-ms,3000ms) linear forwards}.tour.paused .tour-progress button.active::after{animation-play-state:paused}@keyframes tourFill{to{transform:scaleX(1)}}.tour-body{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:610px}.tour-side{border-right:1px solid var(--pd-line);padding:18px 12px;background:#0d1829}.tour-nav{width:100%;border:0;background:transparent;color:var(--pd-muted);text-align:left;padding:11px 12px;border-radius:10px;font:inherit;cursor:pointer;margin-bottom:4px}.tour-nav.active,.tour-nav:hover{background:#18304b;color:#fff}.tour-main{padding:26px}.tour-scene{display:none}.tour-scene.active{display:block;animation:sceneIn .28s ease-out}@keyframes sceneIn{from{opacity:.1;transform:translateY(8px)}to{opacity:1;transform:none}}.tour-scene h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 8px;color:#fff}.tour-scene>p{color:var(--pd-muted);margin:0 0 22px;max-width:760px}.tour-kicker{display:inline-block;color:var(--pd-accent);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.demo-card,.demo-panel{border:1px solid var(--pd-line);background:var(--pd-panel);border-radius:17px;padding:17px}.demo-card strong{font-size:1.35rem;display:block;margin:4px 0}.demo-card span,.demo-panel p,.demo-panel small{color:var(--pd-muted)}.demo-panel h3{margin:0 0 10px;color:#fff;font-size:1rem}.demo-list{display:grid;gap:9px}.demo-row{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid #223955}.demo-row:first-child{border-top:0}.demo-row span{color:var(--pd-muted);font-size:.88rem}.demo-pill{display:inline-flex;padding:5px 8px;border-radius:99px;background:#163957;color:#bfe9ff;font-size:.72rem;font-weight:800;white-space:nowrap}.demo-pill.good{background:#183b28;color:#bdf0c5}.demo-pill.warn{background:#493917;color:#ffe2a3}.demo-split{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.demo-table{width:100%;border-collapse:collapse}.demo-table th,.demo-table td{padding:10px 7px;border-bottom:1px solid #223955;text-align:left;font-size:.88rem}.demo-table th{color:var(--pd-accent)}.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:stretch}.flow-step{border:1px solid var(--pd-line);background:var(--pd-panel);padding:14px;border-radius:14px;min-height:105px}.flow-step b{display:block;color:#fff;margin-bottom:5px}.flow-step span{color:var(--pd-muted);font-size:.84rem}.tour-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:15px 20px;border-top:1px solid var(--pd-line);background:#0d1829}.tour-control{border:1px solid #35516f;background:#14263c;color:#fff;border-radius:10px;padding:9px 12px;font:inherit;font-weight:700;cursor:pointer}.tour-control.primary{background:#dff4ff;color:#10253b;border-color:#dff4ff}.tour-status{margin-left:auto;color:var(--pd-muted);font-size:.84rem}.feature-deck{margin-top:30px}.feature-deck h2{margin-bottom:8px}.feature-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:17px 0}.feature-tab{appearance:none;border:1px solid #54789c;background:#122235;color:#f5f9fc;border-radius:999px;padding:9px 15px;font:inherit;font-weight:750;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(139,211,255,.06);transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}.feature-tab:hover{background:#18314d;border-color:#7da9d4;color:#fff}.feature-tab:focus-visible{outline:3px solid #8bd3ff;outline-offset:3px}.feature-tab.active{background:#0f6fff;color:#fff;border-color:#8dc5ff;box-shadow:0 0 0 1px rgba(141,197,255,.45),0 0 20px rgba(15,111,255,.28)}.feature-panel{display:none}.feature-panel.active{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feature-item{background:#fff;border:1px solid #c7d6e2;border-radius:15px;padding:16px;color:#1b3247}.feature-item strong{display:block;margin-bottom:5px;color:#19344d;font-weight:800}.feature-item span{color:#4c667c}.demo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.demo-actions a{display:inline-flex;text-decoration:none;padding:11px 15px;border-radius:10px;font-weight:800}.demo-actions .primary{background:#17324f;color:#fff}.demo-actions .secondary{border:1px solid #b9cbd8;color:#17324f;background:#fff}
@media(max-width:860px){.tour-body{grid-template-columns:1fr}.tour-side{display:flex;overflow:auto;border-right:0;border-bottom:1px solid var(--pd-line);padding:10px}.tour-nav{white-space:nowrap;width:auto}.demo-grid,.feature-panel.active{grid-template-columns:1fr 1fr}.demo-split{grid-template-columns:1fr}.flow{grid-template-columns:1fr 1fr}.tour-main{padding:20px}}
@media(max-width:560px){.demo-grid,.feature-panel.active,.flow{grid-template-columns:1fr}.tour-top{align-items:flex-start}.tour-badge{margin-left:8px}.tour-status{width:100%;margin-left:0}.demo-wrap{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.tour-progress button.active::after{animation:none;transform:scaleX(1)}.tour-scene.active{animation:none}}