.motion-demo-host{overflow:hidden;position:relative}.motion-demo{background:var(--muted);border:1px solid color-mix(in srgb,var(--foreground) 12%,var(--border));border-radius:16px;box-shadow:inset 0 1px #ffffffe6,0 1px 2px #0f172a0f,0 24px 48px -32px #0f172a59;color:var(--foreground);display:flex;flex-direction:column;font-family:var(--font-body);gap:12px;left:0;padding:14px;position:absolute;top:0;transform-origin:0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.motion-demo-composer{background:var(--card);border:1px solid color-mix(in srgb,var(--foreground) 14%,var(--border));border-radius:12px;box-shadow:inset 0 1px #ffffffe6,0 1px 2px #0f172a0d;display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;pointer-events:none}.motion-demo-prompt{color:var(--foreground);display:grid;font-size:14px;line-height:22px;min-height:44px}.motion-demo-prompt>*{grid-area:1/1}.motion-demo-prompt-reserve{visibility:hidden}.motion-demo-caret{background:var(--primary);display:inline-block;height:17px;margin-left:1px;vertical-align:-3px;width:1.5px}.motion-demo-picker{background:var(--muted);border:1px solid var(--border);font-size:12.5px;font-weight:600;gap:6px;height:32px;padding-inline:10px;white-space:nowrap}.motion-demo-generate,.motion-demo-picker{align-items:center;border-radius:7px;display:inline-flex}.motion-demo-generate{font-size:13px;font-weight:700;gap:7px;height:34px;padding-inline:14px;transition:none}.motion-demo-generate-window{display:block;height:18px;overflow:hidden}.motion-demo-generate-labels{display:flex;flex-direction:column;line-height:18px}.motion-demo-canvas{border:1px solid var(--border);border-radius:12px;flex:1;overflow:hidden;position:relative}.motion-demo-progress{background:var(--primary);height:2px;left:0;position:absolute;top:0;transform:scaleX(0);transform-origin:0 50%;width:100%;z-index:5}.motion-demo-placeholder{align-items:center;color:#64748b;display:flex;font-size:13px;font-weight:600;gap:6px;inset:0 0 52px;justify-content:center;position:absolute}.motion-demo-look{inset:0;position:absolute}.motion-demo-look~.motion-demo-look{clip-path:inset(0 0 0 100%)}.motion-demo-canvas,.motion-demo-look~.motion-demo-look{background-color:#fff;background-image:radial-gradient(circle at 1px 1px,rgba(15,23,42,.09) 1px,transparent 0);background-size:16px 16px}.motion-demo-look[data-dark]{background-color:var(--look-ground);background-image:radial-gradient(circle at 1px 1px,hsla(0,0%,100%,.07) 1px,transparent 0);background-size:16px 16px}.motion-demo-svg{inset:14px 22px 58px;position:absolute}.motion-demo-svg>svg{display:block;height:100%;width:100%}.motion-demo-svg>svg>rect:first-of-type{display:none}.motion-demo-toolbar{align-items:center;bottom:12px;display:flex;gap:8px;left:12px;position:absolute;right:12px;z-index:4}.motion-demo-segmented{background:var(--card);border:1px solid var(--border);border-radius:9px;box-shadow:0 1px 2px #0f172a0f;display:inline-flex;padding:3px;position:relative}.motion-demo-indicator{background:color-mix(in srgb,var(--primary) 10%,var(--card));border-radius:6px;bottom:3px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 28%,transparent);left:0;position:absolute;top:3px}.motion-demo-chip{--chip-strength:0;border-radius:6px;color:color-mix(in srgb,var(--primary) calc(var(--chip-strength)*100%),var(--muted-foreground));font-size:12.5px;font-weight:600;height:26px;padding-inline:12px;position:relative;transition:background-color .1s ease-out}.motion-demo-chip:hover{background:color-mix(in srgb,var(--foreground) 4%,transparent)}.motion-demo-chip:focus-visible,.motion-demo-replay:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.motion-demo-download,.motion-demo-replay{align-items:center;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 1px 2px #0f172a0f;display:inline-flex;font-size:12.5px;font-weight:700;gap:5px;height:32px;padding-inline:11px}.motion-demo-replay{color:var(--muted-foreground);transition:color .1s ease-out,border-color .1s ease-out}.motion-demo-replay:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--border));color:var(--foreground)}.motion-demo-download{color:var(--foreground);margin-left:auto}.motion-demo-toast{align-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;bottom:56px;box-shadow:0 1px 2px #0f172a0f,0 12px 24px -16px #0f172a66;display:flex;gap:10px;padding:9px 14px 9px 10px;position:absolute;right:12px;z-index:6}.motion-demo-toast-icon{align-items:center;background:#10b9811f;border-radius:9999px;color:#059669;display:inline-flex;height:26px;justify-content:center;width:26px}.motion-demo-cursor{left:0;pointer-events:none;position:absolute;top:0;transition:opacity .15s ease-out;z-index:10}