.demo-page{background:var(--surface-raised);min-height:100vh;color:var(--text-primary)}.demo-topbar{border-bottom:1px solid var(--border-default);background:var(--surface-base);justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.demo-back-link{color:var(--text-muted);font-size:13px;font-weight:600}.demo-topbar-actions{align-items:center;gap:14px;display:flex}.demo-badge{color:var(--text-muted);font-family:ui-monospace,monospace;font-size:12px}.demo-cta{background:var(--primary);color:var(--primary-foreground);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600}.demo-shell{flex-direction:column;gap:16px;max-width:1180px;margin:0 auto;padding:32px 24px 80px;display:flex}.demo-website-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.demo-website-title{align-items:center;gap:12px;display:flex}.demo-favicon{background:radial-gradient(circle at 30% 30%, var(--primary), transparent 70%), var(--surface-sunken);border:1px solid var(--border-default);border-radius:8px;flex-shrink:0;width:32px;height:32px}.demo-domain{font-size:18px;font-weight:700}.demo-online{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}.demo-online-dot{background:#22c55e;border-radius:999px;width:7px;height:7px;box-shadow:0 0 0 3px #22c55e22}.demo-daterange{border:1px solid var(--border-default);background:var(--surface-overlay);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}.demo-metrics{grid-gap:12px;grid-template-columns:repeat(5,1fr);gap:12px;display:grid}@media (max-width:900px){.demo-metrics{grid-template-columns:repeat(2,1fr)}}.demo-metric-card{background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:12px;padding:16px}.demo-metric-label{color:var(--text-muted);margin-bottom:8px;font-size:13px;font-weight:600}.demo-metric-value{margin-bottom:8px;font-size:26px;font-weight:700}.demo-metric-badge{border-radius:6px;align-items:center;gap:3px;padding:3px 8px;font-size:12px;font-weight:700;display:inline-flex}.demo-metric-badge.is-up{color:#16a34a;background:#16a34a1a}.demo-metric-badge.is-down{color:#dc2626;background:#dc26261a}.demo-chart-panel{background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:12px;padding:20px}.demo-chart-legend{color:var(--text-muted);justify-content:center;gap:16px;margin-top:4px;font-size:12px;display:flex}.demo-chart-legend span{align-items:center;gap:6px;display:inline-flex}.demo-legend-dot{background:var(--primary);border-radius:999px;width:8px;height:8px;display:inline-block}.demo-legend-dot.is-light{opacity:.35}.demo-tables{grid-gap:16px;grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (max-width:720px){.demo-tables{grid-template-columns:1fr}}.demo-table-panel{background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:12px;padding:18px}.demo-table-panel h3{margin:0 0 12px;font-size:16px}.demo-tabs{border-bottom:1px solid var(--border-default);gap:16px;margin-bottom:10px;padding-bottom:8px;display:flex}.demo-tabs span{color:var(--text-muted);font-size:12px;font-weight:600}.demo-tabs span.is-active{color:var(--primary);position:relative}.demo-table-headrow{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;justify-content:space-between;align-items:center;padding:4px 0;font-size:11px;display:flex}.demo-table-row{border-top:1px solid var(--border-muted);justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:13px;display:flex}.demo-table-key{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;min-width:0;display:flex;overflow:hidden}.demo-table-icon{flex-shrink:0}.demo-table-value{color:var(--text-primary);flex-shrink:0}.demo-table-pct{color:var(--text-muted);font-size:12px}.demo-more{color:var(--text-muted);cursor:default;background:0 0;border:none;margin:12px auto 0;font-size:12px;display:block}.demo-bottom-grid{grid-gap:16px;grid-template-columns:1.2fr 1fr;gap:16px;display:grid}@media (max-width:900px){.demo-bottom-grid{grid-template-columns:1fr}}.demo-map-panel{background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:12px;justify-content:center;align-items:center;padding:12px;display:flex}.demo-heatmap{flex-direction:column;gap:2px;font-size:11px;display:flex}.demo-heatmap-header,.demo-heatmap-row{grid-gap:2px;grid-template-columns:44px repeat(7,1fr);align-items:center;gap:2px;display:grid}.demo-heatmap-header span{text-align:center;color:var(--text-muted);font-weight:600}.demo-heatmap-hour{color:var(--text-muted);text-align:right;padding-right:6px}.demo-heatmap-cell{justify-content:center;align-items:center;height:12px;display:flex}.demo-heatmap-dot{background:var(--primary);border-radius:999px;width:10px;height:10px;display:inline-block}.demo-footnote{text-align:center;color:var(--text-muted);margin-top:12px;font-size:13px}.demo-footnote a{color:var(--primary);font-weight:600}