.demo-preview{--radius:16px;--control-height:40px;--ease-spring:cubic-bezier(.22, 1, .36, 1);--duration-normal:.3s;--bg-base:#080b10;--surface-primary:#0d1117;--surface-secondary:#151b23;--surface-tertiary:#0a0e14;--border-glass:#c9a84c1f;--border-subtle:#c9a84c12;--accent:#c9a84c;--accent-soft:#c9a84c24;--accent-hover:#e8d48b;--label-primary:#fffffff5;--label-secondary:#ffffff9e;--label-tertiary:#ffffff80;--label-quaternary:#ffffff2e;--label-inverse:#080b10;color:var(--label-primary);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-preview .card{background:var(--surface-primary);border:1px solid var(--border-glass);border-radius:var(--radius);overflow:hidden}.demo-preview .btn{height:var(--control-height);border-radius:var(--radius);border:1px solid var(--border-glass);background:var(--surface-primary);color:var(--label-primary);transition:background var(--duration-normal) var(--ease-spring), border-color var(--duration-normal) var(--ease-spring);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;min-width:var(--control-height);-webkit-tap-highlight-color:transparent;flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:0 12px;font-family:inherit;font-size:16px;font-weight:600;line-height:1;display:inline-flex}.demo-preview .btn:active{transform:scale(.97)}.demo-preview .btn-gray{background:var(--surface-secondary)}.demo-preview .btn-gray:hover{background:var(--surface-primary)}.demo-preview .icon{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;width:16px;height:16px}.demo-preview .activity-log{background:var(--surface-tertiary);overflow:hidden}.demo-preview .timeline-item{padding-bottom:32px;padding-left:36px;position:relative}.demo-preview .timeline-item:last-child{padding-bottom:0}.demo-preview .timeline-item:before{content:"";background:var(--border-glass);width:1px;position:absolute;top:24px;bottom:0;left:12px}.demo-preview .timeline-item:last-child:before{display:none}.demo-preview .timeline-marker{font-variant-numeric:tabular-nums;background:var(--surface-tertiary);border:1px solid var(--border-glass);width:24px;height:24px;color:var(--label-secondary);border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex;position:absolute;top:0;left:0}.demo-preview .live-dot{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:2s cubic-bezier(.4,0,.6,1) infinite demo-pulse;display:inline-block}@keyframes demo-pulse{0%,to{opacity:1}50%{opacity:.4}}