.product-demo{--background:#080b14;--foreground:#e9f0f5;--card:#12161f;--muted-foreground:#798093;--primary:#388ccc;--border:#e9f0f526;max-width:1280px;color:var(--foreground);cursor:default;user-select:none;margin:0 auto;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;position:relative}.product-demo *{box-sizing:border-box;cursor:inherit}.product-demo button{font:inherit}.product-demo [data-refresh-all],.product-demo [data-widget-refresh]{cursor:pointer}.product-demo__aura{filter:blur(65px);pointer-events:none;background:radial-gradient(circle,#388ccc38,#0000 66%);border-radius:50%;position:absolute;inset:-10% 8% 15%}.browser-frame{background:var(--background);border:1px solid #e9f0f52e;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 55px 130px #00000094,inset 0 0 0 1px #ffffff06}.browser-bar{background:linear-gradient(#1c212c,#151923);border-bottom:1px solid #e9f0f51c;align-items:center;height:48px;padding:0 16px;display:flex;position:relative}.browser-lights{gap:7px;display:flex}.browser-lights i{background:#ff605c;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 0 0 1px #00000024}.browser-lights i:nth-child(2){background:#ffbd44}.browser-lights i:nth-child(3){background:#00ca4e}.browser-history{color:#6f7889;gap:12px;margin-left:72px;display:flex}.browser-history svg,.browser-address svg{width:15px;height:15px}.browser-address{color:#9ba6b6;letter-spacing:.01em;background:#080b1494;border:1px solid #e9f0f51a;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:min(520px,100% - 360px);height:30px;padding:0 14px;font-size:11px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.browser-address svg{color:#657185;width:12px;height:12px}.browser-menu{color:#6f7889;margin-left:auto}.browser-menu svg{width:17px;height:17px}.app-shell{background:var(--background);height:760px;display:flex;position:relative;overflow:hidden}.app-sidebar{background:var(--card);border-right:1px solid var(--border);flex-direction:column;flex:none;width:214px;padding:10px 8px;display:flex}.project-switcher{border-radius:8px;align-items:center;gap:10px;min-height:52px;padding:7px 8px;display:flex}.project-avatar{color:#fff;background:linear-gradient(145deg,#388ccc,#6575bb);border-radius:8px;place-items:center;width:34px;height:34px;font-size:12px;font-weight:800;display:grid}.project-copy{flex:1;min-width:0}.project-copy strong,.project-copy small{display:block}.project-copy strong{font-size:14px;line-height:1.25}.project-copy small{color:var(--muted-foreground);margin-top:2px;font-size:12px}.project-switcher svg,.user-row svg{color:#8a95a7;width:16px;height:16px}.sidebar-group{margin-top:13px}.sidebar-label{color:var(--muted-foreground);justify-content:space-between;padding:7px 9px;font-size:12px;font-weight:500;display:flex}.sidebar-label svg{width:16px;height:16px}.sidebar-item{color:#aeb8c5;border-radius:7px;align-items:center;gap:8px;min-height:32px;padding:8px;font-size:14px;display:flex}.sidebar-item svg{flex:none;width:16px;height:16px}.sidebar-item.is-active{color:var(--foreground);background:#282d3d;font-weight:500}.sidebar-bottom{margin-top:auto}.quota{color:var(--muted-foreground);padding:13px 10px 11px}.quota>div:first-child{justify-content:space-between;font-size:12px;font-weight:500;display:flex}.quota-track{background:#1e232d;border-radius:99px;height:7px;margin:8px 0 6px;overflow:hidden}.quota-track i{background:var(--primary);width:24%;height:100%;display:block}.quota small{text-align:right;font-size:12px;display:block}.user-row{border-top:1px solid var(--border);align-items:center;gap:8px;padding:11px 8px;font-size:14px;display:flex}.user-row>span{background:#282d3d;border-radius:8px;place-items:center;width:32px;height:32px;font-size:12px;display:grid}.user-row strong{flex:1;font-weight:500}.app-main{background:var(--background);flex:1;min-width:0;position:relative}.app-header{border-bottom:1px solid var(--border);height:62px;color:var(--muted-foreground);background:#080b14d1;align-items:center;gap:10px;padding:0 20px;font-size:14px;display:flex}.app-header strong{color:var(--foreground);font-weight:600}.sidebar-trigger{color:#a4afbd;width:17px;height:17px;margin-right:5px}.breadcrumb-chevron{color:#596477;width:14px;height:14px}.dashboard-viewport{height:calc(100% - 62px);padding:18px 18px 80px;overflow:auto}.dashboard-viewport::-webkit-scrollbar{width:9px}.dashboard-viewport::-webkit-scrollbar-thumb{background:#394253 padding-box content-box;border:3px solid #0000;border-radius:999px}.dashboard-toolbar-row{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.getting-started{color:var(--muted-foreground);align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.getting-started svg{width:16px;height:16px}.dashboard-toolbar{align-items:center;gap:8px;display:flex}.toolbar-button,.add-widget button{border:1px solid var(--border);height:36px;color:var(--foreground);white-space:nowrap;background:0 0;border-radius:7px;align-items:center;gap:8px;padding:0 12px;font-size:14px;font-weight:500;display:flex}.toolbar-button svg,.add-widget svg{width:16px;height:16px}.range-button{min-width:138px}.range-chevron{color:#687386;margin-left:auto}.toolbar-button[data-refresh-all]{cursor:pointer}.toolbar-button[data-refresh-all]:hover{background:#1e232d}.is-static{pointer-events:none}.toolbar-button.is-refreshing svg{animation:.65s linear infinite demo-spin}.add-widget{display:flex}.add-widget button{border-color:var(--primary);background:var(--primary);color:#07101a;border-radius:7px 0 0 7px}.add-widget button+button{border-left-color:#080b143d;border-radius:0 7px 7px 0;padding:0 9px}.widget-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;display:grid}.widget{border:1px solid var(--border);background:var(--card);border-radius:12px;min-width:0;transition:border-color .25s,box-shadow .25s;position:relative;overflow:hidden}.widget:hover{z-index:2;border-color:#388ccc6b;box-shadow:0 12px 28px #00000038,0 0 28px #388ccc14}.widget--stat{grid-column:span 3;height:190px;container-type:inline-size}.widget--line{grid-column:span 8;height:330px}.widget--pie{grid-column:span 4;height:330px}.widget--funnel{grid-column:span 5;height:310px}.widget--bar{grid-column:span 7;height:310px}.hw-widget-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:58px;padding:0 18px;display:flex}.hw-widget-head h4{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--foreground);margin:0;font-size:18px;font-weight:600;overflow:hidden}.hw-widget-actions{opacity:0;gap:4px;transition:opacity .15s;display:flex}.widget:hover .hw-widget-actions{opacity:1}.hw-widget-action{color:#a0abba;background:0 0;border:0;border-radius:7px;place-items:center;width:32px;height:32px;padding:0;display:grid}.hw-widget-action[data-widget-refresh]{cursor:pointer}.hw-widget-action:not([data-widget-refresh]){pointer-events:none}.hw-widget-action[data-widget-refresh]:hover{color:var(--foreground);background:#282d3d}.hw-widget-action svg{width:16px;height:16px}.stat-renderer{text-align:center;justify-content:center;align-items:center;height:calc(100% - 58px);padding:16px;font-size:clamp(10px,25cqw,30vh);font-weight:800;line-height:.85;display:flex}.chart-renderer{width:100%;height:calc(100% - 58px)}.loading-state{background:var(--card);opacity:0;visibility:hidden;place-items:center;transition:opacity .12s;display:grid;position:absolute;inset:58px 0 0}.loading-state i{border:3px solid #388ccc33;border-top-color:#388cccb8;border-radius:50%;width:31px;height:31px;animation:.7s linear infinite demo-spin}.widget.is-loading .loading-state{opacity:1;visibility:visible}.app-bottom-fade{background:linear-gradient(transparent,var(--background));pointer-events:none;height:76px;position:absolute;bottom:0;left:0;right:0}@keyframes demo-spin{to{transform:rotate(360deg)}}@media (width<=1050px){.app-shell{height:690px}.app-sidebar{width:184px}.widget--stat{grid-column:span 6;height:165px}.widget--line{grid-column:span 8}.widget--pie{grid-column:span 4}.widget--funnel,.widget--bar{grid-column:span 6}.dashboard-toolbar-row{align-items:flex-start}.getting-started{margin-top:10px}.hw-widget-head{height:52px;padding:0 14px}.chart-renderer{height:calc(100% - 52px)}.loading-state{inset:52px 0 0}}@media (width<=720px){.browser-frame{border-radius:12px}.browser-bar{height:40px;padding:0 10px}.browser-lights{gap:5px}.browser-lights i{width:8px;height:8px}.browser-history{display:none}.browser-address{width:min(214px,100% - 140px);height:25px;font-size:9px}.app-shell{height:590px}.app-sidebar{display:none}.app-header{height:52px;padding:0 13px}.dashboard-viewport{height:calc(100% - 52px);padding:12px 10px 50px}.getting-started{display:none}.dashboard-toolbar{justify-content:flex-end;gap:5px;width:100%}.toolbar-button{justify-content:center;width:34px;height:34px;padding:0;font-size:0}.toolbar-button svg{width:14px}.range-button{min-width:34px}.range-chevron{display:none}.add-widget button{height:34px;padding:0 10px;font-size:10px}.add-widget button+button{display:none}.widget-grid{gap:8px}.widget--stat{grid-column:span 6;height:135px}.widget--line{grid-column:1/-1;height:250px}.widget--pie,.widget--funnel,.widget--bar{grid-column:span 6;height:250px}.hw-widget-head{height:43px;padding:0 10px}.hw-widget-head h4{font-size:18px}.hw-widget-actions{opacity:1}.hw-widget-action{width:25px;height:25px}.hw-widget-action svg{width:13px;height:13px}.stat-renderer{height:calc(100% - 43px);font-size:clamp(10px,25cqw,30vh)}.chart-renderer{height:calc(100% - 43px)}.loading-state{inset:43px 0 0}}@media (prefers-reduced-motion:reduce){.product-demo *{transition-duration:.01ms!important;animation-duration:.01ms!important}}