dialkit 1.4.0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/icons.d.ts +2 -1
  2. package/dist/icons.js +5 -0
  3. package/dist/icons.js.map +1 -1
  4. package/dist/index.cjs +177 -72
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.js +177 -72
  7. package/dist/index.js.map +1 -1
  8. package/dist/solid/index.js +339 -267
  9. package/dist/solid/index.js.map +1 -1
  10. package/dist/styles.css +110 -26
  11. package/dist/svelte/components/Timeline/DialTimeline.svelte +50 -1
  12. package/dist/svelte/components/Timeline/DialTimeline.svelte.d.ts.map +1 -1
  13. package/dist/svelte/components/Timeline/TimelineSection.svelte +74 -27
  14. package/dist/svelte/components/Timeline/TimelineSection.svelte.d.ts.map +1 -1
  15. package/dist/svelte/theme-css.d.ts +1 -1
  16. package/dist/svelte/theme-css.d.ts.map +1 -1
  17. package/dist/svelte/theme-css.js +110 -26
  18. package/dist/vue/index.js +123 -30
  19. package/dist/vue/index.js.map +1 -1
  20. package/package.json +1 -1
package/dist/svelte/theme-css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- 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 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;\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-height: calc(100vh - 24px);\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.dialkit-timeline-dock::-webkit-scrollbar {\n display: none;\n}\n\n.dialkit-timeline-section {\n --dial-timeline-label-w: 96px;\n --dial-timeline-actions-w: 284px;\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: -10px;\n z-index: 4;\n padding: 6px 0 0;\n margin-top: -6px;\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: 6px;\n overflow: visible;\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 height: 28px;\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 z-index: 5;\n cursor: ew-resize;\n touch-action: none;\n}\n\n.dialkit-timeline-playhead-flag {\n position: absolute;\n top: 14px;\n left: 50%;\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: translate(-50%, -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-control[data-placement=\"raised\"] .dialkit-timeline-playhead-flag {\n top: -24px;\n}\n\n.dialkit-timeline-playhead-stem {\n position: absolute;\n top: 23px;\n bottom: 0;\n left: 5.25px;\n width: 1.5px;\n border-radius: 1px;\n background: var(--dial-text-root);\n pointer-events: none;\n transition: top 0.12s ease;\n}\n\n.dialkit-timeline-playhead-control[data-placement=\"raised\"] .dialkit-timeline-playhead-stem {\n top: -15px;\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: 10px;\n }\n\n .dialkit-timeline-header {\n grid-template-columns: auto minmax(40px, 1fr) auto;\n gap: 8px;\n top: -10px;\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";
1
+ 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";
2
2
  //# sourceMappingURL=theme-css.d.ts.map
package/dist/svelte/theme-css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/svelte/theme-css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,698CAglEpB,CAAC"}
1
+ {"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/svelte/theme-css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,q8gDAoqEpB,CAAC"}
package/dist/svelte/theme-css.js CHANGED
@@ -1454,29 +1454,52 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
1454
1454
  }
1455
1455
 
1456
1456
  .dialkit-timeline-dock {
1457
+ position: relative;
1458
+ box-sizing: border-box;
1457
1459
  background: var(--dial-glass-bg);
1458
1460
  border: 1px solid var(--dial-border);
1459
1461
  border-radius: 14px;
1460
1462
  backdrop-filter: blur(var(--dial-backdrop-blur));
1461
1463
  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
1462
- padding: 10px 12px;
1464
+ padding: 0 12px 10px;
1463
1465
  display: flex;
1464
1466
  flex-direction: column;
1465
1467
  gap: 10px;
1466
- max-height: calc(100vh - 24px);
1468
+ overflow-x: hidden;
1467
1469
  overflow-y: auto;
1468
1470
  overscroll-behavior: contain;
1469
- scrollbar-width: none;
1470
- -ms-overflow-style: none;
1471
+ scrollbar-width: thin;
1472
+ scrollbar-color: var(--dial-text-tertiary) transparent;
1473
+ }
1474
+
1475
+ .dialkit-timeline-resize-handle {
1476
+ position: absolute;
1477
+ top: -4px;
1478
+ left: 0;
1479
+ right: 0;
1480
+ z-index: 9;
1481
+ height: 10px;
1482
+ cursor: ns-resize;
1483
+ touch-action: none;
1471
1484
  }
1472
1485
 
1473
1486
  .dialkit-timeline-dock::-webkit-scrollbar {
1474
- display: none;
1487
+ width: 8px;
1488
+ }
1489
+
1490
+ .dialkit-timeline-dock::-webkit-scrollbar-track {
1491
+ background: transparent;
1492
+ }
1493
+
1494
+ .dialkit-timeline-dock::-webkit-scrollbar-thumb {
1495
+ border-radius: 999px;
1496
+ background: var(--dial-text-tertiary);
1475
1497
  }
1476
1498
 
1477
1499
  .dialkit-timeline-section {
1478
1500
  --dial-timeline-label-w: 96px;
1479
1501
  --dial-timeline-actions-w: 284px;
1502
+ --dial-timeline-header-h: calc(var(--dial-row-height) + 4px);
1480
1503
  }
1481
1504
 
1482
1505
  .dialkit-timeline-section + .dialkit-timeline-section {
@@ -1490,10 +1513,12 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
1490
1513
  align-items: center;
1491
1514
  gap: 12px;
1492
1515
  position: sticky;
1493
- top: -10px;
1494
- z-index: 4;
1495
- padding: 6px 0 0;
1496
- margin-top: -6px;
1516
+ top: 0;
1517
+ z-index: 7;
1518
+ box-sizing: border-box;
1519
+ height: var(--dial-timeline-header-h);
1520
+ padding: 4px 0 0;
1521
+ margin: 0;
1497
1522
  background: var(--dial-glass-bg);
1498
1523
  backdrop-filter: blur(var(--dial-backdrop-blur));
1499
1524
  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
@@ -1658,10 +1683,51 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
1658
1683
  }
1659
1684
 
1660
1685
  .dialkit-timeline-body {
1661
- margin-top: 6px;
1686
+ margin-top: 0;
1662
1687
  overflow: visible;
1663
1688
  }
1664
1689
 
1690
+ .dialkit-timeline-scroll-row {
1691
+ position: sticky;
1692
+ bottom: -10px;
1693
+ z-index: 6;
1694
+ display: grid;
1695
+ grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);
1696
+ margin-top: 6px;
1697
+ margin-bottom: -10px;
1698
+ padding: 4px 0 10px;
1699
+ background: var(--dial-glass-bg);
1700
+ backdrop-filter: blur(var(--dial-backdrop-blur));
1701
+ -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
1702
+ }
1703
+
1704
+ .dialkit-timeline-horizontal-scroll {
1705
+ min-width: 0;
1706
+ height: 10px;
1707
+ overflow-x: auto;
1708
+ overflow-y: hidden;
1709
+ scrollbar-width: thin;
1710
+ scrollbar-color: var(--dial-text-tertiary) transparent;
1711
+ overscroll-behavior-x: contain;
1712
+ }
1713
+
1714
+ .dialkit-timeline-horizontal-scroll > div {
1715
+ height: 1px;
1716
+ }
1717
+
1718
+ .dialkit-timeline-horizontal-scroll::-webkit-scrollbar {
1719
+ height: 8px;
1720
+ }
1721
+
1722
+ .dialkit-timeline-horizontal-scroll::-webkit-scrollbar-track {
1723
+ background: transparent;
1724
+ }
1725
+
1726
+ .dialkit-timeline-horizontal-scroll::-webkit-scrollbar-thumb {
1727
+ border-radius: 999px;
1728
+ background: var(--dial-text-tertiary);
1729
+ }
1730
+
1665
1731
  .dialkit-timeline-grid {
1666
1732
  position: relative;
1667
1733
  display: flex;
@@ -1705,7 +1771,13 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
1705
1771
  }
1706
1772
 
1707
1773
  .dialkit-timeline-ruler-row {
1774
+ position: sticky;
1775
+ top: var(--dial-timeline-header-h);
1776
+ z-index: 6;
1708
1777
  height: 28px;
1778
+ background: var(--dial-glass-bg);
1779
+ backdrop-filter: blur(var(--dial-backdrop-blur));
1780
+ -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));
1709
1781
  }
