.product-window,.product-window[data-variant=product-light],.showcase-window,.showcase-window[data-variant=product-light]{--showcase-app-bg:#f7f9fc;--showcase-surface:var(--neutral-white);--showcase-surface-muted:#f1f5f9;--showcase-inset:var(--showcase-surface);--showcase-border:#e2e8f0;--showcase-border-strong:#cbd5e1;--showcase-text:var(--background-primary);--showcase-text-secondary:#334155;--showcase-text-muted:#556178;--showcase-accent:#06b6d4;--showcase-accent-text:#155e75;--showcase-on-accent:var(--background-primary);--showcase-indigo:var(--north-gradient-start);--showcase-indigo-text:#3730a3;--showcase-success:#059669;--showcase-success-text:#047857;--showcase-success-strong:#065f46;--showcase-danger:#dc2626;--showcase-danger-text:#b91c1c;--showcase-warning:#d97706;--showcase-warning-text:#b45309;--showcase-shadow-color:rgb(11 15 46/0.08);--showcase-shadow:0 1px 2px rgb(11 15 46/0.06),0 4px 12px rgb(11 15 46/0.06)}.product-window[data-variant=brand-dark],.showcase-window[data-variant=brand-dark]{--showcase-app-bg:var(--background-secondary);--showcase-surface:var(--background-secondary);--showcase-surface-muted:color-mix(in srgb,var(--background-primary) 60%,transparent);--showcase-inset:color-mix(in srgb,var(--background-primary) 50%,transparent);--showcase-border:color-mix(in srgb,var(--ink) 12%,transparent);--showcase-border-strong:color-mix(in srgb,var(--ink) 20%,transparent);--showcase-text:var(--ink);--showcase-text-secondary:color-mix(in srgb,var(--ink) 80%,var(--muted));--showcase-text-muted:var(--muted);--showcase-accent:var(--accent-primary);--showcase-accent-text:var(--accent-primary);--showcase-on-accent:var(--background-primary);--showcase-indigo:var(--accent-secondary);--showcase-indigo-text:color-mix(in srgb,var(--accent-secondary) 40%,var(--ink));--showcase-success:var(--status-success);--showcase-success-text:var(--status-success);--showcase-success-strong:var(--status-success);--showcase-danger:#f87171;--showcase-danger-text:#f87171;--showcase-warning:#fbbf24;--showcase-warning-text:#fbbf24;--showcase-shadow-color:color-mix(in srgb,var(--background-primary) 55%,transparent);--showcase-shadow:0 24px 48px var(--showcase-shadow-color)}.showcase-window-body{container-type:inline-size;padding:clamp(.85rem,2vw,1.25rem)}.showcase-window-loading{border-radius:var(--showcase-radius);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:color-mix(in srgb,var(--neutral-white) 6%,transparent)}.showcase-badge{display:inline-flex;align-items:center;border-radius:.375rem;border:1px solid color-mix(in srgb,var(--showcase-accent) 45%,transparent);background:color-mix(in srgb,var(--showcase-accent) 10%,var(--showcase-surface));padding:.125rem .5rem;font-size:.75rem;font-weight:600;letter-spacing:.01em;color:var(--showcase-accent-text)}.showcase-badge-neutral{border-color:var(--showcase-border);background:var(--showcase-surface-muted);color:var(--showcase-text-secondary)}.showcase-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .85rem;margin:0;padding:0;list-style:none}.showcase-flow-step{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:600;color:var(--showcase-text-muted);transition:color .3s ease}.showcase-flow-step+.showcase-flow-step:before{content:"";width:1.25rem;height:1px;margin-inline-end:.4rem;background:color-mix(in srgb,var(--showcase-text) 14%,transparent)}.showcase-flow-marker{display:inline-grid;flex-shrink:0;place-items:center;width:1.25rem;height:1.25rem;border-radius:999px;font-family:var(--font-jetbrains-mono),monospace;font-size:.6875rem;border:1px solid var(--showcase-border-strong);transition:background .3s ease,border-color .3s ease,color .3s ease}.showcase-flow-check{width:.7rem;height:.7rem}.showcase-flow-step[data-state=current]{color:var(--showcase-text)}.showcase-flow-step[data-state=current] .showcase-flow-marker{border-color:color-mix(in srgb,var(--showcase-accent) 60%,transparent);color:var(--showcase-accent-text)}.showcase-flow-step[data-state=complete]{color:color-mix(in srgb,var(--showcase-text) 80%,var(--showcase-text-muted) 20%)}.showcase-flow-step[data-state=complete] .showcase-flow-marker{border-color:transparent;background:var(--showcase-accent);color:var(--showcase-on-accent)}@container (width < 30rem){.showcase-flow{column-gap:.4rem}.showcase-flow-step{gap:.3rem;font-size:.6875rem}.showcase-flow-step+.showcase-flow-step:before{width:.6rem;margin-inline-end:.1rem}}.product-window{--product-window-radius:1rem;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--product-window-radius);border:1px solid var(--showcase-border);background:var(--showcase-surface);color:var(--showcase-text);font-family:var(--font-manrope),system-ui,sans-serif;box-shadow:0 1px 2px rgb(11 15 46/.04),0 8px 24px rgb(11 15 46/.06),0 24px 48px rgb(11 15 46/.04);transition:transform .35s ease,box-shadow .35s ease}@media (prefers-reduced-motion:no-preference){.product-story-showcase-frame:hover .product-window{transform:translateY(-2px);box-shadow:0 2px 4px rgb(11 15 46/.05),0 12px 32px rgb(11 15 46/.08),0 28px 56px rgb(11 15 46/.06)}}.product-window-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem 1rem;padding:.7rem 1rem;border-bottom:1px solid var(--showcase-border);background:var(--showcase-surface)}.product-window-controls{display:flex;align-items:center;gap:.35rem}.product-window-dot{width:.4375rem;height:.4375rem;border-radius:999px;background:var(--showcase-border-strong)}.product-window-titles{display:grid;gap:.1rem;min-width:0}.product-window-product{margin:0;font-family:var(--font-jetbrains-mono),ui-monospace,monospace;font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--showcase-text-muted)}.product-window-screen{margin:0;font-family:var(--font-poppins),system-ui,sans-serif;font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--showcase-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-window-status{display:inline-flex;align-items:center;gap:.35rem;margin:0;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--showcase-border);font-family:var(--font-manrope),sans-serif;font-size:.6875rem;font-weight:600;line-height:1.2;white-space:nowrap}.product-window-status-dot{width:.375rem;height:.375rem;border-radius:999px;background:currentColor}.product-window-status-neutral{color:var(--showcase-text-muted);background:var(--showcase-surface-muted)}.product-window-status-success{color:var(--showcase-success-text);border-color:color-mix(in srgb,var(--showcase-success) 35%,var(--showcase-border));background:color-mix(in srgb,var(--showcase-success) 10%,var(--showcase-surface))}.product-window-status-accent{color:var(--showcase-accent-text);border-color:color-mix(in srgb,var(--showcase-accent) 35%,var(--showcase-border));background:color-mix(in srgb,var(--showcase-accent) 10%,var(--showcase-surface))}.product-window-status-spacer{width:1px;height:1px}.product-window-body{container-type:inline-size;padding:clamp(.85rem,2vw,1.25rem);background:var(--showcase-app-bg)}.product-window[data-variant=brand-dark]{box-shadow:var(--showcase-shadow)}