:root{color-scheme:light;--ink:#1c2024;--muted:#67717a;--line:#d9dee2;--surface:#f4f5f6;--paper:#fff;--accent:#333b42}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;line-height:1.5}.demo-sidebar{position:fixed;inset:0 auto 0 0;width:245px;display:flex;flex-direction:column;padding:30px 24px;border-right:1px solid var(--line);background:var(--paper)}.demo-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.demo-brand>span{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:7px;font-weight:800}.demo-brand strong{font-size:14px;line-height:1.2}.demo-sidebar>p{margin:60px 0 14px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.demo-sidebar nav{display:grid;gap:7px}.demo-sidebar nav button{width:100%;padding:12px 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:650 14px/1.5 inherit;text-align:left;cursor:pointer}.demo-sidebar nav button:hover,.demo-sidebar nav button:focus-visible,.demo-sidebar nav button.active{background:var(--surface);color:var(--ink)}.demo-sidebar>small{margin-top:auto;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}main{margin-left:245px;min-height:100vh;padding-bottom:70px}.demo-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid var(--line);background:var(--paper)}.demo-header small,.demo-header strong{display:block}.demo-header small,.demo-intro>small,.workspace-panel small,.settings-grid small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.14em}.demo-header strong{font-size:16px}.tour-status{display:flex;align-items:center;gap:12px}.tour-status>span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.tour-status i{width:7px;height:7px;border-radius:50%;background:var(--accent)}.tour-status b{color:var(--ink)}.tour-status button,.tour-controls button{padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:700 11px inherit;cursor:pointer}.demo-stage{min-height:585px}.demo-view{animation:view-in .32s ease}.demo-intro{padding:48px 42px 30px}.demo-intro h1{margin:8px 0 12px;font-size:42px;line-height:1.05;letter-spacing:-.045em}.demo-intro p{max-width:700px;margin:0;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 42px}.metrics article,.workspace-panel,.settings-grid article{border:1px solid var(--line);border-radius:10px;background:var(--paper)}.metrics article{padding:20px}.metrics small,.metrics strong,.metrics span{display:block}.metrics small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em}.metrics strong{margin:14px 0 4px;font-size:28px}.metrics span{color:var(--muted);font-size:11px}.workspace-panel{margin:24px 42px;padding:25px}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line)}.panel-heading h2{margin:5px 0 0;font-size:22px}.panel-heading>span{padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px}.panel-copy{max-width:680px;margin:24px 0 0;color:var(--muted)}.workflow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.workflow-steps article{padding:18px;background:var(--surface);border-radius:8px}.workflow-steps b,.workflow-steps strong{display:block}.workflow-steps b{color:var(--muted);font-size:11px}.workflow-steps strong{margin-top:20px;font-size:14px}.workflow-steps p{margin:7px 0 0;color:var(--muted);font-size:12px}.search-placeholder{margin-top:20px;padding:14px 16px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:12px}.empty-state{display:grid;place-items:center;min-height:235px;text-align:center}.empty-state strong{font-size:18px}.empty-state p{max-width:400px;margin:7px auto 0;color:var(--muted);font-size:12px}.position-layout{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px;margin-top:20px}.position-layout article{padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.position-layout small,.position-layout strong{display:block}.position-layout strong{margin:18px 0 6px}.position-layout p{margin:0;color:var(--muted);font-size:11px}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 42px}.settings-grid article{min-height:245px;padding:24px}.settings-grid h2{margin:45px 0 10px;font-size:19px}.settings-grid p{margin:0;color:var(--muted);font-size:12px}.tour-controls{position:fixed;right:0;bottom:0;left:245px;height:62px;display:grid;grid-template-columns:120px 1fr 120px;align-items:center;gap:18px;padding:0 42px;border-top:1px solid var(--line);background:var(--paper)}.tour-controls>div{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:10px}.tour-controls i{height:3px;flex:1;overflow:hidden;border-radius:3px;background:var(--line)}.tour-controls i b{display:block;width:0;height:100%;background:var(--accent)}@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:900px){.demo-sidebar{position:static;width:auto}.demo-sidebar nav{grid-template-columns:repeat(3,1fr)}.demo-sidebar>small{margin-top:25px}main{margin-left:0}.metrics,.workflow-steps,.settings-grid{grid-template-columns:1fr 1fr}.tour-controls{left:0}.position-layout{grid-template-columns:1fr}}@media(max-width:600px){.demo-sidebar nav,.metrics,.workflow-steps,.settings-grid{grid-template-columns:1fr}.demo-header,.demo-intro{padding-inline:20px}.tour-status>span{display:none}.metrics,.settings-grid{padding-inline:20px}.workspace-panel{margin-inline:20px}.demo-intro h1{font-size:36px}.tour-controls{grid-template-columns:90px 1fr 90px;padding-inline:12px}}
.guide{position:fixed;left:14px;right:auto;bottom:82px;z-index:20;width:216px;display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:end}.guide[hidden]{display:none}.guide-avatar{position:relative;width:42px;height:42px;border-radius:50%;background:var(--paper);box-shadow:0 8px 25px #0002;overflow:hidden}.guide-avatar img{display:block;width:100%;height:100%;object-fit:contain}.guide-message{position:relative;padding:14px 15px;border:1px solid var(--ink);border-radius:10px 10px 10px 3px;background:var(--paper);box-shadow:0 12px 38px #0003}.guide-message small,.guide-message strong,.guide-message span{display:block}.guide-message small{color:var(--muted);font-size:7px;font-weight:800;letter-spacing:.1em}.guide-message strong{margin-top:5px;font-size:14px}.guide-message p{margin:7px 0;color:var(--muted);font-size:10px;line-height:1.45}.guide-message span{font-size:9px;font-weight:750;line-height:1.4}.guide-close{position:absolute;top:10px;right:10px;border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.demo-sidebar nav button.guide-target{outline:2px solid var(--ink);outline-offset:2px;animation:guide-pulse 1.2s ease-in-out infinite}.guide-cursor{position:fixed;z-index:24;width:22px;height:28px;pointer-events:none;transform:translate(-3px,-3px) rotate(-18deg);filter:drop-shadow(0 2px 2px #0005);transition:left .82s cubic-bezier(.22,.8,.25,1),top .82s cubic-bezier(.22,.8,.25,1)}.guide-cursor:before{content:'';display:block;width:100%;height:100%;background:var(--ink);clip-path:polygon(0 0,82% 65%,53% 69%,68% 100%,53% 100%,39% 72%,18% 94%)}.guide-cursor:after{content:'';position:absolute;inset:3px;background:#fff;clip-path:polygon(0 0,82% 65%,53% 69%,68% 100%,53% 100%,39% 72%,18% 94%);transform:scale(.65);transform-origin:28% 25%}.guide-cursor.moving{filter:drop-shadow(0 5px 5px #0004)}.tutorial-frame .tour-status{display:none}@keyframes guide-pulse{50%{outline-offset:5px}}
@media(max-width:900px){.guide{left:15px;bottom:72px;width:min(360px,calc(100vw - 30px));grid-template-columns:48px 1fr}.guide-avatar{width:48px;height:48px}.guide-message{padding:15px 36px 15px 15px}.guide-message small{font-size:8px}.guide-message strong{font-size:16px}.guide-message p{font-size:12px}.guide-message span{font-size:11px}}
.guide-cursor{width:28px;height:34px;background:url('/assets/cloudsystems-products-20260911-141755/tutorial-cursor.svg') center/contain no-repeat;transform:translate(-5px,-5px) rotate(0);filter:drop-shadow(0 2px 2px #0005);transition:left .82s cubic-bezier(.22,.8,.25,1),top .82s cubic-bezier(.22,.8,.25,1),transform .18s ease}.guide-cursor:before,.guide-cursor:after{display:none}.guide-cursor.moving{filter:drop-shadow(0 4px 6px #6bb4ff80)}
.guide-cursor.clicking{transform:translate(-5px,-5px) scale(.82)}

/* Dark demonstration theme shared by the automatic demo and guided tutorial. */
:root{color-scheme:dark;--ink:#eef5fb;--muted:#a6b4c0;--line:#2f414f;--surface:#111a22;--paper:#0a1117;--accent:#83c8f4}
body{background:#0d151c}.demo-sidebar{background:linear-gradient(180deg,#0d1821,#091016)}.demo-brand>span{border-color:#5e7d94;background:#142431;color:#dff2ff}.demo-sidebar nav button:hover,.demo-sidebar nav button:focus-visible,.demo-sidebar nav button.active{background:#172734;color:#f5f9fc}.demo-sidebar nav button.active{box-shadow:inset 3px 0 0 var(--accent)}
.demo-header{background:#0b131a}.tour-status i{box-shadow:0 0 12px #83c8f480}.tour-status button,.tour-controls button{background:#111c25}.metrics article,.workspace-panel,.settings-grid article{background:#0c141b}.workflow-steps article,.position-layout article{background:#131e27}.search-placeholder{background:#111c24}.panel-heading>span{background:#111d26}.tour-controls{background:#0a1117}.guide-message{border-color:#557086;background:#0c151c;box-shadow:0 15px 42px #0008}.guide-avatar{background:#13212b}.demo-sidebar nav button.guide-target{outline-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent),0 0 18px #73bdf22e}.tutorial-mode .demo-sidebar nav button.bot-click{outline-color:var(--accent);background:#172734}.guide-continue{border-color:var(--accent);background:#18364a;color:#eaf7ff}
.tutorial-mode .tour-status button,.tutorial-mode #tour-next{visibility:hidden}.tutorial-mode .guide-close{display:none}.tutorial-mode .demo-sidebar nav button.bot-click{position:relative;outline:2px solid var(--ink);background:var(--surface)}.tutorial-mode .demo-sidebar nav button.bot-click:after{content:"";position:absolute;right:13px;top:50%;width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;transform:translateY(-50%);animation:bot-click .7s ease}.tutorial-mode #tour-prev:disabled{opacity:.4}.guide-continue{margin-top:12px;padding:9px 12px;border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--paper);font:700 11px inherit;cursor:pointer}.guide-continue[hidden]{display:none}@keyframes bot-click{0%{transform:translateY(-50%) scale(.4);opacity:0}55%{transform:translateY(-50%) scale(1.45);opacity:1}100%{transform:translateY(-50%) scale(.8);opacity:.25}}