.ai-demo-frame,.ai-action-demo{--background: var(--theme-dark-surface);--foreground: var(--theme-dark-text);--primary: var(--theme-dark-text);--primary-foreground: var(--theme-dark-surface);--muted: var(--theme-dark-surface-raised);--muted-foreground: var(--theme-dark-text-muted);--border: var(--theme-dark-border);--input: var(--theme-dark-border);--ai-ink: hsl(var(--foreground));--ai-muted: hsl(var(--muted-foreground));--ai-stroke: hsl(var(--foreground) / .12);--ai-panel: hsl(var(--background) / .94);--ai-raised: hsl(var(--muted) / .7);--ai-accent: var(--fresh-line-red);--ai-focus: var(--fresh-line-blue);--ai-success: var(--live-green);--ai-radius: var(--studio-radius, 12px);color-scheme:dark;color:var(--ai-ink);font-size:var(--studio-caption, 14px);line-height:1.5}html:not(.dark) :is(.ai-demo-frame,.ai-action-demo){--background: var(--theme-light-surface);--foreground: var(--theme-light-text);--primary: var(--theme-light-text);--primary-foreground: var(--theme-light-surface);--muted: var(--theme-light-page);--muted-foreground: var(--theme-light-text-soft);--border: var(--theme-light-border);--input: var(--theme-light-border);--ai-focus: color-mix(in srgb, var(--fresh-line-blue) 60%, hsl(var(--brand-black)));--ai-success: color-mix(in srgb, var(--live-green) 52%, hsl(var(--brand-black)));--shadow-ai-window: 0 20px 42px -24px hsl(var(--brand-black) / .16), 0 2px 6px hsl(var(--brand-black) / .06);color-scheme:light}.ai-demo-frame{overflow:hidden;border:1px solid var(--ai-stroke);border-radius:var(--ai-radius);background:var(--ai-panel);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);box-shadow:var(--shadow-ai-window)}.ai-demo-frame__bar{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 22px;border-bottom:1px solid var(--ai-stroke)}.ai-demo-frame__title{font-weight:500}.ai-demo-frame__tools{display:flex;align-items:center;gap:14px;margin-left:auto}.ai-demo-frame__replay[data-slot=button]{width:32px;height:32px;min-width:32px;padding:7px;color:var(--ai-muted);background:transparent;border:1px solid transparent;border-radius:var(--studio-control-radius)}.ai-demo-frame__replay[data-slot=button]:hover{color:var(--ai-ink);background:var(--ai-raised);border-color:var(--ai-stroke)}.ai-demo-frame [data-slot=button] svg,.ai-action-demo [data-slot=button] svg{width:16px;height:16px}.ai-demo-frame [data-slot=button]:focus-visible{outline:2px solid var(--ai-focus);outline-offset:3px}.ai-demo-muted{color:var(--ai-muted)}.ai-demo-status{color:var(--ai-muted);font-size:var(--studio-detail, 12px);line-height:1.5;white-space:nowrap}.ai-demo-button[data-slot=button]{min-height:35px;height:auto;padding:7px 12px;gap:8px;border-radius:var(--studio-control-radius);font-size:var(--studio-detail, 12px);line-height:1.5}@media(max-width:600px){.ai-demo-frame__bar{padding:12px 16px;gap:9px}.ai-demo-frame__tools{gap:8px}.ai-demo-frame__title{font-size:var(--studio-label, 13px);line-height:1.5}}.ai-demo-frame>.fresh-playground__titlebar{color:var(--ai-muted);background:hsl(var(--muted));border-bottom:1px solid var(--ai-stroke)}.ai-demo-frame--embedded{border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
