/* Isolated, illustrative product UI. Never controls a real connection. */
.hero:has(.product-demo) { grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: 40px; padding-block: 64px 44px; }
.hero:has(.product-demo) h1 { font-size: clamp(34px,3.6vw,51px); line-height: 1.13; letter-spacing: -.055em; margin: 18px 0; }
.hero:has(.product-demo) .lead { max-width: 360px; line-height: 1.65; }
.hero:has(.product-demo) .hero__note { max-width: 340px; }
.hero-platforms { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 24px; color: var(--muted); font-size: 11px; }
.product-demo { min-width: 0; margin: 0; --demo-surface: #1c1c1c; --demo-bg: #131313; --demo-raised: #292929; --demo-ink: #eeeeec; --demo-muted: #969694; --demo-line: #333332; color: var(--demo-ink); }
html[data-theme=light] .product-demo { --demo-surface:#fff; --demo-bg:#f4f3f0; --demo-raised:#eae9e5; --demo-ink:#242424; --demo-muted:#73716c; --demo-line:#deddd7; }
.demo-frame { border: 1px solid var(--demo-line); border-radius: 16px; background: var(--demo-bg); box-shadow: 0 30px 80px -24px #0006, 0 1px 0 #ffffff12 inset; position: relative; overflow: hidden; isolation: isolate; }
.demo-frame * { box-sizing: border-box; }
.demo-frame p, .demo-frame small { color: var(--demo-muted); }
.demo-frame svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.demo-frame .demo-cloud { fill: currentColor; stroke: none; }
.demo-frame button { color: inherit; font: inherit; padding: 0; border: 0; min-height: 44px; border-radius: 10px; background: transparent; }
.demo-frame button:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: -3px; }
.demo-frame button:hover { background: var(--demo-raised); }
.demo-titlebar { height: 39px; display: flex; align-items: center; padding: 0 14px; gap: 6px; border-bottom: 1px solid var(--demo-line); }
.demo-titlebar i { width: 7px; height: 7px; border: 1px solid var(--demo-muted); border-radius: 50%; opacity: .55; }
.demo-titlebar span { margin: auto; padding-right: 28px; font-size: 10px; color: var(--demo-muted); letter-spacing: .03em; }
.demo-app { display: grid; grid-template-columns: 108px minmax(0,1fr); min-height: 450px; }
.demo-sidebar { padding: 22px 10px; border-right: 1px solid var(--demo-line); display: flex; flex-direction: column; gap: 7px; font-size: 9px; }
.demo-brand { display: flex; align-items: center; gap: 5px; margin: 0 5px 20px; font-size: 17px; font-weight: 750; letter-spacing: -.05em; }
.demo-sidebar>span { display: flex; gap: 7px; align-items: center; padding: 9px 7px; border-radius: 8px; color: var(--demo-muted); }
.demo-sidebar>span:first-of-type { background: var(--demo-raised); color: var(--demo-ink); }
.demo-sidebar>span:last-of-type { margin-top: auto; }
.demo-sidebar svg { width: 14px; height: 14px; }
.demo-workspace { min-width: 0; padding: 21px 18px 18px; }
.demo-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.demo-toolbar h3 { font-size: 20px; }
.demo-mobile-name { display: none; }
.demo-toolbar-icons { display: flex; align-items: center; gap: 10px; color: var(--demo-muted); }
.demo-toolbar-icons>span { display: grid; place-items:center; width: 26px; height: 26px; border: 1px solid var(--demo-line); border-radius: 50%; }
.demo-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: start; gap: 12px; }
.demo-connection { min-width: 0; border: 1px solid var(--demo-line); border-radius: 14px; padding: 16px 12px 0; text-align:center; }
.demo-state { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; display:flex; gap:5px; justify-content:center; align-items:center; }
.demo-state::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.demo-connection h4 { font-size: 17px; line-height:1.3; letter-spacing:-.035em; margin: 8px 0 14px; }
.demo-frame .demo-power { display: grid; place-items:center; width: 74px; height:74px; border-radius:50%; background:var(--demo-ink); color:var(--demo-bg); margin:0 auto; outline:1px solid var(--demo-line); outline-offset:5px; cursor:pointer; transition:transform .3s,background .3s; }
.demo-frame .demo-power:hover { background:var(--demo-ink); transform:scale(1.04); }
.demo-power svg { width:27px; height:27px; }
.demo-power .demo-cloud { display:none; width:46px; height:46px; }
.demo-connected .demo-power .demo-cloud { display:block; }
.demo-connected .demo-power .demo-power-symbol { display:none; }
.demo-connecting .demo-power { outline-style:dashed; }
.demo-hint { font-size:8px; margin:13px 0 15px; }
.demo-selected { padding:10px 0; display:flex; align-items:center; gap:7px; border-top:1px solid var(--demo-line); text-align:left; }
.demo-selected>svg { width:16px; height:16px; }
.demo-selected strong { font-size:10px; display:block; font-weight:500; }
.demo-selected small { font-size:8px; display:block; }
.demo-selected>span:last-child { margin-left:auto; font-size:9px; white-space:nowrap; }
.demo-subscriptions { min-width:0; }
.demo-subheading { font-size:10px; font-weight:600; margin:0 0 9px; }
.demo-subscription { background:var(--demo-surface); border:1px solid var(--demo-line); border-radius:13px; overflow:hidden; }
.demo-frame .demo-profile { display:flex; align-items:center; width:100%; text-align:left; padding:9px; gap:8px; border-radius:0; }
.demo-avatar { width:26px; height:28px; display:grid; place-items:center; flex:none; background:var(--demo-ink); color:var(--demo-bg); border-radius:8px; font-size:10px; font-weight:700; }
.demo-profile strong { display:block; font-size:11px; font-weight:600; }
.demo-profile small { display:block; font-size:9px; }
.demo-profile>svg { width:13px; height:13px; margin-left:auto; transition:transform .3s; }
.demo-profile[aria-expanded=true]>svg { transform:rotate(180deg); }
.demo-quota { display:flex; justify-content:space-between; padding:0 9px 8px; font-size:9px; color:var(--demo-muted); gap:4px; flex-wrap:wrap; }
.demo-quota-line { height:2px; background:var(--demo-line); margin:0 9px 9px; }
.demo-quota-line::before { content:''; display:block; width:68%; height:100%; background:var(--demo-muted); }
.demo-servers { padding:0 5px 5px; }
.demo-frame .demo-server { width:100%; display:flex; align-items:center; gap:6px; text-align:left; padding:6px; min-height:44px; font-size:11px; }
.demo-server[aria-pressed=true] { background:var(--demo-raised); }
.demo-country { font-size:8px; display:grid; place-items:center; background:var(--demo-bg); width:23px; height:25px; flex:none; border-radius:6px; }
.demo-server>span:nth-child(2) { flex:1; }
.demo-server small { display:block; font-size:9px; }
.demo-latency { font-size:9px; white-space:nowrap; color:var(--demo-muted); }
.demo-extra { margin-top:10px; padding:10px; border:1px solid var(--demo-line); border-radius:13px; background:var(--demo-surface); }
.demo-extra-head { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; }
.demo-extra small { display:block; font-size:9px; margin-top:3px; font-weight:400; }
.demo-extra .demo-avatar { background:var(--demo-raised); color:var(--demo-ink); }
.demo-extra-meta { font-size:9px; color:var(--demo-muted); margin-top:10px; }
.demo-subscriptions:has(.demo-profile[aria-expanded=true]) .demo-extra { display:none; }
.demo-telemetry { border:1px solid var(--demo-line); border-radius:13px; margin-top:12px; padding:12px; min-height:100px; background:var(--demo-surface); }
.demo-telemetry-head { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:9px; }
.demo-telemetry-head small { font-size:8px; }
.demo-values { display:flex; gap:22px; margin:8px 0 0; font-size:15px; font-weight:600; letter-spacing:-.03em; }
.demo-values small { font-size:9px; font-weight:400; }
.demo-frame .demo-chart { display:block; width:100%; height:45px; stroke:var(--demo-ink); overflow:visible; }
.demo-chart .demo-grid { stroke:var(--demo-line); stroke-width:.5; }
.demo-chart .demo-area { stroke:none; fill:var(--demo-ink); opacity:.05; }
.demo-chart .demo-line-secondary { opacity:.4; }
.demo-chart .demo-trace { stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.demo-telemetry-empty { display:grid; place-items:center; height:78px; font-size:10px; color:var(--demo-muted); }
.demo-mobile-nav { display:none; }
.demo-cursor { position:absolute; z-index:10; top:0; left:0; width:23px; height:29px; opacity:0; pointer-events:none; transform:translate(70px,80px); transition:transform .65s cubic-bezier(.25,.8,.25,1),opacity .2s; filter:drop-shadow(0 2px 3px #0005); }
.demo-frame .demo-cursor svg { width:23px; height:29px; fill:var(--demo-ink); stroke:var(--demo-bg); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
.demo-cursor-hand { display:none; }
.demo-cursor.is-pointer .demo-cursor-arrow { display:none; }
.demo-cursor.is-pointer .demo-cursor-hand { display:block; }
.demo-cursor::after { content:''; position:absolute; top:-12px; left:-12px; width:28px; height:28px; border-radius:50%; border:1px solid var(--demo-ink); opacity:0; }
.demo-cursor.is-clicking::after { animation:demo-click .5s ease-out; }
.product-demo[data-running=true] .demo-cursor { opacity:1; }
.demo-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px 0; }
.demo-caption-copy { min-width:0; }
.demo-caption strong { display:block; font-size:11px; font-weight:500; }
.demo-caption small { display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.demo-controls { display:flex; gap:5px; flex:none; }
.demo-controls button { width:38px; height:44px; padding:9px; background:transparent; border-color:transparent; }
.demo-controls svg { width:15px; height:15px; display:block; }
.demo-step-track { display:flex; gap:4px; margin-top:10px; }
.demo-step-track span { width:20px; height:2px; background:var(--line); transition:background .3s; }
.demo-step-track span.is-current { background:var(--ink); }
.demo-device-line { display:none; }
@keyframes demo-click { from { opacity:.8; transform:scale(.4); } to { opacity:0; transform:scale(1.5); } }
@keyframes demo-chart-in { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
.product-demo[data-running=true] .demo-connected .demo-chart { animation:demo-chart-in 1.5s ease-out both; }
.product-demo[data-layout=mobile] { width:min(100%,330px); justify-self:center; }
.product-demo[data-layout=mobile] .demo-frame { border-radius:34px; border-width:5px; border-color:var(--demo-raised); box-shadow:0 22px 54px -20px #0007,0 0 0 1px var(--demo-line); }
.product-demo[data-layout=mobile] .demo-titlebar { height:26px; border:0; justify-content:center; padding:0; }
.product-demo[data-layout=mobile] .demo-titlebar i { display:none; }
.product-demo[data-layout=mobile] .demo-titlebar span { font-size:0; width:54px; height:5px; border-radius:10px; background:var(--demo-line); padding:0; margin:0; }
.product-demo[data-layout=mobile] .demo-app { display:block; height:660px; min-height:0; }
.product-demo[data-layout=mobile] .demo-sidebar { display:none; }
.product-demo[data-layout=mobile] .demo-workspace { padding:8px 16px 68px; height:660px; overflow-y:auto; scrollbar-width:none; }
.product-demo[data-layout=mobile] .demo-workspace::-webkit-scrollbar { display:none; }
.product-demo[data-layout=mobile] .demo-extra { display:none; }
.product-demo[data-layout=mobile] .demo-workspace:has(.demo-profile[aria-expanded=true]) .demo-telemetry { display:none; }
.product-demo[data-layout=mobile] .demo-toolbar { margin-bottom:18px; }
.product-demo[data-layout=mobile] .demo-desktop-name { display:none; }
.product-demo[data-layout=mobile] .demo-mobile-name { display:inline; font-size:22px; font-weight:750; letter-spacing:-.06em; }
.product-demo[data-layout=mobile] .demo-columns { display:block; }
.product-demo[data-layout=mobile] .demo-connection { padding:0; border:0; border-radius:0; }
.product-demo[data-layout=mobile] .demo-connection h4 { font-size:20px; margin:8px 0 18px; }
.product-demo[data-layout=mobile] .demo-state { font-size:8px; }
.product-demo[data-layout=mobile] .demo-power { width:86px; height:86px; }
.product-demo[data-layout=mobile] .demo-hint { font-size:9px; margin:16px 0; }
.product-demo[data-layout=mobile] .demo-selected { padding:11px 0; }
.product-demo[data-layout=mobile] .demo-selected strong { font-size:11px; }
.product-demo[data-layout=mobile] .demo-subheading { font-size:12px; margin:15px 0 10px; }
.product-demo[data-layout=mobile] .demo-profile { padding:10px; }
.product-demo[data-layout=mobile] .demo-profile strong { font-size:12px; }
.product-demo[data-layout=mobile] .demo-profile small { font-size:9px; }
.product-demo[data-layout=mobile] .demo-avatar { width:32px; height:32px; }
.product-demo[data-layout=mobile] .demo-quota { font-size:9px; padding:0 10px 10px; }
.product-demo[data-layout=mobile] .demo-server { font-size:11px; }
.product-demo[data-layout=mobile] .demo-server small,.product-demo[data-layout=mobile] .demo-latency { font-size:9px; }
.product-demo[data-layout=mobile] .demo-mobile-nav { display:flex; position:absolute; bottom:12px; left:14px; right:14px; justify-content:space-around; border:1px solid var(--demo-line); border-radius:24px; padding:6px; background:var(--demo-surface); box-shadow:0 4px 15px #0002; }
.demo-mobile-nav span { display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 10px; font-size:7px; border-radius:18px; color:var(--demo-muted); }
.demo-mobile-nav span:first-child { color:var(--demo-ink); background:var(--demo-raised); }
.product-demo[data-layout=mobile] .demo-cursor { width:22px; height:22px; border-radius:50%; background:var(--demo-ink); border:2px solid var(--demo-bg); opacity:0; }
.product-demo[data-layout=mobile][data-running=true] .demo-cursor { opacity:.55; }
.product-demo[data-layout=mobile] .demo-cursor svg { display:none; }
.product-demo[data-layout=mobile] .demo-cursor::after { top:-5px; left:-5px; }
@media(min-width:1600px) { .hero:has(.product-demo) { gap:58px; } }
@media(max-width:1000px) and (min-width:761px) { .hero:has(.product-demo) { grid-template-columns:1fr; gap:30px; } .hero:has(.product-demo) .hero__copy { max-width:620px; } .hero:has(.product-demo) h1 br { display:none; } .product-demo { width:min(100%,720px); justify-self:center; } }
@media(max-width:760px) { .hero:has(.product-demo) { grid-template-columns:1fr; gap:30px; padding-block:26px 28px; } .hero:has(.product-demo) h1 { font-size:38px; margin:12px 0; } .hero:has(.product-demo) .lead { font-size:14px; } .hero:has(.product-demo) .hero__actions { margin:18px 0 10px; } .hero-platforms { margin-top:15px; font-size:10px; } .hero:has(.product-demo) .hero__actions .button { width:auto; flex:none; } }
@media(prefers-reduced-motion:reduce) { .demo-cursor { display:none!important; } .demo-frame *,.demo-step-track span { animation:none!important; transition:none!important; } }