1710
1782
 
1711
1783
  .dialkit-timeline-tick {
@@ -1948,15 +2020,36 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
1948
2020
  bottom: 0;
1949
2021
  width: 12px;
1950
2022
  margin-left: -6px;
1951
- z-index: 5;
1952
2023
  cursor: ew-resize;
1953
2024
  touch-action: none;
1954
2025
  }
1955
2026
 
2027
+ .dialkit-timeline-playhead-anchor {
2028
+ position: sticky;
2029
+ top: calc(var(--dial-timeline-header-h) + 14px);
2030
+ z-index: 8;
2031
+ width: 0;
2032
+ height: 0;
2033
+ margin-left: 6px;
2034
+ }
2035
+
2036
+ .dialkit-timeline-playhead-anchor::before {
2037
+ content: '';
2038
+ position: absolute;
2039
+ top: 0;
2040
+ left: -0.75px;
2041
+ width: 1.5px;
2042
+ height: 14px;
2043
+ border-radius: 1px;
2044
+ background: var(--dial-text-root);
2045
+ pointer-events: none;
2046
+ }
2047
+
1956
2048
  .dialkit-timeline-playhead-flag {
1957
2049
  position: absolute;
1958
- top: 14px;
1959
- left: 50%;
2050
+ top: 0;
2051
+ left: calc(var(--dial-timeline-playhead-flag-offset, 0px) - 26px);
2052
+ z-index: 1;
1960
2053
  width: 52px;
1961
2054
  height: 18px;
1962
2055
  padding: 0 7px;
@@ -1973,29 +2066,21 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
1973
2066
  line-height: 16px;
1974
2067
  text-align: center;
1975
2068
  white-space: nowrap;
1976
- transform: translate(-50%, -50%);
2069
+ transform: translateY(-50%);
1977
2070
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
1978
2071
  transition: top 0.12s ease;
1979
2072
  }
