dialkit 1.3.0 → 1.4.1

package/dist/svelte/components/Timeline/TimelineSection.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { TimelineMeta } from 'dialkit/timeline';
+import type { DialTheme } from '../DialRoot.svelte';
+type $$ComponentProps = {
+    meta: TimelineMeta;
+    defaultOpen: boolean;
+    theme: DialTheme;
+    dockVisible: boolean;
+};
+declare const TimelineSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimelineSection = ReturnType<typeof TimelineSection>;
+export default TimelineSection;
+//# sourceMappingURL=TimelineSection.svelte.d.ts.map

package/dist/svelte/components/Timeline/TimelineSection.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineSection.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/TimelineSection.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAGR,YAAY,EAGb,MAAM,kBAAkB,CAAC;AAY5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAgDnD,KAAK,gBAAgB,GAAG;IACrB,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AA4mBJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/Timeline/TimelineToggleButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { TimelineUiStore } from 'dialkit/timeline';
+  import { ICON_TIMELINE } from '../../../icons';
+
+  let visible = $state(TimelineUiStore.getVisible());
+  $effect(() => TimelineUiStore.subscribe(() => {
+    visible = TimelineUiStore.getVisible();
+  }));
+  const label = $derived(visible ? 'Hide timeline' : 'Show timeline');
+</script>
+
+<button
+  class="dialkit-toolbar-add dialkit-timeline-toolbar-toggle"
+  data-active={visible || undefined}
+  aria-pressed={visible}
+  aria-label={label}
+  title={label}
+  onclick={() => TimelineUiStore.toggle()}
+>
+  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    {#each ICON_TIMELINE as path}
+      <path d={path} fill="currentColor" />
+    {/each}
+  </svg>
+</button>

package/dist/svelte/components/Timeline/TimelineToggleButton.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const TimelineToggleButton: import("svelte").Component<Record<string, never>, {}, "">;
+type TimelineToggleButton = ReturnType<typeof TimelineToggleButton>;
+export default TimelineToggleButton;
+//# sourceMappingURL=TimelineToggleButton.svelte.d.ts.map

package/dist/svelte/components/Timeline/TimelineToggleButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineToggleButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/TimelineToggleButton.svelte.ts"],"names":[],"mappings":"AA2BA,QAAA,MAAM,oBAAoB,2DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/TransitionControl.svelte

@@ -9,12 +9,22 @@
 
   type CurveMode = 'easing' | 'simple' | 'advanced';
 
-  let { panelId, path, label, value, onChange } = $props<{
+  export type TransitionDurationControl = {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+  };
+
+  let { panelId, path, label, value, onChange, hideDuration = false, durationControl } = $props<{
     panelId: string;
     path: string;
     label: string;
     value: TransitionConfig;
     onChange: (value: TransitionConfig) => void;
+    hideDuration?: boolean;
+    durationControl?: TransitionDurationControl;
   }>();
 
   let mode = $state<CurveMode>(DialStore.getTransitionMode(panelId, path));
@@ -136,7 +146,6 @@
       <Slider label="y1" value={easing.ease[1]} onChange={(v) => updateEase(1, v)} min={-1} max={2} step={0.01} />
       <Slider label="x2" value={easing.ease[2]} onChange={(v) => updateEase(2, v)} min={0} max={1} step={0.01} />
       <Slider label="y2" value={easing.ease[3]} onChange={(v) => updateEase(3, v)} min={-1} max={2} step={0.01} />
-      <Slider label="Duration" value={easing.duration} onChange={(v) => onChange({ ...easing, duration: v })} min={0.1} max={2} step={0.05} unit="s" />
 
       <div class="dialkit-labeled-control">
         <span class="dialkit-labeled-control-label">Ease</span>
@@ -156,15 +165,6 @@
         />
       </div>
     {:else if isSimpleSpring}
-      <Slider
-        label="Duration"
-        value={spring.visualDuration ?? 0.3}
-        onChange={(v) => handleSpringUpdate('visualDuration', v)}
-        min={0.1}
-        max={1}
-        step={0.05}
-        unit="s"
-      />
       <Slider
         label="Bounce"
         value={spring.bounce ?? 0.2}
@@ -199,5 +199,20 @@
         step={0.1}
       />
     {/if}
+
+    {#if !hideDuration && (isEasing || isSimpleSpring)}
+      <Slider
+        label="Duration"
+        value={durationControl?.value ?? (isEasing ? easing.duration : spring.visualDuration ?? 0.3)}
+        onChange={durationControl?.onChange ?? ((next) => {
+          if (isEasing) onChange({ ...easing, duration: next });
+          else handleSpringUpdate('visualDuration', next);
+        })}
+        min={durationControl?.min ?? 0.1}
+        max={durationControl?.max ?? (isEasing ? 2 : 1)}
+        step={durationControl?.step ?? 0.05}
+        unit="s"
+      />
+    {/if}
   </div>
 </Folder>

package/dist/svelte/components/TransitionControl.svelte.d.ts

@@ -1,10 +1,19 @@
 import type { TransitionConfig } from 'dialkit/store';
+export type TransitionDurationControl = {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+};
 type $$ComponentProps = {
     panelId: string;
     path: string;
     label: string;
     value: TransitionConfig;
     onChange: (value: TransitionConfig) => void;
+    hideDuration?: boolean;
+    durationControl?: TransitionDurationControl;
 };
 declare const TransitionControl: import("svelte").Component<$$ComponentProps, {}, "">;
 type TransitionControl = ReturnType<typeof TransitionControl>;

package/dist/svelte/components/TransitionControl.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransitionControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TransitionControl.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAA8B,gBAAgB,EAAE,MAAM,eAAe,CAAC;AASjF,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAuJJ,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"TransitionControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TransitionControl.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAA8B,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAUhF,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACH,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,yBAAyB,CAAC;CAC7C,CAAC;AA6JJ,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/createDialTimeline.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialTimelineOptions, DialTimelineValues, TimelineConfig } from 'dialkit/timeline';
+export type CreateDialTimelineOptions = DialTimelineOptions;
+export declare function createDialTimeline<T extends TimelineConfig>(name: string, config: T, options?: CreateDialTimelineOptions): DialTimelineValues<T>;
+//# sourceMappingURL=createDialTimeline.svelte.d.ts.map

package/dist/svelte/createDialTimeline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDialTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/createDialTimeline.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,yBAAyB,GAAG,mBAAmB,CAAC;AAI5D,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,EACzD,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,yBAAyB,GAClC,kBAAkB,CAAC,CAAC,CAAC,CA0DvB"}

package/dist/svelte/createDialTimeline.svelte.js

@@ -0,0 +1,73 @@
+import { DialStore } from 'dialkit/store';
+import { TimelineStore, buildTimelineMeta, buildTimelineValues, computeStaticTimeline, parseTimelineConfig, resolveTimelineLoop, } from 'dialkit/timeline';
+let timelineInstance = 0;
+export function createDialTimeline(name, config, options) {
+    const hasStableId = options?.id !== undefined;
+    const panelId = options?.id ?? `${name}-${++timelineInstance}`;
+    const parsed = $derived(parseTimelineConfig(config));
+    let flatValues = $state(DialStore.getValues(panelId));
+    let transport = $state(TimelineStore.getTransport(panelId));
+    const staticTimeline = $derived(computeStaticTimeline(parsed, flatValues));
+    const actions = {
+        play: () => TimelineStore.play(panelId),
+        pause: () => TimelineStore.pause(panelId),
+        replay: () => TimelineStore.replay(panelId),
+        seek: (time) => TimelineStore.seek(panelId, time),
+    };
+    const resolved = $derived(buildTimelineValues(staticTimeline.clips, transport, staticTimeline.duration, resolveTimelineLoop(options?.loop).start, actions));
+    $effect(() => {
+        const currentParsed = parsed;
+        DialStore.registerPanel(panelId, name, currentParsed.dialConfig, undefined, {
+            retainOnUnmount: hasStableId,
+            persist: options?.persist,
+            kind: 'timeline',
+        });
+        flatValues = DialStore.getValues(panelId);
+        const initialStatic = computeStaticTimeline(currentParsed, flatValues);
+        TimelineStore.register(buildTimelineMeta(panelId, name, initialStatic.duration, currentParsed, options?.loop), { autoplay: options?.autoplay ?? true });
+        transport = TimelineStore.getTransport(panelId);
+        const unsubscribeValues = DialStore.subscribe(panelId, () => {
+            flatValues = DialStore.getValues(panelId);
+        });
+        const unsubscribeTransport = TimelineStore.subscribe(panelId, () => {
+            transport = TimelineStore.getTransport(panelId);
+        });
+        return () => {
+            unsubscribeValues();
+            unsubscribeTransport();
+            TimelineStore.unregister(panelId);
+            DialStore.unregisterPanel(panelId);
+        };
+    });
+    $effect(() => {
+        TimelineStore.update(buildTimelineMeta(panelId, name, staticTimeline.duration, parsed, options?.loop));
+    });
+    return reactiveProxy(() => resolved);
+}
+function reactiveProxy(read, path = []) {
+    const nested = new Map();
+    return new Proxy({}, {
+        get(_target, key) {
+            const value = readPath(read(), [...path, key]);
+            if (typeof value !== 'object' || value === null)
+                return value;
+            if (!nested.has(key))
+                nested.set(key, reactiveProxy(read, [...path, key]));
+            return nested.get(key);
+        },
+        ownKeys() {
+            const value = readPath(read(), path);
+            return typeof value === 'object' && value !== null ? Reflect.ownKeys(value) : [];
+        },
+        getOwnPropertyDescriptor() {
+            return { enumerable: true, configurable: true };
+        },
+    });
+}
+function readPath(source, path) {
+    return path.reduce((value, key) => {
+        if (typeof value !== 'object' || value === null)
+            return undefined;
+        return Reflect.get(value, key);
+    }, source);
+}

package/dist/svelte/index.d.ts

@@ -1,5 +1,8 @@
 export { createDialKit, createDialKitController } from './createDialKit.svelte.js';
 export type { CreateDialOptions, DialKitController, DialKitValues } from './createDialKit.svelte.js';
+export { createDialTimeline } from './createDialTimeline.svelte.js';
+export type { CreateDialTimelineOptions } from './createDialTimeline.svelte.js';
+export type { DialTimelineValues, TimelineClipConfig, TimelineClipCss, TimelineClipLoop, TimelineClipValues, TimelineConfig, TimelineGroupConfig, TimelineGroupValues, TimelinePropConfig, TimelinePropStepConfig, TimelineStepConfig, TimelineStepValues, } from 'dialkit/timeline';
 export { default as DialRoot } from './components/DialRoot.svelte';
 export type { DialPosition, DialMode, DialTheme } from './components/DialRoot.svelte';
 export { default as ShortcutListener } from './components/ShortcutListener.svelte';
@@ -18,6 +21,7 @@ export { default as TextControl } from './components/TextControl.svelte';
 export { default as SelectControl } from './components/SelectControl.svelte';
 export { default as ColorControl } from './components/ColorControl.svelte';
 export { default as PresetManager } from './components/PresetManager.svelte';
+export { default as DialTimeline } from './components/Timeline/DialTimeline.svelte';
 export { DialStore } from 'dialkit/store';
 export type { SpringConfig, EasingConfig, TransitionConfig, ActionConfig, SelectConfig, ColorConfig, TextConfig, ShortcutConfig, Preset, DialValue, DialConfig, DialKitPersistOptions, DialKitValueUpdates, ResolvedValues, ControlMeta, PanelConfig, } from 'dialkit/store';
 //# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAGrG,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGtF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAG7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAG7E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,MAAM,EACN,SAAS,EACT,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACnB,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAGrG,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,YAAY,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGtF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAG7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,MAAM,EACN,SAAS,EACT,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACnB,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,eAAe,CAAC"}

package/dist/svelte/index.js

@@ -1,5 +1,7 @@
 // Core API
 export { createDialKit, createDialKitController } from './createDialKit.svelte.js';
+// Timeline
+export { createDialTimeline } from './createDialTimeline.svelte.js';
 // Root component
 export { default as DialRoot } from './components/DialRoot.svelte';
 // Shortcut components
@@ -19,5 +21,6 @@ export { default as TextControl } from './components/TextControl.svelte';
 export { default as SelectControl } from './components/SelectControl.svelte';
 export { default as ColorControl } from './components/ColorControl.svelte';
 export { default as PresetManager } from './components/PresetManager.svelte';
+export { default as DialTimeline } from './components/Timeline/DialTimeline.svelte';
 // Store exports (via dialkit/store subpath — svelte-package doesn't bundle, so relative paths to src/store would break in dist)
 export { DialStore } from 'dialkit/store';

package/dist/svelte/theme-css.d.ts

@@ -1,2 +1,2 @@
-export declare const themeCSS = "@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');\n\n/* Dialkit Theme - Dark glassmorphic design */\n.dialkit-root {\n  position: relative;\n\n  /* Surfaces */\n  --dial-surface: rgba(255, 255, 255, 0.05);\n  --dial-surface-hover: rgba(255, 255, 255, 0.1);\n  --dial-surface-active: rgba(255, 255, 255, 0.11);\n  --dial-surface-subtle: rgba(255, 255, 255, 0.06);\n\n  /* Text hierarchy - 3 levels */\n  --dial-text-root: #FFFFFF;   /* Root title */\n  --dial-text-section: rgba(255, 255, 255, 0.7); /* Section titles + carets */\n  --dial-text-label: rgba(255, 255, 255, 0.7);   /* Input labels */\n  --dial-text-focus: #ffffff;\n\n  /* Legacy aliases */\n  --dial-text-primary: rgba(255, 255, 255, 0.95);\n  --dial-text-secondary: rgba(255, 255, 255, 0.6);\n  --dial-text-tertiary: rgba(255, 255, 255, 0.4);\n\n  /* Borders */\n  --dial-border: rgba(255, 255, 255, 0.1);\n  --dial-border-hover: rgba(255, 255, 255, 0.15);\n\n  /* Glassmorphic panel */\n  --dial-glass-bg: #212121;\n  --dial-dropdown-bg: #2a2a2a;\n  --dial-backdrop-blur: 20px;\n  --dial-radius: 8px;\n  --dial-row-height: 36px;\n  --dial-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  --dial-shadow-collapsed: 0 4px 16px rgba(0, 0, 0, 0.25);\n  --dial-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);\n\n  /* Fonts */\n  font-family: system-ui, -apple-system, 'SF Pro Display', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.dialkit-panel {\n  position: fixed;\n  z-index: 9999;\n  max-height: calc(100vh - 32px);\n  overflow: visible;\n}\n\n/* Inline mode */\n.dialkit-root[data-mode=\"inline\"] {\n  max-height: 100%;\n}\n\n.dialkit-panel[data-mode=\"inline\"] {\n  position: static;\n  z-index: auto;\n  max-height: inherit;\n  height: auto;\n  overflow: visible;\n}\n\n.dialkit-panel-inner {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 10px 12px 0 12px;\n  transform: translateZ(0);\n  transform-origin: top right;\n}\n\n.dialkit-panel[data-origin-x=\"left\"] .dialkit-panel-inner {\n  transform-origin: top left;\n}\n\n.dialkit-panel[data-origin-x=\"right\"] .dialkit-panel-inner {\n  transform-origin: top right;\n}\n\n.dialkit-panel[data-position=\"top-left\"] .dialkit-panel-inner {\n  transform-origin: top left;\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n}\n\n\n.dialkit-panel-inner[data-collapsed=\"true\"] {\n  border-radius: 50%;\n  padding: 12px;\n  box-sizing: border-box;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-title-row {\n  display: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top {\n  justify-content: center;\n  padding: 0;\n}\n\n.dialkit-panel-inner::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-panel-inner {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.dialkit-panel-inline {\n  width: 100%;\n  height: auto;\n  max-height: inherit;\n  overflow-y: auto;\n  box-shadow: none;\n  border-radius: 0;\n  border: none;\n  box-sizing: border-box;\n}\n\n.dialkit-panel[data-mode=\"inline\"] .dialkit-panel-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: inherit;\n  height: auto;\n}\n\n/* Position variants */\n.dialkit-panel[data-position=\"top-right\"] {\n  top: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"top-left\"] {\n  top: 16px;\n  left: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-right\"] {\n  bottom: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-left\"] {\n  bottom: 16px;\n  left: 16px;\n}\n\n/* Folder */\n.dialkit-folder {\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-folder:last-child:not(.dialkit-folder-root) {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-folder-root {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-header {\n  padding-bottom: 6px;\n  margin-bottom: 12px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header {\n  cursor: grab;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header:active {\n  cursor: grabbing;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-icon {\n  cursor: pointer;\n}\n\n.dialkit-folder-header {\n  cursor: pointer;\n  user-select: none;\n}\n\n.dialkit-folder-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0 8px 0;\n}\n\n\n.dialkit-folder-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dial-text-section);\n  letter-spacing: -0.01em;\n  transform: translateY(-0.5px);\n  transition: color 0.15s;\n}\n\n.dialkit-folder-title-root {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-folder-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dialkit-folder-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.dialkit-folder-copy svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-section);\n}\n\n.dialkit-folder-icon {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n}\n\n.dialkit-panel-icon {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-focus);\n  z-index: 1;\n}\n\n.dialkit-folder-content {\n  will-change: transform;\n}\n\n.dialkit-folder-inner {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding-bottom: 10px;\n}\n\n/* Non-root folders - top & bottom HR dividers */\n.dialkit-folder:not(.dialkit-folder-root) {\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: 1px solid var(--dial-surface-subtle);\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-bottom: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root):last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n}\n\n/* Adjacent non-root folders collapse gap and share a single divider */\n.dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {\n  margin-top: -10px;\n  border-top: none;\n}\n\n/* Non-root folder header - match row height */\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header {\n  height: var(--dial-row-height);\n  padding: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header > .dialkit-folder-header-top {\n  padding: 0;\n  height: 100%;\n}\n\n/* Root folder inner needs no extra bottom padding */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-bottom: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) {\n  padding: 0 12px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) .dialkit-panel-icon {\n  top: 14px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header > .dialkit-folder-header-top,\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header > .dialkit-folder-header-top {\n  height: 44px;\n  padding: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header {\n  height: 44px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  gap: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder {\n  margin: 0;\n  padding-bottom: 0;\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: none;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header .dialkit-folder-title {\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 20px;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-title-root {\n  line-height: 20px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child {\n  border-top: none;\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder + .dialkit-folder {\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-top: 4px;\n  padding-bottom: 12px;\n}\n\n/* Content spacing handled by folder-inner gap */\n\n\n/* Slider */\n.dialkit-slider-wrapper {\n  position: relative;\n  height: var(--dial-row-height);\n}\n\n.dialkit-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  touch-action: none;\n}\n\n.dialkit-slider-hashmarks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.dialkit-slider-hashmark {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 8px;\n  border-radius: 999px;\n  transform: translateX(-50%) translateY(-50%);\n  background: rgba(255, 255, 255, 0);\n  transition: background 200ms;\n}\n\n.dialkit-slider-active .dialkit-slider-hashmark {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-active .dialkit-slider-value {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-slider-fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--dial-surface-active);\n  transition: background 0.15s;\n  pointer-events: none;\n}\n\n.dialkit-slider-active .dialkit-slider-fill {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-handle {\n  position: absolute;\n  top: 50%;\n  width: 3px;\n  height: 20px;\n  border-radius: 999px;\n  background: var(--dial-text-primary);\n  pointer-events: none;\n}\n\n.dialkit-slider-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% - 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  pointer-events: none;\n  transition: color 0.15s;\n  display: inline-flex;\n  align-items: center;\n}\n\n.dialkit-slider-value {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% + 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  pointer-events: auto;\n  transition: color 0.15s, border-color 0.15s;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 1px;\n}\n\n.dialkit-slider-value-editable {\n  border-bottom-color: var(--dial-text-label);\n}\n\n.dialkit-slider-input {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4ch;\n  min-width: 3ch;\n  max-width: 6ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--dial-text-label);\n  padding: 0 0 1px 0;\n  outline: none;\n  text-align: right;\n}\n\n.dialkit-slider-input:focus {\n  color: var(--dial-text-focus);\n}\n\n/* Segmented Control */\n.dialkit-segmented {\n  position: relative;\n  display: flex;\n  padding: 2px;\n  background: transparent;\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-segmented-pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  background: var(--dial-surface-active);\n  border-radius: 6px;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.dialkit-segmented-button {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s;\n}\n\n.dialkit-segmented-button[data-active=\"true\"] {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-segmented-button[data-active=\"false\"] {\n  color: var(--dial-text-label);\n}\n\n/* Toggle */\n.dialkit-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s;\n}\n\n.dialkit-toggle:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toggle-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transition: color 0.15s;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-label {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-toggle-track {\n  width: 36px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--dial-surface-active);\n  transition: background 0.2s;\n  position: relative;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-track {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--dial-text-primary);\n}\n\n/* Button Group */\n.dialkit-button-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-button {\n  flex: 1;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-button:active {\n  background: var(--dial-surface-active);\n}\n\n/* Labeled Control Row (label + control side by side) */\n.dialkit-labeled-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 2px 10px 2px 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-labeled-control-label {\n  display: flex;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  line-height: 17px;\n}\n\n.dialkit-labeled-control .dialkit-segmented {\n  flex-shrink: 0;\n  margin-right: -6px;\n}\n\n.dialkit-action-button {\n  width: 160px;\n  flex-shrink: 0;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-action-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-action-button:active {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-actions-group {\n  align-items: flex-start;\n}\n\n.dialkit-actions-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: 160px;\n}\n\n/* Spring Visualization */\n.dialkit-spring-viz {\n  width: 100%;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: visible;\n}\n\n.dialkit-easing-viz {\n  width: 100%;\n  aspect-ratio: 256 / 140;\n}\n\n/* Panel Wrapper (contains panel + toolbar) */\n.dialkit-panel-wrapper {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Panel Toolbar */\n.dialkit-panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  margin-bottom: 6px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-panel-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  height: var(--dial-row-height);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-toolbar-add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-add:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-add svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n.dialkit-toolbar-copy {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-copy:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-copy-icon-wrap {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.dialkit-toolbar-copy-icon {\n  position: absolute;\n  inset: 0;\n  width: 16px;\n  height: 16px;\n}\n\n/* Text Control */\n.dialkit-text-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-text-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n}\n\n.dialkit-text-input {\n  flex: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-align: right;\n  cursor: text;\n}\n\n.dialkit-text-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-text-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n/* Select Control - Full-width row */\n.dialkit-select-row {\n}\n\n.dialkit-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-select-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-select-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-select-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-select-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transform: translateY(-0.5px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-select-chevron {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  opacity: 0.6;\n}\n\n/* Select Dropdown (portaled to body) */\n.dialkit-select-dropdown {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: var(--dial-radius);\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-select-option {\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-select-option:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-option[data-selected=\"true\"] {\n  color: var(--dial-text-primary);\n  background: var(--dial-surface-active);\n}\n\n/* Color Control */\n.dialkit-color-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-color-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-inputs {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-color-hex {\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  cursor: text;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input {\n  width: 7ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-transform: uppercase;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-color-swatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 1px solid var(--dial-border-hover);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n\n.dialkit-color-swatch:hover {\n  transform: scale(1.1);\n}\n\n.dialkit-color-picker-native {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Preset Manager */\n.dialkit-preset-manager {\n  position: relative;\n  flex: 1;\n}\n\n.dialkit-preset-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"] {\n  cursor: default;\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"]:hover {\n  background: var(--dial-surface);\n}\n\n.dialkit-preset-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.dialkit-preset-dropdown {\n  width: max-content;\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-preset-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-preset-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px 8px 10px;\n  gap: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-item:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-item[data-active=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-preset-item[data-active=\"true\"] .dialkit-preset-name {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-delete {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n}\n\n.dialkit-preset-item:hover .dialkit-preset-delete {\n  opacity: 0.6;\n}\n\n.dialkit-preset-delete:hover {\n  opacity: 1 !important;\n}\n\n.dialkit-preset-delete svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-focus);\n  pointer-events: none;\n}\n\n.dialkit-preset-save-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-preset-save-btn:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-save-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n.dialkit-preset-save-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px;\n}\n\n.dialkit-preset-input {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--dial-text-primary);\n  background: var(--dial-surface);\n  border: 1px solid var(--dial-border);\n  border-radius: 6px;\n  outline: none;\n}\n\n.dialkit-preset-input:focus {\n  border-color: var(--dial-text-label);\n}\n\n.dialkit-preset-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-preset-confirm {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-confirm:hover:not(:disabled) {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-confirm:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.dialkit-preset-confirm svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcut Pill */\n.dialkit-shortcut-pill {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, -apple-system, sans-serif;\n  color: var(--dial-text-tertiary);\n  background: var(--dial-surface-subtle);\n  padding: 1px 5px;\n  border-radius: 4px;\n  margin-left: 6px;\n  letter-spacing: 0.02em;\n  line-height: 16px;\n  white-space: nowrap;\n  vertical-align: middle;\n  transition: color 0.15s, background 0.15s;\n}\n\n.dialkit-shortcut-pill-active {\n  color: var(--dial-text-primary);\n  background: var(--dial-border-hover);\n}\n\n/* Shortcuts Menu Trigger */\n.dialkit-shortcuts-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-shortcuts-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-shortcuts-trigger svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcuts Dropdown */\n.dialkit-shortcuts-dropdown {\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 8px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n  min-width: 200px;\n}\n\n.dialkit-shortcuts-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--dial-text-tertiary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 4px 8px 8px;\n}\n\n.dialkit-shortcuts-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.dialkit-shortcuts-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 8px;\n  border-radius: 6px;\n}\n\n.dialkit-shortcuts-row-key {\n  font-size: 11px;\n  font-weight: 600;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  min-width: 28px;\n  text-align: center;\n}\n\n.dialkit-shortcuts-row-label {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n}\n\n.dialkit-shortcuts-row-mode {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--dial-text-tertiary);\n  font-style: italic;\n}\n\n.dialkit-shortcuts-hint {\n  font-size: 11px;\n  color: var(--dial-text-tertiary);\n  padding: 6px 8px 2px;\n  border-top: 1px solid var(--dial-border);\n  margin-top: 4px;\n}\n\n/* \u2500\u2500 Light Theme \u2500\u2500 */\n.dialkit-root[data-theme=\"light\"] {\n  --dial-surface: rgba(0, 0, 0, 0.04);\n  --dial-surface-hover: rgba(0, 0, 0, 0.08);\n  --dial-surface-active: rgba(0, 0, 0, 0.1);\n  --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n  --dial-text-root: #000000;\n  --dial-text-section: rgba(0, 0, 0, 0.65);\n  --dial-text-label: rgba(0, 0, 0, 0.6);\n  --dial-text-focus: #000000;\n\n  --dial-text-primary: rgba(0, 0, 0, 0.9);\n  --dial-text-secondary: rgba(0, 0, 0, 0.55);\n  --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n  --dial-border: rgba(0, 0, 0, 0.1);\n  --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n  --dial-glass-bg: #fafafa;\n  --dial-dropdown-bg: #ffffff;\n  --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n  --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\n/* Light mode: SVG visualization overrides */\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line {\n  stroke: rgba(0, 0, 0, 0.08);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line[stroke-dasharray] {\n  stroke: rgba(0, 0, 0, 0.15);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz path {\n  stroke: rgba(0, 0, 0, 0.5);\n}\n\n/* Light mode: toggle thumb needs shadow for definition */\n.dialkit-root[data-theme=\"light\"] .dialkit-toggle-thumb {\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* \u2500\u2500 System preference: light \u2500\u2500 */\n@media (prefers-color-scheme: light) {\n  .dialkit-root[data-theme=\"system\"] {\n    --dial-surface: rgba(0, 0, 0, 0.04);\n    --dial-surface-hover: rgba(0, 0, 0, 0.08);\n    --dial-surface-active: rgba(0, 0, 0, 0.1);\n    --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n    --dial-text-root: #000000;\n    --dial-text-section: rgba(0, 0, 0, 0.65);\n    --dial-text-label: rgba(0, 0, 0, 0.6);\n    --dial-text-focus: #000000;\n\n    --dial-text-primary: rgba(0, 0, 0, 0.9);\n    --dial-text-secondary: rgba(0, 0, 0, 0.55);\n    --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n    --dial-border: rgba(0, 0, 0, 0.1);\n    --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n    --dial-glass-bg: #fafafa;\n    --dial-dropdown-bg: #ffffff;\n    --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n    --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n    --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line {\n    stroke: rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line[stroke-dasharray] {\n    stroke: rgba(0, 0, 0, 0.15);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz path {\n    stroke: rgba(0, 0, 0, 0.5);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-toggle-thumb {\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n  }\n\n}\n";
+export declare const themeCSS = "@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');\n\n/* Dialkit Theme - Dark glassmorphic design */\n.dialkit-root {\n  position: relative;\n\n  /* Surfaces */\n  --dial-surface: rgba(255, 255, 255, 0.05);\n  --dial-surface-hover: rgba(255, 255, 255, 0.1);\n  --dial-surface-active: rgba(255, 255, 255, 0.11);\n  --dial-surface-subtle: rgba(255, 255, 255, 0.06);\n\n  /* Text hierarchy - 3 levels */\n  --dial-text-root: #FFFFFF;   /* Root title */\n  --dial-text-section: rgba(255, 255, 255, 0.7); /* Section titles + carets */\n  --dial-text-label: rgba(255, 255, 255, 0.7);   /* Input labels */\n  --dial-text-focus: #ffffff;\n\n  /* Legacy aliases */\n  --dial-text-primary: rgba(255, 255, 255, 0.95);\n  --dial-text-secondary: rgba(255, 255, 255, 0.6);\n  --dial-text-tertiary: rgba(255, 255, 255, 0.4);\n\n  /* Borders */\n  --dial-border: rgba(255, 255, 255, 0.1);\n  --dial-border-hover: rgba(255, 255, 255, 0.15);\n\n  /* Glassmorphic panel */\n  --dial-glass-bg: #212121;\n  --dial-dropdown-bg: #2a2a2a;\n  --dial-backdrop-blur: 20px;\n  --dial-radius: 8px;\n  --dial-row-height: 36px;\n  --dial-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  --dial-shadow-collapsed: 0 4px 16px rgba(0, 0, 0, 0.25);\n  --dial-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);\n\n  /* Fonts */\n  font-family: system-ui, -apple-system, 'SF Pro Display', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.dialkit-panel {\n  position: fixed;\n  z-index: 9999;\n  max-height: calc(100vh - 32px);\n  overflow: visible;\n}\n\n/* Inline mode */\n.dialkit-root[data-mode=\"inline\"] {\n  max-height: 100%;\n}\n\n.dialkit-panel[data-mode=\"inline\"] {\n  position: static;\n  z-index: auto;\n  max-height: inherit;\n  height: auto;\n  overflow: visible;\n}\n\n.dialkit-panel-inner {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 10px 12px 0 12px;\n  transform: translateZ(0);\n  transform-origin: top right;\n}\n\n.dialkit-panel[data-origin-x=\"left\"] .dialkit-panel-inner {\n  transform-origin: top left;\n}\n\n.dialkit-panel[data-origin-x=\"right\"] .dialkit-panel-inner {\n  transform-origin: top right;\n}\n\n.dialkit-panel[data-position=\"top-left\"] .dialkit-panel-inner {\n  transform-origin: top left;\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n}\n\n\n.dialkit-panel-inner[data-collapsed=\"true\"] {\n  border-radius: 50%;\n  padding: 12px;\n  box-sizing: border-box;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-title-row {\n  display: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top {\n  justify-content: center;\n  padding: 0;\n}\n\n.dialkit-panel-inner::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-panel-inner {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.dialkit-panel-inline {\n  width: 100%;\n  height: auto;\n  max-height: inherit;\n  overflow-y: auto;\n  box-shadow: none;\n  border-radius: 0;\n  border: none;\n  box-sizing: border-box;\n}\n\n.dialkit-panel[data-mode=\"inline\"] .dialkit-panel-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: inherit;\n  height: auto;\n}\n\n/* Position variants */\n.dialkit-panel[data-position=\"top-right\"] {\n  top: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"top-left\"] {\n  top: 16px;\n  left: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-right\"] {\n  bottom: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-left\"] {\n  bottom: 16px;\n  left: 16px;\n}\n\n/* Folder */\n.dialkit-folder {\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-folder:last-child:not(.dialkit-folder-root) {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-folder-root {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-header {\n  padding-bottom: 6px;\n  margin-bottom: 12px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header {\n  cursor: grab;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header:active {\n  cursor: grabbing;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-icon {\n  cursor: pointer;\n}\n\n.dialkit-folder-header {\n  cursor: pointer;\n  user-select: none;\n}\n\n.dialkit-folder-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0 8px 0;\n}\n\n\n.dialkit-folder-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dial-text-section);\n  letter-spacing: -0.01em;\n  transform: translateY(-0.5px);\n  transition: color 0.15s;\n}\n\n.dialkit-folder-title-root {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-folder-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dialkit-folder-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.dialkit-folder-copy svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-section);\n}\n\n.dialkit-folder-icon {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n}\n\n.dialkit-panel-icon {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-focus);\n  z-index: 1;\n}\n\n.dialkit-folder-content {\n  will-change: transform;\n}\n\n.dialkit-folder-inner {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding-bottom: 10px;\n}\n\n/* Non-root folders - top & bottom HR dividers */\n.dialkit-folder:not(.dialkit-folder-root) {\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: 1px solid var(--dial-surface-subtle);\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-bottom: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root):last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n}\n\n/* Adjacent non-root folders collapse gap and share a single divider */\n.dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {\n  margin-top: -10px;\n  border-top: none;\n}\n\n/* Non-root folder header - match row height */\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header {\n  height: var(--dial-row-height);\n  padding: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header > .dialkit-folder-header-top {\n  padding: 0;\n  height: 100%;\n}\n\n/* Root folder inner needs no extra bottom padding */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-bottom: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) {\n  padding: 0 12px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) .dialkit-panel-icon {\n  top: 14px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header > .dialkit-folder-header-top,\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header > .dialkit-folder-header-top {\n  height: 44px;\n  padding: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header {\n  height: 44px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  gap: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder {\n  margin: 0;\n  padding-bottom: 0;\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: none;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header .dialkit-folder-title {\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 20px;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-title-root {\n  line-height: 20px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child {\n  border-top: none;\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder + .dialkit-folder {\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-top: 4px;\n  padding-bottom: 12px;\n}\n\n/* Content spacing handled by folder-inner gap */\n\n\n/* Slider */\n.dialkit-slider-wrapper {\n  position: relative;\n  height: var(--dial-row-height);\n}\n\n.dialkit-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  touch-action: none;\n}\n\n.dialkit-slider-hashmarks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.dialkit-slider-hashmark {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 8px;\n  border-radius: 999px;\n  transform: translateX(-50%) translateY(-50%);\n  background: rgba(255, 255, 255, 0);\n  transition: background 200ms;\n}\n\n.dialkit-slider-active .dialkit-slider-hashmark {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-active .dialkit-slider-value {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-slider-fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--dial-surface-active);\n  transition: background 0.15s;\n  pointer-events: none;\n}\n\n.dialkit-slider-active .dialkit-slider-fill {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-handle {\n  position: absolute;\n  top: 50%;\n  width: 3px;\n  height: 20px;\n  border-radius: 999px;\n  background: var(--dial-text-primary);\n  pointer-events: none;\n}\n\n.dialkit-slider-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% - 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  pointer-events: none;\n  transition: color 0.15s;\n  display: inline-flex;\n  align-items: center;\n}\n\n.dialkit-slider-value {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% + 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  pointer-events: auto;\n  transition: color 0.15s, border-color 0.15s;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 1px;\n}\n\n.dialkit-slider-value-editable {\n  border-bottom-color: var(--dial-text-label);\n}\n\n.dialkit-slider-input {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4ch;\n  min-width: 3ch;\n  max-width: 6ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--dial-text-label);\n  padding: 0 0 1px 0;\n  outline: none;\n  text-align: right;\n}\n\n.dialkit-slider-input:focus {\n  color: var(--dial-text-focus);\n}\n\n/* Segmented Control */\n.dialkit-segmented {\n  position: relative;\n  display: flex;\n  padding: 2px;\n  background: transparent;\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-segmented-pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  background: var(--dial-surface-active);\n  border-radius: 6px;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.dialkit-segmented-button {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s;\n}\n\n.dialkit-segmented-button[data-active=\"true\"] {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-segmented-button[data-active=\"false\"] {\n  color: var(--dial-text-label);\n}\n\n/* Toggle */\n.dialkit-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s;\n}\n\n.dialkit-toggle:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toggle-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transition: color 0.15s;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-label {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-toggle-track {\n  width: 36px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--dial-surface-active);\n  transition: background 0.2s;\n  position: relative;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-track {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--dial-text-primary);\n}\n\n/* Button Group */\n.dialkit-button-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-button {\n  flex: 1;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-button:active {\n  background: var(--dial-surface-active);\n}\n\n/* Labeled Control Row (label + control side by side) */\n.dialkit-labeled-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 2px 10px 2px 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-labeled-control-label {\n  display: flex;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  line-height: 17px;\n}\n\n.dialkit-labeled-control .dialkit-segmented {\n  flex-shrink: 0;\n  margin-right: -6px;\n}\n\n.dialkit-action-button {\n  width: 160px;\n  flex-shrink: 0;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-action-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-action-button:active {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-actions-group {\n  align-items: flex-start;\n}\n\n.dialkit-actions-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: 160px;\n}\n\n/* Spring Visualization */\n.dialkit-spring-viz {\n  width: 100%;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: visible;\n}\n\n.dialkit-easing-viz {\n  width: 100%;\n  aspect-ratio: 256 / 140;\n}\n\n/* Panel Wrapper (contains panel + toolbar) */\n.dialkit-panel-wrapper {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Panel Toolbar */\n.dialkit-panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  margin-bottom: 6px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-panel-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  height: var(--dial-row-height);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-toolbar-add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-add:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-timeline-toolbar-toggle[data-active] {\n  background: var(--dial-surface-active);\n  color: var(--dial-text-root);\n}\n\n.dialkit-toolbar-add svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n.dialkit-timeline-toolkit-only {\n  height: var(--dial-row-height);\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface-subtle);\n  color: var(--dial-text-secondary);\n  font-size: 12px;\n}\n\n.dialkit-toolbar-copy {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-copy:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-copy-icon-wrap {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.dialkit-toolbar-copy-icon {\n  position: absolute;\n  inset: 0;\n  width: 16px;\n  height: 16px;\n}\n\n/* Text Control */\n.dialkit-text-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-text-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n}\n\n.dialkit-text-input {\n  flex: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-align: right;\n  cursor: text;\n}\n\n.dialkit-text-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-text-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n/* Select Control - Full-width row */\n.dialkit-select-row {\n}\n\n.dialkit-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-select-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-select-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-select-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-select-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transform: translateY(-0.5px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-select-chevron {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  opacity: 0.6;\n}\n\n/* Select Dropdown (portaled to body) */\n.dialkit-select-dropdown {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: var(--dial-radius);\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-select-option {\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-select-option:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-option[data-selected=\"true\"] {\n  color: var(--dial-text-primary);\n  background: var(--dial-surface-active);\n}\n\n/* Color Control */\n.dialkit-color-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-color-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-inputs {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-color-hex {\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  cursor: text;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input {\n  width: 7ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-transform: uppercase;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-color-swatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 1px solid var(--dial-border-hover);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n\n.dialkit-color-swatch:hover {\n  transform: scale(1.1);\n}\n\n.dialkit-color-picker-native {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Preset Manager */\n.dialkit-preset-manager {\n  position: relative;\n  flex: 1;\n}\n\n.dialkit-preset-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"] {\n  cursor: default;\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"]:hover {\n  background: var(--dial-surface);\n}\n\n.dialkit-preset-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.dialkit-preset-dropdown {\n  width: max-content;\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-preset-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-preset-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px 8px 10px;\n  gap: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-item:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-item[data-active=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-preset-item[data-active=\"true\"] .dialkit-preset-name {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-delete {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n}\n\n.dialkit-preset-item:hover .dialkit-preset-delete {\n  opacity: 0.6;\n}\n\n.dialkit-preset-delete:hover {\n  opacity: 1 !important;\n}\n\n.dialkit-preset-delete svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-focus);\n  pointer-events: none;\n}\n\n.dialkit-preset-save-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-preset-save-btn:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-save-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n.dialkit-preset-save-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px;\n}\n\n.dialkit-preset-input {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--dial-text-primary);\n  background: var(--dial-surface);\n  border: 1px solid var(--dial-border);\n  border-radius: 6px;\n  outline: none;\n}\n\n.dialkit-preset-input:focus {\n  border-color: var(--dial-text-label);\n}\n\n.dialkit-preset-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-preset-confirm {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-confirm:hover:not(:disabled) {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-confirm:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.dialkit-preset-confirm svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcut Pill */\n.dialkit-shortcut-pill {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, -apple-system, sans-serif;\n  color: var(--dial-text-tertiary);\n  background: var(--dial-surface-subtle);\n  padding: 1px 5px;\n  border-radius: 4px;\n  margin-left: 6px;\n  letter-spacing: 0.02em;\n  line-height: 16px;\n  white-space: nowrap;\n  vertical-align: middle;\n  transition: color 0.15s, background 0.15s;\n}\n\n.dialkit-shortcut-pill-active {\n  color: var(--dial-text-primary);\n  background: var(--dial-border-hover);\n}\n\n/* Shortcuts Menu Trigger */\n.dialkit-shortcuts-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-shortcuts-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-shortcuts-trigger svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcuts Dropdown */\n.dialkit-shortcuts-dropdown {\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 8px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n  min-width: 200px;\n}\n\n.dialkit-shortcuts-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--dial-text-tertiary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 4px 8px 8px;\n}\n\n.dialkit-shortcuts-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.dialkit-shortcuts-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 8px;\n  border-radius: 6px;\n}\n\n.dialkit-shortcuts-row-key {\n  font-size: 11px;\n  font-weight: 600;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  min-width: 28px;\n  text-align: center;\n}\n\n.dialkit-shortcuts-row-label {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n}\n\n.dialkit-shortcuts-row-mode {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--dial-text-tertiary);\n  font-style: italic;\n}\n\n.dialkit-shortcuts-hint {\n  font-size: 11px;\n  color: var(--dial-text-tertiary);\n  padding: 6px 8px 2px;\n  border-top: 1px solid var(--dial-border);\n  margin-top: 4px;\n}\n\n/* \u2500\u2500 Light Theme \u2500\u2500 */\n.dialkit-root[data-theme=\"light\"] {\n  --dial-surface: rgba(0, 0, 0, 0.04);\n  --dial-surface-hover: rgba(0, 0, 0, 0.08);\n  --dial-surface-active: rgba(0, 0, 0, 0.1);\n  --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n  --dial-text-root: #000000;\n  --dial-text-section: rgba(0, 0, 0, 0.65);\n  --dial-text-label: rgba(0, 0, 0, 0.6);\n  --dial-text-focus: #000000;\n\n  --dial-text-primary: rgba(0, 0, 0, 0.9);\n  --dial-text-secondary: rgba(0, 0, 0, 0.55);\n  --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n  --dial-border: rgba(0, 0, 0, 0.1);\n  --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n  --dial-glass-bg: #fafafa;\n  --dial-dropdown-bg: #ffffff;\n  --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n  --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\n/* Light mode: SVG visualization overrides */\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line {\n  stroke: rgba(0, 0, 0, 0.08);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line[stroke-dasharray] {\n  stroke: rgba(0, 0, 0, 0.15);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz path {\n  stroke: rgba(0, 0, 0, 0.5);\n}\n\n/* Light mode: toggle thumb needs shadow for definition */\n.dialkit-root[data-theme=\"light\"] .dialkit-toggle-thumb {\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* \u2500\u2500 System preference: light \u2500\u2500 */\n@media (prefers-color-scheme: light) {\n  .dialkit-root[data-theme=\"system\"] {\n    --dial-surface: rgba(0, 0, 0, 0.04);\n    --dial-surface-hover: rgba(0, 0, 0, 0.08);\n    --dial-surface-active: rgba(0, 0, 0, 0.1);\n    --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n    --dial-text-root: #000000;\n    --dial-text-section: rgba(0, 0, 0, 0.65);\n    --dial-text-label: rgba(0, 0, 0, 0.6);\n    --dial-text-focus: #000000;\n\n    --dial-text-primary: rgba(0, 0, 0, 0.9);\n    --dial-text-secondary: rgba(0, 0, 0, 0.55);\n    --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n    --dial-border: rgba(0, 0, 0, 0.1);\n    --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n    --dial-glass-bg: #fafafa;\n    --dial-dropdown-bg: #ffffff;\n    --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n    --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n    --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line {\n    stroke: rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line[stroke-dasharray] {\n    stroke: rgba(0, 0, 0, 0.15);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz path {\n    stroke: rgba(0, 0, 0, 0.5);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-toggle-thumb {\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n  }\n\n}\n\n/* \u2500\u2500 Timeline dock \u2500\u2500 */\n.dialkit-timeline {\n  position: fixed;\n  left: 12px;\n  right: 12px;\n  bottom: 12px;\n  z-index: 9998;\n}\n\n.dialkit-timeline[hidden] {\n  display: none;\n}\n\n.dialkit-timeline-dock {\n  position: relative;\n  box-sizing: border-box;\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 0 12px 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-text-tertiary) transparent;\n}\n\n.dialkit-timeline-resize-handle {\n  position: absolute;\n  top: -4px;\n  left: 0;\n  right: 0;\n  z-index: 9;\n  height: 10px;\n  cursor: ns-resize;\n  touch-action: none;\n}\n\n.dialkit-timeline-dock::-webkit-scrollbar {\n  width: 8px;\n}\n\n.dialkit-timeline-dock::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.dialkit-timeline-dock::-webkit-scrollbar-thumb {\n  border-radius: 999px;\n  background: var(--dial-text-tertiary);\n}\n\n.dialkit-timeline-section {\n  --dial-timeline-label-w: 96px;\n  --dial-timeline-actions-w: 284px;\n  --dial-timeline-header-h: calc(var(--dial-row-height) + 4px);\n}\n\n.dialkit-timeline-section + .dialkit-timeline-section {\n  border-top: 1px solid var(--dial-border);\n  padding-top: 10px;\n}\n\n.dialkit-timeline-header {\n  display: grid;\n  grid-template-columns: auto minmax(100px, 1fr) auto;\n  align-items: center;\n  gap: 12px;\n  position: sticky;\n  top: 0;\n  z-index: 7;\n  box-sizing: border-box;\n  height: var(--dial-timeline-header-h);\n  padding: 4px 0 0;\n  margin: 0;\n  background: var(--dial-glass-bg);\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n}\n\n.dialkit-timeline-header[data-open] {\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 12px;\n}\n\n.dialkit-timeline-header:not([data-open]) {\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr) auto;\n  gap: 0;\n}\n\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-identity {\n  width: var(--dial-timeline-label-w);\n  box-sizing: border-box;\n  padding-right: 10px;\n  overflow: hidden;\n}\n\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-overview {\n  margin-right: 12px;\n}\n\n.dialkit-timeline-identity {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialkit-timeline-title {\n  display: block;\n  min-width: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n}\n\n.dialkit-timeline-header[data-open] .dialkit-timeline-identity {\n  width: 100%;\n  overflow: hidden;\n}\n\n.dialkit-timeline-header[data-open] .dialkit-timeline-title {\n  display: inline-block;\n  flex: 0 1 auto;\n  width: fit-content;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialkit-timeline-time {\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 13px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  color: var(--dial-text-label);\n  white-space: nowrap;\n}\n\n.dialkit-timeline-overview {\n  position: relative;\n  min-width: 60px;\n  height: 12px;\n  border-radius: 999px;\n  background: var(--dial-surface-subtle);\n  overflow: hidden;\n  cursor: col-resize;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-overview-viewport {\n  position: absolute;\n  inset-block: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.dialkit-timeline-overview-viewport[data-zoomed] {\n  background: color-mix(in srgb, var(--dial-text-tertiary) 18%, transparent);\n  box-shadow: inset 0 0 0 1px var(--dial-border);\n}\n\n.dialkit-timeline-overview-progress {\n  position: absolute;\n  inset: 0 auto 0 0;\n  border-radius: 999px 0 0 999px;\n  background: var(--dial-text-tertiary);\n  opacity: 0.35;\n  pointer-events: none;\n}\n\n.dialkit-timeline-overview-playhead {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  border-radius: 2px;\n  background: var(--dial-text-root);\n  transform: translateX(-1px);\n  pointer-events: none;\n}\n\n.dialkit-timeline-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.dialkit-timeline-header[data-open] .dialkit-timeline-actions {\n  width: auto;\n  box-sizing: border-box;\n  justify-content: flex-end;\n  padding-left: 0;\n}\n\n.dialkit-timeline-actions .dialkit-preset-manager {\n  flex: 0 0 120px;\n  width: 120px;\n}\n\n.dialkit-timeline-chevron {\n  background: none;\n  border: none;\n  width: 20px;\n  height: var(--dial-row-height);\n  padding: 2px;\n  cursor: pointer;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s;\n}\n\n.dialkit-timeline-chevron:hover {\n  opacity: 1;\n}\n\n.dialkit-timeline-chevron svg {\n  width: 16px;\n  height: 16px;\n  transition: transform 0.18s ease;\n}\n\n.dialkit-timeline-chevron[data-open=\"true\"] svg {\n  transform: rotate(180deg);\n}\n\n.dialkit-timeline-body {\n  margin-top: 0;\n  overflow: visible;\n}\n\n.dialkit-timeline-scroll-row {\n  position: sticky;\n  bottom: -10px;\n  z-index: 6;\n  display: grid;\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);\n  margin-top: 6px;\n  margin-bottom: -10px;\n  padding: 4px 0 10px;\n  background: var(--dial-glass-bg);\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n}\n\n.dialkit-timeline-horizontal-scroll {\n  min-width: 0;\n  height: 10px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-text-tertiary) transparent;\n  overscroll-behavior-x: contain;\n}\n\n.dialkit-timeline-horizontal-scroll > div {\n  height: 1px;\n}\n\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar {\n  height: 8px;\n}\n\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-thumb {\n  border-radius: 999px;\n  background: var(--dial-text-tertiary);\n}\n\n.dialkit-timeline-grid {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-timeline-row {\n  display: grid;\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);\n  align-items: stretch;\n}\n\n.dialkit-timeline-label {\n  flex: 0 0 var(--dial-timeline-label-w);\n  box-sizing: border-box; /* indent padding must not widen the column \u2014 every lane starts at the same x */\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-ruler {\n  position: relative;\n  min-width: 0;\n  height: 28px;\n  cursor: col-resize;\n  touch-action: none;\n  overflow: visible;\n  user-select: none;\n  -webkit-user-select: none;\n  z-index: 5;\n}\n\n.dialkit-timeline-ruler-row {\n  position: sticky;\n  top: var(--dial-timeline-header-h);\n  z-index: 6;\n  height: 28px;\n  background: var(--dial-glass-bg);\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n}\n\n.dialkit-timeline-tick {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 100%;\n  background: var(--dial-text-tertiary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n.dialkit-timeline-tick-medium {\n  height: 16px;\n  background: var(--dial-border-hover);\n}\n\n.dialkit-timeline-tick-fine {\n  height: 8px;\n  background: var(--dial-border);\n}\n\n.dialkit-timeline-tick-label {\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  display: flex;\n  align-items: center;\n  height: 18px;\n  transform: translateY(-50%);\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 9.5px;\n  line-height: 18px;\n  font-variant-numeric: tabular-nums;\n  color: var(--dial-text-tertiary);\n  white-space: nowrap;\n}\n\n.dialkit-timeline-row {\n  height: 28px;\n}\n\n/* \u2500\u2500 Layer groups \u2500\u2500 */\n\n.dialkit-timeline-group-row {\n  height: 22px;\n}\n\n.dialkit-timeline-group-row .dialkit-timeline-label {\n  gap: 4px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n}\n\n.dialkit-timeline-group-row .dialkit-timeline-lane {\n  background: none;\n}\n\n.dialkit-timeline-group-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  margin-left: -2px;\n  cursor: pointer;\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-timeline-group-toggle svg {\n  width: 10px;\n  height: 10px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s ease;\n}\n\n.dialkit-timeline-group-toggle[data-open=\"true\"] svg {\n  transform: rotate(0deg);\n}\n\n.dialkit-timeline-row[data-grouped] .dialkit-timeline-label {\n  padding-left: 14px;\n}\n\n.dialkit-timeline-lane {\n  position: relative;\n  flex: 1;\n  background: var(--dial-surface-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.dialkit-timeline-clip {\n  position: absolute;\n  top: 3px;\n  bottom: 3px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0 9px;\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n  box-sizing: border-box;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.dialkit-timeline-clip-ghost {\n  position: absolute;\n  top: 4px;\n  bottom: 4px;\n  display: flex;\n  border-radius: 5px;\n  box-sizing: border-box;\n  overflow: hidden;\n  opacity: 0.18;\n  pointer-events: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-clip-ghost-segment {\n  height: 100%;\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.dialkit-timeline-clip-ghost-segment + .dialkit-timeline-clip-ghost-segment {\n  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.5);\n}\n\n.dialkit-timeline-loop-infinity {\n  position: absolute;\n  top: 50%;\n  right: 7px;\n  z-index: 2;\n  color: var(--dial-text-tertiary);\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1;\n  transform: translateY(-50%);\n  pointer-events: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-clip[data-dragging] {\n  cursor: grabbing;\n}\n\n.dialkit-timeline-clip[data-selected] {\n  box-shadow: 0 0 0 2px var(--dial-text-root);\n}\n\n.dialkit-timeline-clip-duration {\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 9.5px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(0, 0, 0, 0.55);\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Sequence segments \u2500\u2500\n   A steps clip is one bar sliced into legs; boundaries between legs are\n   drag handles that retime the leg to their left. */\n\n.dialkit-timeline-clip[data-steps] {\n  padding: 0;\n  justify-content: flex-start;\n}\n\n.dialkit-timeline-clip-segment {\n  position: relative;\n  height: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0 8px;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialkit-timeline-clip-segment + .dialkit-timeline-clip-segment {\n  box-shadow: inset 1.5px 0 0 rgba(0, 0, 0, 0.25);\n}\n\n.dialkit-timeline-clip-segment:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.dialkit-timeline-clip-segment[data-selected] {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n/* \u2500\u2500 Property tracks \u2500\u2500\n   A props clip's row is a read-only composite \u2014 click to expand. Each\n   property expands into a full track row: a complete clip bar whose\n   position is the track's delay. */\n\n.dialkit-timeline-clip[data-composite] {\n  cursor: pointer;\n}\n\n.dialkit-timeline-track-row .dialkit-timeline-label {\n  font-size: 13px;\n  color: var(--dial-text-tertiary);\n  padding-left: 26px;\n}\n\n.dialkit-timeline-track-row[data-grouped] .dialkit-timeline-label {\n  padding-left: 32px;\n}\n\n.dialkit-timeline-clip-handle {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 8px;\n  cursor: ew-resize;\n}\n\n.dialkit-timeline-clip-handle[data-edge=\"start\"] {\n  left: 0;\n}\n\n.dialkit-timeline-clip-handle[data-edge=\"end\"] {\n  right: 0;\n}\n\n.dialkit-timeline-playhead-control {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 12px;\n  margin-left: -6px;\n  cursor: ew-resize;\n  touch-action: none;\n}\n\n.dialkit-timeline-playhead-anchor {\n  position: sticky;\n  top: calc(var(--dial-timeline-header-h) + 14px);\n  z-index: 8;\n  width: 0;\n  height: 0;\n  margin-left: 6px;\n}\n\n.dialkit-timeline-playhead-anchor::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -0.75px;\n  width: 1.5px;\n  height: 14px;\n  border-radius: 1px;\n  background: var(--dial-text-root);\n  pointer-events: none;\n}\n\n.dialkit-timeline-playhead-flag {\n  position: absolute;\n  top: 0;\n  left: calc(var(--dial-timeline-playhead-flag-offset, 0px) - 26px);\n  z-index: 1;\n  width: 52px;\n  height: 18px;\n  padding: 0 7px;\n  box-sizing: border-box;\n  border: 1px solid rgba(255, 255, 255, 0.75);\n  border-radius: 6px;\n  background: #f3f3f3;\n  color: #414141;\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 9.5px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum' 1;\n  line-height: 16px;\n  text-align: center;\n  white-space: nowrap;\n  transform: translateY(-50%);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n  transition: top 0.12s ease;\n}\n\n.dialkit-timeline-playhead-stem {\n  position: absolute;\n  top: 28px;\n  bottom: 0;\n  left: 5.25px;\n  z-index: 5;\n  width: 1.5px;\n  border-radius: 1px;\n  background: var(--dial-text-root);\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Timeline clip popover \u2500\u2500 */\n.dialkit-timeline-popover {\n  position: fixed;\n  z-index: 10000;\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  box-shadow: var(--dial-shadow);\n  padding: 10px 12px;\n  box-sizing: border-box;\n  max-height: 60vh;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.dialkit-timeline-popover::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-timeline-popover-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 2px 2px 8px;\n  margin-bottom: 6px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-timeline-popover-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  letter-spacing: -0.01em;\n}\n\n.dialkit-timeline-popover-close {\n  width: 24px;\n  height: 24px;\n  margin-left: auto;\n  padding: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 6px;\n  background: none;\n  color: var(--dial-text-tertiary);\n  cursor: pointer;\n}\n\n.dialkit-timeline-popover-close:hover {\n  color: var(--dial-text-root);\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-timeline-popover-close svg {\n  width: 14px;\n  height: 14px;\n}\n\n.dialkit-timeline-popover-body {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-timeline-popover-body > .dialkit-folder:first-child {\n  margin-top: 0;\n  border-top: none;\n}\n\n@media (max-width: 720px) {\n  .dialkit-timeline-dock {\n    padding: 0 10px 10px;\n  }\n\n  .dialkit-timeline-header {\n    grid-template-columns: auto minmax(40px, 1fr) auto;\n    gap: 8px;\n  }\n\n  .dialkit-timeline-section {\n    --dial-timeline-label-w: 76px;\n    --dial-timeline-actions-w: 270px;\n  }\n\n  .dialkit-timeline-identity {\n    overflow: hidden;\n    gap: 7px;\n  }\n\n  .dialkit-timeline-title {\n    font-size: 13px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .dialkit-timeline-time {\n    font-size: 11px;\n  }\n\n  .dialkit-timeline-overview {\n    height: 12px;\n  }\n\n  .dialkit-timeline-actions {\n    min-width: 0;\n  }\n\n  .dialkit-timeline-actions .dialkit-preset-manager {\n    flex-basis: 100px;\n    width: 100px;\n  }\n\n  .dialkit-timeline-chevron {\n    width: 26px;\n    height: 28px;\n    justify-content: center;\n    padding: 0;\n  }\n\n  .dialkit-timeline-grid {\n    min-width: 0;\n  }\n}\n";
 //# sourceMappingURL=theme-css.d.ts.map

package/dist/svelte/theme-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/svelte/theme-css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,8j/BAg5CpB,CAAC"}
+{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/svelte/theme-css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,q8gDAoqEpB,CAAC"}