.demo-screen{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 18px 50px #082a5210;min-width:0}.demo-bar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:17px 20px;gap:15px}.demo-bar>span{font-size:10px;color:var(--muted)}.demo-body{padding:24px}.demo-heading small{font-size:10px;letter-spacing:.06em;color:var(--muted)}.demo-heading h3{font-size:21px;margin:7px 0}.demo-heading p{font-size:12px;margin:0 0 21px;color:var(--muted)}.demo-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.demo-kpis>div{padding:13px;border:1px solid var(--line);border-radius:8px}.demo-kpis small{font-size:10px;color:var(--muted);display:block}.demo-kpis strong{display:block;font-size:23px;margin-top:7px}.demo-progress{margin:21px 0}.demo-progress>span{font-size:11px;display:flex;justify-content:space-between}.demo-progress>div{height:6px;background:var(--line);border-radius:4px;margin-top:10px}.demo-progress i{display:block;width:50%;height:100%;background:#00a0be;border-radius:4px}.demo-steps>div{display:flex;gap:13px;align-items:center;border-bottom:1px solid var(--line);padding:13px 0;font-size:11px}.demo-steps>div>span{color:var(--muted);font-size:10px;min-width:29px}.demo-steps em{margin-left:auto;white-space:nowrap;font-style:normal;font-size:9px;color:#16865c;background:#16865c12;padding:4px 7px;border-radius:5px}.demo-steps em.doing{color:#237fb6;background:#237fb612}.demo-steps em.todo{color:var(--muted);background:var(--bg)}.demo-body>.demo-disclaimer{font-size:9px;color:var(--muted);margin:18px 0 0}.demo-spark{margin:19px 0}.demo-spark>span{font-size:11px;color:var(--muted)}.demo-spark svg{display:block;width:100%;height:100px;margin-top:10px}.demo-grid{fill:none;stroke:var(--line);stroke-width:1}.demo-area{fill:#00a0be12}.demo-line{fill:none;stroke:#00a0be;stroke-width:2.5}@media(max-width:480px){.demo-body{padding:16px}.demo-kpis{gap:6px}.demo-kpis>div{padding:9px}.demo-kpis strong{font-size:18px}.demo-kpis small{font-size:9px}.demo-steps>div{gap:8px;font-size:10px}.demo-heading h3{font-size:19px}.demo-bar{padding:14px}.demo-bar>span{font-size:9px}}html[data-theme=dark] .demo-steps em{color:#72d6ad}html[data-theme=dark] .demo-steps em.doing{color:#83c9f1}html[data-theme=dark] .demo-steps em.todo{color:var(--muted)}