1980
2073
 
1981
- .dialkit-timeline-playhead-control[data-placement="raised"] .dialkit-timeline-playhead-flag {
1982
- top: -24px;
1983
- }
1984
-
1985
2074
  .dialkit-timeline-playhead-stem {
1986
2075
  position: absolute;
1987
- top: 23px;
2076
+ top: 28px;
1988
2077
  bottom: 0;
1989
2078
  left: 5.25px;
2079
+ z-index: 5;
1990
2080
  width: 1.5px;
1991
2081
  border-radius: 1px;
1992
2082
  background: var(--dial-text-root);
1993
2083
  pointer-events: none;
1994
- transition: top 0.12s ease;
1995
- }
1996
-
1997
- .dialkit-timeline-playhead-control[data-placement="raised"] .dialkit-timeline-playhead-stem {
1998
- top: -15px;
1999
2084
  }
2000
2085
 
2001
2086
  /* ── Timeline clip popover ── */
@@ -2074,13 +2159,12 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
2074
2159
 
2075
2160
  @media (max-width: 720px) {
2076
2161
  .dialkit-timeline-dock {
2077
- padding: 10px;
2162
+ padding: 0 10px 10px;
2078
2163
  }
2079
2164
 
2080
2165
  .dialkit-timeline-header {
2081
2166
  grid-template-columns: auto minmax(40px, 1fr) auto;
2082
2167
  gap: 8px;
2083
- top: -10px;
2084
2168
  }
2085
2169
 
2086
2170
  .dialkit-timeline-section {