.demo-page{margin:0 auto;max-width:1280px;padding:72px 24px 120px}.demo-back{align-items:center;color:var(--fg-3);display:inline-flex;font-size:14px;gap:8px;margin-bottom:28px}.demo-back:hover{color:var(--fg-1)}.demo-head{margin-bottom:28px;max-width:720px}.demo-head h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;line-height:1.08;margin:10px 0 14px}.demo-head p{color:var(--fg-2);font-size:16px;line-height:1.6;margin:0}.demo-frame{border:1px solid var(--line-2);border-radius:14px;box-shadow:0 34px 90px -28px rgba(0,0,0,.5),0 0 0 1px var(--line-1);overflow:hidden}.demo-chrome{align-items:center;background:#100c1c;border-bottom:1px solid rgba(255,255,255,.07);display:flex;gap:8px;padding:11px 16px}.demo-chrome .dot{border-radius:50%;height:11px;width:11px}.demo-chrome .d1{background:#ff5f57}.demo-chrome .d2{background:#febc2e}.demo-chrome .d3{background:#28c840}.demo-chrome .title{color:#756c8a;flex:1;font-size:12px;font-weight:700;text-align:center}.demo-app{--d-canvas:#07050d;--d-frame:#0b0814;--d-surface:rgba(28,22,44,0.55);--d-surface-2:rgba(40,32,60,0.55);--d-line:rgba(255,255,255,0.08);--d-line-2:rgba(255,255,255,0.14);--d-fg-0:#f6f3fb;--d-fg-1:#d8d2e6;--d-fg-2:#a59cbb;--d-fg-3:#756c8a;--d-accent:oklch(70% 0.205 322);--d-accent-soft:oklch(70% 0.205 322/0.16);--d-accent-line:oklch(70% 0.205 322/0.34);--d-ok:oklch(76% 0.16 162);--d-warn:oklch(80% 0.14 78);--d-err:oklch(68% 0.2 22);background:var(--d-canvas);color:var(--d-fg-1);display:grid;font-size:13px;grid-template-columns:208px 1fr;min-height:560px}.demo-sidebar{background:linear-gradient(180deg,#0c0916,#07050d);border-right:1px solid var(--d-line);display:flex;flex-direction:column;padding:14px 12px}.demo-brand{gap:10px;margin-bottom:18px;padding:4px 6px}.demo-brand,.demo-brand-logo{align-items:center;display:flex}.demo-brand-logo{background:linear-gradient(135deg,oklch(72% .21 352),oklch(70% .205 322));border-radius:10px;color:#fff;height:32px;justify-content:center;width:32px}.demo-brand-logo svg{height:18px;width:18px}.demo-brand-name{align-items:center;color:var(--d-fg-0);display:flex;font-size:13px;font-weight:800;gap:6px}.demo-brand-sub{color:var(--d-fg-3);font-size:10px}.demo-badge-pro{background:rgba(255,196,0,.14);border:1px solid rgba(255,196,0,.4);border-radius:999px;color:#ffc400;font-size:9px;font-weight:800;letter-spacing:.04em;padding:1px 6px}.demo-nav{display:flex;flex-direction:column;gap:2px}.demo-nav-item{align-items:center;background:none;border:1px solid transparent;border-radius:10px;color:var(--d-fg-2);cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:600;gap:10px;padding:10px 12px;text-align:left;transition:background .16s ease,color .16s ease;width:100%}.demo-nav-item svg{height:16px;opacity:.8;width:16px}.demo-nav-item:hover{background:rgba(255,255,255,.04);color:var(--d-fg-0)}.demo-nav-item[aria-current=page]{background:var(--d-accent-soft);border-color:var(--d-accent-line);color:var(--d-fg-0)}.demo-nav-item[aria-current=page] svg{color:var(--d-accent);opacity:1}.demo-sidebar-foot{border-top:1px solid var(--d-line);display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:14px}.demo-conn{align-items:center;color:var(--d-fg-3);display:flex;font-size:11px;font-weight:600;gap:8px;justify-content:space-between}.demo-conn-dot{border-radius:50%;height:7px;width:7px;background:var(--d-fg-4,#4c4564)}.demo-conn.is-live{color:var(--d-fg-1)}.demo-conn.is-live .demo-conn-dot{animation:demo-pulse 1.8s ease-in-out infinite;background:var(--d-ok)}@keyframes demo-pulse{0%,to{opacity:1}50%{opacity:.35}}.demo-main{display:flex;flex-direction:column;min-width:0}.demo-topbar{align-items:center;border-bottom:1px solid var(--d-line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:16px 20px}.demo-topbar h2{color:var(--d-fg-0);font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0}.demo-topbar p{color:var(--d-fg-3);font-size:12px;margin:3px 0 0}.demo-topbar-right{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.demo-sim-note{border:1px dashed var(--d-line-2);border-radius:999px;color:var(--d-fg-3);font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 10px}.demo-live,.demo-sim-note{align-items:center;display:inline-flex;gap:6px;text-transform:uppercase}.demo-live{color:var(--d-err);font-size:11px;font-weight:800;letter-spacing:.08em}.demo-live span{animation:demo-pulse 1.4s ease-in-out infinite;background:currentColor;border-radius:50%;height:7px;width:7px}.demo-body{flex:1;padding:18px 20px 22px}.demo-card{background:var(--d-surface);border:1px solid var(--d-line);border-radius:14px;padding:14px}.demo-card-head{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:12px}.demo-card-title{align-items:center;color:var(--d-fg-0);display:flex;font-size:13px;font-weight:700;gap:7px}.demo-card-title svg{color:var(--d-accent);height:14px;width:14px}.demo-chip{border:1px solid var(--d-line-2);border-radius:999px;color:var(--d-fg-2);font-size:10px;font-weight:700;padding:3px 9px;white-space:nowrap}.demo-chip.ok{background:oklch(76% .16 162/.14);border-color:oklch(76% .16 162/.4);color:var(--d-ok)}.demo-chip.warn{background:oklch(80% .14 78/.14);border-color:oklch(80% .14 78/.4);color:var(--d-warn)}.demo-chip.err{background:oklch(68% .2 22/.14);border-color:oklch(68% .2 22/.4);color:var(--d-err)}.demo-chip.accent{background:var(--d-accent-soft);border-color:var(--d-accent-line);color:var(--d-accent)}.demo-stat-grid{display:grid;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:14px}.demo-stat{background:var(--d-surface);border:1px solid var(--d-line);border-radius:12px;padding:11px 12px}.demo-stat-icon{align-items:center;border-radius:8px;display:flex;height:26px;justify-content:center;margin-bottom:9px;width:26px}.demo-stat-icon svg{height:14px;width:14px}.demo-stat-value{color:var(--d-fg-0);font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}.demo-stat-label{color:var(--d-fg-3);font-size:11px;margin-top:2px}.demo-dash-grid{display:grid;gap:12px;grid-template-columns:1.35fr 1fr}.demo-event-list{display:flex;flex-direction:column;gap:6px;max-height:258px;overflow:hidden}.demo-event{background:var(--d-surface-2);border:1px solid var(--d-line);border-radius:10px;gap:9px;padding:8px 10px}.demo-event,.demo-event-icon{align-items:center;display:flex}.demo-event-icon{border-radius:7px;flex-shrink:0;height:24px;justify-content:center;width:24px}.demo-event-icon svg{height:13px;width:13px}.demo-event-text{flex:1;min-width:0}.demo-event-user{color:var(--d-fg-0);font-size:12px;font-weight:700}.demo-event-sub{color:var(--d-fg-3);font-size:11px}.demo-goal-bar{background:rgba(255,255,255,.07);border-radius:999px;height:8px;margin:8px 0 5px;overflow:hidden}.demo-goal-fill{background:linear-gradient(90deg,oklch(72% .21 352),var(--d-accent));border-radius:999px;height:100%;transition:width .4s ease}.demo-goal-meta{color:var(--d-fg-3);display:flex;font-size:11px;justify-content:space-between}.demo-quick{display:flex;flex-direction:column;gap:7px}.demo-quick-row{align-items:center;background:var(--d-surface-2);border:1px solid var(--d-line);border-radius:10px;color:var(--d-fg-2);display:flex;font-size:12px;gap:9px;padding:9px 10px}.demo-quick-row svg{color:var(--d-accent);height:14px;width:14px}.demo-filters{align-items:center;background:var(--d-surface);border:1px solid var(--d-line);border-radius:12px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding:8px 10px}.demo-filter{background:none;border:1px solid transparent;border-radius:999px;color:var(--d-fg-3);cursor:pointer;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.03em;padding:5px 10px;text-transform:uppercase;transition:color .15s ease,background .15s ease}.demo-filter:hover{color:var(--d-fg-1)}.demo-filter[aria-pressed=true]{background:var(--d-accent-soft);border-color:var(--d-accent-line);color:var(--d-accent)}.demo-chat{background:var(--d-surface);border:1px solid var(--d-line);border-radius:14px;display:flex;flex-direction:column;height:400px;overflow:hidden}.demo-chat-scroll{display:flex;flex:1;flex-direction:column;gap:2px;justify-content:flex-end;overflow:hidden;padding:10px}.demo-msg{animation:demo-msg-in .28s ease both;border-radius:8px;display:flex;gap:9px;padding:5px 7px}.demo-msg.is-event{background:rgba(255,255,255,.035)}@keyframes demo-msg-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.demo-msg-badge{align-items:center;border-radius:6px;display:inline-flex;flex-shrink:0;font-size:10px;font-weight:800;gap:4px;height:20px;padding:0 7px}.demo-msg-badge svg{height:10px;width:10px}.demo-msg-body{min-width:0}.demo-msg-user{color:var(--d-fg-0);font-size:12px;font-weight:700}.demo-msg-text{color:var(--d-fg-2);font-size:12.5px;margin:1px 0 0;overflow-wrap:anywhere}.demo-msg-event{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:5px;margin-left:6px}.demo-msg-event svg{height:12px;width:12px}.demo-chat-foot{border-top:1px solid var(--d-line);color:var(--d-fg-3);font-size:11px;gap:10px;padding:8px 12px}.demo-chat-foot,.demo-vibe-hero{display:flex;flex-wrap:wrap;justify-content:space-between}.demo-vibe-hero{align-items:center;background:var(--d-surface);border:1px solid var(--d-line);border-radius:14px;gap:16px;margin-bottom:12px;padding:16px 18px;transition:border-color .3s ease,background .3s ease}.demo-vibe-hero[data-state=HYPE]{background:linear-gradient(90deg,oklch(80% .14 78/.1),var(--d-surface) 60%);border-color:oklch(80% .14 78/.4)}.demo-vibe-hero[data-state=OVERDRIVE]{background:linear-gradient(90deg,oklch(68% .2 22/.14),var(--d-surface) 60%);border-color:oklch(68% .2 22/.5)}.demo-vibe-left{align-items:center;display:flex;gap:14px}.demo-vibe-emoji{font-size:34px;line-height:1}.demo-vibe-eyebrow{color:var(--d-fg-3);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.demo-vibe-state{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.15}.demo-vibe-trend{color:var(--d-fg-3);font-size:11px}.demo-vibe-gauge{min-width:190px}.demo-vibe-gauge-label{color:var(--d-fg-3);display:flex;font-size:10px;justify-content:space-between;margin-bottom:5px}.demo-vibe-track{background:rgba(255,255,255,.07);border-radius:999px;height:7px;overflow:hidden}.demo-vibe-fill{border-radius:999px;height:100%;transition:width .35s ease,background .3s ease}.demo-vibe-grid{display:grid;gap:12px;grid-template-columns:1.2fr 1fr}.demo-spark{display:block;height:132px;width:100%}.demo-guide-row{align-items:center;border:1px solid transparent;border-radius:10px;display:flex;gap:11px;padding:9px 10px}.demo-guide-row.is-now{background:var(--d-accent-soft);border-color:var(--d-accent-line)}.demo-guide-emoji{font-size:19px}.demo-guide-name{color:var(--d-fg-0);font-size:12px;font-weight:700}.demo-guide-text{color:var(--d-fg-3);font-size:11px}.demo-overlay-stack{display:flex;flex-direction:column;gap:12px}.demo-overlay-below{display:grid;gap:12px;grid-template-columns:1fr 1fr}.demo-stage{aspect-ratio:16/9;margin:0 auto;max-width:856px;width:100%;container-type:inline-size;background:radial-gradient(120% 90% at 20% 0,rgba(120,60,190,.32),transparent 60%),repeating-conic-gradient(#15111f 0 25%,#1b1628 0 50%) 0 0 /26px 26px;border:1px solid var(--d-line);border-radius:12px;overflow:hidden;position:relative}.demo-stage-tag{background:rgba(0,0,0,.45);border-radius:.7cqw;color:rgba(255,255,255,.55);font-size:1.17cqw;font-weight:700;left:1.17cqw;letter-spacing:.05em;padding:.35cqw .82cqw;position:absolute;text-transform:uppercase;top:1.17cqw}.demo-widget{backdrop-filter:blur(8px);background:rgba(12,9,22,.72);border:1px solid rgba(255,255,255,.14);border-radius:1.17cqw;padding:1.05cqw 1.29cqw;position:absolute}.demo-widget-goal{bottom:1.4cqw;left:1.4cqw;width:28cqw}.demo-widget-poll{right:1.4cqw;top:1.4cqw;width:24.5cqw}.demo-widget-title{color:rgba(255,255,255,.62);font-size:1.11cqw;font-weight:800;letter-spacing:.07em;margin-bottom:.7cqw;text-transform:uppercase}.demo-poll-row{margin-bottom:.58cqw}.demo-poll-label{color:#fff;display:flex;font-size:1.23cqw;font-weight:600;justify-content:space-between;margin-bottom:.35cqw}.demo-poll-track{background:rgba(255,255,255,.12);border-radius:999px;height:.58cqw;overflow:hidden}.demo-poll-fill{background:var(--d-accent);border-radius:999px;height:100%;transition:width .5s ease}.demo-alert{animation:demo-alert-in .4s cubic-bezier(.2,.9,.3,1.2) both;background:linear-gradient(135deg,oklch(72% .21 352/.95),oklch(66% .2 300/.95));border:1px solid rgba(255,255,255,.3);border-radius:1.4cqw;box-shadow:0 16px 48px -12px rgba(0,0,0,.7);left:50%;max-width:42%;padding:1.29cqw 2.1cqw;position:absolute;text-align:center;top:38%;transform:translateX(-50%)}@keyframes demo-alert-in{0%{opacity:0;transform:translate(-50%,12px) scale(.94)}to{opacity:1;transform:translate(-50%) scale(1)}}.demo-alert-title{color:#fff;font-size:1.64cqw;font-weight:800}.demo-alert-sub{color:rgba(255,255,255,.85);font-size:1.29cqw;margin-top:.23cqw}.demo-rule{border:1px solid var(--d-line);border-radius:11px;margin-bottom:8px;padding:10px 11px;transition:border-color .3s ease,background .3s ease}.demo-rule.is-firing{animation:demo-rule-flash 1.1s ease;border-color:var(--d-accent-line)}@keyframes demo-rule-flash{0%{background:var(--d-accent-soft);box-shadow:0 0 0 0 var(--d-accent-line)}to{background:transparent;box-shadow:0 0 0 8px transparent}}.demo-rule-head{align-items:center;display:flex;gap:8px;justify-content:space-between}.demo-rule-name{color:var(--d-fg-0);font-size:12px;font-weight:700}.demo-rule-flow{align-items:center;color:var(--d-fg-3);display:flex;flex-wrap:wrap;font-size:11px;gap:5px;margin-top:6px}.demo-token{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:6px;color:var(--d-fg-1);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;padding:2px 6px}.demo-log{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow:hidden}.demo-log-row{align-items:baseline;border-bottom:1px solid var(--d-line);color:var(--d-fg-2);display:flex;font-size:11px;gap:8px;padding-bottom:5px}.demo-log-time{color:var(--d-fg-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.demo-empty{color:var(--d-fg-3);font-size:12px;padding:16px 0;text-align:center}.demo-controls{border:1px solid var(--line-1);border-radius:14px;gap:10px;justify-content:space-between;margin-top:16px;padding:14px 16px}.demo-controls,.demo-controls-group{align-items:center;display:flex;flex-wrap:wrap}.demo-controls-group{gap:8px}.demo-controls-label{color:var(--fg-3);font-size:11px;font-weight:700;letter-spacing:.05em;margin-right:2px;text-transform:uppercase;width:100%}.demo-btn{align-items:center;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;color:var(--fg-1);cursor:pointer;display:inline-flex;font-family:inherit;font-size:13px;font-weight:600;gap:7px;padding:8px 13px;transition:border-color .15s ease,background .15s ease,transform .1s ease}.demo-btn:hover{border-color:var(--accent);color:var(--fg-0)}.demo-btn:active{transform:translateY(1px)}.demo-btn svg{height:14px;width:14px}.demo-btn.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.demo-hint{color:var(--fg-3);font-size:12px;margin-top:12px}.demo-cta{align-items:center;background:linear-gradient(135deg,var(--accent-soft),transparent 70%);border:1px solid var(--line-2);border-radius:16px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;margin-top:40px;padding:26px 28px}.demo-cta h2{font-size:22px;letter-spacing:-.01em;margin:0 0 6px}.demo-cta p{color:var(--fg-2);font-size:14px;margin:0;max-width:52ch}.demo-cta-actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.demo-embed{margin-top:30px}.story-steps{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px}.story-step-card h3{font-size:17px;letter-spacing:-.01em;line-height:1.25;margin:10px 0 7px}.story-step-card p{color:var(--fg-2);font-size:13.5px;line-height:1.6;margin:0}.demo-embed-more{display:flex;justify-content:center;margin-top:32px}.demo-teaser{align-items:center;background:linear-gradient(135deg,var(--accent-soft),transparent 65%);border:1px solid var(--line-2);border-radius:16px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-top:34px;padding:24px 26px}.demo-teaser h3{font-size:20px;letter-spacing:-.01em;margin:0 0 6px}.demo-teaser p{color:var(--fg-2);font-size:14px;margin:0;max-width:56ch}@media (max-width:1080px){.story-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-dash-grid,.demo-overlay-below,.demo-vibe-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width:900px){.demo-page{padding:56px 16px 90px}.demo-app{grid-template-columns:minmax(0,1fr)}.demo-sidebar{border-bottom:1px solid var(--d-line);border-right:none;flex-direction:row;gap:10px;overflow-x:auto;padding:10px}.demo-brand,.demo-sidebar-foot{display:none}.demo-nav{flex-direction:row;gap:6px}.demo-nav-item{padding:8px 12px;white-space:nowrap;width:auto}.demo-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-chat{height:320px}.demo-body{padding:14px}.demo-topbar{padding:13px 14px}}@media (max-width:560px){.story-steps{grid-template-columns:minmax(0,1fr)}.demo-vibe-state{font-size:21px}.demo-stat-value{font-size:18px}.demo-controls{flex-direction:column;align-items:stretch}}@media (prefers-reduced-motion:reduce){.demo-alert,.demo-conn.is-live .demo-conn-dot,.demo-live span,.demo-msg,.demo-rule.is-firing{animation:none}.demo-goal-fill,.demo-poll-fill,.demo-vibe-fill{transition:none}}