.demo-dashboard{--surface-0:0 0% 100%;--surface-1:60 5% 98%;--surface-2:60 5% 95%;--surface-3:60 4% 91%;--ink-1:0 0% 10%;--ink-2:40 1% 29%;--ink-3:60 2% 48%;--ink-4:60 2% 62%;--signal-red:0 48% 49%;--signal-amber:33 48% 45%;--signal-green:150 30% 42%;--brand-accent:99 26% 46%;--surface-canvas:var(--surface-0);--surface-primary:var(--surface-1);--surface-secondary:var(--surface-2);--surface-tertiary:var(--surface-3);--surface-hover:var(--surface-2);--content-primary:var(--ink-1);--content-secondary:var(--ink-2);--content-tertiary:var(--ink-3);--content-quaternary:var(--ink-4);--border-primary:0 0% 0%/0.08;--border-secondary:0 0% 0%/0.04;--border:var(--border-primary);--background:var(--surface-canvas);--foreground:var(--content-primary);--primary:var(--ink-1);--primary-foreground:var(--surface-0);--muted:var(--surface-secondary);--muted-foreground:var(--content-secondary);--success:var(--signal-green);--warning:var(--signal-amber);--destructive:var(--signal-red);color-scheme:light;color:hsl(var(--foreground));font-family:var(--font-sans,"Satoshi",-apple-system,sans-serif)}.demo-chrome{position:relative;border-radius:12px;border:1px solid hsl(var(--border-primary));background:hsl(var(--surface-0));box-shadow:0 0 0 1px hsl(var(--border-primary)),0 8px 24px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.04);overflow:hidden}.demo-chrome:after{content:"";position:absolute;inset:-18%;background:radial-gradient(circle 340px at var(--glow-x,50%) var(--glow-y,50%),hsl(var(--brand-accent)/.06),transparent 70%);pointer-events:none;opacity:0;filter:blur(42px);transition:opacity .24s ease;z-index:0}.demo-chrome:hover:after{opacity:1}.demo-sidebar{width:220px;flex-shrink:0;border-right:1px solid hsl(var(--border-primary));background:hsl(var(--surface-0));display:flex;flex-direction:column;padding:12px 0}.demo-sidebar-brand{font-size:14px;font-weight:500;color:hsl(var(--ink-1));padding:0 16px 12px;border-bottom:1px solid hsl(var(--border-primary));margin-bottom:8px}.demo-sidebar-item{display:flex;align-items:center;height:32px;padding:0 12px;margin:0 8px;border-radius:6px;font-size:13px;font-weight:500;color:hsl(var(--ink-3));border-left:2px solid transparent;transition:all .15s;cursor:pointer;gap:10px}.demo-sidebar-item:hover{background:hsl(var(--surface-2)/.6);color:hsl(var(--ink-2))}.demo-sidebar-item[data-active=true]{background:hsl(var(--surface-2));color:hsl(var(--ink-1));border-left-color:hsl(var(--ink-1))}.demo-sidebar-item svg{width:18px;height:18px;flex-shrink:0}.demo-sidebar-user{margin-top:auto;padding:12px 16px 0;border-top:1px solid hsl(var(--border-primary));display:flex;align-items:center;gap:8px}.demo-sidebar-avatar{width:28px;height:28px;border-radius:50%;background:hsl(var(--surface-2));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:hsl(var(--ink-2))}.demo-sidebar-user-name{font-size:12px;font-weight:500;color:hsl(var(--ink-1))}.demo-sidebar-user-email{font-size:11px;color:hsl(var(--ink-3))}.demo-visual-card{border-radius:12px;border:1px solid hsl(var(--border-primary));background:hsl(var(--surface-1));box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;transition:all .15s}.demo-visual-card:hover{border-color:hsl(var(--border-primary)/2);box-shadow:0 4px 12px rgba(0,0,0,.06)}.demo-visual-card[data-selected=true]{box-shadow:0 0 0 2px hsl(var(--ink-1)/.12);border-color:hsl(var(--ink-1)/.2)}.demo-visual-thumb{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.demo-visual-initials{font-size:24px;font-weight:700}.demo-visual-content{padding:14px}.demo-visual-name{font-size:13px;font-weight:500;color:hsl(var(--ink-1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-visual-meta{font-size:12px;color:hsl(var(--ink-4));margin-top:4px;display:flex;align-items:center;gap:6px}.demo-detail-panel{width:380px;flex-shrink:0;border-left:1px solid hsl(var(--border-primary));background:hsl(var(--surface-1));padding:20px;display:flex;flex-direction:column;gap:16px;overflow:hidden}.demo-section-number{font-family:var(--font-data,monospace);font-size:12px;letter-spacing:.08em;color:hsl(var(--ink-3));font-weight:600}.demo-stagger{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.demo-stagger[data-visible=true]{opacity:1;transform:none}.demo-status-line{font-family:var(--font-data,monospace);font-size:11px;letter-spacing:.02em;color:hsl(var(--ink-4))}.demo-toolbar{height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid hsl(var(--border-primary));flex-shrink:0}.demo-toolbar-title{font-size:14px;font-weight:600;color:hsl(var(--ink-1))}.demo-toolbar-count{font-size:13px;color:hsl(var(--ink-3))}.demo-toolbar-action{height:30px;padding:0 10px;border-radius:6px;border:1px solid hsl(var(--border-primary));background:hsl(var(--surface-0));font-size:12px;font-weight:500;color:hsl(var(--ink-2));display:flex;align-items:center;gap:5px;transition:all .15s;cursor:pointer}.demo-toolbar-action:hover{background:hsl(var(--surface-2));border-color:hsl(var(--border-primary)/2)}@media (max-width:979px){.demo-detail-panel,.demo-sidebar{display:none}}