@cairntale/chimeling-react 1.0.0-alpha.2 → 1.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cairntale/chimeling-react
 
+## 1.0.0-alpha.4
+
+### Patch Changes
+
+- 10795b4: Place the pane of `ChimelingPlayground` to the top-right corner of its container.
+
+## 1.0.0-alpha.3
+
+### Patch Changes
+
+- 1247d56: Fix `dialkit/styles.css?raw` leaking into dist output by configuring `deps.alwaysBundle` in `tsdown.config.ts`
+
 ## 1.0.0-alpha.2
 
 ### Minor Changes

package/dist/components/playground/panel.js

@@ -1,8 +1,8 @@
 "use client";
+import styles_default from "../../node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.js";
 import useTweaks from "./store.js";
 import { ClassNames, Global } from "@emotion/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import dialkitStyles from "dialkit/styles.css?raw";
 import { ButtonGroup, Folder, SelectControl, Slider, TextControl, Toggle } from "dialkit";
 //#region src/components/playground/panel.tsx
 function PlaygroundPanel() {
@@ -10,7 +10,7 @@ function PlaygroundPanel() {
 	return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
 		className: cx("dialkit-root", css({
 			width: 320,
-			display: "flex",
+			display: "absolute",
 			flexDirection: "column",
 			gap: "var(--dial-row-gap)",
 			position: "fixed",
@@ -25,7 +25,7 @@ function PlaygroundPanel() {
 		})),
 		"data-theme": "system",
 		children: [
-			/* @__PURE__ */ jsx(Global, { styles: dialkitStyles }),
+			/* @__PURE__ */ jsx(Global, { styles: styles_default }),
 			/* @__PURE__ */ jsx(SelectControl, {
 				label: "Mode",
 				value: tweaks.mode,

package/dist/components/playground/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","names":[],"sources":["../../../src/components/playground/panel.tsx"],"sourcesContent":["'use client'\n\nimport dialkitStyles from 'dialkit/styles.css?raw'\nimport { Global, ClassNames } from '@emotion/react'\nimport { TextControl, SelectControl, Folder, Toggle, Slider, ButtonGroup } from 'dialkit'\nimport useTweaks from './store'\n\nexport function PlaygroundPanel() {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            'dialkit-root',\n            css({\n              width: 320,\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 'var(--dial-row-gap)',\n              position: 'fixed',\n              top: 'calc(var(--dial-row-gap) * 1.5)',\n              right: 'calc(var(--dial-row-gap) * 1.5)',\n              boxShadow: 'var(--dial-shadow)',\n              background: 'var(--dial-glass-bg)',\n              border: '1px solid var(--dial-border)',\n              backdropFilter: 'blur(var(--dial-backdrop-blur))',\n              padding: 'calc(var(--dial-row-gap) * 1.5)',\n              borderRadius: 14,\n            }),\n          )}\n          data-theme=\"system\"\n        >\n          <Global styles={dialkitStyles} />\n          <SelectControl\n            label=\"Mode\"\n            value={tweaks.mode}\n            options={[\n              {\n                label: 'Live',\n                value: 'live',\n              },\n              { label: 'Mock', value: 'mock' },\n            ]}\n            onChange={v => tweaks.set('mode', v)}\n          />\n          {tweaks.mode === 'live' && (\n            <>\n              <TextControl\n                label=\"Base URL\"\n                value={tweaks.baseUrl}\n                onChange={v => tweaks.set('baseUrl', v)}\n              />\n              <TextControl\n                label=\"User ID\"\n                value={tweaks.userId}\n                onChange={v => tweaks.set('userId', v)}\n              />\n            </>\n          )}\n          {tweaks.mode === 'mock' && (\n            <Folder title=\"Presence\">\n              <SelectControl\n                label=\"Status\"\n                value={tweaks.presence.status}\n                options={[\n                  {\n                    label: 'Online',\n                    value: 'online',\n                  },\n                  { label: 'Idle', value: 'idle' },\n                  { label: 'Offline', value: 'offline' },\n                ]}\n                onChange={v => tweaks.set('presence.status', v)}\n              />\n              {tweaks.presence.status !== 'offline' && tweaks.presence.activity !== null && (\n                <>\n                  <TextControl\n                    label=\"Gerund\"\n                    value={tweaks.presence.activity.gerund}\n                    onChange={v => tweaks.set('presence.activity.gerund', v)}\n                  />\n                  <TextControl\n                    label=\"App Name\"\n                    value={tweaks.presence.activity.appName}\n                    onChange={v => tweaks.set('presence.activity.appName', v)}\n                  />\n                  <TextControl\n                    label=\"Icon Hash\"\n                    value={tweaks.presence.activity.iconHash!}\n                    onChange={v => tweaks.set('presence.activity.iconHash', v)}\n                  />\n                </>\n              )}\n            </Folder>\n          )}\n          <Folder title=\"Behavior\">\n            <SelectControl\n              label=\"Side\"\n              value={tweaks.behavior.side}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n                { label: 'Left', value: 'left' },\n                { label: 'Right', value: 'right' },\n                { label: 'Inline Start', value: 'inline-start' },\n                { label: 'Inline End', value: 'inline-end' },\n              ]}\n              onChange={v => tweaks.set('behavior.side', v)}\n            />\n            <SelectControl\n              label=\"Align\"\n              value={tweaks.behavior.align}\n              options={[\n                { label: 'Start', value: 'start' },\n                { label: 'Center', value: 'center' },\n                { label: 'End', value: 'end' },\n              ]}\n              onChange={v => tweaks.set('behavior.align', v)}\n            />\n            <Toggle\n              label=\"Open on Hover\"\n              checked={tweaks.behavior.openOnHover}\n              onChange={v => tweaks.set('behavior.openOnHover', v)}\n            />\n            {tweaks.behavior.openOnHover && (\n              <>\n                <Slider\n                  label=\"Hover Open Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverOpenDelay}\n                  onChange={v => tweaks.set('behavior.hoverOpenDelay', v)}\n                />\n                <Slider\n                  label=\"Hover Close Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverCloseDelay}\n                  onChange={v => tweaks.set('behavior.hoverCloseDelay', v)}\n                />\n              </>\n            )}\n          </Folder>\n          <ButtonGroup buttons={[{ label: 'Reset', onClick: tweaks.reset }]} />\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,kBAAkB;CAChC,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,gBACA,IAAI;GACF,OAAO;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,gBAAgB;GAChB,SAAS;GACT,cAAc;EAChB,CAAC,CACH;EACA,cAAW;EAnBb,UAAA;GAqBE,oBAAC,QAAD,EAAQ,QAAQ,cAAgB,CAAA;GAChC,oBAAC,eAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,SAAS,CACP;KACE,OAAO;KACP,OAAO;IACT,GACA;KAAE,OAAO;KAAQ,OAAO;IAAO,CACjC;IACA,WAAU,MAAK,OAAO,IAAI,QAAQ,CAAC;GACpC,CAAA;GACA,OAAO,SAAS,UACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,aAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,WAAU,MAAK,OAAO,IAAI,WAAW,CAAC;GACvC,CAAA,GACD,oBAAC,aAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,WAAU,MAAK,OAAO,IAAI,UAAU,CAAC;GACtC,CAAA,CACD,EAAA,CAAA;GAEH,OAAO,SAAS,UACf,qBAAC,QAAD;IAAQ,OAAM;IAAd,UAAA,CACE,oBAAC,eAAD;KACE,OAAM;KACN,OAAO,OAAO,SAAS;KACvB,SAAS;MACP;OACE,OAAO;OACP,OAAO;MACT;MACA;OAAE,OAAO;OAAQ,OAAO;MAAO;MAC/B;OAAE,OAAO;OAAW,OAAO;MAAU;KACvC;KACA,WAAU,MAAK,OAAO,IAAI,mBAAmB,CAAC;IAC/C,CAAA,GACA,OAAO,SAAS,WAAW,aAAa,OAAO,SAAS,aAAa,QACpE,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,4BAA4B,CAAC;KACxD,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,6BAA6B,CAAC;KACzD,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,8BAA8B,CAAC;KAC1D,CAAA;IACD,EAAA,CAAA,CAEE;;GAEV,qBAAC,QAAD;IAAQ,OAAM;IAAd,UAAA;KACE,oBAAC,eAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS;MACvB,SAAS;OACP;QAAE,OAAO;QAAO,OAAO;OAAM;OAC7B;QAAE,OAAO;QAAU,OAAO;OAAS;OACnC;QAAE,OAAO;QAAQ,OAAO;OAAO;OAC/B;QAAE,OAAO;QAAS,OAAO;OAAQ;OACjC;QAAE,OAAO;QAAgB,OAAO;OAAe;OAC/C;QAAE,OAAO;QAAc,OAAO;OAAa;MAC7C;MACA,WAAU,MAAK,OAAO,IAAI,iBAAiB,CAAC;KAC7C,CAAA;KACD,oBAAC,eAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS;MACvB,SAAS;OACP;QAAE,OAAO;QAAS,OAAO;OAAQ;OACjC;QAAE,OAAO;QAAU,OAAO;OAAS;OACnC;QAAE,OAAO;QAAO,OAAO;OAAM;MAC/B;MACA,WAAU,MAAK,OAAO,IAAI,kBAAkB,CAAC;KAC9C,CAAA;KACD,oBAAC,QAAD;MACE,OAAM;MACN,SAAS,OAAO,SAAS;MACzB,WAAU,MAAK,OAAO,IAAI,wBAAwB,CAAC;KACpD,CAAA;KACA,OAAO,SAAS,eACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MACE,OAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO,OAAO,SAAS;MACvB,WAAU,MAAK,OAAO,IAAI,2BAA2B,CAAC;KACvD,CAAA,GACD,oBAAC,QAAD;MACE,OAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO,OAAO,SAAS;MACvB,WAAU,MAAK,OAAO,IAAI,4BAA4B,CAAC;KACxD,CAAA,CACD,EAAA,CAAA;IAEE;;GACR,oBAAC,aAAD,EAAa,SAAS,CAAC;IAAE,OAAO;IAAS,SAAS,OAAO;GAAM,CAAC,EAAI,CAAA;EACjE;CAEG,CAAA,EAAA,CAAA;AAEhB"}
+{"version":3,"file":"panel.js","names":["dialkitStyles"],"sources":["../../../src/components/playground/panel.tsx"],"sourcesContent":["'use client'\n\nimport dialkitStyles from 'dialkit/styles.css?raw'\nimport { Global, ClassNames } from '@emotion/react'\nimport { TextControl, SelectControl, Folder, Toggle, Slider, ButtonGroup } from 'dialkit'\nimport useTweaks from './store'\n\nexport function PlaygroundPanel() {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            'dialkit-root',\n            css({\n              width: 320,\n              display: 'absolute',\n              flexDirection: 'column',\n              gap: 'var(--dial-row-gap)',\n              position: 'fixed',\n              top: 'calc(var(--dial-row-gap) * 1.5)',\n              right: 'calc(var(--dial-row-gap) * 1.5)',\n              boxShadow: 'var(--dial-shadow)',\n              background: 'var(--dial-glass-bg)',\n              border: '1px solid var(--dial-border)',\n              backdropFilter: 'blur(var(--dial-backdrop-blur))',\n              padding: 'calc(var(--dial-row-gap) * 1.5)',\n              borderRadius: 14,\n            }),\n          )}\n          data-theme=\"system\"\n        >\n          <Global styles={dialkitStyles} />\n          <SelectControl\n            label=\"Mode\"\n            value={tweaks.mode}\n            options={[\n              {\n                label: 'Live',\n                value: 'live',\n              },\n              { label: 'Mock', value: 'mock' },\n            ]}\n            onChange={v => tweaks.set('mode', v)}\n          />\n          {tweaks.mode === 'live' && (\n            <>\n              <TextControl\n                label=\"Base URL\"\n                value={tweaks.baseUrl}\n                onChange={v => tweaks.set('baseUrl', v)}\n              />\n              <TextControl\n                label=\"User ID\"\n                value={tweaks.userId}\n                onChange={v => tweaks.set('userId', v)}\n              />\n            </>\n          )}\n          {tweaks.mode === 'mock' && (\n            <Folder title=\"Presence\">\n              <SelectControl\n                label=\"Status\"\n                value={tweaks.presence.status}\n                options={[\n                  {\n                    label: 'Online',\n                    value: 'online',\n                  },\n                  { label: 'Idle', value: 'idle' },\n                  { label: 'Offline', value: 'offline' },\n                ]}\n                onChange={v => tweaks.set('presence.status', v)}\n              />\n              {tweaks.presence.status !== 'offline' && tweaks.presence.activity !== null && (\n                <>\n                  <TextControl\n                    label=\"Gerund\"\n                    value={tweaks.presence.activity.gerund}\n                    onChange={v => tweaks.set('presence.activity.gerund', v)}\n                  />\n                  <TextControl\n                    label=\"App Name\"\n                    value={tweaks.presence.activity.appName}\n                    onChange={v => tweaks.set('presence.activity.appName', v)}\n                  />\n                  <TextControl\n                    label=\"Icon Hash\"\n                    value={tweaks.presence.activity.iconHash!}\n                    onChange={v => tweaks.set('presence.activity.iconHash', v)}\n                  />\n                </>\n              )}\n            </Folder>\n          )}\n          <Folder title=\"Behavior\">\n            <SelectControl\n              label=\"Side\"\n              value={tweaks.behavior.side}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n                { label: 'Left', value: 'left' },\n                { label: 'Right', value: 'right' },\n                { label: 'Inline Start', value: 'inline-start' },\n                { label: 'Inline End', value: 'inline-end' },\n              ]}\n              onChange={v => tweaks.set('behavior.side', v)}\n            />\n            <SelectControl\n              label=\"Align\"\n              value={tweaks.behavior.align}\n              options={[\n                { label: 'Start', value: 'start' },\n                { label: 'Center', value: 'center' },\n                { label: 'End', value: 'end' },\n              ]}\n              onChange={v => tweaks.set('behavior.align', v)}\n            />\n            <Toggle\n              label=\"Open on Hover\"\n              checked={tweaks.behavior.openOnHover}\n              onChange={v => tweaks.set('behavior.openOnHover', v)}\n            />\n            {tweaks.behavior.openOnHover && (\n              <>\n                <Slider\n                  label=\"Hover Open Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverOpenDelay}\n                  onChange={v => tweaks.set('behavior.hoverOpenDelay', v)}\n                />\n                <Slider\n                  label=\"Hover Close Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverCloseDelay}\n                  onChange={v => tweaks.set('behavior.hoverCloseDelay', v)}\n                />\n              </>\n            )}\n          </Folder>\n          <ButtonGroup buttons={[{ label: 'Reset', onClick: tweaks.reset }]} />\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,kBAAkB;CAChC,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,gBACA,IAAI;GACF,OAAO;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,gBAAgB;GAChB,SAAS;GACT,cAAc;EAChB,CAAC,CACH;EACA,cAAW;EAnBb,UAAA;GAqBE,oBAAC,QAAD,EAAQ,QAAQA,eAAgB,CAAA;GAChC,oBAAC,eAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,SAAS,CACP;KACE,OAAO;KACP,OAAO;IACT,GACA;KAAE,OAAO;KAAQ,OAAO;IAAO,CACjC;IACA,WAAU,MAAK,OAAO,IAAI,QAAQ,CAAC;GACpC,CAAA;GACA,OAAO,SAAS,UACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,aAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,WAAU,MAAK,OAAO,IAAI,WAAW,CAAC;GACvC,CAAA,GACD,oBAAC,aAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,WAAU,MAAK,OAAO,IAAI,UAAU,CAAC;GACtC,CAAA,CACD,EAAA,CAAA;GAEH,OAAO,SAAS,UACf,qBAAC,QAAD;IAAQ,OAAM;IAAd,UAAA,CACE,oBAAC,eAAD;KACE,OAAM;KACN,OAAO,OAAO,SAAS;KACvB,SAAS;MACP;OACE,OAAO;OACP,OAAO;MACT;MACA;OAAE,OAAO;OAAQ,OAAO;MAAO;MAC/B;OAAE,OAAO;OAAW,OAAO;MAAU;KACvC;KACA,WAAU,MAAK,OAAO,IAAI,mBAAmB,CAAC;IAC/C,CAAA,GACA,OAAO,SAAS,WAAW,aAAa,OAAO,SAAS,aAAa,QACpE,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,4BAA4B,CAAC;KACxD,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,6BAA6B,CAAC;KACzD,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,8BAA8B,CAAC;KAC1D,CAAA;IACD,EAAA,CAAA,CAEE;;GAEV,qBAAC,QAAD;IAAQ,OAAM;IAAd,UAAA;KACE,oBAAC,eAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS;MACvB,SAAS;OACP;QAAE,OAAO;QAAO,OAAO;OAAM;OAC7B;QAAE,OAAO;QAAU,OAAO;OAAS;OACnC;QAAE,OAAO;QAAQ,OAAO;OAAO;OAC/B;QAAE,OAAO;QAAS,OAAO;OAAQ;OACjC;QAAE,OAAO;QAAgB,OAAO;OAAe;OAC/C;QAAE,OAAO;QAAc,OAAO;OAAa;MAC7C;MACA,WAAU,MAAK,OAAO,IAAI,iBAAiB,CAAC;KAC7C,CAAA;KACD,oBAAC,eAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS;MACvB,SAAS;OACP;QAAE,OAAO;QAAS,OAAO;OAAQ;OACjC;QAAE,OAAO;QAAU,OAAO;OAAS;OACnC;QAAE,OAAO;QAAO,OAAO;OAAM;MAC/B;MACA,WAAU,MAAK,OAAO,IAAI,kBAAkB,CAAC;KAC9C,CAAA;KACD,oBAAC,QAAD;MACE,OAAM;MACN,SAAS,OAAO,SAAS;MACzB,WAAU,MAAK,OAAO,IAAI,wBAAwB,CAAC;KACpD,CAAA;KACA,OAAO,SAAS,eACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MACE,OAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO,OAAO,SAAS;MACvB,WAAU,MAAK,OAAO,IAAI,2BAA2B,CAAC;KACvD,CAAA,GACD,oBAAC,QAAD;MACE,OAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO,OAAO,SAAS;MACvB,WAAU,MAAK,OAAO,IAAI,4BAA4B,CAAC;KACxD,CAAA,CACD,EAAA,CAAA;IAEE;;GACR,oBAAC,aAAD,EAAa,SAAS,CAAC;IAAE,OAAO;IAAS,SAAS,OAAO;GAAM,CAAC,EAAI,CAAA;EACjE;CAEG,CAAA,EAAA,CAAA;AAEhB"}

package/dist/components/playground/playground.js

@@ -12,7 +12,8 @@ function ChimelingPlayground({ className }) {
 		className: cx(css({
 			display: "flex",
 			alignItems: "center",
-			justifyContent: "center"
+			justifyContent: "center",
+			position: "relative"
 		}), className),
 		children: [/* @__PURE__ */ jsx(PlaygroundPanel, {}), /* @__PURE__ */ jsx(ChimelingProvider, {
 			baseUrl: tweaks.baseUrl,

package/dist/components/playground/playground.js.map

@@ -1 +1 @@
-{"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n  className?: string\n}\n\nexport function ChimelingPlayground({ className }: ChimelingPlaygroundProps) {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            css({\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n            }),\n            className,\n          )}\n        >\n          <PlaygroundPanel />\n          <ChimelingProvider baseUrl={tweaks.baseUrl}>\n            <Chimeling.Root\n              userId={tweaks.userId}\n              presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n              side={tweaks.behavior.side}\n              align={tweaks.behavior.align}\n              openOnHover={tweaks.behavior.openOnHover}\n              hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n              hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n            >\n              <Chimeling.Trigger />\n              <Chimeling.Popover />\n            </Chimeling.Root>\n          </ChimelingProvider>\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,oBAAoB,EAAE,aAAuC;CAC3E,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB,CAAC,GACD,SACF;EARF,UAAA,CAUE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,mBAAD;GAAmB,SAAS,OAAO;GACjC,UAAA,qBAAC,UAAU,MAAX;IACE,QAAQ,OAAO;IACf,UAAU,OAAO,SAAS,SAAS,OAAO,WAAW,KAAA;IACrD,MAAM,OAAO,SAAS;IACtB,OAAO,OAAO,SAAS;IACvB,aAAa,OAAO,SAAS;IAC7B,gBAAgB,OAAO,SAAS;IAChC,iBAAiB,OAAO,SAAS;IAPnC,UAAA,CASE,oBAAC,UAAU,SAAX,CAAoB,CAAA,GACpB,oBAAC,UAAU,SAAX,CAAoB,CAAA,CACN;;EACC,CAAA,CAChB;CAEG,CAAA,EAAA,CAAA;AAEhB"}
+{"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n  className?: string\n}\n\nexport function ChimelingPlayground({ className }: ChimelingPlaygroundProps) {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            css({\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              position: 'relative',\n            }),\n            className,\n          )}\n        >\n          <PlaygroundPanel />\n          <ChimelingProvider baseUrl={tweaks.baseUrl}>\n            <Chimeling.Root\n              userId={tweaks.userId}\n              presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n              side={tweaks.behavior.side}\n              align={tweaks.behavior.align}\n              openOnHover={tweaks.behavior.openOnHover}\n              hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n              hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n            >\n              <Chimeling.Trigger />\n              <Chimeling.Popover />\n            </Chimeling.Root>\n          </ChimelingProvider>\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,oBAAoB,EAAE,aAAuC;CAC3E,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;EACZ,CAAC,GACD,SACF;EATF,UAAA,CAWE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,mBAAD;GAAmB,SAAS,OAAO;GACjC,UAAA,qBAAC,UAAU,MAAX;IACE,QAAQ,OAAO;IACf,UAAU,OAAO,SAAS,SAAS,OAAO,WAAW,KAAA;IACrD,MAAM,OAAO,SAAS;IACtB,OAAO,OAAO,SAAS;IACvB,aAAa,OAAO,SAAS;IAC7B,gBAAgB,OAAO,SAAS;IAChC,iBAAiB,OAAO,SAAS;IAPnC,UAAA,CASE,oBAAC,UAAU,SAAX,CAAoB,CAAA,GACpB,oBAAC,UAAU,SAAX,CAAoB,CAAA,CACN;;EACC,CAAA,CAChB;CAEG,CAAA,EAAA,CAAA;AAEhB"}

package/dist/lib/config.js

@@ -1,4 +1,4 @@
-import { name } from "../package.js";
+import { name } from "../packages/react/package.js";
 //#region src/lib/config.ts
 const PACKAGE_NAME = name;
 const DEFAULT_PRESENCE_REFRESH_INTERVAL = 5e3;

package/dist/node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.js

@@ -0,0 +1,6 @@
+//#region ../../node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.css?raw
+var styles_default = "@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  --dial-focus-ring: rgba(255, 255, 255, 0.6);\n\n  /* Timeline clips are light by default; light themes add a dark tint so\n     their shape stays distinct from the lane without replacing custom hues. */\n  --dial-timeline-clip-overlay: transparent;\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-row-gap: 6px;\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  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: 10px 12px;\n  transform: translateZ(0);\n  transform-origin: var(--dial-origin-y, top) var(--dial-origin-x, right);\n}\n\n.dialkit-panel[data-origin-x=\"left\"] {\n  --dial-origin-x: left;\n}\n\n.dialkit-panel[data-origin-x=\"right\"] {\n  --dial-origin-x: right;\n}\n\n.dialkit-panel[data-origin-y=\"top\"] {\n  --dial-origin-y: top;\n}\n\n.dialkit-panel[data-origin-y=\"bottom\"] {\n  --dial-origin-y: bottom;\n}\n\n.dialkit-panel[data-position=\"top-left\"] .dialkit-panel-inner {\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: var(--dial-row-gap);\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/* A sole group that comes first can share the panel header's divider. */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child:not(:has(~ .dialkit-folder)) {\n  border-top: none;\n  margin-top: 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: 12px;\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: 12px;\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  position: relative;\n  width: 100%;\n  aspect-ratio: 256 / 180;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: hidden;\n  isolation: isolate;\n}\n\n.dialkit-easing-viz svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.dialkit-easing-reference {\n  stroke: var(--dial-text-tertiary);\n  stroke-width: 1;\n  stroke-dasharray: 3 4;\n  opacity: 0.4;\n}\n\n.dialkit-easing-tangent {\n  stroke: var(--dial-text-tertiary);\n  stroke-width: 1;\n}\n\n.dialkit-easing-curve {\n  fill: none;\n  stroke: var(--dial-text-primary);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n\n.dialkit-easing-endpoint {\n  fill: var(--dial-text-secondary);\n}\n\n.dialkit-easing-handle {\n  position: absolute;\n  display: grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-easing-handle::after {\n  content: '';\n  width: 10px;\n  height: 10px;\n  box-sizing: border-box;\n  border: 1.5px solid var(--dial-text-secondary);\n  border-radius: 50%;\n  background: var(--dial-surface);\n}\n\n.dialkit-easing-handle:hover::after,\n.dialkit-easing-handle:focus-visible::after,\n.dialkit-easing-handle[data-dragging]::after {\n  border-color: var(--dial-text-primary);\n  background: var(--dial-text-primary);\n}\n\n.dialkit-easing-handle[data-dragging] {\n  cursor: grabbing;\n  z-index: 1;\n}\n\n.dialkit-easing-handle:disabled {\n  pointer-events: none;\n}\n\n.dialkit-easing-instructions {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\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  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  min-height: var(--dial-row-height);\n  /* Hidden overflow still lets caret navigation scroll this animated row. */\n  overflow: clip;\n  padding: calc((var(--dial-row-height) - 18px) / 2) 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-text-label {\n  line-height: 18px;\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  display: block;\n  box-sizing: border-box;\n  margin: 0;\n  margin-right: calc(-1 * var(--dial-text-gutter, 0px));\n  flex: 1;\n  width: 0;\n  min-width: 0;\n  height: 18px;\n  line-height: 18px;\n  resize: none;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-gutter: stable;\n  scrollbar-color: var(--dial-text-tertiary) transparent;\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-control[data-autosized] {\n  transition: height 180ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.dialkit-text-input::-webkit-scrollbar { width: 6px; }\n.dialkit-text-input::-webkit-scrollbar-track { background: transparent; }\n.dialkit-text-input::-webkit-scrollbar-thumb {\n  background: var(--dial-text-tertiary);\n  border-radius: 3px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialkit-text-control[data-autosized] { transition: none; }\n}\n\n.dialkit-text-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-text-input:focus-visible {\n  background-image: linear-gradient(var(--dial-focus-ring), var(--dial-focus-ring));\n  background-repeat: no-repeat;\n  background-position: 4px bottom;\n  background-size: calc(100% - var(--dial-text-gutter, 0px) - 4px) 1px;\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  margin: 0;\n  inset: auto;\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-border-hover) transparent;\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  min-height: 36px;\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/* Image selector: shared by React, Solid, Vue, and Svelte. */\n.dialkit-image-control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 6px 0 12px;\n  border: 0;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  color: var(--dial-text-label);\n  font: 500 13px system-ui, -apple-system, sans-serif;\n  text-align: left;\n  cursor: pointer;\n  transition: background 0.15s, box-shadow 0.15s;\n}\n.dialkit-image-control:hover { background: var(--dial-surface-hover); }\n.dialkit-image-control[data-open=\"true\"] { background: var(--dial-surface-active); box-shadow: inset 0 0 0 1px var(--dial-border-hover); color: var(--dial-text-primary); }\n.dialkit-image-label { flex-shrink: 0; }\n.dialkit-image-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--dial-text-secondary); font-size: 12px; }\n.dialkit-image-frame { position: relative; display: block; overflow: hidden; border-radius: var(--dial-radius); background: repeating-conic-gradient(var(--dial-surface) 0% 25%, transparent 0% 50%) 0 / 12px 12px, var(--dial-surface); }\n.dialkit-image-img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.dialkit-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dial-text-tertiary); }\n.dialkit-image-fallback svg { width: 24px; height: 24px; }\n.dialkit-image-thumbnail { flex: 0 0 38px; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--dial-border); }\n.dialkit-image-thumbnail svg { width: 16px; height: 16px; }\n.dialkit-image-popover {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  position: fixed;\n  margin: 0;\n  inset: auto;\n  z-index: 10002;\n  box-sizing: border-box;\n  padding: 12px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-border-hover) transparent;\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  background: var(--dial-glass-bg);\n  box-shadow: var(--dial-shadow);\n  color: var(--dial-text-label);\n  font: 500 13px system-ui, -apple-system, sans-serif;\n  animation: dialkit-color-enter 0.16s ease-out;\n}\n.dialkit-image-popover *, .dialkit-image-popover *::before, .dialkit-image-popover *::after { box-sizing: border-box; }\n.dialkit-image-popover > * { flex-shrink: 0; }\n.dialkit-image-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }\n.dialkit-image-title { color: var(--dial-text-primary); }\n.dialkit-image-clear { margin: -4px -4px -4px 0; padding: 4px; border: 0; border-radius: 4px; background: none; color: var(--dial-text-tertiary); font: inherit; font-size: 11px; cursor: pointer; }\n.dialkit-image-clear:hover { color: var(--dial-text-primary); }\n.dialkit-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\n.dialkit-image-option { position: relative; display: block; width: 100%; padding: 3px; border: 1px solid transparent; border-radius: calc(var(--dial-radius) + 3px); background: transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; }\n.dialkit-image-option-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--dial-radius) - 1px); }\n.dialkit-image-option:hover { background: var(--dial-surface-hover); border-color: var(--dial-border-hover); }\n.dialkit-image-option[aria-pressed=\"true\"] { border-color: var(--dial-text-label); background: var(--dial-surface-active); }\n.dialkit-image-upload { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; width: 100%; }\n.dialkit-image-upload svg { width: 15px; height: 15px; }\n.dialkit-image-popover[data-dragging=\"true\"] .dialkit-image-upload { background: var(--dial-surface-hover); color: var(--dial-text-primary); }\n.dialkit-image-upload[aria-disabled=\"true\"] { opacity: 0.6; cursor: progress; }\n.dialkit-image-empty { padding: 28px 12px; border-radius: var(--dial-radius); background: var(--dial-surface); color: var(--dial-text-tertiary); font-weight: 400; text-align: center; }\n.dialkit-image-status { font-size: 11px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }\n.dialkit-image-popover [hidden], .dialkit-image-frame [hidden], .dialkit-image-file { display: none; }\n@media (prefers-reduced-motion: reduce) { .dialkit-image-popover { animation: none; } }\n\n/* DialPad: a continuous two-axis field, shared across frameworks. */\n.dialkit-pad { display: grid; gap: var(--dial-row-gap); min-width: 0; }\n.dialkit-pad-caption { display: flex; align-items: center; min-width: 0; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); }\n.dialkit-pad-label { flex: 1; min-width: 0; color: var(--dial-text-label); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dialkit-pad-surface { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--dial-radius); background: var(--dial-surface); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }\n.dialkit-pad-plane { position: absolute; inset: 12px; pointer-events: none; }\n.dialkit-pad-grid { position: absolute; inset: 0; pointer-events: none; }\n.dialkit-pad-grid-line { position: absolute; background: var(--dial-border); opacity: 0.65; }\n.dialkit-pad-grid-vertical { top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }\n.dialkit-pad-grid-horizontal { left: 0; right: 0; height: 1px; transform: translateY(-50%); }\n.dialkit-pad-center { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--dial-text-tertiary); transform: translate(-50%, -50%); }\n.dialkit-pad-point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--dial-text-primary); box-shadow: 0 0 0 0 transparent, 0 2px 4px #0003; transform: translate(-50%, -50%); transition: box-shadow 0.15s; pointer-events: auto; cursor: grab; }\n.dialkit-pad-surface[data-dragging=\"true\"], .dialkit-pad-surface[data-dragging=\"true\"] .dialkit-pad-point { cursor: grabbing; }\n.dialkit-pad-surface[data-dragging=\"true\"] .dialkit-pad-point { box-shadow: 0 0 0 6px var(--dial-border-hover), 0 2px 6px #0003; }\n.dialkit-pad-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\n.dialkit-pad-field { display: flex; align-items: center; gap: 4px; min-width: 0; height: var(--dial-row-height); padding: 0 12px 0 10px; border-radius: var(--dial-radius); background: var(--dial-surface); }\n.dialkit-pad-axis { min-width: 0; max-width: 35%; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--dial-text-label); }\n.dialkit-pad-value { min-width: 0; width: 100%; border: 0; padding: 0 0 1px; background: transparent; color: var(--dial-text-label); text-align: right; font: 500 13px 'Geist Mono', monospace; }\n.dialkit-pad-field:focus-within { background: var(--dial-surface-hover); }\n.dialkit-pad-value:focus-visible { box-shadow: inset 0 -1px var(--dial-focus-ring); }\n.dialkit-pad-value:focus { color: var(--dial-text-focus); }\n.dialkit-pad-instructions { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n@media (prefers-reduced-motion: reduce) { .dialkit-pad-point { transition: none; } }\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  transition: background 0.15s, box-shadow 0.15s;\n}\n\n.dialkit-color-control[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n  box-shadow: inset 0 0 0 1px var(--dial-border-hover);\n}\n.dialkit-color-control[data-open=\"true\"] .dialkit-color-label,\n.dialkit-color-control[data-open=\"true\"] .dialkit-color-value { color: var(--dial-text-primary); }\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/* Color picker: shared by React, Solid, Vue, and Svelte. */\n.dialkit-color-inputs { min-width: 0; flex: 1; justify-content: flex-end; }\n.dialkit-color-value {\n  min-width: 0;\n  width: 100%;\n  padding: 4px 0;\n  border: 0;\n  outline: none;\n  background: transparent;\n  color: var(--dial-text-label);\n  font: 500 13px 'Geist Mono', monospace;\n  text-align: right;\n  text-overflow: ellipsis;\n}\n.dialkit-color-value:focus { color: var(--dial-text-focus); }\n.dialkit-color-swatch {\n  flex: 0 0 20px;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border-radius: 5px;\n  border: 1px solid var(--dial-border-hover);\n  background: linear-gradient(var(--dial-color), var(--dial-color)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\n  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n.dialkit-color-swatch:hover { transform: scale(1.08); }\n.dialkit-color-popover {\n  display: grid;\n  gap: var(--dial-row-gap);\n  position: fixed;\n  margin: 0;\n  inset: auto;\n  z-index: 10002;\n  box-sizing: border-box;\n  padding: 10px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  background: var(--dial-glass-bg);\n  box-shadow: var(--dial-shadow);\n  color: var(--dial-text-label);\n  animation: dialkit-color-enter 0.16s ease-out;\n}\n.dialkit-color-popover *, .dialkit-color-popover *::before, .dialkit-color-popover *::after { box-sizing: border-box; }\n.dialkit-color-plane { position: relative; height: 160px; border-radius: var(--dial-radius); touch-action: none; cursor: crosshair; user-select: none; }\n.dialkit-color-canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }\n.dialkit-color-plane::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); pointer-events: none; }\n.dialkit-color-marker { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); pointer-events: none; }\n.dialkit-color-tracks { display: grid; gap: var(--dial-row-gap); }\n.dialkit-color-track-row { display: flex; align-items: center; gap: 12px; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); font-size: 13px; font-weight: 500; }\n.dialkit-color-track-row > span { flex: 0 0 52px; color: var(--dial-text-label); }\n.dialkit-color-track {\n  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; touch-action: none;\n}\n.dialkit-color-hue {\n  --dial-color-thumb-bg: var(--dial-color-thumb);\n}\n.dialkit-color-opacity {\n  --dial-color-track-bg: linear-gradient(to right, transparent, var(--dial-color-opaque)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\n  --dial-color-thumb-bg: linear-gradient(var(--dial-color-thumb), var(--dial-color-thumb)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\n}\n.dialkit-color-track::-webkit-slider-runnable-track { height: 16px; border-radius: 4px; background: var(--dial-color-track-bg); }\n.dialkit-color-track::-moz-range-track { height: 16px; border: 0; border-radius: 4px; background: var(--dial-color-track-bg); }\n.dialkit-color-track::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 24px; margin-top: -4px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\n.dialkit-color-track::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 24px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\n/* The same row, buttons, and pill as Enabled, with no label and equal segments. */\n.dialkit-color-format-row { padding: 2px; }\n.dialkit-color-format-row .dialkit-color-formats { flex: 1; min-width: 0; margin-right: 0; }\n.dialkit-color-formats .dialkit-segmented-pill { left: 2px; width: calc((100% - 4px) / 3); transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); }\n.dialkit-color-format { flex: 1 1 0; min-width: 0; white-space: nowrap; }\n.dialkit-color-format:hover { color: var(--dial-text-primary); }\n.dialkit-color-css-input { display: block; width: 100%; height: var(--dial-row-height); padding: 0 12px; border: 0; border-radius: var(--dial-radius); background: var(--dial-surface); outline: none; color: var(--dial-text-label); font: 500 13px 'Geist Mono', monospace; }\n.dialkit-color-css-input:focus { color: var(--dial-text-focus); }\n.dialkit-color-popover input[aria-invalid=\"true\"], .dialkit-color-value[aria-invalid=\"true\"] { color: #ef7777; }\n@keyframes dialkit-color-enter { from { opacity: 0; transform: translateY(3px) scale(0.98); } to { opacity: 1; transform: none; } }\n@media (prefers-reduced-motion: reduce) {\n  .dialkit-color-popover { animation: none; }\n  .dialkit-color-formats .dialkit-segmented-pill { transition: 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  margin: 0;\n  inset: auto;\n  overflow-y: auto;\n  overscroll-behavior: contain;\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  flex: 1;\n  min-width: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  font-family: inherit;\n  text-align: left;\n  cursor: pointer;\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-item:focus-within .dialkit-preset-delete { opacity: 0.6; }\n.dialkit-preset-item:focus-within { background: var(--dial-surface-hover); }\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/* ── Light Theme ── */\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  --dial-focus-ring: rgba(0, 0, 0, 0.55);\n\n  --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\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/* ── System preference: light ── */\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    --dial-focus-ring: rgba(0, 0, 0, 0.55);\n\n    --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\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/* ── Timeline dock ── */\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 — 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/* ── Layer groups ── */\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  box-shadow: inset 0 0 0 999px var(--dial-timeline-clip-overlay);\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:\n    0 0 0 2px var(--dial-text-root),\n    inset 0 0 0 999px var(--dial-timeline-clip-overlay);\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/* ── Sequence segments ──\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/* ── Property tracks ──\n   A props clip's row is a read-only composite — 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: -1px;\n  width: 2px;\n  height: 15px;\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: 27px;\n  bottom: 0;\n  left: 5px;\n  z-index: 5;\n  width: 2px;\n  background: var(--dial-text-root);\n  pointer-events: none;\n}\n\n/* ── Timeline clip popover ── */\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\n/* Keyboard focus stays inside each control so scrolling never clips its edge. */\n.dialkit-root :where(button, input, textarea, [tabindex]):focus {\n  outline: none;\n}\n.dialkit-root :where(button, [role=\"slider\"], [role=\"button\"], .dialkit-color-plane, .dialkit-pad-surface):focus-visible {\n  outline: 2px solid var(--dial-focus-ring);\n  outline-offset: -2px;\n}\n.dialkit-folder-header-top[role=\"button\"] { border-radius: 5px; }\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top { border-radius: 50%; }\n.dialkit-slider:focus-visible .dialkit-slider-value,\n.dialkit-slider:focus-within .dialkit-slider-value { color: var(--dial-text-focus); }\n.dialkit-slider:focus-visible .dialkit-slider-fill { background: var(--dial-border-hover); }\n.dialkit-select-option:focus-visible { background: var(--dial-surface-hover); color: var(--dial-text-focus); }\n.dialkit-root :where(.dialkit-slider-input, .dialkit-color-value, .dialkit-preset-input):focus-visible {\n  box-shadow: inset 0 -1px var(--dial-focus-ring);\n}\n.dialkit-color-css-input:focus-visible { outline: none; }\n.dialkit-shortcuts-dropdown { margin: 0; inset: auto; overflow-y: auto; }\n@media (forced-colors: active) {\n  .dialkit-root { --dial-focus-ring: Highlight; }\n}\n";
+//#endregion
+export { styles_default as default };
+
+//# sourceMappingURL=styles.js.map

package/dist/node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../../../../../../../node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.css?raw"],"sourcesContent":["export default \"@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  --dial-focus-ring: rgba(255, 255, 255, 0.6);\\n\\n  /* Timeline clips are light by default; light themes add a dark tint so\\n     their shape stays distinct from the lane without replacing custom hues. */\\n  --dial-timeline-clip-overlay: transparent;\\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-row-gap: 6px;\\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  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: 10px 12px;\\n  transform: translateZ(0);\\n  transform-origin: var(--dial-origin-y, top) var(--dial-origin-x, right);\\n}\\n\\n.dialkit-panel[data-origin-x=\\\"left\\\"] {\\n  --dial-origin-x: left;\\n}\\n\\n.dialkit-panel[data-origin-x=\\\"right\\\"] {\\n  --dial-origin-x: right;\\n}\\n\\n.dialkit-panel[data-origin-y=\\\"top\\\"] {\\n  --dial-origin-y: top;\\n}\\n\\n.dialkit-panel[data-origin-y=\\\"bottom\\\"] {\\n  --dial-origin-y: bottom;\\n}\\n\\n.dialkit-panel[data-position=\\\"top-left\\\"] .dialkit-panel-inner {\\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: var(--dial-row-gap);\\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/* A sole group that comes first can share the panel header's divider. */\\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child:not(:has(~ .dialkit-folder)) {\\n  border-top: none;\\n  margin-top: 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: 12px;\\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: 12px;\\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  position: relative;\\n  width: 100%;\\n  aspect-ratio: 256 / 180;\\n  border-radius: var(--dial-radius);\\n  background: var(--dial-surface);\\n  overflow: hidden;\\n  isolation: isolate;\\n}\\n\\n.dialkit-easing-viz svg {\\n  position: absolute;\\n  inset: 0;\\n  width: 100%;\\n  height: 100%;\\n  pointer-events: none;\\n}\\n\\n.dialkit-easing-reference {\\n  stroke: var(--dial-text-tertiary);\\n  stroke-width: 1;\\n  stroke-dasharray: 3 4;\\n  opacity: 0.4;\\n}\\n\\n.dialkit-easing-tangent {\\n  stroke: var(--dial-text-tertiary);\\n  stroke-width: 1;\\n}\\n\\n.dialkit-easing-curve {\\n  fill: none;\\n  stroke: var(--dial-text-primary);\\n  stroke-width: 2;\\n  stroke-linecap: round;\\n}\\n\\n.dialkit-easing-endpoint {\\n  fill: var(--dial-text-secondary);\\n}\\n\\n.dialkit-easing-handle {\\n  position: absolute;\\n  display: grid;\\n  place-items: center;\\n  width: 24px;\\n  height: 24px;\\n  padding: 0;\\n  border: 0;\\n  border-radius: 50%;\\n  background: transparent;\\n  transform: translate(-50%, -50%);\\n  cursor: grab;\\n  touch-action: none;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n.dialkit-easing-handle::after {\\n  content: '';\\n  width: 10px;\\n  height: 10px;\\n  box-sizing: border-box;\\n  border: 1.5px solid var(--dial-text-secondary);\\n  border-radius: 50%;\\n  background: var(--dial-surface);\\n}\\n\\n.dialkit-easing-handle:hover::after,\\n.dialkit-easing-handle:focus-visible::after,\\n.dialkit-easing-handle[data-dragging]::after {\\n  border-color: var(--dial-text-primary);\\n  background: var(--dial-text-primary);\\n}\\n\\n.dialkit-easing-handle[data-dragging] {\\n  cursor: grabbing;\\n  z-index: 1;\\n}\\n\\n.dialkit-easing-handle:disabled {\\n  pointer-events: none;\\n}\\n\\n.dialkit-easing-instructions {\\n  position: absolute;\\n  width: 1px;\\n  height: 1px;\\n  padding: 0;\\n  overflow: hidden;\\n  clip-path: inset(50%);\\n  white-space: nowrap;\\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  position: relative;\\n  box-sizing: border-box;\\n  display: flex;\\n  align-items: flex-start;\\n  justify-content: space-between;\\n  gap: 12px;\\n  height: var(--dial-row-height);\\n  min-height: var(--dial-row-height);\\n  /* Hidden overflow still lets caret navigation scroll this animated row. */\\n  overflow: clip;\\n  padding: calc((var(--dial-row-height) - 18px) / 2) 12px;\\n  background: var(--dial-surface);\\n  border-radius: var(--dial-radius);\\n}\\n\\n.dialkit-text-label {\\n  line-height: 18px;\\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  display: block;\\n  box-sizing: border-box;\\n  margin: 0;\\n  margin-right: calc(-1 * var(--dial-text-gutter, 0px));\\n  flex: 1;\\n  width: 0;\\n  min-width: 0;\\n  height: 18px;\\n  line-height: 18px;\\n  resize: none;\\n  overflow: hidden;\\n  overflow-wrap: anywhere;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  scrollbar-gutter: stable;\\n  scrollbar-color: var(--dial-text-tertiary) transparent;\\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-control[data-autosized] {\\n  transition: height 180ms cubic-bezier(0.2, 0, 0, 1);\\n}\\n\\n.dialkit-text-input::-webkit-scrollbar { width: 6px; }\\n.dialkit-text-input::-webkit-scrollbar-track { background: transparent; }\\n.dialkit-text-input::-webkit-scrollbar-thumb {\\n  background: var(--dial-text-tertiary);\\n  border-radius: 3px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n  .dialkit-text-control[data-autosized] { transition: none; }\\n}\\n\\n.dialkit-text-input:focus {\\n  color: var(--dial-text-focus);\\n}\\n\\n.dialkit-text-input:focus-visible {\\n  background-image: linear-gradient(var(--dial-focus-ring), var(--dial-focus-ring));\\n  background-repeat: no-repeat;\\n  background-position: 4px bottom;\\n  background-size: calc(100% - var(--dial-text-gutter, 0px) - 4px) 1px;\\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  margin: 0;\\n  inset: auto;\\n  box-sizing: border-box;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  scrollbar-color: var(--dial-border-hover) transparent;\\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  min-height: 36px;\\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/* Image selector: shared by React, Solid, Vue, and Svelte. */\\n.dialkit-image-control {\\n  display: flex;\\n  align-items: center;\\n  gap: 8px;\\n  width: 100%;\\n  height: var(--dial-row-height);\\n  padding: 0 6px 0 12px;\\n  border: 0;\\n  border-radius: var(--dial-radius);\\n  background: var(--dial-surface);\\n  color: var(--dial-text-label);\\n  font: 500 13px system-ui, -apple-system, sans-serif;\\n  text-align: left;\\n  cursor: pointer;\\n  transition: background 0.15s, box-shadow 0.15s;\\n}\\n.dialkit-image-control:hover { background: var(--dial-surface-hover); }\\n.dialkit-image-control[data-open=\\\"true\\\"] { background: var(--dial-surface-active); box-shadow: inset 0 0 0 1px var(--dial-border-hover); color: var(--dial-text-primary); }\\n.dialkit-image-label { flex-shrink: 0; }\\n.dialkit-image-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--dial-text-secondary); font-size: 12px; }\\n.dialkit-image-frame { position: relative; display: block; overflow: hidden; border-radius: var(--dial-radius); background: repeating-conic-gradient(var(--dial-surface) 0% 25%, transparent 0% 50%) 0 / 12px 12px, var(--dial-surface); }\\n.dialkit-image-img { display: block; width: 100%; height: 100%; object-fit: cover; }\\n.dialkit-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dial-text-tertiary); }\\n.dialkit-image-fallback svg { width: 24px; height: 24px; }\\n.dialkit-image-thumbnail { flex: 0 0 38px; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--dial-border); }\\n.dialkit-image-thumbnail svg { width: 16px; height: 16px; }\\n.dialkit-image-popover {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 10px;\\n  position: fixed;\\n  margin: 0;\\n  inset: auto;\\n  z-index: 10002;\\n  box-sizing: border-box;\\n  padding: 12px;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  scrollbar-color: var(--dial-border-hover) transparent;\\n  border: 1px solid var(--dial-border);\\n  border-radius: 14px;\\n  background: var(--dial-glass-bg);\\n  box-shadow: var(--dial-shadow);\\n  color: var(--dial-text-label);\\n  font: 500 13px system-ui, -apple-system, sans-serif;\\n  animation: dialkit-color-enter 0.16s ease-out;\\n}\\n.dialkit-image-popover *, .dialkit-image-popover *::before, .dialkit-image-popover *::after { box-sizing: border-box; }\\n.dialkit-image-popover > * { flex-shrink: 0; }\\n.dialkit-image-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }\\n.dialkit-image-title { color: var(--dial-text-primary); }\\n.dialkit-image-clear { margin: -4px -4px -4px 0; padding: 4px; border: 0; border-radius: 4px; background: none; color: var(--dial-text-tertiary); font: inherit; font-size: 11px; cursor: pointer; }\\n.dialkit-image-clear:hover { color: var(--dial-text-primary); }\\n.dialkit-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\\n.dialkit-image-option { position: relative; display: block; width: 100%; padding: 3px; border: 1px solid transparent; border-radius: calc(var(--dial-radius) + 3px); background: transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; }\\n.dialkit-image-option-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--dial-radius) - 1px); }\\n.dialkit-image-option:hover { background: var(--dial-surface-hover); border-color: var(--dial-border-hover); }\\n.dialkit-image-option[aria-pressed=\\\"true\\\"] { border-color: var(--dial-text-label); background: var(--dial-surface-active); }\\n.dialkit-image-upload { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; width: 100%; }\\n.dialkit-image-upload svg { width: 15px; height: 15px; }\\n.dialkit-image-popover[data-dragging=\\\"true\\\"] .dialkit-image-upload { background: var(--dial-surface-hover); color: var(--dial-text-primary); }\\n.dialkit-image-upload[aria-disabled=\\\"true\\\"] { opacity: 0.6; cursor: progress; }\\n.dialkit-image-empty { padding: 28px 12px; border-radius: var(--dial-radius); background: var(--dial-surface); color: var(--dial-text-tertiary); font-weight: 400; text-align: center; }\\n.dialkit-image-status { font-size: 11px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }\\n.dialkit-image-popover [hidden], .dialkit-image-frame [hidden], .dialkit-image-file { display: none; }\\n@media (prefers-reduced-motion: reduce) { .dialkit-image-popover { animation: none; } }\\n\\n/* DialPad: a continuous two-axis field, shared across frameworks. */\\n.dialkit-pad { display: grid; gap: var(--dial-row-gap); min-width: 0; }\\n.dialkit-pad-caption { display: flex; align-items: center; min-width: 0; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); }\\n.dialkit-pad-label { flex: 1; min-width: 0; color: var(--dial-text-label); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\\n.dialkit-pad-surface { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--dial-radius); background: var(--dial-surface); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }\\n.dialkit-pad-plane { position: absolute; inset: 12px; pointer-events: none; }\\n.dialkit-pad-grid { position: absolute; inset: 0; pointer-events: none; }\\n.dialkit-pad-grid-line { position: absolute; background: var(--dial-border); opacity: 0.65; }\\n.dialkit-pad-grid-vertical { top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }\\n.dialkit-pad-grid-horizontal { left: 0; right: 0; height: 1px; transform: translateY(-50%); }\\n.dialkit-pad-center { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--dial-text-tertiary); transform: translate(-50%, -50%); }\\n.dialkit-pad-point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--dial-text-primary); box-shadow: 0 0 0 0 transparent, 0 2px 4px #0003; transform: translate(-50%, -50%); transition: box-shadow 0.15s; pointer-events: auto; cursor: grab; }\\n.dialkit-pad-surface[data-dragging=\\\"true\\\"], .dialkit-pad-surface[data-dragging=\\\"true\\\"] .dialkit-pad-point { cursor: grabbing; }\\n.dialkit-pad-surface[data-dragging=\\\"true\\\"] .dialkit-pad-point { box-shadow: 0 0 0 6px var(--dial-border-hover), 0 2px 6px #0003; }\\n.dialkit-pad-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\\n.dialkit-pad-field { display: flex; align-items: center; gap: 4px; min-width: 0; height: var(--dial-row-height); padding: 0 12px 0 10px; border-radius: var(--dial-radius); background: var(--dial-surface); }\\n.dialkit-pad-axis { min-width: 0; max-width: 35%; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--dial-text-label); }\\n.dialkit-pad-value { min-width: 0; width: 100%; border: 0; padding: 0 0 1px; background: transparent; color: var(--dial-text-label); text-align: right; font: 500 13px 'Geist Mono', monospace; }\\n.dialkit-pad-field:focus-within { background: var(--dial-surface-hover); }\\n.dialkit-pad-value:focus-visible { box-shadow: inset 0 -1px var(--dial-focus-ring); }\\n.dialkit-pad-value:focus { color: var(--dial-text-focus); }\\n.dialkit-pad-instructions { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\\n@media (prefers-reduced-motion: reduce) { .dialkit-pad-point { transition: none; } }\\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  transition: background 0.15s, box-shadow 0.15s;\\n}\\n\\n.dialkit-color-control[data-open=\\\"true\\\"] {\\n  background: var(--dial-surface-active);\\n  box-shadow: inset 0 0 0 1px var(--dial-border-hover);\\n}\\n.dialkit-color-control[data-open=\\\"true\\\"] .dialkit-color-label,\\n.dialkit-color-control[data-open=\\\"true\\\"] .dialkit-color-value { color: var(--dial-text-primary); }\\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/* Color picker: shared by React, Solid, Vue, and Svelte. */\\n.dialkit-color-inputs { min-width: 0; flex: 1; justify-content: flex-end; }\\n.dialkit-color-value {\\n  min-width: 0;\\n  width: 100%;\\n  padding: 4px 0;\\n  border: 0;\\n  outline: none;\\n  background: transparent;\\n  color: var(--dial-text-label);\\n  font: 500 13px 'Geist Mono', monospace;\\n  text-align: right;\\n  text-overflow: ellipsis;\\n}\\n.dialkit-color-value:focus { color: var(--dial-text-focus); }\\n.dialkit-color-swatch {\\n  flex: 0 0 20px;\\n  width: 20px;\\n  height: 20px;\\n  padding: 0;\\n  border-radius: 5px;\\n  border: 1px solid var(--dial-border-hover);\\n  background: linear-gradient(var(--dial-color), var(--dial-color)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\\n  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);\\n  cursor: pointer;\\n  transition: transform 0.15s;\\n}\\n.dialkit-color-swatch:hover { transform: scale(1.08); }\\n.dialkit-color-popover {\\n  display: grid;\\n  gap: var(--dial-row-gap);\\n  position: fixed;\\n  margin: 0;\\n  inset: auto;\\n  z-index: 10002;\\n  box-sizing: border-box;\\n  padding: 10px;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  border: 1px solid var(--dial-border);\\n  border-radius: 14px;\\n  background: var(--dial-glass-bg);\\n  box-shadow: var(--dial-shadow);\\n  color: var(--dial-text-label);\\n  animation: dialkit-color-enter 0.16s ease-out;\\n}\\n.dialkit-color-popover *, .dialkit-color-popover *::before, .dialkit-color-popover *::after { box-sizing: border-box; }\\n.dialkit-color-plane { position: relative; height: 160px; border-radius: var(--dial-radius); touch-action: none; cursor: crosshair; user-select: none; }\\n.dialkit-color-canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }\\n.dialkit-color-plane::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); pointer-events: none; }\\n.dialkit-color-marker { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); pointer-events: none; }\\n.dialkit-color-tracks { display: grid; gap: var(--dial-row-gap); }\\n.dialkit-color-track-row { display: flex; align-items: center; gap: 12px; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); font-size: 13px; font-weight: 500; }\\n.dialkit-color-track-row > span { flex: 0 0 52px; color: var(--dial-text-label); }\\n.dialkit-color-track {\\n  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; touch-action: none;\\n}\\n.dialkit-color-hue {\\n  --dial-color-thumb-bg: var(--dial-color-thumb);\\n}\\n.dialkit-color-opacity {\\n  --dial-color-track-bg: linear-gradient(to right, transparent, var(--dial-color-opaque)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\\n  --dial-color-thumb-bg: linear-gradient(var(--dial-color-thumb), var(--dial-color-thumb)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\\n}\\n.dialkit-color-track::-webkit-slider-runnable-track { height: 16px; border-radius: 4px; background: var(--dial-color-track-bg); }\\n.dialkit-color-track::-moz-range-track { height: 16px; border: 0; border-radius: 4px; background: var(--dial-color-track-bg); }\\n.dialkit-color-track::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 24px; margin-top: -4px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\\n.dialkit-color-track::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 24px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\\n/* The same row, buttons, and pill as Enabled, with no label and equal segments. */\\n.dialkit-color-format-row { padding: 2px; }\\n.dialkit-color-format-row .dialkit-color-formats { flex: 1; min-width: 0; margin-right: 0; }\\n.dialkit-color-formats .dialkit-segmented-pill { left: 2px; width: calc((100% - 4px) / 3); transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); }\\n.dialkit-color-format { flex: 1 1 0; min-width: 0; white-space: nowrap; }\\n.dialkit-color-format:hover { color: var(--dial-text-primary); }\\n.dialkit-color-css-input { display: block; width: 100%; height: var(--dial-row-height); padding: 0 12px; border: 0; border-radius: var(--dial-radius); background: var(--dial-surface); outline: none; color: var(--dial-text-label); font: 500 13px 'Geist Mono', monospace; }\\n.dialkit-color-css-input:focus { color: var(--dial-text-focus); }\\n.dialkit-color-popover input[aria-invalid=\\\"true\\\"], .dialkit-color-value[aria-invalid=\\\"true\\\"] { color: #ef7777; }\\n@keyframes dialkit-color-enter { from { opacity: 0; transform: translateY(3px) scale(0.98); } to { opacity: 1; transform: none; } }\\n@media (prefers-reduced-motion: reduce) {\\n  .dialkit-color-popover { animation: none; }\\n  .dialkit-color-formats .dialkit-segmented-pill { transition: 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  margin: 0;\\n  inset: auto;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\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  flex: 1;\\n  min-width: 0;\\n  padding: 0;\\n  border: 0;\\n  border-radius: 4px;\\n  background: transparent;\\n  font-family: inherit;\\n  text-align: left;\\n  cursor: pointer;\\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-item:focus-within .dialkit-preset-delete { opacity: 0.6; }\\n.dialkit-preset-item:focus-within { background: var(--dial-surface-hover); }\\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/* ── Light Theme ── */\\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  --dial-focus-ring: rgba(0, 0, 0, 0.55);\\n\\n  --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\\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/* ── System preference: light ── */\\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    --dial-focus-ring: rgba(0, 0, 0, 0.55);\\n\\n    --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\\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/* ── Timeline dock ── */\\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 — 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/* ── Layer groups ── */\\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  box-shadow: inset 0 0 0 999px var(--dial-timeline-clip-overlay);\\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:\\n    0 0 0 2px var(--dial-text-root),\\n    inset 0 0 0 999px var(--dial-timeline-clip-overlay);\\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/* ── Sequence segments ──\\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/* ── Property tracks ──\\n   A props clip's row is a read-only composite — 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: -1px;\\n  width: 2px;\\n  height: 15px;\\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: 27px;\\n  bottom: 0;\\n  left: 5px;\\n  z-index: 5;\\n  width: 2px;\\n  background: var(--dial-text-root);\\n  pointer-events: none;\\n}\\n\\n/* ── Timeline clip popover ── */\\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\\n/* Keyboard focus stays inside each control so scrolling never clips its edge. */\\n.dialkit-root :where(button, input, textarea, [tabindex]):focus {\\n  outline: none;\\n}\\n.dialkit-root :where(button, [role=\\\"slider\\\"], [role=\\\"button\\\"], .dialkit-color-plane, .dialkit-pad-surface):focus-visible {\\n  outline: 2px solid var(--dial-focus-ring);\\n  outline-offset: -2px;\\n}\\n.dialkit-folder-header-top[role=\\\"button\\\"] { border-radius: 5px; }\\n.dialkit-panel-inner[data-collapsed=\\\"true\\\"] .dialkit-folder-header-top { border-radius: 50%; }\\n.dialkit-slider:focus-visible .dialkit-slider-value,\\n.dialkit-slider:focus-within .dialkit-slider-value { color: var(--dial-text-focus); }\\n.dialkit-slider:focus-visible .dialkit-slider-fill { background: var(--dial-border-hover); }\\n.dialkit-select-option:focus-visible { background: var(--dial-surface-hover); color: var(--dial-text-focus); }\\n.dialkit-root :where(.dialkit-slider-input, .dialkit-color-value, .dialkit-preset-input):focus-visible {\\n  box-shadow: inset 0 -1px var(--dial-focus-ring);\\n}\\n.dialkit-color-css-input:focus-visible { outline: none; }\\n.dialkit-shortcuts-dropdown { margin: 0; inset: auto; overflow-y: auto; }\\n@media (forced-colors: active) {\\n  .dialkit-root { --dial-focus-ring: Highlight; }\\n}\\n\""],"x_google_ignoreList":[0],"mappings":";AAAA,IAAA,iBAAe"}

package/dist/packages/react/package.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.js","names":[],"sources":["../../../package.json"],"sourcesContent":[""],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cairntale/chimeling-react",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "private": false,
   "description": "Chimeling React library",
   "homepage": "https://chimeling.app/",

package/dist/package.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"package.js","names":[],"sources":["../package.json"],"sourcesContent":[""],"mappings":""}