.demo-page{padding:70px 5vw 90px;background:linear-gradient(180deg,#f7fbff 0,#fff 48%)}
.demo-intro{width:min(920px,100%);margin:0 auto 42px;text-align:center}.demo-intro h1{margin:10px 0 14px;font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-.045em;color:var(--navy)}.demo-intro p{margin:0 auto;max-width:790px;color:var(--muted);font-size:18px}.demo-notice{display:inline-flex;margin-top:22px;padding:11px 16px;border:1px solid #b9d8f2;border-radius:999px;background:#edf7ff;color:#1f4f77;font-weight:750;font-size:14px}
.demo-layout{display:grid;grid-template-columns:minmax(230px,300px) minmax(340px,560px);align-items:start;justify-content:center;gap:30px;width:min(1040px,100%);margin:0 auto}.demo-scenarios{position:sticky;top:110px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 15px 35px rgba(18,63,108,.08)}.demo-scenarios h2{margin:0 0 8px;font-size:23px}.demo-scenarios p{margin:0 0 18px;color:var(--muted);font-size:14px}.demo-scenario,.demo-reset{width:100%;margin:6px 0;padding:12px 13px;border:1px solid #cfe1f1;border-radius:11px;background:#fff;color:#17334f;text-align:left;font:inherit;font-weight:750;cursor:pointer;transition:.18s ease}.demo-scenario:hover,.demo-scenario.is-active{border-color:#7dbdf3;background:#edf7ff;color:#0874d6;transform:translateY(-1px)}.demo-reset{margin-top:16px;text-align:center;color:#617188;background:#f7f9fb}.demo-source-note{display:grid;gap:2px;margin-top:18px;padding-top:16px;border-top:1px solid #e5edf4;font-size:12px}.demo-source-note strong{color:#18334f}.demo-source-note span{color:#77879a}
.demo-ha-shell{overflow:hidden;border:1px solid #a9bfd1;border-radius:18px;background:#eef7fb;box-shadow:0 24px 70px rgba(15,57,99,.16)}.demo-ha-topbar{display:grid;grid-template-columns:10px 10px 10px 1fr auto;align-items:center;gap:8px;height:48px;padding:0 16px;background:#071a31;color:#dce9f4}.demo-ha-topbar>span{width:10px;height:10px;border-radius:50%;background:#50728e}.demo-ha-topbar strong{margin-left:8px;font-size:13px}.demo-ha-topbar em{font-size:11px;font-style:normal;padding:4px 8px;border-radius:999px;background:#17395c;color:#bfe0fa}.demo-official-host{min-height:760px;background:#eef7fb}.demo-official-host pool-pilot-dashboard,.demo-official-host pool-pilot-dashboard-card{display:block;width:100%;--primary-font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--secondary-text-color:#617188}.demo-loader{display:grid;place-items:center;gap:14px;min-height:720px;color:#65778a}.demo-loader span{width:38px;height:38px;border:4px solid #c9d9e6;border-top-color:#13bfa8;border-radius:50%;animation:demoSpin .8s linear infinite}@keyframes demoSpin{to{transform:rotate(360deg)}}.demo-load-error{padding:40px;text-align:center;color:#8a3340;background:#fff4f5}
.demo-explain{display:flex;align-items:center;justify-content:space-between;gap:40px;width:min(1040px,100%);margin:45px auto 0;padding:30px 34px;border:1px solid var(--line);border-radius:18px;background:#fff}.demo-explain h2{margin:8px 0 9px;font-size:30px}.demo-explain p{margin:0;max-width:720px;color:var(--muted)}.demo-explain .button{white-space:nowrap}
@media(max-width:900px){.demo-layout{grid-template-columns:1fr}.demo-scenarios{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo-scenarios h2,.demo-scenarios p,.demo-source-note{grid-column:1/-1}.demo-reset{margin-top:6px}.demo-ha-shell{width:min(560px,100%);margin:0 auto}.demo-explain{display:grid}}
@media(max-width:600px){.demo-page{padding:44px 10px 65px}.demo-intro{text-align:left;padding:0 6px}.demo-notice{border-radius:13px}.demo-scenarios{grid-template-columns:1fr}.demo-scenarios h2,.demo-scenarios p,.demo-source-note{grid-column:auto}.demo-ha-shell{border-radius:12px}.demo-ha-topbar{grid-template-columns:8px 8px 8px 1fr auto;height:42px;padding:0 10px}.demo-ha-topbar>span{width:8px;height:8px}.demo-ha-topbar strong{font-size:11px}.demo-official-host{min-height:720px}.demo-explain{padding:24px}.demo-explain .button{white-space:normal;text-align:center}}