{"version":3,"sources":["file:///home/runner/work/decius-css/decius-css/scss/core/_01-tokens.scss","../../scss/decius.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_02-reset-scoped.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_03-panels.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_04-dock-split.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_05-buttons.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_06-input.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_07-slider-dcc-horizontal-track-synth-vertical.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_08-knob-synth.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_09-checkbox-radio-switch.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_10-badge-tag-chip.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_11-kbd.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_12-alert.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_13-modal.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_14-tree-table-list.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_15-toolbar.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_16-tooltip-css-hover.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_17-color-swatch-picker.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_18-curve-graph-editor-backgrounds.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_19-icons.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_20-util.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_21-subpanel.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_22-foldout.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_23-skeuomorphic-hardware-elements.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_24-data-dcs-style-3d.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_25-menu.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_26-popover.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_27-toast.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_28-statusbar.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_29-floating.scss","file:///home/runner/work/decius-css/decius-css/scss/core/_30-dockpane-ext.scss"],"names":[],"mappings":"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","file":"decius.min.css","sourcesContent":["/* ------------------------------------------------------------\n   1 · TOKENS\n   ------------------------------------------------------------ */\n:root {\n  /* Base canvas — \"cooler mid\" not over-dark */\n  --dcs-bg-app:      #1f222a;\n  --dcs-bg:          #2a2e38;   /* default panel surface */\n  --dcs-surface-1:   #323744;   /* raised */\n  --dcs-surface-2:   #3c424f;   /* raised x2 / hover */\n  --dcs-surface-3:   #474e5d;   /* hot / pressed */\n  --dcs-surface-4:   #555d6e;\n  --dcs-well:        #181b22;   /* sunken inputs — kept reliably below both\n                                    bg-app (#1f222a) and bg (#2a2e38) so a\n                                    widget always reads one shade darker than\n                                    whatever panel surface it lands on. */\n  --dcs-rail:        #181a21;   /* deepest separator */\n  --dcs-stage:       #4a5160;   /* \"main view\" surface — Photoshop-style:\n                                    one step LIGHTER than the dock chrome\n                                    so the editor (canvas / 3D viewport)\n                                    reads as the focal surface of the app.\n                                    Used by .dcs-dockpane--center. */\n\n  /* Optical text-centering nudge — IBM Plex Sans and most pro fonts have\n     ascender + cap-height occupying the top ~92% of the em with the\n     descender slot mostly empty, so `align-items: center` lands the\n     glyphs ~1–2px above the visual midline of the row. Applied as\n     padding-top on tight, single-line-of-text rows (menubar items,\n     menu items, brand labels) to push the glyphs onto the optical\n     midline. Adjust per-theme if your font has different metrics. */\n  --dcs-text-nudge:  2px;\n\n  /* Borders */\n  --dcs-line:        #14161c;   /* hard, dark separator */\n  --dcs-line-soft:   #3a3f4c;\n  --dcs-line-strong: #5d6577;\n\n  /* Text */\n  --dcs-text:        #e7e9ee;\n  --dcs-text-dim:    #aab0bd;\n  --dcs-text-mute:   #767c8a;\n  --dcs-text-inv:    #14161c;\n  --dcs-text-link:   var(--dcs-accent);\n\n  /* Accent — DCC blue */\n  --dcs-accent:        #4d9fff;\n  --dcs-accent-hi:     #6fb3ff;\n  --dcs-accent-lo:     #2f86ee;\n  --dcs-accent-dim:    rgba(77, 159, 255, .18);\n  --dcs-accent-haze:   rgba(77, 159, 255, .35);\n\n  /* Semantic */\n  --dcs-ok:      #4ed18a;\n  --dcs-warn:    #f2b14a;\n  --dcs-danger:  #ef6b6b;\n  --dcs-info:    var(--dcs-accent);\n  --dcs-purple:  #b48cff;\n  --dcs-pink:    #ff7ab8;\n  --dcs-teal:    #4ad5d5;\n\n  /* Spacing scale — direct values per density */\n  --dcs-u:    4px;\n  --dcs-s-1:  2px;\n  --dcs-s-2:  4px;\n  --dcs-s-3:  6px;\n  --dcs-s-4:  8px;\n  --dcs-s-5:  12px;\n  --dcs-s-6:  16px;\n  --dcs-s-7:  20px;\n  --dcs-s-8:  28px;\n\n  /* Control sizes */\n  --dcs-h-sm:  18px;\n  --dcs-h:     24px;\n  --dcs-h-lg:  30px;\n  --dcs-h-xl:  40px;\n  --dcs-h-in:  22px;   /* text/number fields — slightly thinner */\n\n  /* Radius */\n  --dcs-r-1: 2px;\n  --dcs-r-2: 3px;\n  --dcs-r-3: 5px;\n  --dcs-r-4: 8px;\n\n  /* Type */\n  --dcs-font: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;\n  --dcs-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;\n  --dcs-font-display: 'IBM Plex Sans', sans-serif;\n  --dcs-font-num: 'IBM Plex Sans', ui-sans-serif, sans-serif;  /* sans tabular by default — mono is for code */\n\n  --dcs-fs-xs: 10px;\n  --dcs-fs-sm: 11px;\n  --dcs-fs:    12px;\n  --dcs-fs-md: 13px;\n  --dcs-fs-lg: 15px;\n  --dcs-fs-xl: 18px;\n  --dcs-fs-2xl: 24px;\n  --dcs-fs-3xl: 32px;\n\n  --dcs-lh: 1.45;\n  --dcs-lh-tight: 1.2;\n\n  /* Shadows / FX */\n  --dcs-shadow-1: 0 1px 0 rgba(0,0,0,.4);\n  --dcs-shadow-2: 0 2px 6px rgba(0,0,0,.35);\n  --dcs-shadow-3: 0 8px 24px rgba(0,0,0,.45);\n  --dcs-shadow-pop: 0 12px 36px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);\n  --dcs-bevel-up:   inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.25);\n  --dcs-bevel-down: inset 0 1px 2px rgba(0,0,0,.5),       inset 0 -1px 0 rgba(255,255,255,.04);\n  --dcs-ring:       0 0 0 1px var(--dcs-accent), 0 0 0 3px var(--dcs-accent-haze);\n\n  /* Transitions */\n  --dcs-t-fast: 80ms ease-out;\n  --dcs-t:      140ms ease-out;\n  --dcs-t-slow: 240ms cubic-bezier(.2,.7,.2,1);\n}\n\n/* Density modes */\n/* Density modes — override the spacing + size tokens directly so the\n   attribute applied to any container reshapes everything inside. The\n   \"comfortable\" rule resets back to defaults so a demo wrapper can\n   opt out of a global Tweaks density. */\n[data-dcs-density=\"comfortable\"] {\n  --dcs-u:    4px;\n  --dcs-s-1:  2px;\n  --dcs-s-2:  4px;\n  --dcs-s-3:  6px;\n  --dcs-s-4:  8px;\n  --dcs-s-5:  12px;\n  --dcs-s-6:  16px;\n  --dcs-s-7:  20px;\n  --dcs-s-8:  28px;\n  --dcs-h-sm: 18px;\n  --dcs-h:    24px;\n  --dcs-h-lg: 30px;\n  --dcs-h-xl: 40px;\n  --dcs-h-in: 22px;\n}\n[data-dcs-density=\"compact\"] {\n  --dcs-u:    3px;\n  --dcs-s-1:  1px;\n  --dcs-s-2:  2px;\n  --dcs-s-3:  4px;\n  --dcs-s-4:  6px;\n  --dcs-s-5:  9px;\n  --dcs-s-6:  12px;\n  --dcs-s-7:  16px;\n  --dcs-s-8:  22px;\n  --dcs-h-sm: 16px;\n  --dcs-h:    20px;\n  --dcs-h-lg: 26px;\n  --dcs-h-xl: 34px;\n  --dcs-h-in: 20px;\n}\n[data-dcs-density=\"spacious\"] {\n  --dcs-u:    5px;\n  --dcs-s-1:  4px;\n  --dcs-s-2:  8px;\n  --dcs-s-3:  12px;\n  --dcs-s-4:  16px;\n  --dcs-s-5:  20px;\n  --dcs-s-6:  26px;\n  --dcs-s-7:  32px;\n  --dcs-s-8:  44px;\n  --dcs-h-sm: 22px;\n  --dcs-h:    28px;\n  --dcs-h-lg: 36px;\n  --dcs-h-xl: 46px;\n  --dcs-h-in: 24px;\n}\n\n/* Radius modes */\n[data-dcs-radius=\"sharp\"] { --dcs-r-1: 0; --dcs-r-2: 0; --dcs-r-3: 0; --dcs-r-4: 0; }\n[data-dcs-radius=\"round\"] { --dcs-r-1: 4px; --dcs-r-2: 6px; --dcs-r-3: 10px; --dcs-r-4: 14px; }\n\n/* Accent recipes (set by Tweaks panel) */\n[data-dcs-accent=\"cyan\"]    { --dcs-accent: #00b8d4; --dcs-accent-hi:#22d4ee; --dcs-accent-lo:#0098b0; --dcs-accent-dim: rgba(0,184,212,.18); --dcs-accent-haze: rgba(0,184,212,.35); }\n[data-dcs-accent=\"teal\"]    { --dcs-accent: #2f9c93; --dcs-accent-hi:#3fb8ad; --dcs-accent-lo:#247b73; --dcs-accent-dim: rgba(47,156,147,.18); --dcs-accent-haze: rgba(47,156,147,.35); }\n[data-dcs-accent=\"orange\"]  { --dcs-accent: #ff8a3a; --dcs-accent-hi:#ffa566; --dcs-accent-lo:#e07024; --dcs-accent-dim: rgba(255,138,58,.18); --dcs-accent-haze: rgba(255,138,58,.35); }\n[data-dcs-accent=\"violet\"]  { --dcs-accent: #8b6dff; --dcs-accent-hi:#a48cff; --dcs-accent-lo:#6f4eea; --dcs-accent-dim: rgba(139,109,255,.18); --dcs-accent-haze: rgba(139,109,255,.35); }\n[data-dcs-accent=\"purple\"]  { --dcs-accent: #8466cf; --dcs-accent-hi:#9d83df; --dcs-accent-lo:#6a4eb3; --dcs-accent-dim: rgba(132,102,207,.18); --dcs-accent-haze: rgba(132,102,207,.35); }\n[data-dcs-accent=\"green\"]   { --dcs-accent: #3dd68a; --dcs-accent-hi:#5be8a0; --dcs-accent-lo:#2bb872; --dcs-accent-dim: rgba(61,214,138,.18); --dcs-accent-haze: rgba(61,214,138,.35); }\n\n/* Darkness modes */\n[data-dcs-dark=\"darker\"] {\n  --dcs-bg-app: #14161c;\n  --dcs-bg: #1d2028;\n  --dcs-surface-1: #252934;\n  --dcs-surface-2: #2e323e;\n  --dcs-surface-3: #383d4a;\n  --dcs-well: #14161c;\n  --dcs-stage: #3a4150;\n}\n[data-dcs-dark=\"lighter\"] {\n  --dcs-bg-app: #2c303a;\n  --dcs-bg: #363b47;\n  --dcs-surface-1: #404654;\n  --dcs-surface-2: #4a5161;\n  --dcs-surface-3: #555d6e;\n  --dcs-well: #22252e;   /* darker than lighter-mode bg-app */\n  --dcs-stage: #5e6577;\n}\n","@charset \"UTF-8\";\n/* ============================================================\n   decius.css — DCC interface framework\n   v0.4.0 \"Mus\"  — © MMXXVI · MIT license\n   A CSS system for digital content creation tools, synths,\n   pro-grade desktop interfaces. Cool, bright, friendly.\n   ============================================================ */\n/* ------------------------------------------------------------\n   1 · TOKENS\n   ------------------------------------------------------------ */\n:root {\n  /* Base canvas — \"cooler mid\" not over-dark */\n  --dcs-bg-app: #1f222a;\n  --dcs-bg: #2a2e38; /* default panel surface */\n  --dcs-surface-1: #323744; /* raised */\n  --dcs-surface-2: #3c424f; /* raised x2 / hover */\n  --dcs-surface-3: #474e5d; /* hot / pressed */\n  --dcs-surface-4: #555d6e;\n  --dcs-well: #181b22; /* sunken inputs — kept reliably below both\n    bg-app (#1f222a) and bg (#2a2e38) so a\n    widget always reads one shade darker than\n    whatever panel surface it lands on. */\n  --dcs-rail: #181a21; /* deepest separator */\n  --dcs-stage: #4a5160; /* \"main view\" surface — Photoshop-style:\n    one step LIGHTER than the dock chrome\n    so the editor (canvas / 3D viewport)\n    reads as the focal surface of the app.\n    Used by .dcs-dockpane--center. */\n  /* Optical text-centering nudge — IBM Plex Sans and most pro fonts have\n     ascender + cap-height occupying the top ~92% of the em with the\n     descender slot mostly empty, so `align-items: center` lands the\n     glyphs ~1–2px above the visual midline of the row. Applied as\n     padding-top on tight, single-line-of-text rows (menubar items,\n     menu items, brand labels) to push the glyphs onto the optical\n     midline. Adjust per-theme if your font has different metrics. */\n  --dcs-text-nudge: 2px;\n  /* Borders */\n  --dcs-line: #14161c; /* hard, dark separator */\n  --dcs-line-soft: #3a3f4c;\n  --dcs-line-strong: #5d6577;\n  /* Text */\n  --dcs-text: #e7e9ee;\n  --dcs-text-dim: #aab0bd;\n  --dcs-text-mute: #767c8a;\n  --dcs-text-inv: #14161c;\n  --dcs-text-link: var(--dcs-accent);\n  /* Accent — DCC blue */\n  --dcs-accent: #4d9fff;\n  --dcs-accent-hi: #6fb3ff;\n  --dcs-accent-lo: #2f86ee;\n  --dcs-accent-dim: rgba(77, 159, 255, .18);\n  --dcs-accent-haze: rgba(77, 159, 255, .35);\n  /* Semantic */\n  --dcs-ok: #4ed18a;\n  --dcs-warn: #f2b14a;\n  --dcs-danger: #ef6b6b;\n  --dcs-info: var(--dcs-accent);\n  --dcs-purple: #b48cff;\n  --dcs-pink: #ff7ab8;\n  --dcs-teal: #4ad5d5;\n  /* Spacing scale — direct values per density */\n  --dcs-u: 4px;\n  --dcs-s-1: 2px;\n  --dcs-s-2: 4px;\n  --dcs-s-3: 6px;\n  --dcs-s-4: 8px;\n  --dcs-s-5: 12px;\n  --dcs-s-6: 16px;\n  --dcs-s-7: 20px;\n  --dcs-s-8: 28px;\n  /* Control sizes */\n  --dcs-h-sm: 18px;\n  --dcs-h: 24px;\n  --dcs-h-lg: 30px;\n  --dcs-h-xl: 40px;\n  --dcs-h-in: 22px; /* text/number fields — slightly thinner */\n  /* Radius */\n  --dcs-r-1: 2px;\n  --dcs-r-2: 3px;\n  --dcs-r-3: 5px;\n  --dcs-r-4: 8px;\n  /* Type */\n  --dcs-font: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;\n  --dcs-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;\n  --dcs-font-display: 'IBM Plex Sans', sans-serif;\n  --dcs-font-num: 'IBM Plex Sans', ui-sans-serif, sans-serif; /* sans tabular by default — mono is for code */\n  --dcs-fs-xs: 10px;\n  --dcs-fs-sm: 11px;\n  --dcs-fs: 12px;\n  --dcs-fs-md: 13px;\n  --dcs-fs-lg: 15px;\n  --dcs-fs-xl: 18px;\n  --dcs-fs-2xl: 24px;\n  --dcs-fs-3xl: 32px;\n  --dcs-lh: 1.45;\n  --dcs-lh-tight: 1.2;\n  /* Shadows / FX */\n  --dcs-shadow-1: 0 1px 0 rgba(0,0,0,.4);\n  --dcs-shadow-2: 0 2px 6px rgba(0,0,0,.35);\n  --dcs-shadow-3: 0 8px 24px rgba(0,0,0,.45);\n  --dcs-shadow-pop: 0 12px 36px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);\n  --dcs-bevel-up: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.25);\n  --dcs-bevel-down: inset 0 1px 2px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04);\n  --dcs-ring: 0 0 0 1px var(--dcs-accent), 0 0 0 3px var(--dcs-accent-haze);\n  /* Transitions */\n  --dcs-t-fast: 80ms ease-out;\n  --dcs-t: 140ms ease-out;\n  --dcs-t-slow: 240ms cubic-bezier(.2,.7,.2,1);\n}\n\n/* Density modes */\n/* Density modes — override the spacing + size tokens directly so the\n   attribute applied to any container reshapes everything inside. The\n   \"comfortable\" rule resets back to defaults so a demo wrapper can\n   opt out of a global Tweaks density. */\n[data-dcs-density=comfortable] {\n  --dcs-u: 4px;\n  --dcs-s-1: 2px;\n  --dcs-s-2: 4px;\n  --dcs-s-3: 6px;\n  --dcs-s-4: 8px;\n  --dcs-s-5: 12px;\n  --dcs-s-6: 16px;\n  --dcs-s-7: 20px;\n  --dcs-s-8: 28px;\n  --dcs-h-sm: 18px;\n  --dcs-h: 24px;\n  --dcs-h-lg: 30px;\n  --dcs-h-xl: 40px;\n  --dcs-h-in: 22px;\n}\n\n[data-dcs-density=compact] {\n  --dcs-u: 3px;\n  --dcs-s-1: 1px;\n  --dcs-s-2: 2px;\n  --dcs-s-3: 4px;\n  --dcs-s-4: 6px;\n  --dcs-s-5: 9px;\n  --dcs-s-6: 12px;\n  --dcs-s-7: 16px;\n  --dcs-s-8: 22px;\n  --dcs-h-sm: 16px;\n  --dcs-h: 20px;\n  --dcs-h-lg: 26px;\n  --dcs-h-xl: 34px;\n  --dcs-h-in: 20px;\n}\n\n[data-dcs-density=spacious] {\n  --dcs-u: 5px;\n  --dcs-s-1: 4px;\n  --dcs-s-2: 8px;\n  --dcs-s-3: 12px;\n  --dcs-s-4: 16px;\n  --dcs-s-5: 20px;\n  --dcs-s-6: 26px;\n  --dcs-s-7: 32px;\n  --dcs-s-8: 44px;\n  --dcs-h-sm: 22px;\n  --dcs-h: 28px;\n  --dcs-h-lg: 36px;\n  --dcs-h-xl: 46px;\n  --dcs-h-in: 24px;\n}\n\n/* Radius modes */\n[data-dcs-radius=sharp] {\n  --dcs-r-1: 0;\n  --dcs-r-2: 0;\n  --dcs-r-3: 0;\n  --dcs-r-4: 0;\n}\n\n[data-dcs-radius=round] {\n  --dcs-r-1: 4px;\n  --dcs-r-2: 6px;\n  --dcs-r-3: 10px;\n  --dcs-r-4: 14px;\n}\n\n/* Accent recipes (set by Tweaks panel) */\n[data-dcs-accent=cyan] {\n  --dcs-accent: #00b8d4;\n  --dcs-accent-hi:#22d4ee;\n  --dcs-accent-lo:#0098b0;\n  --dcs-accent-dim: rgba(0,184,212,.18);\n  --dcs-accent-haze: rgba(0,184,212,.35);\n}\n\n[data-dcs-accent=teal] {\n  --dcs-accent: #2f9c93;\n  --dcs-accent-hi:#3fb8ad;\n  --dcs-accent-lo:#247b73;\n  --dcs-accent-dim: rgba(47,156,147,.18);\n  --dcs-accent-haze: rgba(47,156,147,.35);\n}\n\n[data-dcs-accent=orange] {\n  --dcs-accent: #ff8a3a;\n  --dcs-accent-hi:#ffa566;\n  --dcs-accent-lo:#e07024;\n  --dcs-accent-dim: rgba(255,138,58,.18);\n  --dcs-accent-haze: rgba(255,138,58,.35);\n}\n\n[data-dcs-accent=violet] {\n  --dcs-accent: #8b6dff;\n  --dcs-accent-hi:#a48cff;\n  --dcs-accent-lo:#6f4eea;\n  --dcs-accent-dim: rgba(139,109,255,.18);\n  --dcs-accent-haze: rgba(139,109,255,.35);\n}\n\n[data-dcs-accent=purple] {\n  --dcs-accent: #8466cf;\n  --dcs-accent-hi:#9d83df;\n  --dcs-accent-lo:#6a4eb3;\n  --dcs-accent-dim: rgba(132,102,207,.18);\n  --dcs-accent-haze: rgba(132,102,207,.35);\n}\n\n[data-dcs-accent=green] {\n  --dcs-accent: #3dd68a;\n  --dcs-accent-hi:#5be8a0;\n  --dcs-accent-lo:#2bb872;\n  --dcs-accent-dim: rgba(61,214,138,.18);\n  --dcs-accent-haze: rgba(61,214,138,.35);\n}\n\n/* Darkness modes */\n[data-dcs-dark=darker] {\n  --dcs-bg-app: #14161c;\n  --dcs-bg: #1d2028;\n  --dcs-surface-1: #252934;\n  --dcs-surface-2: #2e323e;\n  --dcs-surface-3: #383d4a;\n  --dcs-well: #14161c;\n  --dcs-stage: #3a4150;\n}\n\n[data-dcs-dark=lighter] {\n  --dcs-bg-app: #2c303a;\n  --dcs-bg: #363b47;\n  --dcs-surface-1: #404654;\n  --dcs-surface-2: #4a5161;\n  --dcs-surface-3: #555d6e;\n  --dcs-well: #22252e; /* darker than lighter-mode bg-app */\n  --dcs-stage: #5e6577;\n}\n\n/* ------------------------------------------------------------\n   2 · RESET (scoped)\n   ------------------------------------------------------------ */\n.dcs, .dcs * {\n  box-sizing: border-box;\n}\n\n.dcs {\n  font-family: var(--dcs-font);\n  font-size: var(--dcs-fs);\n  line-height: var(--dcs-lh);\n  color: var(--dcs-text);\n  background: var(--dcs-bg);\n  /* Scoped here (not on :root) so the dark scheme — and dark native\n     scrollbars/controls — never leak into a light host page. */\n  color-scheme: dark;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: geometricPrecision;\n}\n\n.dcs button, .dcs input, .dcs select, .dcs textarea {\n  font: inherit;\n  color: inherit;\n}\n\n/* ------------------------------------------------------------\n   3 · PANELS — flat by default, no border / no shadow\n   ------------------------------------------------------------ */\n.dcs-panel {\n  background: var(--dcs-bg);\n  border-radius: var(--dcs-r-2);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.dcs-panel--raised {\n  background: var(--dcs-surface-1);\n}\n\n.dcs-panel--bordered {\n  border: 1px solid var(--dcs-line);\n}\n\n.dcs-panel__header {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  height: var(--dcs-h);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  border-top-left-radius: var(--dcs-r-2);\n  border-top-right-radius: var(--dcs-r-2);\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n  letter-spacing: 0.02em;\n  color: var(--dcs-text-dim);\n  user-select: none;\n}\n\n.dcs-panel__header--active {\n  color: var(--dcs-text);\n}\n\n.dcs-panel__title {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  flex: 1;\n  min-width: 0;\n}\n\n.dcs-panel__title svg {\n  color: var(--dcs-text-mute);\n}\n\n.dcs-panel__tools {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.dcs-panel__close {\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: var(--dcs-s-2);\n  color: var(--dcs-text-mute);\n  background: transparent;\n  border: none;\n  border-radius: var(--dcs-r-1);\n  cursor: pointer;\n  opacity: 0.7;\n  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);\n}\n\n.dcs-panel__close:hover {\n  opacity: 1;\n  color: var(--dcs-danger);\n  background: rgba(239, 107, 107, 0.15);\n}\n\n.dcs-panel__body {\n  padding: var(--dcs-s-5);\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n\n.dcs-panel__body--pad-0 {\n  padding: 0;\n}\n\n.dcs-panel__body--pad-sm {\n  padding: var(--dcs-s-3);\n}\n\n.dcs-panel__footer {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  height: var(--dcs-h-sm);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-top: 1px solid var(--dcs-line);\n  color: var(--dcs-text-mute);\n  font-size: var(--dcs-fs-xs);\n  font-family: var(--dcs-font-mono);\n}\n\n/* Panel tab bar (Blender-ish) */\n.dcs-tabs {\n  display: flex;\n  align-items: stretch;\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  padding: 0 var(--dcs-s-3);\n  gap: 2px;\n  user-select: none;\n}\n\n.dcs-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding: 0 var(--dcs-s-4);\n  height: calc(var(--dcs-h) - 2px);\n  margin-top: 2px;\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  background: transparent;\n  border: 1px solid transparent;\n  border-bottom: none;\n  border-top-left-radius: var(--dcs-r-1);\n  border-top-right-radius: var(--dcs-r-1);\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n\n.dcs-tab:hover {\n  background: var(--dcs-surface-2);\n  color: var(--dcs-text);\n}\n\n.dcs-tab[aria-selected=true] {\n  background: var(--dcs-bg);\n  color: var(--dcs-text);\n  border-color: var(--dcs-line);\n  position: relative;\n}\n\n.dcs-tab[aria-selected=true]::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  height: 1px;\n  background: var(--dcs-bg);\n}\n\n/* Tab panels: ensure `[hidden]` actually hides the panel even when its\n   body sets `display: flex` (or grid) via a class — otherwise content\n   from the inactive tab can bleed through under the active tab. Two\n   attribute selectors give us specificity (0,2,0) which beats any\n   single-class layout rule (0,1,0) without needing !important. */\n[data-dcs-tabpanel][hidden] {\n  display: none;\n}\n\n/* ------------------------------------------------------------\n   4 · DOCK / SPLIT\n   ------------------------------------------------------------ */\n.dcs-dock {\n  display: flex;\n  background: var(--dcs-bg-app);\n  min-height: 0;\n  height: 100%;\n}\n\n.dcs-dock--v {\n  flex-direction: column;\n}\n\n.dcs-dock > .dcs-panel {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  border-radius: 0;\n}\n\n.dcs-splitter {\n  flex: 0 0 1px;\n  background: var(--dcs-line);\n  cursor: col-resize;\n  position: relative;\n}\n\n.dcs-dock--v > .dcs-splitter,\n.dcs-splitter--h {\n  cursor: row-resize;\n  flex-basis: 1px;\n}\n\n/* The ::before is just a wider, invisible grab area — DCC splitters keep\n   the resize cursor as the only affordance and avoid an accent flash as\n   the pointer sweeps the screen. */\n.dcs-splitter::before {\n  content: \"\";\n  position: absolute;\n  left: -3px;\n  right: -3px;\n  top: 0;\n  bottom: 0;\n  z-index: 2;\n}\n\n.dcs-dock--v > .dcs-splitter::before,\n.dcs-splitter--h::before {\n  left: 0;\n  right: 0;\n  top: -3px;\n  bottom: -3px;\n}\n\n/* ------------------------------------------------------------\n   5 · BUTTONS  — flat by default\n   ------------------------------------------------------------ */\n.dcs-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dcs-s-2);\n  height: var(--dcs-h);\n  padding: 0 var(--dcs-s-5);\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n  letter-spacing: 0.01em;\n  color: var(--dcs-text);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n\n.dcs-btn:hover {\n  background: var(--dcs-surface-2);\n  border-color: var(--dcs-line-strong);\n}\n\n.dcs-btn:active {\n  background: var(--dcs-well);\n  color: var(--dcs-text-dim);\n}\n\n.dcs-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--dcs-ring);\n}\n\n.dcs-btn[disabled], .dcs-btn[aria-disabled=true] {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n.dcs-btn--primary {\n  background: var(--dcs-accent);\n  border-color: var(--dcs-accent-lo);\n  color: #0a1220;\n}\n\n.dcs-btn--primary:hover {\n  background: var(--dcs-accent-hi);\n}\n\n.dcs-btn--primary:active {\n  background: var(--dcs-accent-lo);\n  color: rgba(10, 18, 32, 0.85);\n}\n\n.dcs-btn--ghost {\n  background: transparent;\n  border-color: transparent;\n  color: var(--dcs-text-dim);\n}\n\n.dcs-btn--ghost:hover {\n  background: var(--dcs-surface-2);\n  color: var(--dcs-text);\n  border-color: transparent;\n}\n\n.dcs-btn--ghost:active {\n  background: var(--dcs-surface-3);\n}\n\n.dcs-btn--danger {\n  background: var(--dcs-danger);\n  border-color: #c44;\n  color: #2a0808;\n}\n\n.dcs-btn--danger:hover {\n  background: #ff7a7a;\n}\n\n.dcs-btn--sm {\n  height: var(--dcs-h-sm);\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-xs);\n}\n\n.dcs-btn--lg {\n  height: var(--dcs-h-lg);\n  padding: 0 var(--dcs-s-6);\n  font-size: var(--dcs-fs-md);\n}\n\n.dcs-btn--icon {\n  padding: 0;\n  width: var(--dcs-h);\n}\n\n.dcs-btn--icon.dcs-btn--sm {\n  width: var(--dcs-h-sm);\n}\n\n.dcs-btn--icon.dcs-btn--sm .dcs-icon {\n  width: 12px;\n  height: 12px;\n}\n\n.dcs-btn--icon.dcs-btn--lg {\n  width: var(--dcs-h-lg);\n}\n\n.dcs-btn--icon.dcs-btn--lg .dcs-icon {\n  width: 18px;\n  height: 18px;\n}\n\n/* Selected / toggled — solid key colour with a dark icon, rounded\n   (uniform across plain buttons, toolbars, button-groups, and floaters). */\n.dcs-btn[aria-pressed=true] {\n  background: var(--dcs-accent);\n  border-color: transparent;\n  color: #0a1220;\n}\n\n.dcs-btn[aria-pressed=true]:hover {\n  background: var(--dcs-accent-hi);\n}\n\n/* Button group (segmented) — visible chassis so the grouping reads */\n.dcs-btn-group {\n  display: inline-flex;\n  border-radius: var(--dcs-r-2);\n  background: var(--dcs-well);\n  padding: 2px;\n  gap: 1px;\n  border: 1px solid var(--dcs-line);\n  align-items: center;\n}\n\n.dcs-btn-group .dcs-btn {\n  border: none;\n  border-radius: var(--dcs-r-1);\n  background: transparent;\n  height: calc(var(--dcs-h) - 6px);\n  color: var(--dcs-text-dim);\n  padding: 0 var(--dcs-s-3);\n  min-width: calc(var(--dcs-h) - 6px);\n}\n\n.dcs-btn-group .dcs-btn:hover {\n  background: var(--dcs-surface-2);\n  color: var(--dcs-text);\n}\n\n.dcs-btn-group .dcs-btn[aria-pressed=true] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  font-weight: 500;\n}\n\n.dcs-btn-group .dcs-btn[aria-pressed=true]:hover {\n  background: var(--dcs-accent-hi);\n}\n\n/* ------------------------------------------------------------\n   6 · INPUT — flat by default\n   ------------------------------------------------------------ */\n.dcs-input, .dcs-select, .dcs-textarea {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dcs-h-in);\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  outline: none;\n  transition: border-color var(--dcs-t-fast), box-shadow var(--dcs-t-fast);\n  font-family: var(--dcs-font);\n}\n\n.dcs-textarea {\n  height: auto;\n  padding: var(--dcs-s-3);\n  line-height: var(--dcs-lh);\n  resize: vertical;\n}\n\n.dcs-input::placeholder {\n  color: var(--dcs-text-mute);\n}\n\n.dcs-input:hover, .dcs-select:hover, .dcs-textarea:hover {\n  border-color: var(--dcs-line-strong);\n}\n\n.dcs-input:focus, .dcs-select:focus, .dcs-textarea:focus {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 2px var(--dcs-accent-haze);\n}\n\n.dcs-input--num {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n/* ── Search input ──────────────────────────────────────────────\n   A standard text input dressed as a search field: a leading\n   magnifier icon (`<i class=\"di di-search\">` inside) and a\n   placeholder. The icon is absolutely positioned inside the\n   wrapper so the input itself stays a stock `.dcs-input` — apps\n   can use any of the input variants inside (compact, etc.).\n\n   Markup:\n     <div class=\"dcs-search\">\n       <i class=\"di di-search\" aria-hidden=\"true\"></i>\n       <input class=\"dcs-input\" type=\"search\" placeholder=\"Search…\">\n     </div>\n*/\n.dcs-search {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.dcs-search > .di {\n  position: absolute;\n  left: var(--dcs-s-3);\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--dcs-text-mute);\n  pointer-events: none;\n  font-size: 13px;\n  line-height: 1;\n}\n\n.dcs-search > .dcs-input {\n  padding-left: calc(var(--dcs-s-3) + 18px);\n  width: 100%;\n}\n\n/* Enum dropdown trigger — a select-styled button that opens a .dcs-menu of\n   options. The full form of a \"choose one of N\" enum; the segmented\n   button-group is its shorthand for when the options fit inline. */\n.dcs-select--btn {\n  gap: var(--dcs-s-2);\n  cursor: pointer;\n  user-select: none;\n  color: var(--dcs-text);\n}\n\n.dcs-select--btn .dcs-select__label {\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dcs-select--btn .dcs-select__caret {\n  flex: 0 0 auto;\n  color: var(--dcs-text-mute);\n  margin-right: calc(var(--dcs-s-1) * -1);\n}\n\n.dcs-select--btn:hover {\n  border-color: var(--dcs-line-strong);\n}\n\n.dcs-select--btn.dcs-select--open,\n.dcs-select--btn[aria-expanded=true] {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 2px var(--dcs-accent-haze);\n}\n\n.dcs-select--btn.dcs-select--open .dcs-select__caret,\n.dcs-select--btn[aria-expanded=true] .dcs-select__caret {\n  color: var(--dcs-accent);\n}\n\n/* ── Field row primitive ──────────────────────────────────────────\n   `.dcs-field` is one label-plus-control row. On its own it's just a\n   flex row — to get even, opinionated spacing across many rows, wrap\n   them in one of the two form layouts below: `.dcs-form` (general) or\n   `.dcs-props` (inspector). */\n.dcs-field {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  min-height: var(--dcs-h);\n}\n\n.dcs-field__label {\n  flex: 0 0 96px;\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  user-select: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dcs-field--row > * {\n  flex: 1;\n}\n\n/* ── Form layouts: .dcs-form vs .dcs-props ─────────────────────────\n   Two selectors decide how a stack of `.dcs-field` rows looks. Pick\n   one based on context — they are mutually exclusive.\n\n   `.dcs-form`   — DIALOG / MODAL layout. Use this in dialog boxes,\n                   modal-like panels, preference sheets, signup forms,\n                   wizards — anywhere the user is filling in a focused\n                   set of values rather than tweaking live channels.\n                   Labels are **right-justified** against a fixed-width\n                   column; controls keep their **natural width**; bare\n                   buttons self-center; a `.dcs-form__actions` footer\n                   right-aligns grouped actions under the control column.\n\n   `.dcs-props`  — INSPECTOR layout. Use this for property inspectors,\n                   channel editors, attribute lists, node settings —\n                   anywhere a live object's channels are exposed for\n                   continuous editing. Labels are **left-justified**\n                   against a fixed-width column; controls (including\n                   bare buttons) **stretch to fill** the row so a tall\n                   stack reads as even, same-size channel rows.\n\n   Inline checkbox-with-text (check left, label right) — just place a\n   bare `.dcs-check` outside a form/props stack; that's its default.\n\n   Tune label-column width per instance with `--dcs-form-label-w` or\n   `--dcs-props-label-w`. */\n.dcs-form {\n  /* In dialog mode the centerline IS the view's centerline — labels\n     right-justify up to 50%, controls start from 50%. This differs\n     from `.dcs-props` (inspector), where the label column is a fixed\n     pixel width tuned to the longest expected prompt. Override\n     `--dcs-form-label-w` per-instance if you need a different split. */\n  --dcs-form-label-w: 50%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-3);\n}\n\n.dcs-form > .dcs-field {\n  min-height: var(--dcs-h-in);\n}\n\n.dcs-form > .dcs-field > .dcs-field__label {\n  flex: 0 0 var(--dcs-form-label-w);\n  text-align: right;\n}\n\n.dcs-form__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--dcs-s-3);\n  padding-left: calc(var(--dcs-form-label-w) + var(--dcs-s-3));\n}\n\n/* A bare button (or button group) dropped directly into a `.dcs-form`\n   stack keeps its natural size and self-centers in the form column —\n   matches the \"controls keep natural width\" rule above. For grouped,\n   right-aligned action rows use `.dcs-form__actions`. */\n.dcs-form > .dcs-btn,\n.dcs-form > .dcs-btn-group {\n  align-self: center;\n}\n\n/* A `.dcs-btn-row` is a paired-button row that adapts to its stack:\n     • in `.dcs-form` (dialog): buttons sit centered at natural width\n       next to each other.\n     • in `.dcs-props` (inspector): buttons split the row evenly via\n       `flex: 1` — two buttons cut the row in half, three split it\n       into thirds, etc., matching the channel-widget contract.\n   Use this when you want Cancel/Apply, Yes/No, or any paired actions\n   without picking the right-aligned `.dcs-form__actions` footer. */\n.dcs-btn-row {\n  display: flex;\n  gap: var(--dcs-s-3);\n}\n\n.dcs-form > .dcs-btn-row {\n  justify-content: center;\n}\n\n.dcs-props > .dcs-btn-row > .dcs-btn,\n.dcs-props > .dcs-btn-row > .dcs-btn-group {\n  flex: 1;\n  min-width: 0;\n  height: var(--dcs-h-in);\n}\n\n/* ── Channel-widget contract ──────────────────────────────────────\n   Inside `.dcs-props`, each row is locked to --dcs-h-in tall so the\n   whole stack reads as even, same-size rows. A \"channel widget\" is\n   any control that obeys two rules:\n     1. it's no taller than the row (--dcs-h-in), and\n     2. if it should span the row, it stretches (flex: 1).\n   Built-ins listed below already comply; a custom widget opts in by\n   adding `.dcs-field__fill` (to span) or simply staying short (to\n   sit LEFT-justified in the channel column, like a switch/check).\n   The set is open — anything that follows the contract keeps the\n   rhythm. */\n.dcs-props {\n  --dcs-props-label-w: 96px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-3);\n}\n\n.dcs-props > .dcs-field {\n  height: var(--dcs-h-in);\n  min-height: var(--dcs-h-in);\n  /* No `justify-content` — defaults to flex-start so non-stretched\n     widgets (Check, Switch, fixed-width chip) sit at the LEFT edge\n     of the channel column, aligned with the start of stretched\n     controls above/below. Stretched widgets fill the column via\n     `flex: 1` below. */\n}\n\n.dcs-props > .dcs-field > .dcs-field__label {\n  flex: 0 0 var(--dcs-props-label-w);\n  text-align: left;\n}\n\n/* Spanning channel widgets: fill the row after the label and collapse\n   to one uniform height (so the 24px-tall defaults — slider, swatch,\n   button-group — match the 22px text/number fields when stacked).\n   `.dcs-field__fill` is the opt-in escape hatch for custom widgets. */\n.dcs-props > .dcs-field > .dcs-slider,\n.dcs-props > .dcs-field > .dcs-input,\n.dcs-props > .dcs-field > .dcs-select,\n.dcs-props > .dcs-field > .dcs-combo,\n.dcs-props > .dcs-field > .dcs-swatch,\n.dcs-props > .dcs-field > .dcs-colorfield,\n.dcs-props > .dcs-field > .dcs-btn-group,\n.dcs-props > .dcs-field > .dcs-field__fill {\n  flex: 1;\n  min-width: 0;\n  height: var(--dcs-h-in);\n}\n\n.dcs-props > .dcs-field > .dcs-btn-group {\n  /* Never shrink a button-group past its natural content size — Local /\n     Global / Local-Global rows get illegible when they squeeze under\n     an icon-only floor. Keeps flex:1 so the group still stretches to\n     fill the channel column when there's room. */\n  min-width: max-content;\n}\n\n.dcs-props > .dcs-field > .dcs-btn-group .dcs-btn {\n  height: calc(var(--dcs-h-in) - 6px);\n  min-width: calc(var(--dcs-h-in) - 6px);\n  padding: 0 var(--dcs-s-3);\n}\n\n/* ── Vector row primitive ──────────────────────────────────────\n   `.dcs-vec` is a flex row of equal-width controls — typically the\n   X/Y/Z numeric editors of a Location / Rotation / Scale channel.\n   Children share row width evenly but won't shrink below\n   `--dcs-xform-minwidth` (default 48px) so labels stay readable; below\n   that floor the row overflows rather than crushing the values.\n   Drops into a `.dcs-props > .dcs-field` slot and stretches to fill\n   the channel column.\n\n   Combos inside a `.dcs-vec` drop the range-fill bar — XYZ values\n   are coordinates, not a range, so a left-to-right fill would be\n   meaningless (and visually confused with a slider). */\n.dcs-vec {\n  --dcs-xform-minwidth: 72px;\n  display: flex;\n  gap: var(--dcs-s-1);\n  min-width: 0;\n}\n\n.dcs-vec > * {\n  flex: 1 1 0;\n  min-width: var(--dcs-xform-minwidth);\n  min-height: var(--dcs-h-in); /* never collapse to thin horizontal lines */\n}\n\n.dcs-vec > .dcs-combo .dcs-combo__fill {\n  display: none;\n}\n\n/* Override the stock `.dcs-combo { min-width: 96px }` so the combo\n   inside a vec respects the vec's per-item floor (`--dcs-xform-minwidth`).\n   Without this, combos refuse to shrink past 96px and the JS observer\n   can never observe a constrained width — the synchronized flip\n   threshold is meaningless if the children block the shrink. */\n.dcs-vec > .dcs-combo {\n  min-width: var(--dcs-xform-minwidth);\n}\n\n.dcs-props > .dcs-field > .dcs-vec {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Field hosting a vec — anchor the prompt to the TOP of the row so a\n   stacked vec keeps its label at the upper-left where the eye lands. */\n.dcs-field:has(> .dcs-vec) {\n  align-items: flex-start;\n}\n\n.dcs-field:has(> .dcs-vec) > .dcs-field__label {\n  padding-top: 3px;\n}\n\n/* When the vec can't fit its N children at `--dcs-xform-minwidth` apiece, JS\n   (initVecLayout, ResizeObserver-driven) toggles `.dcs-vec--stacked`.\n   The flip threshold is computed from the SAME `--dcs-xform-minwidth` that\n   sets the horizontal floor, so changing the floor automatically\n   adjusts the flip point — they stay synchronized. */\n.dcs-vec--stacked {\n  flex-direction: column;\n}\n\n.dcs-vec--stacked > * {\n  min-width: 0;\n  width: 100%;\n}\n\n/* Field gets `height: auto` so it can grow tall when its vec stacks\n   three combos vertically — otherwise the fixed channel-row height\n   (var(--dcs-h-in)) collides with the per-combo min-height and the\n   row content gets crushed. */\n.dcs-props > .dcs-field:has(> .dcs-vec.dcs-vec--stacked) {\n  height: auto;\n}\n\n.dcs-props > .dcs-field:has(> .dcs-vec) {\n  min-height: var(--dcs-h-in);\n}\n\n/* ── Standalone note / info / warning row ────────────────────────\n   A `.dcs-note` is a full-width text strip inside a form/props stack\n   — no prompt, no editor, just text spanning the row. Use it for\n   section hints, derived/status values, info messages, or warnings\n   that sit *between* the editable channels rather than next to one.\n   Variants colorize the text via semantic tokens; pair with a small\n   `<Icon>` for an at-a-glance affordance. */\n.dcs-note {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  font-size: var(--dcs-fs-sm);\n  line-height: var(--dcs-lh);\n  color: var(--dcs-text-dim); /* match `.dcs-field__label` prompts */\n  font-weight: 400;\n  min-width: 0;\n}\n\n.dcs-note--mono {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.dcs-note--mute {\n  color: var(--dcs-text-mute);\n}\n\n.dcs-note--info {\n  color: var(--dcs-info);\n}\n\n.dcs-note--warn {\n  color: var(--dcs-warn);\n}\n\n.dcs-note--ok {\n  color: var(--dcs-ok);\n}\n\n.dcs-note--danger {\n  color: var(--dcs-danger);\n}\n\n/* When dropped directly into a form/props stack, the note spans the\n   full row width (no prompt, no channel column) and stays at one\n   channel-row of height for a single line. Text is plain — normal\n   weight, no title hierarchy, no chrome — so it reads as a quiet\n   line in the dialog rather than a callout. In `.dcs-form` (dialog)\n   the text centers like a dialog blurb; in `.dcs-props` (inspector)\n   it stays left-aligned with the rest of the channel column. */\n.dcs-form > .dcs-note,\n.dcs-props > .dcs-note {\n  width: 100%;\n  min-height: var(--dcs-h-in);\n  font-weight: 400;\n}\n\n.dcs-form > .dcs-note {\n  justify-content: center;\n  text-align: center;\n}\n\n/* `.dcs-alert` dropped into a form/props stack — the heavier sibling\n   of `.dcs-note`. Restyled to a soft \"callout\" box: rounded rect,\n   semantic-tinted background, matching tinted border, icon on the\n   left, plain text on the right. The default `.dcs-alert` accent\n   stripe + raised-surface chrome (its standalone-panel look) is\n   dropped here — inline in a dialog, that visual weight fights the\n   rest of the form. */\n.dcs-form > .dcs-alert,\n.dcs-props > .dcs-alert {\n  width: 100%;\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  border: 1px solid var(--dcs-accent-haze);\n  background: var(--dcs-accent-dim);\n  border-radius: var(--dcs-r-2);\n  align-items: center;\n  gap: var(--dcs-s-3);\n  font-weight: 400;\n}\n\n.dcs-form > .dcs-alert.dcs-alert--ok,\n.dcs-props > .dcs-alert.dcs-alert--ok {\n  background: rgba(78, 209, 138, 0.12);\n  border-color: rgba(78, 209, 138, 0.35);\n}\n\n.dcs-form > .dcs-alert.dcs-alert--warn,\n.dcs-props > .dcs-alert.dcs-alert--warn {\n  background: rgba(242, 177, 74, 0.12);\n  border-color: rgba(242, 177, 74, 0.35);\n}\n\n.dcs-form > .dcs-alert.dcs-alert--danger,\n.dcs-props > .dcs-alert.dcs-alert--danger {\n  background: rgba(239, 107, 107, 0.12);\n  border-color: rgba(239, 107, 107, 0.35);\n}\n\n/* Inline-callout text: full-strength color, normal weight, no nested\n   title/msg distinction. The body can be a bare string — the existing\n   `.dcs-alert__title` / `.dcs-alert__msg` two-tier structure is\n   collapsed so a single line reads cleanly. */\n.dcs-form > .dcs-alert .dcs-alert__title,\n.dcs-props > .dcs-alert .dcs-alert__title {\n  font-weight: 400;\n  margin: 0;\n}\n\n.dcs-form > .dcs-alert .dcs-alert__msg,\n.dcs-props > .dcs-alert .dcs-alert__msg {\n  color: var(--dcs-text);\n}\n\n/* Textareas — the \"larger edit box\" — default to two channel rows tall\n   in both form and inspector contexts (so a freshly-dropped textarea\n   reads as the multi-line variant of an input, not a one-liner that\n   happens to scroll). The row holding it expands vertically, and the\n   label aligns to the top of the textarea so it doesn't float in the\n   middle of a tall block.\n\n   Resize affordance follows context: in `.dcs-form` the textarea has\n   natural width so it resizes BOTH ways; in `.dcs-props` the textarea\n   stretches to fill the channel column (`flex: 1`) so only vertical\n   resize is meaningful — horizontal resize would fight the layout. */\n.dcs-form > .dcs-field > .dcs-textarea,\n.dcs-props > .dcs-field > .dcs-textarea {\n  height: calc(var(--dcs-h-in) * 2 + var(--dcs-s-3));\n  min-height: calc(var(--dcs-h-in) * 2 + var(--dcs-s-3));\n}\n\n.dcs-form > .dcs-field > .dcs-textarea {\n  resize: both;\n}\n\n.dcs-props > .dcs-field > .dcs-textarea {\n  flex: 1;\n  min-width: 0;\n  resize: vertical;\n}\n\n/* Row containing a textarea: lets the row grow vertically, drops the\n   middle-centering (no point centering a short label against a tall\n   box), and aligns the label's first line with the textarea's first\n   line of text. The label uses normal line-height so its top edge\n   matches the textarea's interior top padding (--dcs-s-3). */\n.dcs-form > .dcs-field:has(.dcs-textarea),\n.dcs-props > .dcs-field:has(.dcs-textarea) {\n  height: auto;\n  align-items: flex-start;\n}\n\n.dcs-form > .dcs-field:has(.dcs-textarea) > .dcs-field__label,\n.dcs-props > .dcs-field:has(.dcs-textarea) > .dcs-field__label {\n  padding-top: var(--dcs-s-3);\n  line-height: var(--dcs-lh);\n  /* Tall labels with a textarea should wrap, not ellipsis-clip — there\n     is room for the wrap, and clipping looks worse than two short\n     lines next to a multi-line edit box. */\n  white-space: normal;\n  text-overflow: clip;\n}\n\n/* ── List / Tree as a field control ──────────────────────────────\n   Lists and trees are too tall and too \"object-like\" to share a row\n   with a label the way a slider or input does. When a `.dcs-list` or\n   `.dcs-tree` is the value side of a `.dcs-field`, the row flips\n   vertical: prompt sits ABOVE the list, list sits below as a sunken\n   chrome'd well.\n     • `.dcs-props` (inspector): list spans the full row width, label\n       left-aligned above it.\n     • `.dcs-form` (dialog): list takes two-thirds width and centers\n       under a centered label.\n   Default height is four channel rows so an engineer dropping a list\n   into a form doesn't have to size it. Adjust per-instance with the\n   `--dcs-list-h` custom property. */\n.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table),\n.dcs-props > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) {\n  --dcs-list-h: calc(var(--dcs-h) * 4);\n  flex-direction: column;\n  align-items: flex-start;\n  height: auto;\n  min-height: 0;\n  gap: var(--dcs-s-2);\n}\n\n/* In .dcs-form the entire prompt/list pair container is 66% wide and\n   centered in the form. Inside that container, the prompt sits at\n   top-left and the list fills the container's full width — so both\n   align to the container's left edge, and the whole pair sits in\n   the visual center of the form. */\n.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) {\n  width: 66%;\n  align-self: center;\n}\n\n.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) > .dcs-field__label,\n.dcs-props > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) > .dcs-field__label {\n  flex: 0 0 auto;\n  width: auto;\n  text-align: left;\n}\n\n/* The list/tree/table fills the pair container's width — in .dcs-form\n   that's 66% of the form, in .dcs-props that's 100% of the inspector. */\n.dcs-form > .dcs-field > .dcs-list,\n.dcs-form > .dcs-field > .dcs-tree,\n.dcs-form > .dcs-field > .dcs-table,\n.dcs-props > .dcs-field > .dcs-list,\n.dcs-props > .dcs-field > .dcs-tree,\n.dcs-props > .dcs-field > .dcs-table {\n  width: 100%;\n}\n\n/* Shared chrome: sunken well + border + scrollable + default height.\n   Tables need `display: block` to honour `overflow: auto` (default\n   `display: table` ignores overflow); this loses native column\n   auto-sizing — set `<th>`/`<td>` widths explicitly if needed. */\n.dcs-form > .dcs-field > .dcs-list,\n.dcs-form > .dcs-field > .dcs-tree,\n.dcs-form > .dcs-field > .dcs-table,\n.dcs-props > .dcs-field > .dcs-list,\n.dcs-props > .dcs-field > .dcs-tree,\n.dcs-props > .dcs-field > .dcs-table {\n  height: var(--dcs-list-h);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  overflow: auto;\n}\n\n.dcs-form > .dcs-field > .dcs-table,\n.dcs-props > .dcs-field > .dcs-table {\n  display: block;\n}\n\n/* A bare button (or button group) dropped directly into a `.dcs-props`\n   stack — not wrapped in a `.dcs-field` — acts as a channel-sized\n   widget: full row width, locked to row height. Stretch is the inspector\n   contract. */\n.dcs-props > .dcs-btn,\n.dcs-props > .dcs-btn-group {\n  width: 100%;\n  height: var(--dcs-h-in);\n}\n\n.dcs-props > .dcs-btn-group .dcs-btn {\n  height: calc(var(--dcs-h-in) - 6px);\n  min-width: calc(var(--dcs-h-in) - 6px);\n}\n\n/* Link field — a channel widget that accepts a dragged asset/node (DnD).\n   Dashed while empty, solid once linked; flips to accent/danger as a drop\n   target. Sits at channel-row height so it stacks with the others. */\n.dcs-linkfield {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  height: var(--dcs-h-in);\n  padding: 0 var(--dcs-s-2);\n  background: var(--dcs-well);\n  border: 1px dashed var(--dcs-line-strong);\n  border-radius: var(--dcs-r-2);\n  color: var(--dcs-text-dim);\n  font-size: var(--dcs-fs-sm);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.dcs-linkfield--set {\n  border-style: solid;\n  color: var(--dcs-text);\n}\n\n.dcs-linkfield__empty {\n  color: var(--dcs-text-mute);\n  font-style: italic;\n}\n\n.dcs-linkfield.dcs-drop--valid {\n  border-style: solid;\n  border-color: var(--dcs-accent);\n  background: var(--dcs-accent-dim);\n  box-shadow: none;\n}\n\n.dcs-linkfield.dcs-drop--invalid {\n  border-color: var(--dcs-danger);\n  box-shadow: none;\n}\n\n/* ZBrush-style combo number/slider — flat by default */\n.dcs-combo {\n  position: relative;\n  display: inline-flex;\n  align-items: stretch;\n  height: var(--dcs-h-in);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  overflow: hidden;\n  user-select: none;\n  min-width: 96px;\n  cursor: ew-resize;\n}\n\n.dcs-combo--sm {\n  height: var(--dcs-h-sm);\n  min-width: 56px;\n}\n\n.dcs-combo--sm .dcs-combo__label,\n.dcs-combo--sm .dcs-combo__value {\n  font-size: var(--dcs-fs-xs);\n  padding: 0 var(--dcs-s-2);\n}\n\n.dcs-combo--lg {\n  height: calc(var(--dcs-h-lg) - 2px);\n  min-width: 120px;\n}\n\n.dcs-combo--lg .dcs-combo__label,\n.dcs-combo--lg .dcs-combo__value {\n  font-size: var(--dcs-fs-md);\n  padding: 0 var(--dcs-s-4);\n}\n\n.dcs-combo__fill {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  height: 2px;\n  width: var(--fill, 50%);\n  background: var(--dcs-accent);\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n.dcs-combo__label, .dcs-combo__value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-sm);\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.dcs-combo__label {\n  color: var(--dcs-text-mute);\n  flex: 0 0 auto;\n  min-width: 0;\n  padding-right: var(--dcs-s-2);\n}\n\n.dcs-combo__value {\n  color: var(--dcs-text);\n  flex: 1;\n  min-width: 0;\n  justify-content: flex-end;\n  padding-right: var(--dcs-s-3);\n}\n\n/* Combo chevrons — hidden in flat mode (no fly-out animation), always-visible in 3D */\n.dcs-combo__btn {\n  display: none;\n  width: 14px;\n  align-items: center;\n  justify-content: center;\n  color: var(--dcs-text-mute);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.dcs-combo__btn:hover {\n  color: var(--dcs-text);\n  background: rgba(255, 255, 255, 0.04);\n}\n\n.dcs-combo:hover {\n  border-color: var(--dcs-line-strong);\n  background: var(--dcs-bg);\n}\n\n.dcs-combo:focus-within {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 2px var(--dcs-accent-haze);\n}\n\n.dcs-combo--editing {\n  cursor: text;\n}\n\n.dcs-combo--editing .dcs-combo__fill {\n  opacity: 0;\n}\n\n.dcs-combo__edit {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  background: var(--dcs-well);\n  border: none;\n  outline: none;\n  padding: 0 var(--dcs-s-3);\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text);\n  text-align: right;\n}\n\n/* ------------------------------------------------------------\n   7 · SLIDER (DCC horizontal track + synth vertical)\n   ------------------------------------------------------------ */\n.dcs-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: var(--dcs-h);\n  width: 100%;\n  min-width: 80px;\n  user-select: none;\n  cursor: pointer;\n}\n\n.dcs-slider__track {\n  position: relative;\n  height: 4px;\n  width: 100%;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: 999px;\n}\n\n.dcs-slider__fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--fill, 50%);\n  background: linear-gradient(90deg, var(--dcs-accent-lo), var(--dcs-accent));\n  border-radius: 999px;\n}\n\n.dcs-slider__thumb {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  left: var(--fill, 50%);\n  width: 12px;\n  height: 12px;\n  background: var(--dcs-surface-3);\n  border: 1px solid var(--dcs-accent);\n  border-radius: 50%;\n  transition: transform var(--dcs-t-fast), background var(--dcs-t-fast);\n}\n\n.dcs-slider:hover .dcs-slider__thumb {\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n.dcs-slider--active .dcs-slider__thumb,\n.dcs-slider:focus-within .dcs-slider__thumb {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 3px var(--dcs-accent-haze);\n}\n\n.dcs-slider__tick {\n  position: absolute;\n  top: -3px;\n  width: 1px;\n  height: 10px;\n  background: var(--dcs-text-mute);\n  opacity: 0.4;\n}\n\n/* Vertical synth-style fader — flat by default */\n.dcs-fader {\n  position: relative;\n  width: 28px;\n  height: 140px;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: ns-resize;\n}\n\n.dcs-fader__track {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 8px;\n  bottom: 8px;\n  width: 2px;\n  background: var(--dcs-line-soft);\n}\n\n.dcs-fader__tick {\n  position: absolute;\n  left: 4px;\n  right: 4px;\n  height: 1px;\n  background: var(--dcs-line-soft);\n}\n\n.dcs-fader__thumb {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  top: var(--pos, 50%);\n  width: 22px;\n  height: 8px;\n  background: var(--dcs-surface-3);\n  border: 1px solid var(--dcs-accent);\n  border-radius: var(--dcs-r-1);\n}\n\n.dcs-fader__thumb::after {\n  content: \"\";\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  top: 50%;\n  height: 1px;\n  background: var(--dcs-accent);\n  transform: translateY(-0.5px);\n}\n\n/* Range slider (with center detent) */\n.dcs-slider--bipolar .dcs-slider__fill {\n  left: 50%;\n  transform: translateX(0);\n  width: calc(var(--fill, 0%));\n  background: linear-gradient(90deg, var(--dcs-accent-lo), var(--dcs-accent));\n}\n\n.dcs-slider--bipolar .dcs-slider__fill[data-neg] {\n  left: auto;\n  right: 50%;\n}\n\n/* ------------------------------------------------------------\n   8 · KNOB (synth) — flat by default\n   ------------------------------------------------------------ */\n.dcs-knob {\n  position: relative;\n  width: var(--knob-size, 56px);\n  height: var(--knob-size, 56px);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ns-resize;\n  user-select: none;\n}\n\n.dcs-knob__ring {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.dcs-knob__cap {\n  position: absolute;\n  inset: 18%;\n  border-radius: 50%;\n  background: var(--dcs-surface-2);\n  border: 1px solid var(--dcs-line);\n}\n\n.dcs-knob__indicator {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 2px;\n  height: 38%;\n  background: var(--dcs-accent);\n  border-radius: 1px;\n  transform-origin: 50% 100%;\n  transform: translate(-50%, -100%) rotate(var(--angle, 0deg));\n}\n\n.dcs-knob__label {\n  position: absolute;\n  bottom: -16px;\n  left: 0;\n  right: 0;\n  text-align: center;\n  font-size: var(--dcs-fs-xs);\n  font-family: var(--dcs-font-mono);\n  color: var(--dcs-text-dim);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.dcs-knob__value {\n  position: absolute;\n  top: -14px;\n  left: 0;\n  right: 0;\n  text-align: center;\n  font-size: var(--dcs-fs-xs);\n  font-family: var(--dcs-font-mono);\n  color: var(--dcs-accent);\n}\n\n/* ------------------------------------------------------------\n   9 · CHECKBOX / RADIO / SWITCH — flat by default\n   ------------------------------------------------------------ */\n.dcs-check {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--dcs-fs-sm);\n}\n\n.dcs-check__box {\n  width: 14px;\n  height: 14px;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line-strong);\n  border-radius: var(--dcs-r-1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: transparent;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast), border-color var(--dcs-t-fast);\n}\n\n.dcs-check[aria-checked=true] .dcs-check__box {\n  background: var(--dcs-accent);\n  border-color: var(--dcs-accent-lo);\n  color: #0a1220;\n}\n\n.dcs-check__box svg {\n  width: 10px;\n  height: 10px;\n}\n\n.dcs-check:hover .dcs-check__box {\n  border-color: var(--dcs-accent);\n}\n\n.dcs-radio .dcs-check__box {\n  border-radius: 50%;\n}\n\n.dcs-radio[aria-checked=true] .dcs-check__box {\n  color: transparent;\n  position: relative;\n}\n\n.dcs-radio[aria-checked=true] .dcs-check__box::after {\n  content: \"\";\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #0a1220;\n}\n\n.dcs-switch {\n  position: relative;\n  width: 28px;\n  height: 16px;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line-strong);\n  border-radius: 999px;\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast);\n}\n\n.dcs-switch::after {\n  content: \"\";\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 12px;\n  height: 12px;\n  background: var(--dcs-text-mute);\n  border-radius: 50%;\n  transition: transform var(--dcs-t), background var(--dcs-t-fast);\n}\n\n.dcs-switch[aria-checked=true] {\n  background: var(--dcs-accent);\n  border-color: var(--dcs-accent-lo);\n}\n\n.dcs-switch[aria-checked=true]::after {\n  transform: translateX(12px);\n  background: #0a1220;\n}\n\n/* ------------------------------------------------------------\n   10 · BADGE / TAG / CHIP — solid only\n   ------------------------------------------------------------ */\n.dcs-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  height: var(--dcs-h-sm);\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-xs);\n  font-weight: 600;\n  font-family: var(--dcs-font);\n  font-variant-numeric: tabular-nums lining-nums;\n  background: var(--dcs-surface-2);\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-text-dim);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.dcs-badge--accent {\n  background: var(--dcs-accent);\n  color: #0a1220;\n}\n\n.dcs-badge--ok {\n  background: var(--dcs-ok);\n  color: #06321d;\n}\n\n.dcs-badge--warn {\n  background: var(--dcs-warn);\n  color: #3a230a;\n}\n\n.dcs-badge--danger {\n  background: var(--dcs-danger);\n  color: #380e0e;\n}\n\n.dcs-badge--soft {\n  background: var(--dcs-bg);\n  color: var(--dcs-text-dim);\n}\n\n.dcs-badge--dot::before {\n  content: \"\";\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n  opacity: 0.85;\n}\n\n/* ------------------------------------------------------------\n   11 · KBD\n   ------------------------------------------------------------ */\n.dcs-kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dcs-h-sm);\n  height: var(--dcs-h-sm);\n  padding: 0 var(--dcs-s-3);\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-xs);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-bottom-width: 2px;\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-text-dim);\n}\n\n/* ------------------------------------------------------------\n   12 · ALERT\n   ------------------------------------------------------------ */\n.dcs-alert {\n  display: flex;\n  gap: var(--dcs-s-4);\n  padding: var(--dcs-s-4) var(--dcs-s-5);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-left: 3px solid var(--dcs-accent);\n  border-radius: var(--dcs-r-2);\n  font-size: var(--dcs-fs-sm);\n  align-items: flex-start;\n}\n\n.dcs-alert--ok {\n  border-left-color: var(--dcs-ok);\n}\n\n.dcs-alert--warn {\n  border-left-color: var(--dcs-warn);\n}\n\n.dcs-alert--danger {\n  border-left-color: var(--dcs-danger);\n}\n\n.dcs-alert__icon {\n  color: var(--dcs-accent);\n  flex: 0 0 auto;\n}\n\n.dcs-alert--ok .dcs-alert__icon {\n  color: var(--dcs-ok);\n}\n\n.dcs-alert--warn .dcs-alert__icon {\n  color: var(--dcs-warn);\n}\n\n.dcs-alert--danger .dcs-alert__icon {\n  color: var(--dcs-danger);\n}\n\n.dcs-alert__body {\n  flex: 1;\n}\n\n.dcs-alert__title {\n  color: var(--dcs-text);\n  font-weight: 500;\n  margin-bottom: 2px;\n}\n\n/* Amber-on-dark code chips suit the dark DCC theme — scope them to the .dcs\n   context so alerts reused as light docs callouts fall back to the page's\n   own (softer) inline-code style instead. */\n.dcs .dcs-alert code,\n.dcs .dcs-alert__msg code {\n  font-family: var(--dcs-font-mono);\n  font-size: 0.92em;\n  padding: 1px 6px;\n  background: var(--dcs-well);\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-warn);\n  border: none;\n}\n\n.dcs-alert__msg {\n  color: var(--dcs-text-dim);\n}\n\n/* ------------------------------------------------------------\n   13 · MODAL\n   ------------------------------------------------------------ */\n.dcs-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.6);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n}\n\n/* decius.js hides modals with the [hidden] attribute; the display above\n   would otherwise win over the UA [hidden] rule. */\n.dcs-modal-backdrop[hidden] {\n  display: none;\n}\n\n.dcs-modal {\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: var(--dcs-r-3);\n  box-shadow: var(--dcs-shadow-pop);\n  min-width: 360px;\n  max-width: 80vw;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.dcs-modal__header {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  height: var(--dcs-h-lg);\n  padding: 0 var(--dcs-s-5);\n  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));\n  border-bottom: 1px solid var(--dcs-line);\n  font-size: var(--dcs-fs-md);\n  font-weight: 500;\n}\n\n.dcs-modal__body {\n  padding: var(--dcs-s-6);\n  font-size: var(--dcs-fs-sm);\n}\n\n.dcs-modal__footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--dcs-s-3);\n  padding: var(--dcs-s-4) var(--dcs-s-5);\n  background: var(--dcs-surface-1);\n  border-top: 1px solid var(--dcs-line);\n}\n\n/* ------------------------------------------------------------\n   14 · TREE / TABLE / LIST\n   ------------------------------------------------------------ */\n/* A list is a tree without folding — same row metrics, hover, selection,\n   no per-row rules, no container chrome. Just a plain stack like .dcs-tree. */\n.dcs-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n}\n\n/* Lists and trees are the same primitive — identical row metrics, hover, and\n   selection. A tree row just adds depth indent + a chevron. Both are\n   density-driven (height = --dcs-h), so sm/md/lg read clearly and match. */\n.dcs-list__item,\n.dcs-tree__row {\n  display: flex;\n  align-items: center;\n  position: relative; /* drop-indicator lines hang off ::before/::after */\n  height: var(--dcs-h);\n  /* .dcs-list is a flex column; without this its rows shrink below --dcs-h\n     when the list overflows/scrolls, breaking parity with tree rows (which\n     live in a plain block). Lock both to exactly --dcs-h. */\n  flex: 0 0 var(--dcs-h);\n  box-sizing: border-box;\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  cursor: default;\n  user-select: none;\n}\n\n/* Drag-to-reorder: grab affordance + a 2px accent drop-indicator line\n   (before/after a row) or an inset highlight for drop-into (reparent). */\n.dcs-list__item--draggable, .dcs-tree__row--draggable {\n  cursor: grab;\n}\n\n.dcs-list__item--draggable:active, .dcs-tree__row--draggable:active {\n  cursor: grabbing;\n}\n\n.dcs-list__item--drop-before::before, .dcs-tree__row--drop-before::before,\n.dcs-list__item--drop-after::after, .dcs-tree__row--drop-after::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: var(--dcs-accent);\n  z-index: 3;\n  pointer-events: none;\n}\n\n.dcs-list__item--drop-before::before, .dcs-tree__row--drop-before::before {\n  top: -1px;\n}\n\n.dcs-list__item--drop-after::after, .dcs-tree__row--drop-after::after {\n  bottom: -1px;\n}\n\n.dcs-list__item--drop-into, .dcs-tree__row--drop-into {\n  background: var(--dcs-accent-dim);\n  box-shadow: inset 0 0 0 1px var(--dcs-accent);\n}\n\n/* Typed drop-target affordance (DnD framework) — a target the dragged type\n   is valid for vs one it isn't. Applied by useDrop / DropZone / data-dcs-drop. */\n.dcs-drop--valid {\n  box-shadow: inset 0 0 0 2px var(--dcs-accent);\n}\n\n.dcs-drop--invalid {\n  box-shadow: inset 0 0 0 2px var(--dcs-danger);\n  cursor: no-drop;\n}\n\n/* No per-line rule — matches the tree's left inset so the two read alike. */\n.dcs-list__item {\n  gap: var(--dcs-s-2);\n  padding: 0 var(--dcs-s-4) 0 var(--dcs-s-2);\n}\n\n.dcs-tree {\n  user-select: none;\n}\n\n.dcs-tree__row {\n  gap: 2px;\n  padding-left: calc(var(--dcs-s-2) + var(--depth, 0) * 14px);\n  padding-right: var(--dcs-s-4);\n}\n\n.dcs-list__item:hover,\n.dcs-tree__row:hover {\n  background: var(--dcs-surface-1);\n  color: var(--dcs-text);\n}\n\n/* Collapsing a tree branch hides descendant rows via `[hidden]`. Override\n   the default class-driven `display: flex` so the hidden state wins. */\n.dcs-list__item[hidden],\n.dcs-tree__row[hidden] {\n  display: none;\n}\n\n.dcs-list__item[aria-selected=true],\n.dcs-tree__row[aria-selected=true] {\n  background: var(--dcs-accent-dim);\n  color: var(--dcs-text);\n  box-shadow: inset 2px 0 0 var(--dcs-accent);\n}\n\n.dcs-tree__chevron {\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dcs-text-mute);\n  transition: transform var(--dcs-t-fast);\n}\n\n.dcs-tree__chevron--open {\n  transform: rotate(90deg);\n}\n\n.dcs-tree__icon {\n  width: 14px;\n  height: 14px;\n  color: var(--dcs-text-mute);\n  flex: 0 0 auto;\n}\n\n.dcs-tree__row[aria-selected=true] .dcs-tree__icon {\n  color: var(--dcs-accent);\n}\n\n.dcs-tree__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dcs-tree__meta {\n  color: var(--dcs-text-mute);\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-xs);\n}\n\n.dcs-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--dcs-fs-sm);\n  background: var(--dcs-bg);\n}\n\n.dcs-table th {\n  text-align: left;\n  font-weight: 500;\n  font-size: var(--dcs-fs-xs);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--dcs-text-mute);\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  position: sticky;\n  top: 0;\n}\n\n.dcs-table td {\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  border-bottom: 1px solid var(--dcs-line-soft);\n  color: var(--dcs-text-dim);\n}\n\n.dcs-table tbody tr:hover td {\n  background: var(--dcs-surface-1);\n  color: var(--dcs-text);\n}\n\n.dcs-table tbody tr[aria-selected=true] td {\n  background: var(--dcs-accent-dim);\n  color: var(--dcs-text);\n}\n\n.dcs-table--mono td:nth-child(n+2) {\n  font-family: var(--dcs-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* ------------------------------------------------------------\n   15 · TOOLBAR\n   One uniform toolbar: embedded under a menu bar or floating as an\n   overlay in the content view; horizontal or vertical; sm / md / lg.\n   Selected tools show a solid accent background everywhere.\n   ------------------------------------------------------------ */\n.dcs-toolbar {\n  --tb-btn: var(--dcs-h); /* size of each tool button */\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  height: var(--dcs-h-lg);\n  padding: 0 var(--dcs-s-3);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  flex-shrink: 0;\n  user-select: none;\n}\n\n.dcs-toolbar--sm {\n  --tb-btn: var(--dcs-h-sm);\n  height: var(--dcs-h);\n}\n\n.dcs-toolbar--lg {\n  --tb-btn: var(--dcs-h-lg);\n  height: var(--dcs-h-xl);\n}\n\n/* Uniform tool-button sizing, regardless of per-button size props. */\n.dcs-toolbar .dcs-btn {\n  height: var(--tb-btn);\n}\n\n.dcs-toolbar .dcs-btn--icon {\n  width: var(--tb-btn);\n  padding: 0;\n}\n\n.dcs-toolbar .dcs-btn-group {\n  height: var(--tb-btn);\n  align-self: center;\n}\n\n.dcs-toolbar .dcs-btn-group .dcs-btn {\n  height: calc(var(--tb-btn) - 6px);\n  min-width: calc(var(--tb-btn) - 6px);\n}\n\n/* Selected tool — solid key colour (matches button-groups + floaters). */\n.dcs-toolbar .dcs-btn[aria-pressed=true] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  border-color: transparent;\n}\n\n.dcs-toolbar .dcs-btn[aria-pressed=true]:hover {\n  background: var(--dcs-accent-hi);\n}\n\n.dcs-toolbar__sep {\n  width: 1px;\n  height: 60%;\n  background: var(--dcs-line);\n  margin: 0 var(--dcs-s-2);\n  flex: 0 0 1px;\n}\n\n.dcs-toolbar__spacer {\n  flex: 1;\n}\n\n/* Vertical toolbar (rail). */\n.dcs-toolbar--v {\n  flex-direction: column;\n  height: auto;\n  width: var(--dcs-h-lg);\n  padding: var(--dcs-s-3) 0;\n}\n\n.dcs-toolbar--v.dcs-toolbar--sm {\n  width: var(--dcs-h);\n}\n\n.dcs-toolbar--v.dcs-toolbar--lg {\n  width: var(--dcs-h-xl);\n}\n\n.dcs-toolbar--v .dcs-toolbar__sep {\n  width: 60%;\n  height: 1px;\n  margin: var(--dcs-s-2) 0;\n}\n\n/* Floating overlay — same toolbar, dropped over the content view. */\n.dcs-toolbar--floating {\n  border-color: var(--dcs-line-soft);\n  box-shadow: var(--dcs-shadow-3);\n}\n\n/* ------------------------------------------------------------\n   16 · TOOLTIP (CSS hover)\n   ------------------------------------------------------------ */\n.dcs-tooltip {\n  position: relative;\n}\n\n.dcs-tooltip::after {\n  content: attr(data-tip);\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: #0c0d12;\n  color: var(--dcs-text);\n  font-size: var(--dcs-fs-xs);\n  padding: 3px 6px;\n  border-radius: var(--dcs-r-1);\n  border: 1px solid var(--dcs-line-soft);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--dcs-t-fast) 200ms;\n  z-index: 50;\n}\n\n.dcs-tooltip:hover::after {\n  opacity: 1;\n}\n\n/* ------------------------------------------------------------\n   17 · COLOR SWATCH / PICKER\n   ------------------------------------------------------------ */\n.dcs-swatch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  height: var(--dcs-h);\n  padding: 2px;\n  padding-right: var(--dcs-s-3);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  cursor: pointer;\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-dim);\n}\n\n.dcs-swatch__chip {\n  width: calc(var(--dcs-h) - 8px);\n  height: calc(var(--dcs-h) - 8px);\n  border-radius: var(--dcs-r-1);\n  background: var(--c, #888);\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);\n}\n\n.dcs-swatch:hover {\n  border-color: var(--dcs-line-strong);\n}\n\n.dcs-color-square {\n  width: 100%;\n  aspect-ratio: 1;\n  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, #f00));\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  position: relative;\n  cursor: crosshair;\n}\n\n.dcs-color-square__cursor {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border: 2px solid #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);\n  pointer-events: none;\n  transform: translate(-50%, -50%);\n}\n\n.dcs-hue-bar {\n  height: 12px;\n  width: 100%;\n  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-1);\n  position: relative;\n  cursor: ew-resize;\n}\n\n.dcs-hue-bar__cursor {\n  position: absolute;\n  top: -2px;\n  bottom: -2px;\n  width: 6px;\n  background: #fff;\n  border: 1px solid #000;\n  border-radius: 2px;\n  transform: translateX(-50%);\n}\n\n.dcs-alpha-bar {\n  height: 12px;\n  width: 100%;\n  background: linear-gradient(90deg, transparent, var(--c, #f00)), repeating-conic-gradient(#666 0 90deg, #999 90deg 180deg) 0 0/8px 8px;\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-1);\n  position: relative;\n}\n\n/* Channel color field — input-height widget (matches other inspector rows):\n   a drag-scrub chip + an editable/copyable hex + a dropdown-picker caret. */\n.dcs-colorfield {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  height: var(--dcs-h-in);\n  padding: 0 var(--dcs-s-1) 0 var(--dcs-s-1);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  user-select: none;\n  color: var(--dcs-text-dim);\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-sm);\n}\n\n.dcs-colorfield:hover {\n  border-color: var(--dcs-line-strong);\n}\n\n.dcs-colorfield__chip {\n  width: calc(var(--dcs-h-in) - 8px);\n  height: calc(var(--dcs-h-in) - 8px);\n  flex: 0 0 auto;\n  border-radius: var(--dcs-r-1);\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);\n  cursor: ew-resize; /* drag-scrub */\n  touch-action: none;\n}\n\n.dcs-colorfield__hex {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: var(--dcs-text-dim);\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-sm);\n  letter-spacing: 0.02em;\n  padding: 0;\n}\n\n.dcs-colorfield__hex:focus {\n  color: var(--dcs-text);\n}\n\n.dcs-colorfield__caret {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  color: var(--dcs-text-mute);\n  cursor: pointer;\n}\n\n.dcs-colorfield__caret:hover {\n  color: var(--dcs-text);\n}\n\n/* Color-only variant — just the chip + caret, no hex. */\n.dcs-colorfield--swatch {\n  padding: 0 var(--dcs-s-2);\n  gap: var(--dcs-s-1);\n}\n\n.dcs-colorfield--swatch .dcs-colorfield__chip {\n  width: 18px;\n  height: 18px;\n}\n\n/* ------------------------------------------------------------\n   18 · CURVE / GRAPH EDITOR BACKGROUNDS\n   ------------------------------------------------------------ */\n.dcs-graph {\n  background: linear-gradient(var(--dcs-line-soft) 1px, transparent 1px) 0 0/100% 25%, linear-gradient(90deg, var(--dcs-line-soft) 1px, transparent 1px) 0 0/25% 100%, var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  position: relative;\n  overflow: hidden;\n}\n\n.dcs-graph__major {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0/100% 50%, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0/50% 100%;\n}\n\n/* ------------------------------------------------------------\n   19 · ICONS\n   ------------------------------------------------------------ */\n.dcs-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.25;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.dcs-icon--lg {\n  width: 20px;\n  height: 20px;\n}\n\n.dcs-icon--sm {\n  width: 12px;\n  height: 12px;\n}\n\n.dcs-icon--xl {\n  width: 28px;\n  height: 28px;\n  stroke-width: 1;\n}\n\n/* ------------------------------------------------------------\n   20 · UTIL\n   ------------------------------------------------------------ */\n.dcs-divider {\n  height: 1px;\n  background: var(--dcs-line);\n  margin: var(--dcs-s-4) 0;\n}\n\n.dcs-divider--v {\n  width: 1px;\n  height: auto;\n  margin: 0 var(--dcs-s-4);\n  align-self: stretch;\n}\n\n.dcs-spacer {\n  flex: 1;\n}\n\n.dcs-row {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n}\n\n.dcs-col {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-3);\n}\n\n/* Mono helper — only for monospaced contexts like code/paths */\n.dcs-mono {\n  font-family: var(--dcs-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n.dcs-num {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.dcs-dim {\n  color: var(--dcs-text-dim);\n}\n\n.dcs-mute {\n  color: var(--dcs-text-mute);\n}\n\n.dcs-accent-text {\n  color: var(--dcs-accent);\n}\n\n.dcs-no-select {\n  user-select: none;\n}\n\n/* Scrollbars */\n.dcs *::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n.dcs *::-webkit-scrollbar-track {\n  background: var(--dcs-well);\n}\n\n.dcs *::-webkit-scrollbar-thumb {\n  background: var(--dcs-surface-3);\n  border: 2px solid var(--dcs-well);\n  border-radius: 999px;\n}\n\n.dcs *::-webkit-scrollbar-thumb:hover {\n  background: var(--dcs-surface-4);\n}\n\n/* Focus reset */\n.dcs *:focus {\n  outline: none;\n}\n\n.dcs *:focus-visible {\n  outline: 1px solid var(--dcs-accent);\n  outline-offset: 1px;\n}\n\n/* ============================================================\n   21 · SUBPANEL — collapsible, with close affordance\n   ============================================================ */\n@keyframes dcs-blink {\n  50% {\n    opacity: 0;\n  }\n}\n.dcs-subpanel {\n  background: var(--dcs-bg);\n  border-bottom: 1px solid var(--dcs-line);\n  display: flex;\n  flex-direction: column;\n}\n\n.dcs-subpanel:last-child {\n  border-bottom: none;\n}\n\n.dcs-subpanel__header {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  height: 22px;\n  padding: 0 var(--dcs-s-3);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line-soft);\n  font-size: var(--dcs-fs-xs);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--dcs-text-mute);\n  cursor: default;\n  user-select: none;\n}\n\n/* No background flash on hover — only the chevron reacts (matches foldout). */\n.dcs-subpanel__header:hover {\n  color: var(--dcs-text-dim);\n}\n\n.dcs-subpanel__header:hover .dcs-subpanel__chevron {\n  color: var(--dcs-text);\n}\n\n.dcs-subpanel__chevron {\n  width: 12px;\n  height: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform var(--dcs-t-fast), color var(--dcs-t-fast);\n  cursor: pointer;\n  flex: 0 0 auto;\n  color: var(--dcs-text-mute);\n}\n\n.dcs-subpanel__chevron--open {\n  transform: rotate(90deg);\n}\n\n.dcs-subpanel__title {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n}\n\n.dcs-subpanel__close {\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dcs-text-mute);\n  border-radius: var(--dcs-r-1);\n  cursor: pointer;\n  flex: 0 0 auto;\n  opacity: 0;\n  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);\n}\n\n.dcs-subpanel__header:hover .dcs-subpanel__close {\n  opacity: 0.7;\n}\n\n.dcs-subpanel__close:hover {\n  opacity: 1;\n  color: var(--dcs-danger);\n  background: rgba(239, 107, 107, 0.15);\n}\n\n.dcs-subpanel__body {\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n}\n\n.dcs-subpanel--collapsed .dcs-subpanel__body {\n  display: none;\n}\n\n.dcs-subpanel--collapsed .dcs-subpanel__header {\n  border-bottom: none;\n}\n\n/* Base component: also works as a native <details>/<summary> with zero JS. */\n.dcs-subpanel > summary.dcs-subpanel__header {\n  list-style: none;\n}\n\n.dcs-subpanel > summary.dcs-subpanel__header::-webkit-details-marker {\n  display: none;\n}\n\n.dcs-subpanel > summary.dcs-subpanel__header::marker {\n  content: \"\";\n}\n\ndetails.dcs-subpanel:not([open]) > summary.dcs-subpanel__header {\n  border-bottom: none;\n}\n\ndetails.dcs-subpanel[open] > summary .dcs-subpanel__chevron {\n  transform: rotate(90deg);\n}\n\n/* ============================================================\n   23 · FOLDOUT — Blender-style soft section\n   For property inspectors: rounded, slightly lighter card with\n   breathing room. Stacked inside a scrollable panel body.\n   ============================================================ */\n.dcs-foldouts {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-3);\n  padding: var(--dcs-s-3);\n}\n\n.dcs-foldout {\n  background: var(--dcs-surface-1);\n  border-radius: var(--dcs-r-3);\n  overflow: hidden;\n}\n\n.dcs-foldout__header {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding: var(--dcs-s-2) var(--dcs-s-4) var(--dcs-s-2) var(--dcs-s-2);\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n  color: var(--dcs-text);\n  cursor: pointer;\n  user-select: none;\n  min-height: var(--dcs-h);\n}\n\n/* No background flash on hover — only the chevron reacts (DCC-quiet). */\n.dcs-foldout__header:hover .dcs-foldout__chevron {\n  color: var(--dcs-text);\n}\n\n.dcs-foldout__chevron {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dcs-text-mute);\n  transition: transform var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n\n.dcs-foldout__chevron--open {\n  transform: rotate(90deg);\n}\n\n.dcs-foldout__icon {\n  color: var(--dcs-text-mute);\n  flex: 0 0 auto;\n}\n\n.dcs-foldout__title {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dcs-foldout__meta {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n}\n\n.dcs-foldout__tools {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity var(--dcs-t-fast);\n}\n\n.dcs-foldout__header:hover .dcs-foldout__tools {\n  opacity: 1;\n}\n\n.dcs-foldout__body {\n  padding: var(--dcs-s-1) var(--dcs-s-5) var(--dcs-s-5) var(--dcs-s-5);\n}\n\n/* Collapsed (class-driven: React / decius.js) — hide the body. */\n.dcs-foldout--collapsed > .dcs-foldout__body {\n  display: none;\n}\n\n/* Base component: also works as a native <details>/<summary> with zero JS.\n     <details class=\"dcs-foldout\"><summary class=\"dcs-foldout__header\">…\n   The browser shows/hides the body; we just hide the default marker and\n   rotate the chevron from the [open] attribute. */\n.dcs-foldout > summary.dcs-foldout__header {\n  list-style: none;\n}\n\n.dcs-foldout > summary.dcs-foldout__header::-webkit-details-marker {\n  display: none;\n}\n\n.dcs-foldout > summary.dcs-foldout__header::marker {\n  content: \"\";\n}\n\ndetails.dcs-foldout[open] > summary .dcs-foldout__chevron {\n  transform: rotate(90deg);\n}\n\n/* ============================================================\n   29 · SKEUOMORPHIC HARDWARE ELEMENTS\n   Patch jacks, backlit buttons, 7-seg LED, LED bargraph meters.\n   For modular/synth-style hardware emulation UIs.\n   ============================================================ */\n/* ─────────── Patch jack — TS/TRS audio socket with hex nut ─────────── */\n.dcs-jack {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  user-select: none;\n}\n\n.dcs-jack__socket {\n  position: relative;\n  width: 32px;\n  height: 32px;\n}\n\n.dcs-jack__socket svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));\n}\n\n.dcs-jack__label {\n  font-family: var(--dcs-font);\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: inherit;\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06);\n  opacity: 0.9;\n}\n\n/* ─────────── Backlit plastic button ─────────── */\n.dcs-litbtn {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  margin: 3px;\n  border-radius: 4px;\n  background: linear-gradient(180deg, #d8dade 0%, #b5b8bf 50%, #8a8d94 100%);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.06), 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.5);\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2a2d33;\n  font-family: var(--dcs-font);\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  transition: transform 60ms ease, box-shadow 60ms ease;\n}\n\n.dcs-litbtn:active {\n  transform: translateY(1px);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n\n.dcs-litbtn--lit {\n  background: radial-gradient(circle at 50% 50%, var(--lit-hi, #ff8585) 0%, var(--lit-lo, #d62034) 70%);\n  color: rgba(0, 0, 0, 0.7);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.06), 0 0 12px var(--lit-glow, rgba(255, 80, 80, 0.6)), 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.5);\n}\n\n.dcs-litbtn--cyan {\n  --lit-hi: #b8f5ff;\n  --lit-lo: #4dd0e1;\n  --lit-glow: rgba(77,208,225,.6);\n}\n\n.dcs-litbtn--amber {\n  --lit-hi: #ffe28a;\n  --lit-lo: #f2b14a;\n  --lit-glow: rgba(242,177,74,.5);\n}\n\n.dcs-litbtn--green {\n  --lit-hi: #b8ff8a;\n  --lit-lo: #4ed18a;\n  --lit-glow: rgba(78,209,138,.5);\n}\n\n.dcs-litbtn--sm {\n  width: 26px;\n  height: 26px;\n  font-size: 9px;\n  border-radius: 3px;\n}\n\n/* ─────────── 7-segment LED display ─────────── */\n.dcs-lcd {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 8px;\n  background: linear-gradient(180deg, #1a0405 0%, #2a0608 100%);\n  border-radius: 3px;\n  border: 1px solid #0a0203;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.05);\n  --lcd-on: #ff2030;\n  --lcd-off: rgba(255,32,48,.10);\n  --lcd-glow: 0 0 4px rgba(255,32,48,.85), 0 0 8px rgba(255,32,48,.4);\n  color: var(--lcd-on);\n}\n\n.dcs-lcd--amber {\n  background: linear-gradient(180deg, #1f1605 0%, #2a1f08 100%);\n  border-color: #0a0703;\n  --lcd-on: #ffae3a;\n  --lcd-off: rgba(255,174,58,.10);\n  --lcd-glow: 0 0 4px rgba(255,174,58,.85), 0 0 8px rgba(255,174,58,.4);\n}\n\n.dcs-lcd--green {\n  background: linear-gradient(180deg, #051f0d 0%, #082a13 100%);\n  border-color: #030a05;\n  --lcd-on: #3dff7a;\n  --lcd-off: rgba(61,255,122,.10);\n  --lcd-glow: 0 0 4px rgba(61,255,122,.85), 0 0 8px rgba(61,255,122,.4);\n}\n\n.dcs-lcd--blue {\n  background: linear-gradient(180deg, #050d1f 0%, #08132a 100%);\n  border-color: #03050a;\n  --lcd-on: #6fb8ff;\n  --lcd-off: rgba(111,184,255,.10);\n  --lcd-glow: 0 0 4px rgba(111,184,255,.85), 0 0 8px rgba(111,184,255,.4);\n}\n\n.dcs-lcd__digit {\n  position: relative;\n  width: 16px;\n  height: 26px;\n}\n\n.dcs-lcd--sm .dcs-lcd__digit {\n  width: 10px;\n  height: 17px;\n}\n\n.dcs-lcd--md .dcs-lcd__digit {\n  width: 16px;\n  height: 26px;\n}\n\n.dcs-lcd--lg .dcs-lcd__digit {\n  width: 24px;\n  height: 40px;\n}\n\n.dcs-lcd__digit svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.dcs-lcd__seg-on {\n  fill: var(--lcd-on);\n  filter: drop-shadow(var(--lcd-glow));\n}\n\n.dcs-lcd__seg-off {\n  fill: var(--lcd-off);\n}\n\n.dcs-lcd__dot {\n  display: inline-block;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--lcd-off);\n  align-self: flex-end;\n  margin: 0 1px 4px;\n}\n\n.dcs-lcd__dot--on {\n  background: var(--lcd-on);\n  box-shadow: var(--lcd-glow);\n}\n\n/* ─────────── LED bargraph meter ─────────── */\n.dcs-meter {\n  display: flex;\n  gap: 2px;\n  padding: 4px 6px;\n  background: linear-gradient(180deg, #0a0c11 0%, #14161c 100%);\n  border-radius: 3px;\n  border: 1px solid #050608;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);\n  align-items: stretch;\n}\n\n.dcs-meter--v {\n  flex-direction: column-reverse;\n}\n\n.dcs-meter__seg {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.04);\n  border-radius: 1px;\n  min-width: 3px;\n  min-height: 4px;\n}\n\n.dcs-meter__seg--ok {\n  background: #1b6e38;\n}\n\n.dcs-meter__seg--warn {\n  background: #6e5a18;\n}\n\n.dcs-meter__seg--peak {\n  background: #6e1818;\n}\n\n.dcs-meter__seg--lit-ok {\n  background: #4ed18a;\n  box-shadow: 0 0 4px rgba(78, 209, 138, 0.7), inset 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n.dcs-meter__seg--lit-warn {\n  background: #f2b14a;\n  box-shadow: 0 0 4px rgba(242, 177, 74, 0.7), inset 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n.dcs-meter__seg--lit-peak {\n  background: #ef4040;\n  box-shadow: 0 0 6px rgba(239, 64, 64, 0.8), inset 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n/* ─────────── Step buttons — small chunky plastic ─────────── */\n.dcs-step {\n  display: inline-flex;\n  flex-direction: column;\n  width: 22px;\n  border-radius: 3px;\n  overflow: hidden;\n  border: 1px solid rgba(0, 0, 0, 0.6);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n}\n\n.dcs-step__btn {\n  flex: 1;\n  height: 14px;\n  background: linear-gradient(180deg, #d8dade 0%, #a5a8af 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #2a2d33;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n}\n\n.dcs-step__btn:last-child {\n  border-bottom: none;\n}\n\n.dcs-step__btn:hover {\n  background: linear-gradient(180deg, #e8eaee 0%, #b5b8bf 100%);\n}\n\n.dcs-step__btn:active {\n  background: linear-gradient(180deg, #95989f 0%, #c8cbd0 100%);\n}\n\n.dcs-step__btn svg {\n  width: 8px;\n  height: 8px;\n}\n\n/* ─────────── Hardware chassis ───────────\n   Pair with data-dcs-style=\"3d\" for the full \"real gear\" look.\n   ───────────────────────────────────────── */\n.dcs-hw {\n  position: relative;\n  border: 1px solid #0a0c11;\n  border-radius: 6px;\n  background: radial-gradient(ellipse 110% 90% at 50% -10%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.14) 4%, rgba(255, 255, 255, 0.06) 14%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.01) 70%, transparent 100%), linear-gradient(180deg, #2e3340 0%, #272b36 60%, #1f222c 100%);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.45);\n  color-scheme: dark;\n}\n\n.dcs-hw--brushed {\n  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, rgba(0, 0, 0, 0.015) 1px 2px), radial-gradient(ellipse 110% 90% at 50% -10%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 4%, rgba(255, 255, 255, 0.07) 14%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.01) 70%, transparent 100%), linear-gradient(180deg, #333845 0%, #2c3140 60%, #242834 100%);\n}\n\n.dcs-hw--lacquer {\n  background: radial-gradient(ellipse 100% 80% at 50% -10%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.22) 4%, rgba(255, 255, 255, 0.09) 14%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.015) 70%, transparent 100%), linear-gradient(180deg, #262b38 0%, #1e222c 60%, #161922 100%);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 6px 22px rgba(0, 0, 0, 0.5);\n}\n\n.dcs-hw--cream {\n  background: radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.5), transparent 60%), linear-gradient(180deg, #e8e2cf, #c8c0a4 70%, #a89e7c);\n  color: #2a2418;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n\n.dcs-hw--cream .dcs-knob__cap {\n  background: radial-gradient(circle at 30% 25%, #d8d1bd, #8c8266);\n}\n\n.dcs-hw--cream .dcs-knob__label {\n  color: #4a4030;\n}\n\n/* Hardware finish — red enamel (defined AFTER .dcs-hw so the colour wins) */\n.dcs-hw--red {\n  background: radial-gradient(ellipse 100% 80% at 50% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.18) 4%, rgba(255, 255, 255, 0.08) 14%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.015) 70%, transparent 100%), linear-gradient(180deg, #d62034 0%, #b41a2c 60%, #931523 100%);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 6px 22px rgba(0, 0, 0, 0.5);\n}\n\n.dcs-hw--red .dcs-hw__label {\n  color: rgba(255, 255, 255, 0.95);\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);\n}\n\n/* ─────────── Silkscreen group box ───────────\n   1970s control-panel look: a rounded rectangle printed in off-white ink\n   that groups knobs / jacks / displays, with an uppercase legend that\n   breaks the top line (a <fieldset>/<legend> does this over any finish). */\n/* off-white silkscreen ink */\n.dcs-silk {\n  min-width: 0;\n  margin: 0;\n  border: 1.5px solid rgba(236, 230, 214, 0.62);\n  border-radius: 10px;\n  padding: 12px 14px 14px;\n}\n\n.dcs-silk > legend, .dcs-silk__title {\n  padding: 0 7px;\n  font-family: var(--dcs-font);\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: rgba(236, 230, 214, 0.9);\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);\n}\n\n/* When not using a real <legend>, place a title chip over the top edge,\n   masking the border behind it so the line reads as broken. */\n.dcs-silk--titled {\n  position: relative;\n}\n\n.dcs-silk--titled > .dcs-silk__title {\n  position: absolute;\n  top: 0;\n  left: 14px;\n  transform: translateY(-50%);\n  background: var(--silk-bg, #b41a2c); /* match the panel finish behind it */\n}\n\n.dcs-silk__title--center {\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n/* Cream / light finishes flip the ink to dark */\n.dcs-hw--cream .dcs-silk {\n  border-color: rgba(60, 50, 30, 0.5);\n}\n\n.dcs-hw--cream .dcs-silk > legend,\n.dcs-hw--cream .dcs-silk__title {\n  color: rgba(50, 42, 24, 0.85);\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);\n}\n\n/* Screw heads in the corners */\n.dcs-hw__screw {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 30%, #b5b8bf, #6a6d75 55%, #2a2d34 100%);\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.6);\n  pointer-events: none;\n}\n\n.dcs-hw__screw::after {\n  content: \"\";\n  position: absolute;\n  inset: 35%;\n  background: rgba(0, 0, 0, 0.6);\n  transform: rotate(var(--screw-rot, 28deg));\n  border-radius: 1px;\n}\n\n.dcs-hw__screw--tl {\n  top: 6px;\n  left: 6px;\n}\n\n.dcs-hw__screw--tr {\n  top: 6px;\n  right: 6px;\n  --screw-rot: -42deg;\n}\n\n.dcs-hw__screw--bl {\n  bottom: 6px;\n  left: 6px;\n  --screw-rot: 12deg;\n}\n\n.dcs-hw__screw--br {\n  bottom: 6px;\n  right: 6px;\n  --screw-rot: -8deg;\n}\n\n/* Hardware label — etched/engraved appearance */\n.dcs-hw__label {\n  font-family: var(--dcs-font);\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.55);\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06);\n}\n\n.dcs-hw--cream .dcs-hw__label {\n  color: rgba(60, 50, 30, 0.7);\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n}\n\n/* ─────────── Skeuomorphic card ───────────\n   ───────────────────────────────────────── */\n.dcs-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-3);\n  overflow: hidden;\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast);\n}\n\n.dcs-card--clickable {\n  cursor: pointer;\n}\n\n.dcs-card--clickable:hover {\n  background: var(--dcs-surface-2);\n  border-color: var(--dcs-line-strong);\n}\n\n.dcs-card[aria-selected=true] {\n  border-color: var(--dcs-accent);\n  background: var(--dcs-accent-dim);\n}\n\n.dcs-card__media {\n  flex: 0 0 auto;\n  position: relative;\n  background: var(--dcs-well);\n}\n\n.dcs-card__media img,\n.dcs-card__media .dcs-card__media-bg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.dcs-card__body {\n  padding: var(--dcs-s-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-1);\n  min-width: 0;\n}\n\n.dcs-card__title {\n  font-size: var(--dcs-fs-md);\n  font-weight: 500;\n  color: var(--dcs-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dcs-card__meta {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n  letter-spacing: 0.03em;\n}\n\n.dcs-card__desc {\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  line-height: 1.4;\n}\n\n.dcs-card__footer {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  background: var(--dcs-bg);\n  border-top: 1px solid var(--dcs-line);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n}\n\n.dcs-card__close {\n  position: absolute;\n  top: var(--dcs-s-2);\n  right: var(--dcs-s-2);\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--dcs-text-mute);\n  background: rgba(20, 22, 28, 0.65);\n  border-radius: var(--dcs-r-1);\n  cursor: pointer;\n  opacity: 0;\n  z-index: 2;\n  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);\n  backdrop-filter: blur(6px);\n}\n\n.dcs-card:hover .dcs-card__close {\n  opacity: 0.8;\n}\n\n.dcs-card__close:hover {\n  opacity: 1;\n  color: var(--dcs-danger);\n  background: rgba(239, 107, 107, 0.25);\n}\n\n.dcs-card__close svg {\n  width: 12px;\n  height: 12px;\n}\n\n.dcs-card__badges {\n  position: absolute;\n  top: var(--dcs-s-2);\n  left: var(--dcs-s-2);\n  display: flex;\n  gap: var(--dcs-s-1);\n  z-index: 1;\n}\n\n.dcs-card__tools {\n  position: absolute;\n  bottom: var(--dcs-s-2);\n  right: var(--dcs-s-2);\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  z-index: 2;\n  transition: opacity var(--dcs-t-fast);\n}\n\n.dcs-card:hover .dcs-card__tools {\n  opacity: 1;\n}\n\n.dcs-card--horizontal {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.dcs-card--horizontal .dcs-card__media {\n  width: 80px;\n  flex: 0 0 80px;\n}\n\n.dcs-card--horizontal .dcs-card__body {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Card grid / list helpers */\n.dcs-card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n  gap: var(--dcs-s-4);\n}\n\n.dcs-card-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-2);\n}\n\n/* ============================================================\n   23a · DOCK PANE — tabbed dockable view (Unity/Unreal style)\n   ============================================================ */\n.dcs-dockpane {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n  background: var(--dcs-bg);\n  flex: 1;\n}\n\n.dcs-dockpane__tabs {\n  display: flex;\n  align-items: stretch;\n  height: var(--dcs-h);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  flex-shrink: 0;\n}\n\n.dcs-dockpane__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding: 0 var(--dcs-s-4);\n  border: none;\n  border-right: 1px solid var(--dcs-line);\n  background: transparent;\n  color: var(--dcs-text-mute);\n  font-size: var(--dcs-fs-sm);\n  font-family: var(--dcs-font);\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n\n.dcs-dockpane__tab:hover {\n  color: var(--dcs-text-dim);\n  background: var(--dcs-surface-2);\n}\n\n.dcs-dockpane__tab[aria-selected=true] {\n  background: var(--dcs-bg);\n  color: var(--dcs-text);\n  font-weight: 500;\n}\n\n.dcs-dockpane__tab[aria-selected=true]::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  height: 1px;\n  background: var(--dcs-bg);\n}\n\n.dcs-dockpane__tab[aria-selected=true]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  height: 1px;\n  background: var(--dcs-accent);\n}\n\n.dcs-dockpane__tab-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  /* Reset the default <button> chrome so a close authored as either\n     a <span> or a <button> renders identically — no browser-default\n     border / background / padding bleeding through. */\n  border: 0;\n  background: transparent;\n  padding: 0;\n  font: inherit;\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-text-mute);\n  opacity: 0;\n  margin-left: var(--dcs-s-1);\n  transition: opacity var(--dcs-t-fast), background var(--dcs-t-fast), color var(--dcs-t-fast);\n  cursor: pointer;\n}\n\n.dcs-dockpane__tab:hover .dcs-dockpane__tab-close,\n.dcs-dockpane__tab[aria-selected=true] .dcs-dockpane__tab-close {\n  opacity: 0.65;\n}\n\n.dcs-dockpane__tab-close:hover {\n  opacity: 1;\n  color: var(--dcs-danger);\n  background: rgba(239, 107, 107, 0.18);\n}\n\n.dcs-dockpane__tab-close svg {\n  width: 10px;\n  height: 10px;\n}\n\n.dcs-dockpane__tools {\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding: 0 var(--dcs-s-2);\n  gap: 1px;\n}\n\n.dcs-dockpane__body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n\n/* ============================================================\n   23b · MENU BAR — top-of-window menu strip\n   ============================================================ */\n.dcs-menubar {\n  display: flex;\n  align-items: stretch;\n  height: var(--dcs-h-lg);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-sm);\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.dcs-menubar__brand {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding-right: var(--dcs-s-4);\n  margin-right: var(--dcs-s-3);\n  border-right: 1px solid var(--dcs-line);\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--dcs-text);\n}\n\n.dcs-menubar__brand svg {\n  color: var(--dcs-accent);\n}\n\n.dcs-menubar__item {\n  display: inline-flex;\n  align-items: center;\n  padding: var(--dcs-text-nudge) var(--dcs-s-4) 0;\n  background: none;\n  border: none;\n  color: var(--dcs-text-dim);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n\n.dcs-menubar__item:hover {\n  background: var(--dcs-surface-2);\n  color: var(--dcs-text);\n}\n\n/* Active (menu open) — solid accent, matches the toolbar \"selected tool\"\n   contract so the user can see which dropdown is owning the screen. */\n.dcs-menubar__item[aria-expanded=true] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n}\n\n.dcs-menubar__item[aria-expanded=true]:hover {\n  background: var(--dcs-accent-hi);\n}\n\n.dcs-menubar__spacer {\n  flex: 1;\n}\n\n.dcs-menubar__meta {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  color: var(--dcs-text-mute);\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--dcs-fs-xs);\n  padding: 0 var(--dcs-s-3);\n}\n\n/* ============================================================\n   23c · VIEWPORT OVERLAY — floating toolbar on a 3D viewport\n   ============================================================ */\n.dcs-viewport {\n  position: relative;\n  overflow: hidden;\n  background: radial-gradient(ellipse at 50% 38%, #3a4054, #161922 80%);\n  min-height: 0;\n  height: 100%;\n}\n\n.dcs-viewport__overlay {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding: var(--dcs-s-3);\n  z-index: 2;\n}\n\n.dcs-viewport__overlay--tl {\n  top: 0;\n  left: 0;\n}\n\n.dcs-viewport__overlay--tr {\n  top: 0;\n  right: 0;\n}\n\n.dcs-viewport__overlay--bl {\n  bottom: 0;\n  left: 0;\n}\n\n.dcs-viewport__overlay--br {\n  bottom: 0;\n  right: 0;\n}\n\n.dcs-viewport__floater {\n  background: rgba(20, 22, 28, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: var(--dcs-r-2);\n  padding: 2px;\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  backdrop-filter: blur(8px);\n}\n\n.dcs-viewport__floater--v {\n  flex-direction: column;\n}\n\n.dcs-viewport__floater .dcs-btn {\n  background: transparent;\n  border-color: transparent;\n}\n\n.dcs-viewport__floater .dcs-btn:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: transparent;\n}\n\n.dcs-viewport__floater .dcs-btn[aria-pressed=true] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  border-color: transparent;\n}\n\n/* ============================================================\n   24 · [data-dcs-style=\"3d\"] — Vital/synth-style bevels & gradients\n   Apply to any subtree you want rendered with depth instead of flat.\n   ============================================================ */\n[data-dcs-style=\"3d\"] .dcs-btn {\n  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));\n  box-shadow: var(--dcs-bevel-up);\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast), transform var(--dcs-t-fast);\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn:hover {\n  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-2));\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn:active {\n  background: var(--dcs-well);\n  box-shadow: var(--dcs-bevel-down);\n  transform: translateY(0.5px);\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn:focus-visible {\n  box-shadow: var(--dcs-ring), var(--dcs-bevel-up);\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn--primary {\n  background: linear-gradient(180deg, var(--dcs-accent-hi), var(--dcs-accent));\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn--primary:hover {\n  background: linear-gradient(180deg, #88c0ff, var(--dcs-accent-hi));\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn--ghost {\n  box-shadow: none;\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn--danger {\n  background: linear-gradient(180deg, #ff8585, #ef6b6b);\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn[aria-pressed=true] {\n  box-shadow: var(--dcs-bevel-down);\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn-group .dcs-btn {\n  box-shadow: none;\n  background: transparent;\n}\n\n/* Selected segment keeps the solid key colour (like flat) + a little depth. */\n[data-dcs-style=\"3d\"] .dcs-btn-group .dcs-btn[aria-pressed=true] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  box-shadow: var(--dcs-shadow-1);\n}\n\n[data-dcs-style=\"3d\"] .dcs-btn-group .dcs-btn[aria-pressed=true]:hover {\n  background: var(--dcs-accent-hi);\n}\n\n[data-dcs-style=\"3d\"] .dcs-input,\n[data-dcs-style=\"3d\"] .dcs-select,\n[data-dcs-style=\"3d\"] .dcs-textarea {\n  box-shadow: var(--dcs-bevel-down);\n}\n\n[data-dcs-style=\"3d\"] .dcs-input:focus,\n[data-dcs-style=\"3d\"] .dcs-select:focus,\n[data-dcs-style=\"3d\"] .dcs-textarea:focus {\n  box-shadow: var(--dcs-bevel-down), 0 0 0 2px var(--dcs-accent-haze);\n}\n\n/* Combo — beveled inset display in 3D mode. Works like the flat version\n   (the value fill stays, so the level reads at a glance) with a synth glow. */\n[data-dcs-style=\"3d\"] .dcs-combo {\n  box-shadow: var(--dcs-bevel-down);\n  background: var(--dcs-well);\n}\n\n[data-dcs-style=\"3d\"] .dcs-combo__fill {\n  height: 3px;\n  opacity: 1;\n  box-shadow: 0 0 6px var(--dcs-accent-haze);\n}\n\n[data-dcs-style=\"3d\"] .dcs-combo__btn {\n  display: none;\n}\n\n[data-dcs-style=\"3d\"] .dcs-combo__label {\n  color: var(--dcs-text-mute);\n  flex: 0 0 auto;\n  padding-right: var(--dcs-s-2);\n}\n\n[data-dcs-style=\"3d\"] .dcs-combo__value {\n  color: var(--dcs-accent);\n  font-weight: 500;\n  flex: 1;\n  justify-content: flex-end;\n}\n\n/* Slider & fader — beveled thumbs */\n[data-dcs-style=\"3d\"] .dcs-slider__track {\n  box-shadow: var(--dcs-bevel-down);\n}\n\n[data-dcs-style=\"3d\"] .dcs-slider__thumb {\n  width: 14px;\n  height: 14px;\n  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));\n  border-color: var(--dcs-line);\n  box-shadow: var(--dcs-shadow-1), var(--dcs-bevel-up);\n}\n\n[data-dcs-style=\"3d\"] .dcs-slider:focus-within .dcs-slider__thumb,\n[data-dcs-style=\"3d\"] .dcs-slider--active .dcs-slider__thumb {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 3px var(--dcs-accent-haze);\n}\n\n[data-dcs-style=\"3d\"] .dcs-fader {\n  box-shadow: var(--dcs-bevel-down);\n}\n\n[data-dcs-style=\"3d\"] .dcs-fader__track {\n  background: var(--dcs-line);\n}\n\n[data-dcs-style=\"3d\"] .dcs-fader__thumb {\n  width: 22px;\n  height: 12px;\n  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));\n  border-color: var(--dcs-line);\n  box-shadow: var(--dcs-bevel-up), 0 2px 4px rgba(0, 0, 0, 0.4);\n}\n\n/* Knob — radial gradient cap, glowing indicator */\n[data-dcs-style=\"3d\"] .dcs-knob__cap {\n  background: radial-gradient(circle at 30% 25%, var(--dcs-surface-3), var(--dcs-surface-1) 55%, var(--dcs-well) 100%);\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n\n[data-dcs-style=\"3d\"] .dcs-knob__indicator {\n  box-shadow: 0 0 6px var(--dcs-accent-haze);\n}\n\n/* Check / switch */\n[data-dcs-style=\"3d\"] .dcs-check__box {\n  box-shadow: var(--dcs-bevel-down);\n  border-color: var(--dcs-line);\n}\n\n[data-dcs-style=\"3d\"] .dcs-switch {\n  box-shadow: var(--dcs-bevel-down);\n  border-color: var(--dcs-line);\n}\n\n[data-dcs-style=\"3d\"] .dcs-switch::after {\n  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));\n  box-shadow: var(--dcs-shadow-1), var(--dcs-bevel-up);\n}\n\n[data-dcs-style=\"3d\"] .dcs-switch[aria-checked=true]::after {\n  background: linear-gradient(180deg, #fff, #d8dade);\n}\n\n/* Panel header glossy in 3D mode */\n[data-dcs-style=\"3d\"] .dcs-panel {\n  border: 1px solid var(--dcs-line);\n  box-shadow: var(--dcs-shadow-2);\n}\n\n[data-dcs-style=\"3d\"] .dcs-panel__header {\n  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));\n}\n\n[data-dcs-style=\"3d\"] .dcs-toolbar {\n  background: linear-gradient(180deg, var(--dcs-surface-1), var(--dcs-bg));\n}\n\n[data-dcs-style=\"3d\"] .dcs-swatch {\n  box-shadow: var(--dcs-bevel-down);\n}\n\n[data-dcs-style=\"3d\"] .dcs-color-square,\n[data-dcs-style=\"3d\"] .dcs-hue-bar,\n[data-dcs-style=\"3d\"] .dcs-graph {\n  box-shadow: var(--dcs-bevel-down);\n}\n\n/* ============================================================\n   25 · MENU / DROPDOWN / CONTEXT MENU\n   A floating menu surface used for dropdowns (opened from a\n   button or menubar item) and right-click context menus.\n   Positioned at runtime by decius.js; hidden via [hidden].\n   ============================================================ */\n.dcs-menu[hidden] {\n  display: none;\n}\n\n.dcs-menu {\n  position: fixed;\n  z-index: 200;\n  min-width: 180px;\n  max-width: 320px;\n  padding: var(--dcs-s-2);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: 0; /* flat square popups — no soft corners */\n  box-shadow: var(--dcs-shadow-pop);\n  color: var(--dcs-text);\n  font-size: var(--dcs-fs-sm);\n  user-select: none;\n  animation: dcs-menu-in var(--dcs-t-fast);\n}\n\n@keyframes dcs-menu-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.dcs-menu__label {\n  padding: var(--dcs-s-2) var(--dcs-s-3) var(--dcs-s-1);\n  font-size: var(--dcs-fs-xs);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--dcs-text-mute);\n}\n\n.dcs-menu__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  height: var(--dcs-h-in);\n  padding: var(--dcs-text-nudge) var(--dcs-s-3) 0;\n  border-radius: 0; /* flat square selection rect */\n  color: var(--dcs-text-dim);\n  cursor: default;\n  white-space: nowrap;\n  line-height: 1;\n}\n\n/* :hover is the transient mouse highlight; --active is the transient\n   keyboard-focus highlight (arrow keys). Neither is a \"checked\" state —\n   for persistent selection, use the `.dcs-menu__check` slot to render\n   a check icon. Dark text on accent reads better than white at decius\n   accent brightness, so we use --dcs-text-inv across the board. */\n.dcs-menu__item:hover,\n.dcs-menu__item--active {\n  background: var(--dcs-accent);\n  color: var(--dcs-text-inv);\n}\n\n.dcs-menu__item:hover .dcs-menu__shortcut,\n.dcs-menu__item--active .dcs-menu__shortcut {\n  color: color-mix(in srgb, var(--dcs-text-inv) 70%, transparent);\n}\n\n.dcs-menu__item--danger {\n  color: var(--dcs-danger);\n}\n\n.dcs-menu__item--danger:hover {\n  background: var(--dcs-danger);\n  color: var(--dcs-text-inv);\n}\n\n/* Persistent \"currently active / window shown\" indicator — a small\n   accent bullet in the leading padding, with text in the body color.\n   Distinct from --active (transient keyboard focus, accent fill) and\n   from :hover (transient pointer highlight). Use for menu items like\n   \"Layers\", \"Color\", etc. when their panel is currently visible. */\n.dcs-menu__item--checked::before {\n  content: \"\";\n  position: absolute;\n  left: 6px;\n  top: 50%;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--dcs-accent);\n  transform: translateY(-50%);\n}\n\n.dcs-menu__item--checked:hover::before {\n  background: var(--dcs-text-inv);\n}\n\n.dcs-menu__item[aria-disabled=true],\n.dcs-menu__item--disabled {\n  color: var(--dcs-text-mute);\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.dcs-menu__icon {\n  flex: 0 0 auto;\n  width: 16px;\n  display: flex;\n}\n\n.dcs-menu__check {\n  flex: 0 0 auto;\n  width: 14px;\n  display: flex;\n  align-items: center;\n  color: var(--dcs-accent);\n}\n\n.dcs-menu__item:hover .dcs-menu__check {\n  color: #fff;\n}\n\n.dcs-menu__label-text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dcs-menu__shortcut {\n  flex: 0 0 auto;\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n  letter-spacing: 0.02em;\n}\n\n.dcs-menu__caret {\n  flex: 0 0 auto;\n  margin-right: -2px;\n  color: inherit;\n  opacity: 0.8;\n}\n\n.dcs-menu__sep {\n  height: 1px;\n  margin: var(--dcs-s-2) calc(-1 * var(--dcs-s-2));\n  background: var(--dcs-line);\n}\n\n/* Submenus — nested .dcs-menu, opened on hover. */\n.dcs-menu__sub {\n  position: absolute;\n  top: calc(-1 * var(--dcs-s-2));\n  left: 100%;\n  margin-left: var(--dcs-s-1);\n}\n\n.dcs-menu__item--has-sub > .dcs-menu__sub {\n  display: none;\n}\n\n.dcs-menu__item--has-sub:hover > .dcs-menu__sub {\n  display: block;\n}\n\n/* ============================================================\n   26 · POPOVER / POPUP\n   A small floating card anchored to a trigger — richer than a\n   tooltip (can hold controls). Positioned by decius.js via\n   data-dcs-placement; hidden via [hidden].\n   ============================================================ */\n.dcs-popover[hidden] {\n  display: none;\n}\n\n.dcs-popover {\n  position: fixed;\n  z-index: 190;\n  min-width: 200px;\n  max-width: 320px;\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: 0; /* flat square popups */\n  box-shadow: var(--dcs-shadow-pop);\n  color: var(--dcs-text);\n  font-size: var(--dcs-fs-sm);\n  animation: dcs-menu-in var(--dcs-t-fast);\n}\n\n.dcs-popover__header {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  height: var(--dcs-h);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  border-radius: 0;\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n}\n\n.dcs-popover__body {\n  padding: var(--dcs-s-5);\n  color: var(--dcs-text-dim);\n}\n\n.dcs-popover__body code {\n  font-family: var(--dcs-font-mono);\n  font-size: 0.92em;\n  padding: 1px 6px;\n  background: var(--dcs-well);\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-warn);\n}\n\n/* Little arrow pointing at the trigger; placed by decius.js. */\n.dcs-popover__arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line-soft);\n  transform: rotate(45deg);\n}\n\n.dcs-popover[data-dcs-pos=top] .dcs-popover__arrow {\n  bottom: -6px;\n  border-top: none;\n  border-left: none;\n}\n\n.dcs-popover[data-dcs-pos=bottom] .dcs-popover__arrow {\n  top: -6px;\n  border-bottom: none;\n  border-right: none;\n}\n\n.dcs-popover[data-dcs-pos=left] .dcs-popover__arrow {\n  right: -6px;\n  border-bottom: none;\n  border-left: none;\n}\n\n.dcs-popover[data-dcs-pos=right] .dcs-popover__arrow {\n  left: -6px;\n  border-top: none;\n  border-right: none;\n}\n\n/* ============================================================\n   27 · TOAST / NOTIFICATION\n   Transient, stacked notifications. The container is created on\n   demand by decius.js (decius.toast({…})); markup is documented\n   so they can also be authored statically.\n   ============================================================ */\n.dcs-toasts {\n  position: fixed;\n  z-index: 300;\n  bottom: var(--dcs-s-6);\n  right: var(--dcs-s-6);\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-3);\n  width: 320px;\n  max-width: calc(100vw - 2 * var(--dcs-s-6));\n  pointer-events: none;\n}\n\n.dcs-toasts--top-right {\n  top: var(--dcs-s-6);\n  bottom: auto;\n}\n\n.dcs-toasts--top-left {\n  top: var(--dcs-s-6);\n  bottom: auto;\n  left: var(--dcs-s-6);\n  right: auto;\n}\n\n.dcs-toasts--bottom-left {\n  left: var(--dcs-s-6);\n  right: auto;\n}\n\n.dcs-toast {\n  pointer-events: auto;\n  display: flex;\n  gap: var(--dcs-s-4);\n  padding: var(--dcs-s-4) var(--dcs-s-5);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-left: 3px solid var(--dcs-accent);\n  border-radius: var(--dcs-r-2);\n  box-shadow: var(--dcs-shadow-3);\n  font-size: var(--dcs-fs-sm);\n  align-items: flex-start;\n  animation: dcs-toast-in var(--dcs-t-slow);\n}\n\n@keyframes dcs-toast-in {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.dcs-toast--out {\n  animation: dcs-toast-out var(--dcs-t) forwards;\n}\n\n@keyframes dcs-toast-out {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n    max-height: 80px;\n  }\n  to {\n    opacity: 0;\n    transform: translateX(16px);\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    margin-top: -8px;\n  }\n}\n.dcs-toast--ok {\n  border-left-color: var(--dcs-ok);\n}\n\n.dcs-toast--warn {\n  border-left-color: var(--dcs-warn);\n}\n\n.dcs-toast--danger {\n  border-left-color: var(--dcs-danger);\n}\n\n.dcs-toast--info {\n  border-left-color: var(--dcs-accent);\n}\n\n.dcs-toast__icon {\n  color: var(--dcs-accent);\n  flex: 0 0 auto;\n  margin-top: 1px;\n}\n\n.dcs-toast--ok .dcs-toast__icon {\n  color: var(--dcs-ok);\n}\n\n.dcs-toast--warn .dcs-toast__icon {\n  color: var(--dcs-warn);\n}\n\n.dcs-toast--danger .dcs-toast__icon {\n  color: var(--dcs-danger);\n}\n\n.dcs-toast__body {\n  flex: 1;\n  min-width: 0;\n}\n\n.dcs-toast__title {\n  color: var(--dcs-text);\n  font-weight: 500;\n  margin-bottom: 2px;\n}\n\n.dcs-toast__msg {\n  color: var(--dcs-text-dim);\n}\n\n.dcs-toast__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: var(--dcs-text-mute);\n  cursor: pointer;\n  border-radius: var(--dcs-r-1);\n}\n\n.dcs-toast__close:hover {\n  color: var(--dcs-text);\n  background: var(--dcs-surface-3);\n}\n\n/* ============================================================\n   28 · STATUS BAR\n   The bottom strip of an app shell — counts, coordinates, mode\n   flags. Mirrors the menubar at the foot of the window.\n   ============================================================ */\n.dcs-statusbar {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-4);\n  height: var(--dcs-h-sm);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-top: 1px solid var(--dcs-line);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.dcs-statusbar__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n}\n\n.dcs-statusbar__item--accent {\n  color: var(--dcs-accent);\n}\n\n.dcs-statusbar__item--ok {\n  color: var(--dcs-ok);\n}\n\n.dcs-statusbar__item--warn {\n  color: var(--dcs-warn);\n}\n\n.dcs-statusbar__sep {\n  width: 1px;\n  align-self: stretch;\n  margin: var(--dcs-s-2) 0;\n  background: var(--dcs-line);\n}\n\n.dcs-statusbar__spacer {\n  flex: 1;\n}\n\n/* ============================================================\n   29 · FLOATING PANELS & TOOLBARS\n   ------------------------------------------------------------\n   Detached surfaces that hover over a host stage — a tear-off\n   panel, a floating toolbar pill, an inspector ripped out of a\n   dock. Host positions them via left/top in inline style; drag\n   handlers add the `dcs--dragging` state hook to raise elevation\n   while pointer drag is active.\n\n   These are the building blocks for tear-off / re-dock chrome.\n   The actual drag-to-move behaviour is wired by decius.js when an\n   element inside a floating surface has [data-dcs-drag-handle].\n   ============================================================ */\n/* ---- detached panel ----------------------------------------- */\n.dcs-panel--floating {\n  position: absolute; /* host positions via left/top */\n  min-width: 160px;\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-4);\n  box-shadow: var(--dcs-shadow-pop);\n  overflow: hidden;\n  z-index: 60;\n}\n\n.dcs-panel--floating > .dcs-panel__header {\n  cursor: grab;\n  background: var(--dcs-surface-2);\n  border-bottom: 1px solid var(--dcs-line);\n  user-select: none;\n}\n\n.dcs-panel--floating.dcs--dragging > .dcs-panel__header {\n  cursor: grabbing;\n}\n\n.dcs-panel--floating > .dcs-panel__header .dcs-panel__title {\n  pointer-events: none;\n}\n\n/* A floating panel that wraps a dockpane (tear-off of a tab group)\n   uses the tab strip itself as the drag handle — both the wrapped\n   `__tabbar` form AND the bare `__tabs` form (Photo's tearoffs skip\n   the tabbar wrapper). Any empty area in the strip — the spacer\n   between the last tab and the hamburger, padding around tabs —\n   shows the grab cursor so users see it's draggable. Individual\n   tabs / the hamburger button restore their own pointer cursors. */\n.dcs-panel--floating > .dcs-dockpane > .dcs-dockpane__tabbar,\n.dcs-panel--floating > .dcs-dockpane > .dcs-dockpane__tabs,\n.dcs-panel--floating > .dcs-dockpane__tabbar,\n.dcs-panel--floating > .dcs-dockpane__tabs {\n  cursor: grab;\n  user-select: none;\n}\n\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane > .dcs-dockpane__tabbar,\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane > .dcs-dockpane__tabs,\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane__tabbar,\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane__tabs {\n  cursor: grabbing;\n}\n\n/* ---- detached toolbar -------------------------------------- */\n/* Extends the minimal _15 floating toolbar rule with absolute\n   positioning, intrinsic sizing, and the same shadow as panels. */\n.dcs-toolbar.dcs-toolbar--floating {\n  position: absolute; /* host positions via left/top */\n  height: auto;\n  width: auto;\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: var(--dcs-r-4);\n  box-shadow: var(--dcs-shadow-pop);\n  background: var(--dcs-surface-1);\n  padding: var(--dcs-s-2);\n  gap: var(--dcs-s-1);\n  z-index: 60;\n}\n\n.dcs-toolbar--floating.dcs-toolbar--v {\n  padding: var(--dcs-s-2);\n}\n\n/* ---- shared elevation while dragging ------------------------ */\n.dcs--dragging {\n  box-shadow: var(--dcs-shadow-3), 0 0 0 1px var(--dcs-accent-haze) !important;\n}\n\n/* ---- floating-panel resize: any edge or corner --------------\n   Eight invisible hit zones around the panel perimeter handle the\n   actual pointer events; each just sets the matching native resize\n   cursor. The visible SE grip is a decorative affordance only\n   (pointer-events: none, z-index: 1) so anything above — scrollbar\n   thumb, content overflow, badges — draws over it cleanly. */\n.dcs-panel__resize-zones {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  pointer-events: none;\n}\n\n.dcs-panel__resize-zone {\n  position: absolute;\n  pointer-events: auto;\n  background: transparent;\n}\n\n/* Edges — 5px wide strips along each side. */\n.dcs-panel__resize-zone--n {\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 5px;\n  cursor: ns-resize;\n}\n\n.dcs-panel__resize-zone--s {\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 5px;\n  cursor: ns-resize;\n}\n\n.dcs-panel__resize-zone--w {\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 5px;\n  cursor: ew-resize;\n}\n\n.dcs-panel__resize-zone--e {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 5px;\n  cursor: ew-resize;\n}\n\n/* Corners — 12px squares; overlap the edge zones so the diagonal\n   cursor wins at the four corners. */\n.dcs-panel__resize-zone--nw {\n  top: 0;\n  left: 0;\n  width: 12px;\n  height: 12px;\n  cursor: nwse-resize;\n}\n\n.dcs-panel__resize-zone--ne {\n  top: 0;\n  right: 0;\n  width: 12px;\n  height: 12px;\n  cursor: nesw-resize;\n}\n\n.dcs-panel__resize-zone--sw {\n  bottom: 0;\n  left: 0;\n  width: 12px;\n  height: 12px;\n  cursor: nesw-resize;\n}\n\n.dcs-panel__resize-zone--se {\n  bottom: 0;\n  right: 0;\n  width: 12px;\n  height: 12px;\n  cursor: nwse-resize;\n}\n\n/* Decorative SE grip — visual only. Bottom of the z-stack so scrollbars\n   and overflowing content overlay it naturally. Hit zones above handle\n   the actual pointer. */\n.dcs-panel__resize {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: 14px;\n  height: 14px;\n  z-index: 1;\n  pointer-events: none;\n  color: var(--dcs-line-strong);\n  opacity: 0.6;\n  transition: opacity var(--dcs-t-fast);\n}\n\n.dcs-panel--floating:hover .dcs-panel__resize {\n  opacity: 1;\n}\n\n.dcs-panel__resize::after {\n  content: \"\";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 6px;\n  height: 6px;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid currentColor;\n  border-bottom-right-radius: 2px;\n}\n\n/* ---- reusable drag-handle grip ------------------------------\n   A dotted \"drag from here\" texture that tiles cleanly to whatever\n   space the grippable area gives it. Two knobs:\n     • `--dcs-grip-unit`  — pattern grid (one dot per cell). Defaults\n       to 4px so 3-up / 4-up grids feel natural.\n     • `--dcs-grip-thick` — the short-axis thickness (perpendicular\n       to the drag direction). Defaults to 12px.\n   `background-repeat: round` makes the browser slightly re-tune the\n   tile size so a whole number of dots fits — no clipped half-dots at\n   the edges, regardless of the host bar's measure.\n   Orientation: `.dcs-grip` is the default VERTICAL strip (narrow in\n   width, stretches in height — sits at the start of a horizontal\n   bar). `.dcs-grip--h` is the HORIZONTAL strip (narrow in height,\n   stretches in width — sits at the start of a vertical bar). Both\n   default to `align-self: stretch` so a single flex item fills the\n   bar's cross axis without further CSS. */\n.dcs-grip {\n  --dcs-grip-unit: 4px;\n  --dcs-grip-thick: 16px;\n  flex: none;\n  align-self: stretch;\n  width: var(--dcs-grip-thick);\n  min-height: var(--dcs-grip-thick);\n  /* Small separator gap between the grip and the first toolbar item\n     so the handle reads as a distinct affordance rather than as\n     another tool slot. */\n  margin-right: var(--dcs-s-2);\n  color: var(--dcs-line-strong);\n  /* Slightly inset surface, then two stacked radial gradients per cell:\n     a top-left highlight + a crisp dot face. The hard transition\n     (currentColor → transparent at 90%/100%) gives a near-pixel edge so\n     each dot reads as a small RAISED bead — not the soft anti-aliased\n     circles we had before. `repeat` (not `round`) leaves the tile size\n     fixed so dots stay perfectly square; we intentionally don't clip the\n     box with a border-radius so corner dots stay whole. */\n  background-color: rgba(0, 0, 0, 0.18);\n  background-image: radial-gradient(closest-side at 35% 30%, rgba(255, 255, 255, 0.35) 55%, transparent 85%), radial-gradient(closest-side, currentColor 88%, transparent 100%);\n  background-size: var(--dcs-grip-unit) var(--dcs-grip-unit);\n  background-position: 0 0;\n  background-repeat: repeat;\n  cursor: grab;\n  transition: color var(--dcs-t-fast);\n  user-select: none;\n}\n\n.dcs-grip:hover {\n  color: var(--dcs-text-mute);\n}\n\n.dcs-grip--h {\n  width: auto;\n  height: var(--dcs-grip-thick);\n  min-width: var(--dcs-grip-thick);\n  min-height: 0;\n  /* Horizontal grip sits at the START of a column-flex toolbar, so\n     the separator gap goes UNDER it instead of to the right. */\n  margin-right: 0;\n  margin-bottom: var(--dcs-s-2);\n}\n\n.dcs--dragging .dcs-grip {\n  cursor: grabbing;\n}\n\n/* Floating vertical toolbar with a first-child grip: a narrow band\n   spanning LEFT→RIGHT across the top of the toolbar. The short axis is\n   pinned to exactly 3 dot cells (3 × 4px = 12px) so the dot pattern\n   tiles cleanly vertically. The long axis stretches, with `background-\n   repeat: round` on X so the browser auto-fits an integer number of\n   cells across — no half-dots clipped at the rect edges. Pattern\n   anchored at (0,0) so the first cell is flush with the top-left. */\n.dcs-toolbar--v.dcs-toolbar--floating > .dcs-grip:first-child {\n  align-self: stretch;\n  width: auto;\n  height: 12px; /* 3 rows × 4px */\n  min-height: 0;\n  margin: var(--dcs-s-2); /* inset on all sides */\n  border-radius: 0;\n  background-position: 0 0;\n  background-repeat: round repeat; /* X auto-fit, Y exact */\n}\n\n/* Floating HORIZONTAL toolbar with a first-child grip: the symmetric\n   case — a narrow band running TOP→BOTTOM down the left. 3 dot cells\n   wide (12px), height stretches with `background-repeat: repeat round`\n   so an integer number of cells fits the long axis. */\n.dcs-toolbar--floating:not(.dcs-toolbar--v) > .dcs-grip:first-child {\n  align-self: stretch;\n  width: 12px; /* 3 cols × 4px */\n  height: auto;\n  min-height: 0;\n  margin: var(--dcs-s-2); /* inset on all sides */\n  border-radius: 0;\n  background-position: 0 0;\n  background-repeat: repeat round; /* X exact, Y auto-fit */\n}\n\n/* ============================================================\n   30 · DOCKPANE EXTENSIONS — tabbar with toolbar slot, shelf\n   ------------------------------------------------------------\n   A DCC-tool dockpane uses every pixel: the unused portion of\n   the tab strip carries the active tab's toolbar (Blender-style)\n   instead of wasting it. When tabs grow wide enough to crowd\n   the toolbar, the toolbar drops to a SHELF row underneath.\n\n   Markup:\n     <div class=\"dcs-dockpane\">\n       <div class=\"dcs-dockpane__tabbar\">\n         <div class=\"dcs-dockpane__tabs\"> …tabs… </div>\n         <div class=\"dcs-dockpane__toolbars\">\n           <div class=\"dcs-dockpane__toolbar\" data-dcs-tabtoolbar=\"#panel-a\"> …controls for A… </div>\n           <div class=\"dcs-dockpane__toolbar\" data-dcs-tabtoolbar=\"#panel-b\" hidden> …controls for B… </div>\n         </div>\n       </div>\n       <div class=\"dcs-dockpane__shelf\" hidden></div>   <!-- target when overflowed -->\n       <div class=\"dcs-dockpane__body\"> …tabpanels… </div>\n     </div>\n\n   decius.js manages tab activation and the overflow class\n   (`.dcs-dockpane--shelved`), which CSS uses to swap the\n   visible toolbar from the tabbar to the shelf row.\n\n   The dockpane may also designate a CENTER panel — the main\n   editor surface (image canvas, 3D viewport) other panes\n   surround — via `.dcs-dockpane--center`.\n   ============================================================ */\n/* ---- tabbar wrapper (tabs + toolbar share one row) --------- */\n.dcs-dockpane__tabbar {\n  display: flex;\n  align-items: stretch;\n  height: var(--dcs-h);\n  min-width: 0;\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  flex-shrink: 0;\n}\n\n/* When wrapped in __tabbar, the tabs strip itself loses its own\n   chrome and shrinks to its natural width so the toolbar slot\n   takes the rest. The standalone .dcs-dockpane > .dcs-dockpane__tabs\n   case (no toolbar) is unchanged. */\n.dcs-dockpane__tabbar > .dcs-dockpane__tabs {\n  flex: 0 1 auto;\n  min-width: 0;\n  height: auto;\n  background: transparent;\n  border-bottom: none;\n  overflow: hidden;\n}\n\n/* ---- toolbar slot inside the tabbar ------------------------ */\n.dcs-dockpane__toolbars {\n  flex: 1 1 0;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  padding: 0 var(--dcs-s-2);\n  margin-left: var(--dcs-s-2);\n  border-left: 1px solid var(--dcs-line);\n}\n\n.dcs-dockpane__toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.dcs-dockpane__toolbar[hidden] {\n  display: none;\n}\n\n/* ---- shelf row (active toolbar drops here when overflowed) - */\n.dcs-dockpane__shelf {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding: 0 var(--dcs-s-3);\n  height: var(--dcs-h);\n  min-height: var(--dcs-h);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.dcs-dockpane__shelf[hidden],\n.dcs-dockpane:not(.dcs-dockpane--shelved) > .dcs-dockpane__shelf {\n  display: none;\n}\n\n.dcs-dockpane--shelved > .dcs-dockpane__tabbar > .dcs-dockpane__toolbars {\n  display: none;\n}\n\n/* ---- one floating panel tab → title-only tearoff -----------\n   Floating panel-kind tearoffs never show a tabbar for a single tab.\n   JS moves the lone tab into this titlebar so the title text can still\n   be dragged to dock elsewhere, while the empty header area remains\n   the panel-move handle. Docked panels and document/editor dockpanes\n   keep their normal single-tab strip. */\n.dcs-dockpane--title-only > .dcs-dockpane__tabbar,\n.dcs-dockpane--title-only > .dcs-dockpane__tabs {\n  display: none;\n}\n\n.dcs-dockpane__titlebar {\n  flex-shrink: 0;\n}\n\n.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {\n  flex: 0 1 auto;\n  appearance: none;\n  border: 0;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: left;\n  cursor: grab;\n}\n\n.dcs-panel--floating .dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {\n  pointer-events: auto;\n}\n\n.dcs-panel--floating.dcs--dragging .dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {\n  cursor: grabbing;\n}\n\n.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab::before,\n.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab::after {\n  display: none;\n}\n\n/* ---- center \"Document\" pane (image canvas / 3D viewport) ---\n   The \"main view\" surface in a Photoshop-/Blender-style app: the\n   multi-tabbed editor area where each tab is a document (image,\n   scene, file) — NOT interchangeable with the surrounding dock\n   tabs (Layers, Tools, Outliner). Reads one shade LIGHTER than\n   the chrome via `--dcs-stage`, so the editor is the focal\n   surface and the dock chrome recedes.\n\n   `.dcs-dockpane--center` implies `data-dcs-dock-kind=\"documents\"`\n   for the tear-off/re-dock kind system below; any dockpane can\n   opt in explicitly via that attribute. Game-editor-style apps\n   that have no distinct center can simply not use this marker. */\n.dcs-dockpane--center,\n.dcs-dockpane[data-dcs-dock-kind=documents] {\n  background: var(--dcs-stage);\n}\n\n.dcs-dockpane--center > .dcs-dockpane__body,\n.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__body {\n  position: relative;\n  overflow: hidden;\n  background: var(--dcs-stage);\n}\n\n.dcs-dockpane--center > .dcs-dockpane__tabbar,\n.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar {\n  background: color-mix(in srgb, var(--dcs-stage) 88%, #000 12%);\n  border-bottom-color: color-mix(in srgb, var(--dcs-stage) 70%, #000 30%);\n}\n\n/* Document tabs — wider, flat, the active tab IS the stage color\n   so the editor reads as one continuous surface from header to body. */\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab,\n.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab {\n  padding: 0 var(--dcs-s-4);\n  min-width: 110px;\n  max-width: 260px;\n  background: color-mix(in srgb, var(--dcs-stage) 78%, #000 22%);\n  color: var(--dcs-text-dim);\n  border-right: 1px solid color-mix(in srgb, var(--dcs-stage) 55%, #000 45%);\n  font-weight: 500;\n}\n\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab:hover,\n.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab:hover {\n  background: color-mix(in srgb, var(--dcs-stage) 88%, #000 12%);\n  color: var(--dcs-text);\n}\n\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true],\n.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true] {\n  background: var(--dcs-stage);\n  color: var(--dcs-text);\n}\n\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true]::after,\n.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true]::after {\n  background: var(--dcs-stage);\n}\n\n/* ---- tear-off chrome --------------------------------------- */\n/* Ghost pill that follows the pointer while a tab is being dragged. */\n.dcs-dockpane__tab-ghost {\n  position: fixed;\n  z-index: 1000;\n  padding: 0 var(--dcs-s-3);\n  height: var(--dcs-h);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: var(--dcs-r-2);\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text);\n  pointer-events: none;\n  opacity: 0.92;\n  box-shadow: var(--dcs-shadow-pop);\n  user-select: none;\n}\n\n/* Center drop preview — a translucent accent wash + 2px ring covering\n   the WHOLE dockpane (tabbar, toolbars, shelf, body, content). Sits\n   ON TOP of everything via high z-index, but is `pointer-events:none`\n   so the user can still drag through it without it intercepting any\n   events. Translucency makes the underlying content readable through\n   the wash, so you can still see what tabs and foldouts are in the\n   pane you're about to drop into. */\n.dcs-dockpane__center-preview {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: var(--dcs-accent-dim);\n  box-shadow: inset 0 0 0 2px var(--dcs-accent);\n  z-index: 100;\n}\n\n/* Author-written floating panels that are normalized into a one-tab\n   dockpane keep their original panel body inside this generated\n   tabpanel. Make it fill like a normal dock body. */\n.dcs-dockpane__standalone-panel {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.dcs-dockpane__standalone-panel > .dcs-panel__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ---- per-pane hamburger menu --------------------------------\n   Auto-injected by decius.js at the right edge of every tabbar.\n   Holds Close / Detach / etc. for the currently active tab. Apps\n   can supply their own via `data-dcs-tab-menu=\"#menu-id\"` or hide\n   it with `data-dcs-tab-menu=\"false\"`. Small (icon-sized) and\n   flat so it doesn't compete with the active tab. */\n.dcs-dockpane__menu {\n  flex: 0 0 auto;\n  align-self: stretch;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dcs-h);\n  padding: 0;\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--dcs-text-mute);\n  font: inherit;\n  font-size: var(--dcs-fs-sm);\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n\n.dcs-dockpane__menu:hover {\n  background: var(--dcs-surface-2);\n  color: var(--dcs-text);\n}\n\n.dcs-dockpane__menu[aria-expanded=true] {\n  background: var(--dcs-surface-2);\n  color: var(--dcs-text);\n}\n\n/* ---- edge-dock drop zones ----------------------------------\n   While a tab is being dragged, a translucent half-pane preview\n   appears against the edge it would split into when released —\n   left/right halve the target horizontally, top/bottom halve it\n   vertically. The preview is painted into a single overlay node\n   the runtime parents to the target dockpane during drag. */\n.dcs-dockpane__edge-preview {\n  position: absolute;\n  pointer-events: none;\n  background: var(--dcs-accent-dim);\n  box-shadow: inset 0 0 0 2px var(--dcs-accent);\n  z-index: 50;\n  transition: top var(--dcs-t-fast), left var(--dcs-t-fast), width var(--dcs-t-fast), height var(--dcs-t-fast);\n}\n\n.dcs-dockpane__edge-preview[data-edge=left] {\n  left: 0;\n  top: 0;\n  width: 50%;\n  height: 100%;\n}\n\n.dcs-dockpane__edge-preview[data-edge=right] {\n  right: 0;\n  top: 0;\n  width: 50%;\n  height: 100%;\n  left: auto;\n}\n\n.dcs-dockpane__edge-preview[data-edge=top] {\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 50%;\n}\n\n.dcs-dockpane__edge-preview[data-edge=bottom] {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 50%;\n  top: auto;\n}\n\n.dcs-dockpane__edge-preview[data-edge=center] {\n  inset: 0;\n}\n\n.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=left] {\n  width: min(320px, 20%);\n}\n\n.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=right] {\n  width: min(320px, 20%);\n}\n\n.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=top] {\n  height: min(220px, 20%);\n}\n\n.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=bottom] {\n  height: min(220px, 20%);\n}","/* ------------------------------------------------------------\n   2 · RESET (scoped)\n   ------------------------------------------------------------ */\n.dcs, .dcs * { box-sizing: border-box; }\n.dcs {\n  font-family: var(--dcs-font);\n  font-size: var(--dcs-fs);\n  line-height: var(--dcs-lh);\n  color: var(--dcs-text);\n  background: var(--dcs-bg);\n  /* Scoped here (not on :root) so the dark scheme — and dark native\n     scrollbars/controls — never leak into a light host page. */\n  color-scheme: dark;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: geometricPrecision;\n}\n.dcs button, .dcs input, .dcs select, .dcs textarea {\n  font: inherit; color: inherit;\n}\n","/* ------------------------------------------------------------\n   3 · PANELS — flat by default, no border / no shadow\n   ------------------------------------------------------------ */\n.dcs-panel {\n  background: var(--dcs-bg);\n  border-radius: var(--dcs-r-2);\n  display: flex; flex-direction: column;\n  min-height: 0;\n}\n.dcs-panel--raised   { background: var(--dcs-surface-1); }\n.dcs-panel--bordered { border: 1px solid var(--dcs-line); }\n\n.dcs-panel__header {\n  display: flex; align-items: center; gap: var(--dcs-s-3);\n  height: var(--dcs-h);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  border-top-left-radius: var(--dcs-r-2);\n  border-top-right-radius: var(--dcs-r-2);\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n  letter-spacing: .02em;\n  color: var(--dcs-text-dim);\n  user-select: none;\n}\n.dcs-panel__header--active { color: var(--dcs-text); }\n.dcs-panel__title { display:flex; align-items:center; gap: var(--dcs-s-2); flex:1; min-width:0; }\n.dcs-panel__title svg { color: var(--dcs-text-mute); }\n.dcs-panel__tools { display:flex; align-items:center; gap: 2px; }\n.dcs-panel__close {\n  width: 18px; height: 18px;\n  display: flex; align-items: center; justify-content: center;\n  margin-left: var(--dcs-s-2);\n  color: var(--dcs-text-mute);\n  background: transparent;\n  border: none;\n  border-radius: var(--dcs-r-1);\n  cursor: pointer;\n  opacity: .7;\n  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);\n}\n.dcs-panel__close:hover { opacity: 1; color: var(--dcs-danger); background: rgba(239,107,107,.15); }\n\n.dcs-panel__body {\n  padding: var(--dcs-s-5);\n  flex: 1; min-height: 0;\n  overflow: auto;\n}\n.dcs-panel__body--pad-0 { padding: 0; }\n.dcs-panel__body--pad-sm { padding: var(--dcs-s-3); }\n\n.dcs-panel__footer {\n  display:flex; align-items:center; gap: var(--dcs-s-3);\n  height: var(--dcs-h-sm);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-top: 1px solid var(--dcs-line);\n  color: var(--dcs-text-mute);\n  font-size: var(--dcs-fs-xs);\n  font-family: var(--dcs-font-mono);\n}\n\n/* Panel tab bar (Blender-ish) */\n.dcs-tabs {\n  display: flex; align-items: stretch;\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  padding: 0 var(--dcs-s-3);\n  gap: 2px;\n  user-select: none;\n}\n.dcs-tab {\n  display: inline-flex; align-items: center; gap: var(--dcs-s-2);\n  padding: 0 var(--dcs-s-4);\n  height: calc(var(--dcs-h) - 2px);\n  margin-top: 2px;\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  background: transparent;\n  border: 1px solid transparent;\n  border-bottom: none;\n  border-top-left-radius: var(--dcs-r-1);\n  border-top-right-radius: var(--dcs-r-1);\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n.dcs-tab:hover { background: var(--dcs-surface-2); color: var(--dcs-text); }\n.dcs-tab[aria-selected=\"true\"] {\n  background: var(--dcs-bg);\n  color: var(--dcs-text);\n  border-color: var(--dcs-line);\n  position: relative;\n}\n.dcs-tab[aria-selected=\"true\"]::after {\n  content: \"\"; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;\n  background: var(--dcs-bg);\n}\n\n/* Tab panels: ensure `[hidden]` actually hides the panel even when its\n   body sets `display: flex` (or grid) via a class — otherwise content\n   from the inactive tab can bleed through under the active tab. Two\n   attribute selectors give us specificity (0,2,0) which beats any\n   single-class layout rule (0,1,0) without needing !important. */\n[data-dcs-tabpanel][hidden] { display: none; }\n","/* ------------------------------------------------------------\n   4 · DOCK / SPLIT\n   ------------------------------------------------------------ */\n.dcs-dock {\n  display: flex;\n  background: var(--dcs-bg-app);\n  min-height: 0;\n  height: 100%;\n}\n.dcs-dock--v { flex-direction: column; }\n.dcs-dock > .dcs-panel { flex: 1; min-width: 0; min-height: 0; border-radius: 0; }\n\n.dcs-splitter {\n  flex: 0 0 1px;\n  background: var(--dcs-line);\n  cursor: col-resize;\n  position: relative;\n}\n.dcs-dock--v > .dcs-splitter,\n.dcs-splitter--h { cursor: row-resize; flex-basis: 1px; }\n/* The ::before is just a wider, invisible grab area — DCC splitters keep\n   the resize cursor as the only affordance and avoid an accent flash as\n   the pointer sweeps the screen. */\n.dcs-splitter::before {\n  content: \"\"; position: absolute;\n  left: -3px; right: -3px; top: 0; bottom: 0;\n  z-index: 2;\n}\n.dcs-dock--v > .dcs-splitter::before,\n.dcs-splitter--h::before { left: 0; right: 0; top: -3px; bottom: -3px; }\n","/* ------------------------------------------------------------\n   5 · BUTTONS  — flat by default\n   ------------------------------------------------------------ */\n.dcs-btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--dcs-s-2);\n  height: var(--dcs-h);\n  padding: 0 var(--dcs-s-5);\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n  letter-spacing: .01em;\n  color: var(--dcs-text);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n.dcs-btn:hover { background: var(--dcs-surface-2); border-color: var(--dcs-line-strong); }\n.dcs-btn:active { background: var(--dcs-well); color: var(--dcs-text-dim); }\n.dcs-btn:focus-visible { outline: none; box-shadow: var(--dcs-ring); }\n.dcs-btn[disabled], .dcs-btn[aria-disabled=\"true\"] { opacity: .45; cursor: not-allowed; }\n\n.dcs-btn--primary {\n  background: var(--dcs-accent);\n  border-color: var(--dcs-accent-lo);\n  color: #0a1220;\n}\n.dcs-btn--primary:hover { background: var(--dcs-accent-hi); }\n.dcs-btn--primary:active { background: var(--dcs-accent-lo); color: rgba(10,18,32,.85); }\n\n.dcs-btn--ghost {\n  background: transparent;\n  border-color: transparent;\n  color: var(--dcs-text-dim);\n}\n.dcs-btn--ghost:hover { background: var(--dcs-surface-2); color: var(--dcs-text); border-color: transparent; }\n.dcs-btn--ghost:active { background: var(--dcs-surface-3); }\n\n.dcs-btn--danger { background: var(--dcs-danger); border-color: #c44; color: #2a0808; }\n.dcs-btn--danger:hover { background: #ff7a7a; }\n\n.dcs-btn--sm { height: var(--dcs-h-sm); padding: 0 var(--dcs-s-3); font-size: var(--dcs-fs-xs); }\n.dcs-btn--lg { height: var(--dcs-h-lg); padding: 0 var(--dcs-s-6); font-size: var(--dcs-fs-md); }\n\n.dcs-btn--icon { padding: 0; width: var(--dcs-h); }\n.dcs-btn--icon.dcs-btn--sm { width: var(--dcs-h-sm); }\n.dcs-btn--icon.dcs-btn--sm .dcs-icon { width: 12px; height: 12px; }\n.dcs-btn--icon.dcs-btn--lg { width: var(--dcs-h-lg); }\n.dcs-btn--icon.dcs-btn--lg .dcs-icon { width: 18px; height: 18px; }\n\n/* Selected / toggled — solid key colour with a dark icon, rounded\n   (uniform across plain buttons, toolbars, button-groups, and floaters). */\n.dcs-btn[aria-pressed=\"true\"] {\n  background: var(--dcs-accent);\n  border-color: transparent;\n  color: #0a1220;\n}\n.dcs-btn[aria-pressed=\"true\"]:hover { background: var(--dcs-accent-hi); }\n\n/* Button group (segmented) — visible chassis so the grouping reads */\n.dcs-btn-group {\n  display: inline-flex;\n  border-radius: var(--dcs-r-2);\n  background: var(--dcs-well);\n  padding: 2px;\n  gap: 1px;\n  border: 1px solid var(--dcs-line);\n  align-items: center;\n}\n.dcs-btn-group .dcs-btn {\n  border: none; border-radius: var(--dcs-r-1);\n  background: transparent;\n  height: calc(var(--dcs-h) - 6px);\n  color: var(--dcs-text-dim);\n  padding: 0 var(--dcs-s-3);\n  min-width: calc(var(--dcs-h) - 6px);\n}\n.dcs-btn-group .dcs-btn:hover { background: var(--dcs-surface-2); color: var(--dcs-text); }\n.dcs-btn-group .dcs-btn[aria-pressed=\"true\"] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  font-weight: 500;\n}\n.dcs-btn-group .dcs-btn[aria-pressed=\"true\"]:hover { background: var(--dcs-accent-hi); }\n","/* ------------------------------------------------------------\n   6 · INPUT — flat by default\n   ------------------------------------------------------------ */\n.dcs-input, .dcs-select, .dcs-textarea {\n  display: inline-flex; align-items: center;\n  height: var(--dcs-h-in);\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  outline: none;\n  transition: border-color var(--dcs-t-fast), box-shadow var(--dcs-t-fast);\n  font-family: var(--dcs-font);\n}\n.dcs-textarea { height: auto; padding: var(--dcs-s-3); line-height: var(--dcs-lh); resize: vertical; }\n.dcs-input::placeholder { color: var(--dcs-text-mute); }\n.dcs-input:hover, .dcs-select:hover, .dcs-textarea:hover { border-color: var(--dcs-line-strong); }\n.dcs-input:focus, .dcs-select:focus, .dcs-textarea:focus {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 2px var(--dcs-accent-haze);\n}\n.dcs-input--num { font-family: var(--dcs-font-num); font-variant-numeric: tabular-nums lining-nums; text-align: right; }\n\n/* ── Search input ──────────────────────────────────────────────\n   A standard text input dressed as a search field: a leading\n   magnifier icon (`<i class=\"di di-search\">` inside) and a\n   placeholder. The icon is absolutely positioned inside the\n   wrapper so the input itself stays a stock `.dcs-input` — apps\n   can use any of the input variants inside (compact, etc.).\n\n   Markup:\n     <div class=\"dcs-search\">\n       <i class=\"di di-search\" aria-hidden=\"true\"></i>\n       <input class=\"dcs-input\" type=\"search\" placeholder=\"Search…\">\n     </div>\n*/\n.dcs-search {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n.dcs-search > .di {\n  position: absolute;\n  left: var(--dcs-s-3);\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--dcs-text-mute);\n  pointer-events: none;\n  font-size: 13px;\n  line-height: 1;\n}\n.dcs-search > .dcs-input {\n  padding-left: calc(var(--dcs-s-3) + 18px);\n  width: 100%;\n}\n\n/* Enum dropdown trigger — a select-styled button that opens a .dcs-menu of\n   options. The full form of a \"choose one of N\" enum; the segmented\n   button-group is its shorthand for when the options fit inline. */\n.dcs-select--btn {\n  gap: var(--dcs-s-2);\n  cursor: pointer; user-select: none;\n  color: var(--dcs-text);\n}\n.dcs-select--btn .dcs-select__label {\n  flex: 1; min-width: 0; text-align: left;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.dcs-select--btn .dcs-select__caret { flex: 0 0 auto; color: var(--dcs-text-mute); margin-right: calc(var(--dcs-s-1) * -1); }\n.dcs-select--btn:hover { border-color: var(--dcs-line-strong); }\n.dcs-select--btn.dcs-select--open,\n.dcs-select--btn[aria-expanded=\"true\"] {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 2px var(--dcs-accent-haze);\n}\n.dcs-select--btn.dcs-select--open .dcs-select__caret,\n.dcs-select--btn[aria-expanded=\"true\"] .dcs-select__caret { color: var(--dcs-accent); }\n\n/* ── Field row primitive ──────────────────────────────────────────\n   `.dcs-field` is one label-plus-control row. On its own it's just a\n   flex row — to get even, opinionated spacing across many rows, wrap\n   them in one of the two form layouts below: `.dcs-form` (general) or\n   `.dcs-props` (inspector). */\n.dcs-field {\n  display: flex; align-items: center; gap: var(--dcs-s-3);\n  min-height: var(--dcs-h);\n}\n.dcs-field__label {\n  flex: 0 0 96px;\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  user-select: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dcs-field--row > * { flex: 1; }\n\n/* ── Form layouts: .dcs-form vs .dcs-props ─────────────────────────\n   Two selectors decide how a stack of `.dcs-field` rows looks. Pick\n   one based on context — they are mutually exclusive.\n\n   `.dcs-form`   — DIALOG / MODAL layout. Use this in dialog boxes,\n                   modal-like panels, preference sheets, signup forms,\n                   wizards — anywhere the user is filling in a focused\n                   set of values rather than tweaking live channels.\n                   Labels are **right-justified** against a fixed-width\n                   column; controls keep their **natural width**; bare\n                   buttons self-center; a `.dcs-form__actions` footer\n                   right-aligns grouped actions under the control column.\n\n   `.dcs-props`  — INSPECTOR layout. Use this for property inspectors,\n                   channel editors, attribute lists, node settings —\n                   anywhere a live object's channels are exposed for\n                   continuous editing. Labels are **left-justified**\n                   against a fixed-width column; controls (including\n                   bare buttons) **stretch to fill** the row so a tall\n                   stack reads as even, same-size channel rows.\n\n   Inline checkbox-with-text (check left, label right) — just place a\n   bare `.dcs-check` outside a form/props stack; that's its default.\n\n   Tune label-column width per instance with `--dcs-form-label-w` or\n   `--dcs-props-label-w`. */\n\n.dcs-form {\n  /* In dialog mode the centerline IS the view's centerline — labels\n     right-justify up to 50%, controls start from 50%. This differs\n     from `.dcs-props` (inspector), where the label column is a fixed\n     pixel width tuned to the longest expected prompt. Override\n     `--dcs-form-label-w` per-instance if you need a different split. */\n  --dcs-form-label-w: 50%;\n  display: flex; flex-direction: column;\n  gap: var(--dcs-s-3);\n}\n.dcs-form > .dcs-field {\n  min-height: var(--dcs-h-in);\n}\n.dcs-form > .dcs-field > .dcs-field__label {\n  flex: 0 0 var(--dcs-form-label-w);\n  text-align: right;\n}\n.dcs-form__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--dcs-s-3);\n  padding-left: calc(var(--dcs-form-label-w) + var(--dcs-s-3));\n}\n/* A bare button (or button group) dropped directly into a `.dcs-form`\n   stack keeps its natural size and self-centers in the form column —\n   matches the \"controls keep natural width\" rule above. For grouped,\n   right-aligned action rows use `.dcs-form__actions`. */\n.dcs-form > .dcs-btn,\n.dcs-form > .dcs-btn-group {\n  align-self: center;\n}\n\n/* A `.dcs-btn-row` is a paired-button row that adapts to its stack:\n     • in `.dcs-form` (dialog): buttons sit centered at natural width\n       next to each other.\n     • in `.dcs-props` (inspector): buttons split the row evenly via\n       `flex: 1` — two buttons cut the row in half, three split it\n       into thirds, etc., matching the channel-widget contract.\n   Use this when you want Cancel/Apply, Yes/No, or any paired actions\n   without picking the right-aligned `.dcs-form__actions` footer. */\n.dcs-btn-row {\n  display: flex;\n  gap: var(--dcs-s-3);\n}\n.dcs-form > .dcs-btn-row { justify-content: center; }\n.dcs-props > .dcs-btn-row > .dcs-btn,\n.dcs-props > .dcs-btn-row > .dcs-btn-group {\n  flex: 1;\n  min-width: 0;\n  height: var(--dcs-h-in);\n}\n\n/* ── Channel-widget contract ──────────────────────────────────────\n   Inside `.dcs-props`, each row is locked to --dcs-h-in tall so the\n   whole stack reads as even, same-size rows. A \"channel widget\" is\n   any control that obeys two rules:\n     1. it's no taller than the row (--dcs-h-in), and\n     2. if it should span the row, it stretches (flex: 1).\n   Built-ins listed below already comply; a custom widget opts in by\n   adding `.dcs-field__fill` (to span) or simply staying short (to\n   sit LEFT-justified in the channel column, like a switch/check).\n   The set is open — anything that follows the contract keeps the\n   rhythm. */\n.dcs-props {\n  --dcs-props-label-w: 96px;\n  display: flex; flex-direction: column;\n  gap: var(--dcs-s-3);\n}\n.dcs-props > .dcs-field {\n  height: var(--dcs-h-in);\n  min-height: var(--dcs-h-in);\n  /* No `justify-content` — defaults to flex-start so non-stretched\n     widgets (Check, Switch, fixed-width chip) sit at the LEFT edge\n     of the channel column, aligned with the start of stretched\n     controls above/below. Stretched widgets fill the column via\n     `flex: 1` below. */\n}\n.dcs-props > .dcs-field > .dcs-field__label {\n  flex: 0 0 var(--dcs-props-label-w);\n  text-align: left;\n}\n/* Spanning channel widgets: fill the row after the label and collapse\n   to one uniform height (so the 24px-tall defaults — slider, swatch,\n   button-group — match the 22px text/number fields when stacked).\n   `.dcs-field__fill` is the opt-in escape hatch for custom widgets. */\n.dcs-props > .dcs-field > .dcs-slider,\n.dcs-props > .dcs-field > .dcs-input,\n.dcs-props > .dcs-field > .dcs-select,\n.dcs-props > .dcs-field > .dcs-combo,\n.dcs-props > .dcs-field > .dcs-swatch,\n.dcs-props > .dcs-field > .dcs-colorfield,\n.dcs-props > .dcs-field > .dcs-btn-group,\n.dcs-props > .dcs-field > .dcs-field__fill {\n  flex: 1;\n  min-width: 0;\n  height: var(--dcs-h-in);\n}\n.dcs-props > .dcs-field > .dcs-btn-group {\n  /* Never shrink a button-group past its natural content size — Local /\n     Global / Local-Global rows get illegible when they squeeze under\n     an icon-only floor. Keeps flex:1 so the group still stretches to\n     fill the channel column when there's room. */\n  min-width: max-content;\n}\n.dcs-props > .dcs-field > .dcs-btn-group .dcs-btn {\n  height: calc(var(--dcs-h-in) - 6px);\n  min-width: calc(var(--dcs-h-in) - 6px);\n  padding: 0 var(--dcs-s-3);\n}\n\n/* ── Vector row primitive ──────────────────────────────────────\n   `.dcs-vec` is a flex row of equal-width controls — typically the\n   X/Y/Z numeric editors of a Location / Rotation / Scale channel.\n   Children share row width evenly but won't shrink below\n   `--dcs-xform-minwidth` (default 48px) so labels stay readable; below\n   that floor the row overflows rather than crushing the values.\n   Drops into a `.dcs-props > .dcs-field` slot and stretches to fill\n   the channel column.\n\n   Combos inside a `.dcs-vec` drop the range-fill bar — XYZ values\n   are coordinates, not a range, so a left-to-right fill would be\n   meaningless (and visually confused with a slider). */\n.dcs-vec {\n  --dcs-xform-minwidth: 72px;\n  display: flex;\n  gap: var(--dcs-s-1);\n  min-width: 0;\n}\n.dcs-vec > * {\n  flex: 1 1 0;\n  min-width: var(--dcs-xform-minwidth);\n  min-height: var(--dcs-h-in);   /* never collapse to thin horizontal lines */\n}\n.dcs-vec > .dcs-combo .dcs-combo__fill { display: none; }\n/* Override the stock `.dcs-combo { min-width: 96px }` so the combo\n   inside a vec respects the vec's per-item floor (`--dcs-xform-minwidth`).\n   Without this, combos refuse to shrink past 96px and the JS observer\n   can never observe a constrained width — the synchronized flip\n   threshold is meaningless if the children block the shrink. */\n.dcs-vec > .dcs-combo {\n  min-width: var(--dcs-xform-minwidth);\n}\n.dcs-props > .dcs-field > .dcs-vec {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Field hosting a vec — anchor the prompt to the TOP of the row so a\n   stacked vec keeps its label at the upper-left where the eye lands. */\n.dcs-field:has(> .dcs-vec) {\n  align-items: flex-start;\n}\n.dcs-field:has(> .dcs-vec) > .dcs-field__label {\n  padding-top: 3px;\n}\n\n/* When the vec can't fit its N children at `--dcs-xform-minwidth` apiece, JS\n   (initVecLayout, ResizeObserver-driven) toggles `.dcs-vec--stacked`.\n   The flip threshold is computed from the SAME `--dcs-xform-minwidth` that\n   sets the horizontal floor, so changing the floor automatically\n   adjusts the flip point — they stay synchronized. */\n.dcs-vec--stacked {\n  flex-direction: column;\n}\n.dcs-vec--stacked > * {\n  min-width: 0;\n  width: 100%;\n}\n/* Field gets `height: auto` so it can grow tall when its vec stacks\n   three combos vertically — otherwise the fixed channel-row height\n   (var(--dcs-h-in)) collides with the per-combo min-height and the\n   row content gets crushed. */\n.dcs-props > .dcs-field:has(> .dcs-vec.dcs-vec--stacked) {\n  height: auto;\n}\n.dcs-props > .dcs-field:has(> .dcs-vec) {\n  min-height: var(--dcs-h-in);\n}\n\n/* ── Standalone note / info / warning row ────────────────────────\n   A `.dcs-note` is a full-width text strip inside a form/props stack\n   — no prompt, no editor, just text spanning the row. Use it for\n   section hints, derived/status values, info messages, or warnings\n   that sit *between* the editable channels rather than next to one.\n   Variants colorize the text via semantic tokens; pair with a small\n   `<Icon>` for an at-a-glance affordance. */\n.dcs-note {\n  display: flex; align-items: center; gap: var(--dcs-s-2);\n  font-size: var(--dcs-fs-sm);\n  line-height: var(--dcs-lh);\n  color: var(--dcs-text-dim);   /* match `.dcs-field__label` prompts */\n  font-weight: 400;\n  min-width: 0;\n}\n.dcs-note--mono {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n.dcs-note--mute   { color: var(--dcs-text-mute); }\n.dcs-note--info   { color: var(--dcs-info); }\n.dcs-note--warn   { color: var(--dcs-warn); }\n.dcs-note--ok     { color: var(--dcs-ok); }\n.dcs-note--danger { color: var(--dcs-danger); }\n/* When dropped directly into a form/props stack, the note spans the\n   full row width (no prompt, no channel column) and stays at one\n   channel-row of height for a single line. Text is plain — normal\n   weight, no title hierarchy, no chrome — so it reads as a quiet\n   line in the dialog rather than a callout. In `.dcs-form` (dialog)\n   the text centers like a dialog blurb; in `.dcs-props` (inspector)\n   it stays left-aligned with the rest of the channel column. */\n.dcs-form > .dcs-note,\n.dcs-props > .dcs-note {\n  width: 100%;\n  min-height: var(--dcs-h-in);\n  font-weight: 400;\n}\n.dcs-form > .dcs-note {\n  justify-content: center;\n  text-align: center;\n}\n\n/* `.dcs-alert` dropped into a form/props stack — the heavier sibling\n   of `.dcs-note`. Restyled to a soft \"callout\" box: rounded rect,\n   semantic-tinted background, matching tinted border, icon on the\n   left, plain text on the right. The default `.dcs-alert` accent\n   stripe + raised-surface chrome (its standalone-panel look) is\n   dropped here — inline in a dialog, that visual weight fights the\n   rest of the form. */\n.dcs-form > .dcs-alert,\n.dcs-props > .dcs-alert {\n  width: 100%;\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  border: 1px solid var(--dcs-accent-haze);\n  background: var(--dcs-accent-dim);\n  border-radius: var(--dcs-r-2);\n  align-items: center;\n  gap: var(--dcs-s-3);\n  font-weight: 400;\n}\n.dcs-form > .dcs-alert.dcs-alert--ok,\n.dcs-props > .dcs-alert.dcs-alert--ok {\n  background: rgba(78, 209, 138, .12);\n  border-color: rgba(78, 209, 138, .35);\n}\n.dcs-form > .dcs-alert.dcs-alert--warn,\n.dcs-props > .dcs-alert.dcs-alert--warn {\n  background: rgba(242, 177, 74, .12);\n  border-color: rgba(242, 177, 74, .35);\n}\n.dcs-form > .dcs-alert.dcs-alert--danger,\n.dcs-props > .dcs-alert.dcs-alert--danger {\n  background: rgba(239, 107, 107, .12);\n  border-color: rgba(239, 107, 107, .35);\n}\n/* Inline-callout text: full-strength color, normal weight, no nested\n   title/msg distinction. The body can be a bare string — the existing\n   `.dcs-alert__title` / `.dcs-alert__msg` two-tier structure is\n   collapsed so a single line reads cleanly. */\n.dcs-form > .dcs-alert .dcs-alert__title,\n.dcs-props > .dcs-alert .dcs-alert__title {\n  font-weight: 400;\n  margin: 0;\n}\n.dcs-form > .dcs-alert .dcs-alert__msg,\n.dcs-props > .dcs-alert .dcs-alert__msg {\n  color: var(--dcs-text);\n}\n\n/* Textareas — the \"larger edit box\" — default to two channel rows tall\n   in both form and inspector contexts (so a freshly-dropped textarea\n   reads as the multi-line variant of an input, not a one-liner that\n   happens to scroll). The row holding it expands vertically, and the\n   label aligns to the top of the textarea so it doesn't float in the\n   middle of a tall block.\n\n   Resize affordance follows context: in `.dcs-form` the textarea has\n   natural width so it resizes BOTH ways; in `.dcs-props` the textarea\n   stretches to fill the channel column (`flex: 1`) so only vertical\n   resize is meaningful — horizontal resize would fight the layout. */\n.dcs-form > .dcs-field > .dcs-textarea,\n.dcs-props > .dcs-field > .dcs-textarea {\n  height: calc(var(--dcs-h-in) * 2 + var(--dcs-s-3));\n  min-height: calc(var(--dcs-h-in) * 2 + var(--dcs-s-3));\n}\n.dcs-form > .dcs-field > .dcs-textarea { resize: both; }\n.dcs-props > .dcs-field > .dcs-textarea {\n  flex: 1; min-width: 0;\n  resize: vertical;\n}\n/* Row containing a textarea: lets the row grow vertically, drops the\n   middle-centering (no point centering a short label against a tall\n   box), and aligns the label's first line with the textarea's first\n   line of text. The label uses normal line-height so its top edge\n   matches the textarea's interior top padding (--dcs-s-3). */\n.dcs-form > .dcs-field:has(.dcs-textarea),\n.dcs-props > .dcs-field:has(.dcs-textarea) {\n  height: auto;\n  align-items: flex-start;\n}\n.dcs-form > .dcs-field:has(.dcs-textarea) > .dcs-field__label,\n.dcs-props > .dcs-field:has(.dcs-textarea) > .dcs-field__label {\n  padding-top: var(--dcs-s-3);\n  line-height: var(--dcs-lh);\n  /* Tall labels with a textarea should wrap, not ellipsis-clip — there\n     is room for the wrap, and clipping looks worse than two short\n     lines next to a multi-line edit box. */\n  white-space: normal;\n  text-overflow: clip;\n}\n\n/* ── List / Tree as a field control ──────────────────────────────\n   Lists and trees are too tall and too \"object-like\" to share a row\n   with a label the way a slider or input does. When a `.dcs-list` or\n   `.dcs-tree` is the value side of a `.dcs-field`, the row flips\n   vertical: prompt sits ABOVE the list, list sits below as a sunken\n   chrome'd well.\n     • `.dcs-props` (inspector): list spans the full row width, label\n       left-aligned above it.\n     • `.dcs-form` (dialog): list takes two-thirds width and centers\n       under a centered label.\n   Default height is four channel rows so an engineer dropping a list\n   into a form doesn't have to size it. Adjust per-instance with the\n   `--dcs-list-h` custom property. */\n.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table),\n.dcs-props > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) {\n  --dcs-list-h: calc(var(--dcs-h) * 4);\n  flex-direction: column;\n  align-items: flex-start;\n  height: auto;\n  min-height: 0;\n  gap: var(--dcs-s-2);\n}\n/* In .dcs-form the entire prompt/list pair container is 66% wide and\n   centered in the form. Inside that container, the prompt sits at\n   top-left and the list fills the container's full width — so both\n   align to the container's left edge, and the whole pair sits in\n   the visual center of the form. */\n.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) {\n  width: 66%;\n  align-self: center;\n}\n.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) > .dcs-field__label,\n.dcs-props > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) > .dcs-field__label {\n  flex: 0 0 auto;\n  width: auto;\n  text-align: left;\n}\n/* The list/tree/table fills the pair container's width — in .dcs-form\n   that's 66% of the form, in .dcs-props that's 100% of the inspector. */\n.dcs-form > .dcs-field > .dcs-list,\n.dcs-form > .dcs-field > .dcs-tree,\n.dcs-form > .dcs-field > .dcs-table,\n.dcs-props > .dcs-field > .dcs-list,\n.dcs-props > .dcs-field > .dcs-tree,\n.dcs-props > .dcs-field > .dcs-table {\n  width: 100%;\n}\n/* Shared chrome: sunken well + border + scrollable + default height.\n   Tables need `display: block` to honour `overflow: auto` (default\n   `display: table` ignores overflow); this loses native column\n   auto-sizing — set `<th>`/`<td>` widths explicitly if needed. */\n.dcs-form > .dcs-field > .dcs-list,\n.dcs-form > .dcs-field > .dcs-tree,\n.dcs-form > .dcs-field > .dcs-table,\n.dcs-props > .dcs-field > .dcs-list,\n.dcs-props > .dcs-field > .dcs-tree,\n.dcs-props > .dcs-field > .dcs-table {\n  height: var(--dcs-list-h);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  overflow: auto;\n}\n.dcs-form > .dcs-field > .dcs-table,\n.dcs-props > .dcs-field > .dcs-table {\n  display: block;\n}\n/* A bare button (or button group) dropped directly into a `.dcs-props`\n   stack — not wrapped in a `.dcs-field` — acts as a channel-sized\n   widget: full row width, locked to row height. Stretch is the inspector\n   contract. */\n.dcs-props > .dcs-btn,\n.dcs-props > .dcs-btn-group {\n  width: 100%;\n  height: var(--dcs-h-in);\n}\n.dcs-props > .dcs-btn-group .dcs-btn {\n  height: calc(var(--dcs-h-in) - 6px);\n  min-width: calc(var(--dcs-h-in) - 6px);\n}\n\n/* Link field — a channel widget that accepts a dragged asset/node (DnD).\n   Dashed while empty, solid once linked; flips to accent/danger as a drop\n   target. Sits at channel-row height so it stacks with the others. */\n.dcs-linkfield {\n  flex: 1; min-width: 0;\n  display: flex; align-items: center; gap: var(--dcs-s-2);\n  height: var(--dcs-h-in); padding: 0 var(--dcs-s-2);\n  background: var(--dcs-well);\n  border: 1px dashed var(--dcs-line-strong);\n  border-radius: var(--dcs-r-2);\n  color: var(--dcs-text-dim); font-size: var(--dcs-fs-sm);\n  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n.dcs-linkfield--set { border-style: solid; color: var(--dcs-text); }\n.dcs-linkfield__empty { color: var(--dcs-text-mute); font-style: italic; }\n.dcs-linkfield.dcs-drop--valid { border-style: solid; border-color: var(--dcs-accent); background: var(--dcs-accent-dim); box-shadow: none; }\n.dcs-linkfield.dcs-drop--invalid { border-color: var(--dcs-danger); box-shadow: none; }\n\n/* ZBrush-style combo number/slider — flat by default */\n.dcs-combo {\n  position: relative;\n  display: inline-flex; align-items: stretch;\n  height: var(--dcs-h-in);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  overflow: hidden;\n  user-select: none;\n  min-width: 96px;\n  cursor: ew-resize;\n}\n.dcs-combo--sm {\n  height: var(--dcs-h-sm);\n  min-width: 56px;\n}\n.dcs-combo--sm .dcs-combo__label,\n.dcs-combo--sm .dcs-combo__value {\n  font-size: var(--dcs-fs-xs);\n  padding: 0 var(--dcs-s-2);\n}\n.dcs-combo--lg {\n  height: calc(var(--dcs-h-lg) - 2px);\n  min-width: 120px;\n}\n.dcs-combo--lg .dcs-combo__label,\n.dcs-combo--lg .dcs-combo__value {\n  font-size: var(--dcs-fs-md);\n  padding: 0 var(--dcs-s-4);\n}\n.dcs-combo__fill {\n  position: absolute; left: 0; bottom: 0;\n  height: 2px;\n  width: var(--fill, 50%);\n  background: var(--dcs-accent);\n  pointer-events: none;\n  opacity: .7;\n}\n.dcs-combo__label, .dcs-combo__value {\n  position: relative; z-index: 1;\n  display: flex; align-items: center;\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-sm);\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n.dcs-combo__label {\n  color: var(--dcs-text-mute);\n  flex: 0 0 auto;\n  min-width: 0;\n  padding-right: var(--dcs-s-2);\n}\n.dcs-combo__value {\n  color: var(--dcs-text);\n  flex: 1; min-width: 0;\n  justify-content: flex-end;\n  padding-right: var(--dcs-s-3);\n}\n/* Combo chevrons — hidden in flat mode (no fly-out animation), always-visible in 3D */\n.dcs-combo__btn {\n  display: none;\n  width: 14px;\n  align-items: center; justify-content: center;\n  color: var(--dcs-text-mute);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  z-index: 1;\n}\n.dcs-combo__btn:hover { color: var(--dcs-text); background: rgba(255,255,255,.04); }\n.dcs-combo:hover {\n  border-color: var(--dcs-line-strong);\n  background: var(--dcs-bg);\n}\n.dcs-combo:focus-within {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 2px var(--dcs-accent-haze);\n}\n.dcs-combo--editing { cursor: text; }\n.dcs-combo--editing .dcs-combo__fill { opacity: 0; }\n.dcs-combo__edit {\n  position: absolute; inset: 0; z-index: 2;\n  background: var(--dcs-well);\n  border: none; outline: none;\n  padding: 0 var(--dcs-s-3);\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text);\n  text-align: right;\n}\n","/* ------------------------------------------------------------\n   7 · SLIDER (DCC horizontal track + synth vertical)\n   ------------------------------------------------------------ */\n.dcs-slider {\n  position: relative;\n  display: flex; align-items: center;\n  height: var(--dcs-h);\n  width: 100%;\n  min-width: 80px;\n  user-select: none;\n  cursor: pointer;\n}\n.dcs-slider__track {\n  position: relative;\n  height: 4px; width: 100%;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: 999px;\n}\n.dcs-slider__fill {\n  position: absolute; top: 0; bottom: 0; left: 0;\n  width: var(--fill, 50%);\n  background: linear-gradient(90deg, var(--dcs-accent-lo), var(--dcs-accent));\n  border-radius: 999px;\n}\n.dcs-slider__thumb {\n  position: absolute;\n  top: 50%; transform: translate(-50%, -50%);\n  left: var(--fill, 50%);\n  width: 12px; height: 12px;\n  background: var(--dcs-surface-3);\n  border: 1px solid var(--dcs-accent);\n  border-radius: 50%;\n  transition: transform var(--dcs-t-fast), background var(--dcs-t-fast);\n}\n.dcs-slider:hover .dcs-slider__thumb { transform: translate(-50%, -50%) scale(1.1); }\n.dcs-slider--active .dcs-slider__thumb,\n.dcs-slider:focus-within .dcs-slider__thumb {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 3px var(--dcs-accent-haze);\n}\n.dcs-slider__tick {\n  position: absolute; top: -3px; width: 1px; height: 10px;\n  background: var(--dcs-text-mute); opacity: .4;\n}\n\n/* Vertical synth-style fader — flat by default */\n.dcs-fader {\n  position: relative;\n  width: 28px; height: 140px;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  display: flex; flex-direction: column; align-items: center;\n  cursor: ns-resize;\n}\n.dcs-fader__track {\n  position: absolute; left: 50%; transform: translateX(-50%);\n  top: 8px; bottom: 8px; width: 2px;\n  background: var(--dcs-line-soft);\n}\n.dcs-fader__tick {\n  position: absolute; left: 4px; right: 4px; height: 1px;\n  background: var(--dcs-line-soft);\n}\n.dcs-fader__thumb {\n  position: absolute; left: 50%; transform: translate(-50%, -50%);\n  top: var(--pos, 50%);\n  width: 22px; height: 8px;\n  background: var(--dcs-surface-3);\n  border: 1px solid var(--dcs-accent);\n  border-radius: var(--dcs-r-1);\n}\n.dcs-fader__thumb::after {\n  content: \"\"; position: absolute; left: 3px; right: 3px; top: 50%;\n  height: 1px; background: var(--dcs-accent);\n  transform: translateY(-.5px);\n}\n\n/* Range slider (with center detent) */\n.dcs-slider--bipolar .dcs-slider__fill {\n  left: 50%; transform: translateX(0);\n  width: calc(var(--fill, 0%));\n  background: linear-gradient(90deg, var(--dcs-accent-lo), var(--dcs-accent));\n}\n.dcs-slider--bipolar .dcs-slider__fill[data-neg] {\n  left: auto; right: 50%;\n}\n","/* ------------------------------------------------------------\n   8 · KNOB (synth) — flat by default\n   ------------------------------------------------------------ */\n.dcs-knob {\n  position: relative;\n  width: var(--knob-size, 56px);\n  height: var(--knob-size, 56px);\n  display: inline-flex; align-items: center; justify-content: center;\n  cursor: ns-resize;\n  user-select: none;\n}\n.dcs-knob__ring {\n  position: absolute; inset: 0;\n  pointer-events: none;\n}\n.dcs-knob__cap {\n  position: absolute;\n  inset: 18%;\n  border-radius: 50%;\n  background: var(--dcs-surface-2);\n  border: 1px solid var(--dcs-line);\n}\n.dcs-knob__indicator {\n  position: absolute;\n  left: 50%; top: 50%;\n  width: 2px; height: 38%;\n  background: var(--dcs-accent);\n  border-radius: 1px;\n  transform-origin: 50% 100%;\n  transform: translate(-50%, -100%) rotate(var(--angle, 0deg));\n}\n.dcs-knob__label {\n  position: absolute; bottom: -16px; left: 0; right: 0;\n  text-align: center;\n  font-size: var(--dcs-fs-xs);\n  font-family: var(--dcs-font-mono);\n  color: var(--dcs-text-dim);\n  letter-spacing: .04em;\n  text-transform: uppercase;\n}\n.dcs-knob__value {\n  position: absolute; top: -14px; left: 0; right: 0;\n  text-align: center;\n  font-size: var(--dcs-fs-xs);\n  font-family: var(--dcs-font-mono);\n  color: var(--dcs-accent);\n}\n","/* ------------------------------------------------------------\n   9 · CHECKBOX / RADIO / SWITCH — flat by default\n   ------------------------------------------------------------ */\n.dcs-check {\n  display: inline-flex; align-items: center; gap: var(--dcs-s-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--dcs-fs-sm);\n}\n.dcs-check__box {\n  width: 14px; height: 14px;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line-strong);\n  border-radius: var(--dcs-r-1);\n  display: flex; align-items: center; justify-content: center;\n  color: transparent;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast), border-color var(--dcs-t-fast);\n}\n.dcs-check[aria-checked=\"true\"] .dcs-check__box {\n  background: var(--dcs-accent);\n  border-color: var(--dcs-accent-lo);\n  color: #0a1220;\n}\n.dcs-check__box svg { width: 10px; height: 10px; }\n.dcs-check:hover .dcs-check__box { border-color: var(--dcs-accent); }\n\n.dcs-radio .dcs-check__box { border-radius: 50%; }\n.dcs-radio[aria-checked=\"true\"] .dcs-check__box { color: transparent; position: relative; }\n.dcs-radio[aria-checked=\"true\"] .dcs-check__box::after {\n  content: \"\"; width: 6px; height: 6px; border-radius: 50%;\n  background: #0a1220;\n}\n\n.dcs-switch {\n  position: relative;\n  width: 28px; height: 16px;\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line-strong);\n  border-radius: 999px;\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast);\n}\n.dcs-switch::after {\n  content: \"\"; position: absolute;\n  top: 1px; left: 1px;\n  width: 12px; height: 12px;\n  background: var(--dcs-text-mute);\n  border-radius: 50%;\n  transition: transform var(--dcs-t), background var(--dcs-t-fast);\n}\n.dcs-switch[aria-checked=\"true\"] { background: var(--dcs-accent); border-color: var(--dcs-accent-lo); }\n.dcs-switch[aria-checked=\"true\"]::after { transform: translateX(12px); background: #0a1220; }\n","/* ------------------------------------------------------------\n   10 · BADGE / TAG / CHIP — solid only\n   ------------------------------------------------------------ */\n.dcs-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  height: var(--dcs-h-sm); padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-xs); font-weight: 600;\n  font-family: var(--dcs-font);\n  font-variant-numeric: tabular-nums lining-nums;\n  background: var(--dcs-surface-2);\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-text-dim);\n  letter-spacing: .04em;\n  text-transform: uppercase;\n}\n.dcs-badge--accent { background: var(--dcs-accent); color: #0a1220; }\n.dcs-badge--ok     { background: var(--dcs-ok);     color: #06321d; }\n.dcs-badge--warn   { background: var(--dcs-warn);   color: #3a230a; }\n.dcs-badge--danger { background: var(--dcs-danger); color: #380e0e; }\n.dcs-badge--soft   { background: var(--dcs-bg); color: var(--dcs-text-dim); }\n.dcs-badge--dot::before {\n  content: \"\"; width: 6px; height: 6px; border-radius: 50%;\n  background: currentColor;\n  opacity: .85;\n}\n","/* ------------------------------------------------------------\n   11 · KBD\n   ------------------------------------------------------------ */\n.dcs-kbd {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: var(--dcs-h-sm); height: var(--dcs-h-sm); padding: 0 var(--dcs-s-3);\n  font-family: var(--dcs-font-mono); font-size: var(--dcs-fs-xs);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-bottom-width: 2px;\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-text-dim);\n}\n","/* ------------------------------------------------------------\n   12 · ALERT\n   ------------------------------------------------------------ */\n.dcs-alert {\n  display: flex; gap: var(--dcs-s-4);\n  padding: var(--dcs-s-4) var(--dcs-s-5);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-left: 3px solid var(--dcs-accent);\n  border-radius: var(--dcs-r-2);\n  font-size: var(--dcs-fs-sm);\n  align-items: flex-start;\n}\n.dcs-alert--ok     { border-left-color: var(--dcs-ok); }\n.dcs-alert--warn   { border-left-color: var(--dcs-warn); }\n.dcs-alert--danger { border-left-color: var(--dcs-danger); }\n.dcs-alert__icon { color: var(--dcs-accent); flex: 0 0 auto; }\n.dcs-alert--ok .dcs-alert__icon { color: var(--dcs-ok); }\n.dcs-alert--warn .dcs-alert__icon { color: var(--dcs-warn); }\n.dcs-alert--danger .dcs-alert__icon { color: var(--dcs-danger); }\n.dcs-alert__body { flex: 1; }\n.dcs-alert__title { color: var(--dcs-text); font-weight: 500; margin-bottom: 2px; }\n/* Amber-on-dark code chips suit the dark DCC theme — scope them to the .dcs\n   context so alerts reused as light docs callouts fall back to the page's\n   own (softer) inline-code style instead. */\n.dcs .dcs-alert code,\n.dcs .dcs-alert__msg code {\n  font-family: var(--dcs-font-mono);\n  font-size: .92em;\n  padding: 1px 6px;\n  background: var(--dcs-well);\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-warn);\n  border: none;\n}\n.dcs-alert__msg { color: var(--dcs-text-dim); }\n","/* ------------------------------------------------------------\n   13 · MODAL\n   ------------------------------------------------------------ */\n.dcs-modal-backdrop {\n  position: fixed; inset: 0;\n  background: rgba(0,0,0,.6);\n  backdrop-filter: blur(2px);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 100;\n}\n/* decius.js hides modals with the [hidden] attribute; the display above\n   would otherwise win over the UA [hidden] rule. */\n.dcs-modal-backdrop[hidden] { display: none; }\n.dcs-modal {\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: var(--dcs-r-3);\n  box-shadow: var(--dcs-shadow-pop);\n  min-width: 360px;\n  max-width: 80vw;\n  display: flex; flex-direction: column;\n  overflow: hidden;\n}\n.dcs-modal__header {\n  display: flex; align-items: center; gap: var(--dcs-s-3);\n  height: var(--dcs-h-lg);\n  padding: 0 var(--dcs-s-5);\n  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));\n  border-bottom: 1px solid var(--dcs-line);\n  font-size: var(--dcs-fs-md);\n  font-weight: 500;\n}\n.dcs-modal__body { padding: var(--dcs-s-6); font-size: var(--dcs-fs-sm); }\n.dcs-modal__footer {\n  display: flex; justify-content: flex-end; gap: var(--dcs-s-3);\n  padding: var(--dcs-s-4) var(--dcs-s-5);\n  background: var(--dcs-surface-1);\n  border-top: 1px solid var(--dcs-line);\n}\n","/* ------------------------------------------------------------\n   14 · TREE / TABLE / LIST\n   ------------------------------------------------------------ */\n/* A list is a tree without folding — same row metrics, hover, selection,\n   no per-row rules, no container chrome. Just a plain stack like .dcs-tree. */\n.dcs-list {\n  display: flex; flex-direction: column;\n  user-select: none;\n}\n/* Lists and trees are the same primitive — identical row metrics, hover, and\n   selection. A tree row just adds depth indent + a chevron. Both are\n   density-driven (height = --dcs-h), so sm/md/lg read clearly and match. */\n.dcs-list__item,\n.dcs-tree__row {\n  display: flex; align-items: center;\n  position: relative;          /* drop-indicator lines hang off ::before/::after */\n  height: var(--dcs-h);\n  /* .dcs-list is a flex column; without this its rows shrink below --dcs-h\n     when the list overflows/scrolls, breaking parity with tree rows (which\n     live in a plain block). Lock both to exactly --dcs-h. */\n  flex: 0 0 var(--dcs-h);\n  box-sizing: border-box;\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  cursor: default;\n  user-select: none;\n}\n/* Drag-to-reorder: grab affordance + a 2px accent drop-indicator line\n   (before/after a row) or an inset highlight for drop-into (reparent). */\n.dcs-list__item--draggable, .dcs-tree__row--draggable { cursor: grab; }\n.dcs-list__item--draggable:active, .dcs-tree__row--draggable:active { cursor: grabbing; }\n.dcs-list__item--drop-before::before, .dcs-tree__row--drop-before::before,\n.dcs-list__item--drop-after::after,  .dcs-tree__row--drop-after::after {\n  content: \"\"; position: absolute; left: 0; right: 0; height: 2px;\n  background: var(--dcs-accent); z-index: 3; pointer-events: none;\n}\n.dcs-list__item--drop-before::before, .dcs-tree__row--drop-before::before { top: -1px; }\n.dcs-list__item--drop-after::after,   .dcs-tree__row--drop-after::after  { bottom: -1px; }\n.dcs-list__item--drop-into, .dcs-tree__row--drop-into {\n  background: var(--dcs-accent-dim);\n  box-shadow: inset 0 0 0 1px var(--dcs-accent);\n}\n\n/* Typed drop-target affordance (DnD framework) — a target the dragged type\n   is valid for vs one it isn't. Applied by useDrop / DropZone / data-dcs-drop. */\n.dcs-drop--valid { box-shadow: inset 0 0 0 2px var(--dcs-accent); }\n.dcs-drop--invalid { box-shadow: inset 0 0 0 2px var(--dcs-danger); cursor: no-drop; }\n/* No per-line rule — matches the tree's left inset so the two read alike. */\n.dcs-list__item { gap: var(--dcs-s-2); padding: 0 var(--dcs-s-4) 0 var(--dcs-s-2); }\n.dcs-tree { user-select: none; }\n.dcs-tree__row {\n  gap: 2px;\n  padding-left: calc(var(--dcs-s-2) + var(--depth, 0) * 14px);\n  padding-right: var(--dcs-s-4);\n}\n.dcs-list__item:hover,\n.dcs-tree__row:hover { background: var(--dcs-surface-1); color: var(--dcs-text); }\n/* Collapsing a tree branch hides descendant rows via `[hidden]`. Override\n   the default class-driven `display: flex` so the hidden state wins. */\n.dcs-list__item[hidden],\n.dcs-tree__row[hidden] { display: none; }\n.dcs-list__item[aria-selected=\"true\"],\n.dcs-tree__row[aria-selected=\"true\"] {\n  background: var(--dcs-accent-dim);\n  color: var(--dcs-text);\n  box-shadow: inset 2px 0 0 var(--dcs-accent);\n}\n.dcs-tree__chevron {\n  width: 14px; height: 14px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--dcs-text-mute);\n  transition: transform var(--dcs-t-fast);\n}\n.dcs-tree__chevron--open { transform: rotate(90deg); }\n.dcs-tree__icon { width: 14px; height: 14px; color: var(--dcs-text-mute); flex: 0 0 auto; }\n.dcs-tree__row[aria-selected=\"true\"] .dcs-tree__icon { color: var(--dcs-accent); }\n.dcs-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dcs-tree__meta { color: var(--dcs-text-mute); font-family: var(--dcs-font-mono); font-size: var(--dcs-fs-xs); }\n\n.dcs-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--dcs-fs-sm);\n  background: var(--dcs-bg);\n}\n.dcs-table th {\n  text-align: left;\n  font-weight: 500;\n  font-size: var(--dcs-fs-xs);\n  text-transform: uppercase;\n  letter-spacing: .06em;\n  color: var(--dcs-text-mute);\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  position: sticky; top: 0;\n}\n.dcs-table td {\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  border-bottom: 1px solid var(--dcs-line-soft);\n  color: var(--dcs-text-dim);\n}\n.dcs-table tbody tr:hover td { background: var(--dcs-surface-1); color: var(--dcs-text); }\n.dcs-table tbody tr[aria-selected=\"true\"] td { background: var(--dcs-accent-dim); color: var(--dcs-text); }\n.dcs-table--mono td:nth-child(n+2) { font-family: var(--dcs-font-mono); font-variant-numeric: tabular-nums; }\n","/* ------------------------------------------------------------\n   15 · TOOLBAR\n   One uniform toolbar: embedded under a menu bar or floating as an\n   overlay in the content view; horizontal or vertical; sm / md / lg.\n   Selected tools show a solid accent background everywhere.\n   ------------------------------------------------------------ */\n.dcs-toolbar {\n  --tb-btn: var(--dcs-h);               /* size of each tool button */\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  height: var(--dcs-h-lg);\n  padding: 0 var(--dcs-s-3);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  flex-shrink: 0;\n  user-select: none;\n}\n.dcs-toolbar--sm { --tb-btn: var(--dcs-h-sm); height: var(--dcs-h); }\n.dcs-toolbar--lg { --tb-btn: var(--dcs-h-lg); height: var(--dcs-h-xl); }\n\n/* Uniform tool-button sizing, regardless of per-button size props. */\n.dcs-toolbar .dcs-btn { height: var(--tb-btn); }\n.dcs-toolbar .dcs-btn--icon { width: var(--tb-btn); padding: 0; }\n.dcs-toolbar .dcs-btn-group { height: var(--tb-btn); align-self: center; }\n.dcs-toolbar .dcs-btn-group .dcs-btn {\n  height: calc(var(--tb-btn) - 6px);\n  min-width: calc(var(--tb-btn) - 6px);\n}\n\n/* Selected tool — solid key colour (matches button-groups + floaters). */\n.dcs-toolbar .dcs-btn[aria-pressed=\"true\"] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  border-color: transparent;\n}\n.dcs-toolbar .dcs-btn[aria-pressed=\"true\"]:hover { background: var(--dcs-accent-hi); }\n\n.dcs-toolbar__sep {\n  width: 1px; height: 60%;\n  background: var(--dcs-line);\n  margin: 0 var(--dcs-s-2);\n  flex: 0 0 1px;\n}\n.dcs-toolbar__spacer { flex: 1; }\n\n/* Vertical toolbar (rail). */\n.dcs-toolbar--v {\n  flex-direction: column;\n  height: auto;\n  width: var(--dcs-h-lg);\n  padding: var(--dcs-s-3) 0;\n}\n.dcs-toolbar--v.dcs-toolbar--sm { width: var(--dcs-h); }\n.dcs-toolbar--v.dcs-toolbar--lg { width: var(--dcs-h-xl); }\n.dcs-toolbar--v .dcs-toolbar__sep { width: 60%; height: 1px; margin: var(--dcs-s-2) 0; }\n\n/* Floating overlay — same toolbar, dropped over the content view. */\n.dcs-toolbar--floating {\n  border-color: var(--dcs-line-soft);\n  box-shadow: var(--dcs-shadow-3);\n}\n","/* ------------------------------------------------------------\n   16 · TOOLTIP (CSS hover)\n   ------------------------------------------------------------ */\n.dcs-tooltip {\n  position: relative;\n}\n.dcs-tooltip::after {\n  content: attr(data-tip);\n  position: absolute;\n  bottom: calc(100% + 4px); left: 50%;\n  transform: translateX(-50%);\n  background: #0c0d12;\n  color: var(--dcs-text);\n  font-size: var(--dcs-fs-xs);\n  padding: 3px 6px;\n  border-radius: var(--dcs-r-1);\n  border: 1px solid var(--dcs-line-soft);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--dcs-t-fast) 200ms;\n  z-index: 50;\n}\n.dcs-tooltip:hover::after { opacity: 1; }\n","/* ------------------------------------------------------------\n   17 · COLOR SWATCH / PICKER\n   ------------------------------------------------------------ */\n.dcs-swatch {\n  display: inline-flex; align-items: center; gap: var(--dcs-s-2);\n  height: var(--dcs-h);\n  padding: 2px; padding-right: var(--dcs-s-3);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  cursor: pointer;\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-dim);\n}\n.dcs-swatch__chip {\n  width: calc(var(--dcs-h) - 8px);\n  height: calc(var(--dcs-h) - 8px);\n  border-radius: var(--dcs-r-1);\n  background: var(--c, #888);\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);\n}\n.dcs-swatch:hover { border-color: var(--dcs-line-strong); }\n\n.dcs-color-square {\n  width: 100%; aspect-ratio: 1;\n  background:\n    linear-gradient(to top, #000, transparent),\n    linear-gradient(to right, #fff, var(--hue, #f00));\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  position: relative;\n  cursor: crosshair;\n}\n.dcs-color-square__cursor {\n  position: absolute;\n  width: 12px; height: 12px;\n  border: 2px solid #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px rgba(0,0,0,.6);\n  pointer-events: none;\n  transform: translate(-50%, -50%);\n}\n.dcs-hue-bar {\n  height: 12px; width: 100%;\n  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-1);\n  position: relative;\n  cursor: ew-resize;\n}\n.dcs-hue-bar__cursor {\n  position: absolute; top: -2px; bottom: -2px;\n  width: 6px;\n  background: #fff;\n  border: 1px solid #000;\n  border-radius: 2px;\n  transform: translateX(-50%);\n}\n.dcs-alpha-bar {\n  height: 12px; width: 100%;\n  background:\n    linear-gradient(90deg, transparent, var(--c, #f00)),\n    repeating-conic-gradient(#666 0 90deg, #999 90deg 180deg) 0 0 / 8px 8px;\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-1);\n  position: relative;\n}\n\n/* Channel color field — input-height widget (matches other inspector rows):\n   a drag-scrub chip + an editable/copyable hex + a dropdown-picker caret. */\n.dcs-colorfield {\n  display: inline-flex; align-items: center; gap: var(--dcs-s-2);\n  height: var(--dcs-h-in);\n  padding: 0 var(--dcs-s-1) 0 var(--dcs-s-1);\n  background: var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  user-select: none;\n  color: var(--dcs-text-dim);\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-sm);\n}\n.dcs-colorfield:hover { border-color: var(--dcs-line-strong); }\n.dcs-colorfield__chip {\n  width: calc(var(--dcs-h-in) - 8px); height: calc(var(--dcs-h-in) - 8px);\n  flex: 0 0 auto;\n  border-radius: var(--dcs-r-1);\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);\n  cursor: ew-resize;           /* drag-scrub */\n  touch-action: none;\n}\n.dcs-colorfield__hex {\n  flex: 1; min-width: 0; width: 100%;\n  background: transparent; border: none; outline: none;\n  color: var(--dcs-text-dim);\n  font-family: var(--dcs-font-mono); font-size: var(--dcs-fs-sm);\n  letter-spacing: .02em; padding: 0;\n}\n.dcs-colorfield__hex:focus { color: var(--dcs-text); }\n.dcs-colorfield__caret {\n  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;\n  width: 16px; color: var(--dcs-text-mute); cursor: pointer;\n}\n.dcs-colorfield__caret:hover { color: var(--dcs-text); }\n/* Color-only variant — just the chip + caret, no hex. */\n.dcs-colorfield--swatch { padding: 0 var(--dcs-s-2); gap: var(--dcs-s-1); }\n.dcs-colorfield--swatch .dcs-colorfield__chip { width: 18px; height: 18px; }\n","/* ------------------------------------------------------------\n   18 · CURVE / GRAPH EDITOR BACKGROUNDS\n   ------------------------------------------------------------ */\n.dcs-graph {\n  background:\n    linear-gradient(var(--dcs-line-soft) 1px, transparent 1px) 0 0 / 100% 25%,\n    linear-gradient(90deg, var(--dcs-line-soft) 1px, transparent 1px) 0 0 / 25% 100%,\n    var(--dcs-well);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-2);\n  position: relative;\n  overflow: hidden;\n}\n.dcs-graph__major {\n  position: absolute; inset: 0; pointer-events: none;\n  background:\n    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 50%,\n    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 50% 100%;\n}\n","/* ------------------------------------------------------------\n   19 · ICONS\n   ------------------------------------------------------------ */\n.dcs-icon {\n  display: inline-block;\n  width: 16px; height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.25;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n.dcs-icon--lg { width: 20px; height: 20px; }\n.dcs-icon--sm { width: 12px; height: 12px; }\n.dcs-icon--xl { width: 28px; height: 28px; stroke-width: 1; }\n","/* ------------------------------------------------------------\n   20 · UTIL\n   ------------------------------------------------------------ */\n.dcs-divider { height: 1px; background: var(--dcs-line); margin: var(--dcs-s-4) 0; }\n.dcs-divider--v { width: 1px; height: auto; margin: 0 var(--dcs-s-4); align-self: stretch; }\n.dcs-spacer { flex: 1; }\n.dcs-row { display: flex; align-items: center; gap: var(--dcs-s-3); }\n.dcs-col { display: flex; flex-direction: column; gap: var(--dcs-s-3); }\n/* Mono helper — only for monospaced contexts like code/paths */\n.dcs-mono { font-family: var(--dcs-font-mono); font-variant-numeric: tabular-nums; }\n.dcs-num  { font-family: var(--dcs-font-num);  font-variant-numeric: tabular-nums lining-nums; }\n.dcs-dim  { color: var(--dcs-text-dim); }\n.dcs-mute { color: var(--dcs-text-mute); }\n.dcs-accent-text { color: var(--dcs-accent); }\n.dcs-no-select { user-select: none; }\n\n/* Scrollbars */\n.dcs *::-webkit-scrollbar { width: 10px; height: 10px; }\n.dcs *::-webkit-scrollbar-track { background: var(--dcs-well); }\n.dcs *::-webkit-scrollbar-thumb {\n  background: var(--dcs-surface-3);\n  border: 2px solid var(--dcs-well);\n  border-radius: 999px;\n}\n.dcs *::-webkit-scrollbar-thumb:hover { background: var(--dcs-surface-4); }\n\n/* Focus reset */\n.dcs *:focus { outline: none; }\n.dcs *:focus-visible { outline: 1px solid var(--dcs-accent); outline-offset: 1px; }\n","/* ============================================================\n   21 · SUBPANEL — collapsible, with close affordance\n   ============================================================ */\n@keyframes dcs-blink {\n  50% { opacity: 0; }\n}\n.dcs-subpanel {\n  background: var(--dcs-bg);\n  border-bottom: 1px solid var(--dcs-line);\n  display: flex; flex-direction: column;\n}\n.dcs-subpanel:last-child { border-bottom: none; }\n.dcs-subpanel__header {\n  display: flex; align-items: center; gap: var(--dcs-s-2);\n  height: 22px;\n  padding: 0 var(--dcs-s-3);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line-soft);\n  font-size: var(--dcs-fs-xs);\n  font-weight: 600;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--dcs-text-mute);\n  cursor: default;\n  user-select: none;\n}\n/* No background flash on hover — only the chevron reacts (matches foldout). */\n.dcs-subpanel__header:hover { color: var(--dcs-text-dim); }\n.dcs-subpanel__header:hover .dcs-subpanel__chevron { color: var(--dcs-text); }\n.dcs-subpanel__chevron {\n  width: 12px; height: 12px;\n  display: flex; align-items: center; justify-content: center;\n  transition: transform var(--dcs-t-fast), color var(--dcs-t-fast);\n  cursor: pointer;\n  flex: 0 0 auto;\n  color: var(--dcs-text-mute);\n}\n.dcs-subpanel__chevron--open { transform: rotate(90deg); }\n.dcs-subpanel__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--dcs-s-2); }\n.dcs-subpanel__close {\n  width: 14px; height: 14px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--dcs-text-mute);\n  border-radius: var(--dcs-r-1);\n  cursor: pointer;\n  flex: 0 0 auto;\n  opacity: 0;\n  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);\n}\n.dcs-subpanel__header:hover .dcs-subpanel__close { opacity: .7; }\n.dcs-subpanel__close:hover { opacity: 1; color: var(--dcs-danger); background: rgba(239,107,107,.15); }\n.dcs-subpanel__body {\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n}\n.dcs-subpanel--collapsed .dcs-subpanel__body { display: none; }\n.dcs-subpanel--collapsed .dcs-subpanel__header { border-bottom: none; }\n\n/* Base component: also works as a native <details>/<summary> with zero JS. */\n.dcs-subpanel > summary.dcs-subpanel__header { list-style: none; }\n.dcs-subpanel > summary.dcs-subpanel__header::-webkit-details-marker { display: none; }\n.dcs-subpanel > summary.dcs-subpanel__header::marker { content: \"\"; }\ndetails.dcs-subpanel:not([open]) > summary.dcs-subpanel__header { border-bottom: none; }\ndetails.dcs-subpanel[open] > summary .dcs-subpanel__chevron { transform: rotate(90deg); }\n","/* ============================================================\n   23 · FOLDOUT — Blender-style soft section\n   For property inspectors: rounded, slightly lighter card with\n   breathing room. Stacked inside a scrollable panel body.\n   ============================================================ */\n.dcs-foldouts {\n  display: flex; flex-direction: column;\n  gap: var(--dcs-s-3);\n  padding: var(--dcs-s-3);\n}\n.dcs-foldout {\n  background: var(--dcs-surface-1);\n  border-radius: var(--dcs-r-3);\n  overflow: hidden;\n}\n.dcs-foldout__header {\n  display: flex; align-items: center; gap: var(--dcs-s-2);\n  padding: var(--dcs-s-2) var(--dcs-s-4) var(--dcs-s-2) var(--dcs-s-2);\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n  color: var(--dcs-text);\n  cursor: pointer;\n  user-select: none;\n  min-height: var(--dcs-h);\n}\n/* No background flash on hover — only the chevron reacts (DCC-quiet). */\n.dcs-foldout__header:hover .dcs-foldout__chevron { color: var(--dcs-text); }\n.dcs-foldout__chevron {\n  width: 16px; height: 16px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--dcs-text-mute);\n  transition: transform var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n.dcs-foldout__chevron--open { transform: rotate(90deg); }\n.dcs-foldout__icon { color: var(--dcs-text-mute); flex: 0 0 auto; }\n.dcs-foldout__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dcs-foldout__meta {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n}\n.dcs-foldout__tools {\n  display: flex; align-items: center; gap: 2px;\n  opacity: 0;\n  transition: opacity var(--dcs-t-fast);\n}\n.dcs-foldout__header:hover .dcs-foldout__tools { opacity: 1; }\n.dcs-foldout__body {\n  padding: var(--dcs-s-1) var(--dcs-s-5) var(--dcs-s-5) var(--dcs-s-5);\n}\n/* Collapsed (class-driven: React / decius.js) — hide the body. */\n.dcs-foldout--collapsed > .dcs-foldout__body { display: none; }\n\n/* Base component: also works as a native <details>/<summary> with zero JS.\n     <details class=\"dcs-foldout\"><summary class=\"dcs-foldout__header\">…\n   The browser shows/hides the body; we just hide the default marker and\n   rotate the chevron from the [open] attribute. */\n.dcs-foldout > summary.dcs-foldout__header { list-style: none; }\n.dcs-foldout > summary.dcs-foldout__header::-webkit-details-marker { display: none; }\n.dcs-foldout > summary.dcs-foldout__header::marker { content: \"\"; }\ndetails.dcs-foldout[open] > summary .dcs-foldout__chevron { transform: rotate(90deg); }\n","/* ============================================================\n   29 · SKEUOMORPHIC HARDWARE ELEMENTS\n   Patch jacks, backlit buttons, 7-seg LED, LED bargraph meters.\n   For modular/synth-style hardware emulation UIs.\n   ============================================================ */\n\n/* ─────────── Patch jack — TS/TRS audio socket with hex nut ─────────── */\n.dcs-jack {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  user-select: none;\n}\n.dcs-jack__socket {\n  position: relative;\n  width: 32px; height: 32px;\n}\n.dcs-jack__socket svg {\n  width: 100%; height: 100%;\n  display: block;\n  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));\n}\n.dcs-jack__label {\n  font-family: var(--dcs-font);\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n  color: inherit;\n  text-shadow:\n    0 -1px 0 rgba(0,0,0,.4),\n    0 1px 0 rgba(255,255,255,.06);\n  opacity: .9;\n}\n\n/* ─────────── Backlit plastic button ─────────── */\n.dcs-litbtn {\n  position: relative;\n  width: 36px; height: 36px;\n  margin: 3px;\n  border-radius: 4px;\n  background:\n    linear-gradient(180deg, #d8dade 0%, #b5b8bf 50%, #8a8d94 100%);\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.7),\n    inset 0 -1px 0 rgba(0,0,0,.3),\n    /* small recess: dark ring hugging the button outline */\n    0 0 0 1.5px rgba(0,0,0,.55),\n    0 0 0 2px rgba(255,255,255,.06),\n    /* lift shadow */\n    0 2px 0 rgba(0,0,0,.4),\n    0 3px 6px rgba(0,0,0,.5);\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2a2d33;\n  font-family: var(--dcs-font);\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  transition: transform 60ms ease, box-shadow 60ms ease;\n}\n.dcs-litbtn:active {\n  transform: translateY(1px);\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.5),\n    inset 0 -1px 0 rgba(0,0,0,.3),\n    0 1px 0 rgba(0,0,0,.4),\n    0 1px 3px rgba(0,0,0,.4);\n}\n.dcs-litbtn--lit {\n  background:\n    radial-gradient(circle at 50% 50%,\n      var(--lit-hi, #ff8585) 0%,\n      var(--lit-lo, #d62034) 70%);\n  color: rgba(0,0,0,.7);\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.4),\n    inset 0 -1px 0 rgba(0,0,0,.2),\n    0 0 0 1.5px rgba(0,0,0,.55),\n    0 0 0 2px rgba(255,255,255,.06),\n    0 0 12px var(--lit-glow, rgba(255,80,80,.6)),\n    0 2px 0 rgba(0,0,0,.4),\n    0 3px 6px rgba(0,0,0,.5);\n}\n.dcs-litbtn--cyan { --lit-hi: #b8f5ff; --lit-lo: #4dd0e1; --lit-glow: rgba(77,208,225,.6); }\n.dcs-litbtn--amber { --lit-hi: #ffe28a; --lit-lo: #f2b14a; --lit-glow: rgba(242,177,74,.5); }\n.dcs-litbtn--green { --lit-hi: #b8ff8a; --lit-lo: #4ed18a; --lit-glow: rgba(78,209,138,.5); }\n.dcs-litbtn--sm { width: 26px; height: 26px; font-size: 9px; border-radius: 3px; }\n\n/* ─────────── 7-segment LED display ─────────── */\n.dcs-lcd {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 8px;\n  background: linear-gradient(180deg, #1a0405 0%, #2a0608 100%);\n  border-radius: 3px;\n  border: 1px solid #0a0203;\n  box-shadow:\n    inset 0 1px 2px rgba(0,0,0,.8),\n    inset 0 -1px 0 rgba(255,255,255,.05);\n  --lcd-on: #ff2030;\n  --lcd-off: rgba(255,32,48,.10);\n  --lcd-glow: 0 0 4px rgba(255,32,48,.85), 0 0 8px rgba(255,32,48,.4);\n  color: var(--lcd-on);\n}\n.dcs-lcd--amber { background: linear-gradient(180deg, #1f1605 0%, #2a1f08 100%); border-color: #0a0703;\n  --lcd-on: #ffae3a; --lcd-off: rgba(255,174,58,.10); --lcd-glow: 0 0 4px rgba(255,174,58,.85), 0 0 8px rgba(255,174,58,.4); }\n.dcs-lcd--green { background: linear-gradient(180deg, #051f0d 0%, #082a13 100%); border-color: #030a05;\n  --lcd-on: #3dff7a; --lcd-off: rgba(61,255,122,.10); --lcd-glow: 0 0 4px rgba(61,255,122,.85), 0 0 8px rgba(61,255,122,.4); }\n.dcs-lcd--blue  { background: linear-gradient(180deg, #050d1f 0%, #08132a 100%); border-color: #03050a;\n  --lcd-on: #6fb8ff; --lcd-off: rgba(111,184,255,.10); --lcd-glow: 0 0 4px rgba(111,184,255,.85), 0 0 8px rgba(111,184,255,.4); }\n\n.dcs-lcd__digit {\n  position: relative;\n  width: 16px;\n  height: 26px;\n}\n.dcs-lcd--sm .dcs-lcd__digit { width: 10px; height: 17px; }\n.dcs-lcd--md .dcs-lcd__digit { width: 16px; height: 26px; }\n.dcs-lcd--lg .dcs-lcd__digit { width: 24px; height: 40px; }\n.dcs-lcd__digit svg {\n  width: 100%; height: 100%;\n  display: block;\n}\n.dcs-lcd__seg-on  { fill: var(--lcd-on);  filter: drop-shadow(var(--lcd-glow)); }\n.dcs-lcd__seg-off { fill: var(--lcd-off); }\n.dcs-lcd__dot {\n  display: inline-block;\n  width: 4px; height: 4px;\n  border-radius: 50%;\n  background: var(--lcd-off);\n  align-self: flex-end;\n  margin: 0 1px 4px;\n}\n.dcs-lcd__dot--on { background: var(--lcd-on); box-shadow: var(--lcd-glow); }\n\n/* ─────────── LED bargraph meter ─────────── */\n.dcs-meter {\n  display: flex;\n  gap: 2px;\n  padding: 4px 6px;\n  background: linear-gradient(180deg, #0a0c11 0%, #14161c 100%);\n  border-radius: 3px;\n  border: 1px solid #050608;\n  box-shadow: inset 0 1px 2px rgba(0,0,0,.8);\n  align-items: stretch;\n}\n.dcs-meter--v {\n  flex-direction: column-reverse;\n}\n.dcs-meter__seg {\n  flex: 1;\n  background: rgba(255,255,255,.04);\n  border-radius: 1px;\n  min-width: 3px;\n  min-height: 4px;\n}\n.dcs-meter__seg--ok   { background: #1b6e38; }\n.dcs-meter__seg--warn { background: #6e5a18; }\n.dcs-meter__seg--peak { background: #6e1818; }\n.dcs-meter__seg--lit-ok   { background: #4ed18a; box-shadow: 0 0 4px rgba(78,209,138,.7), inset 0 0 1px rgba(255,255,255,.3); }\n.dcs-meter__seg--lit-warn { background: #f2b14a; box-shadow: 0 0 4px rgba(242,177,74,.7), inset 0 0 1px rgba(255,255,255,.3); }\n.dcs-meter__seg--lit-peak { background: #ef4040; box-shadow: 0 0 6px rgba(239,64,64,.8), inset 0 0 1px rgba(255,255,255,.3); }\n\n/* ─────────── Step buttons — small chunky plastic ─────────── */\n.dcs-step {\n  display: inline-flex;\n  flex-direction: column;\n  width: 22px;\n  border-radius: 3px;\n  overflow: hidden;\n  border: 1px solid rgba(0,0,0,.6);\n  box-shadow: 0 1px 2px rgba(0,0,0,.5);\n}\n.dcs-step__btn {\n  flex: 1;\n  height: 14px;\n  background: linear-gradient(180deg, #d8dade 0%, #a5a8af 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #2a2d33;\n  border-bottom: 1px solid rgba(0,0,0,.4);\n}\n.dcs-step__btn:last-child { border-bottom: none; }\n.dcs-step__btn:hover { background: linear-gradient(180deg, #e8eaee 0%, #b5b8bf 100%); }\n.dcs-step__btn:active { background: linear-gradient(180deg, #95989f 0%, #c8cbd0 100%); }\n.dcs-step__btn svg { width: 8px; height: 8px; }\n\n/* ─────────── Hardware chassis ───────────\n   Pair with data-dcs-style=\"3d\" for the full \"real gear\" look.\n   ───────────────────────────────────────── */\n.dcs-hw {\n  position: relative;\n  border: 1px solid #0a0c11;\n  border-radius: 6px;\n  background:\n    radial-gradient(ellipse 110% 90% at 50% -10%,\n      rgba(255,255,255,.28) 0%,\n      rgba(255,255,255,.14) 4%,\n      rgba(255,255,255,.06) 14%,\n      rgba(255,255,255,.03) 40%,\n      rgba(255,255,255,.01) 70%,\n      transparent 100%),\n    linear-gradient(180deg, #2e3340 0%, #272b36 60%, #1f222c 100%);\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.10),\n    inset 0 -1px 0 rgba(0,0,0,.5),\n    0 4px 14px rgba(0,0,0,.45);\n  color-scheme: dark;\n}\n.dcs-hw--brushed {\n  background:\n    repeating-linear-gradient(90deg,\n      rgba(255,255,255,.02) 0 1px,\n      rgba(0,0,0,.015) 1px 2px),\n    radial-gradient(ellipse 110% 90% at 50% -10%,\n      rgba(255,255,255,.30) 0%,\n      rgba(255,255,255,.15) 4%,\n      rgba(255,255,255,.07) 14%,\n      rgba(255,255,255,.03) 40%,\n      rgba(255,255,255,.01) 70%,\n      transparent 100%),\n    linear-gradient(180deg, #333845 0%, #2c3140 60%, #242834 100%);\n}\n.dcs-hw--lacquer {\n  background:\n    radial-gradient(ellipse 100% 80% at 50% -10%,\n      rgba(255,255,255,.42) 0%,\n      rgba(255,255,255,.22) 4%,\n      rgba(255,255,255,.09) 14%,\n      rgba(255,255,255,.04) 38%,\n      rgba(255,255,255,.015) 70%,\n      transparent 100%),\n    linear-gradient(180deg, #262b38 0%, #1e222c 60%, #161922 100%);\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.18),\n    inset 0 -1px 0 rgba(0,0,0,.6),\n    0 6px 22px rgba(0,0,0,.5);\n}\n.dcs-hw--cream {\n  background:\n    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.5), transparent 60%),\n    linear-gradient(180deg, #e8e2cf, #c8c0a4 70%, #a89e7c);\n  color: #2a2418;\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.6),\n    inset 0 -1px 0 rgba(0,0,0,.25),\n    0 4px 12px rgba(0,0,0,.4);\n}\n.dcs-hw--cream .dcs-knob__cap { background: radial-gradient(circle at 30% 25%, #d8d1bd, #8c8266); }\n.dcs-hw--cream .dcs-knob__label { color: #4a4030; }\n\n/* Hardware finish — red enamel (defined AFTER .dcs-hw so the colour wins) */\n.dcs-hw--red {\n  background:\n    radial-gradient(ellipse 100% 80% at 50% -10%,\n      rgba(255,255,255,.35) 0%,\n      rgba(255,255,255,.18) 4%,\n      rgba(255,255,255,.08) 14%,\n      rgba(255,255,255,.04) 38%,\n      rgba(255,255,255,.015) 70%,\n      transparent 100%),\n    linear-gradient(180deg, #d62034 0%, #b41a2c 60%, #931523 100%);\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.30),\n    inset 0 -1px 0 rgba(0,0,0,.5),\n    0 6px 22px rgba(0,0,0,.5);\n}\n.dcs-hw--red .dcs-hw__label { color: rgba(255,255,255,.95); text-shadow: 0 -1px 0 rgba(0,0,0,.4); }\n\n/* ─────────── Silkscreen group box ───────────\n   1970s control-panel look: a rounded rectangle printed in off-white ink\n   that groups knobs / jacks / displays, with an uppercase legend that\n   breaks the top line (a <fieldset>/<legend> does this over any finish). */\n$silk-ink: rgba(236, 230, 214, .62);   /* off-white silkscreen ink */\n.dcs-silk {\n  min-width: 0; margin: 0;\n  border: 1.5px solid $silk-ink;\n  border-radius: 10px;\n  padding: 12px 14px 14px;\n}\n.dcs-silk > legend, .dcs-silk__title {\n  padding: 0 7px;\n  font-family: var(--dcs-font);\n  font-size: 9px; font-weight: 700;\n  letter-spacing: .2em; text-transform: uppercase;\n  color: rgba(236, 230, 214, .9);\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);\n}\n/* When not using a real <legend>, place a title chip over the top edge,\n   masking the border behind it so the line reads as broken. */\n.dcs-silk--titled { position: relative; }\n.dcs-silk--titled > .dcs-silk__title {\n  position: absolute; top: 0; left: 14px; transform: translateY(-50%);\n  background: var(--silk-bg, #b41a2c);   /* match the panel finish behind it */\n}\n.dcs-silk__title--center { left: 50%; transform: translate(-50%, -50%); }\n/* Cream / light finishes flip the ink to dark */\n.dcs-hw--cream .dcs-silk { border-color: rgba(60, 50, 30, .5); }\n.dcs-hw--cream .dcs-silk > legend,\n.dcs-hw--cream .dcs-silk__title { color: rgba(50, 42, 24, .85); text-shadow: 0 1px 0 rgba(255,255,255,.4); }\n\n/* Screw heads in the corners */\n.dcs-hw__screw {\n  position: absolute;\n  width: 10px; height: 10px;\n  border-radius: 50%;\n  background:\n    radial-gradient(circle at 35% 30%, #b5b8bf, #6a6d75 55%, #2a2d34 100%);\n  box-shadow:\n    inset 0 -1px 0 rgba(0,0,0,.5),\n    inset 0 1px 0 rgba(255,255,255,.15),\n    0 1px 2px rgba(0,0,0,.6);\n  pointer-events: none;\n}\n.dcs-hw__screw::after {\n  content: \"\";\n  position: absolute;\n  inset: 35%;\n  background: rgba(0,0,0,.6);\n  transform: rotate(var(--screw-rot, 28deg));\n  border-radius: 1px;\n}\n.dcs-hw__screw--tl { top: 6px; left: 6px; }\n.dcs-hw__screw--tr { top: 6px; right: 6px; --screw-rot: -42deg; }\n.dcs-hw__screw--bl { bottom: 6px; left: 6px; --screw-rot: 12deg; }\n.dcs-hw__screw--br { bottom: 6px; right: 6px; --screw-rot: -8deg; }\n\n/* Hardware label — etched/engraved appearance */\n.dcs-hw__label {\n  font-family: var(--dcs-font);\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,.55);\n  text-shadow:\n    0 -1px 0 rgba(0,0,0,.7),\n    0 1px 0 rgba(255,255,255,.06);\n}\n.dcs-hw--cream .dcs-hw__label {\n  color: rgba(60,50,30,.7);\n  text-shadow: 0 1px 0 rgba(255,255,255,.5);\n}\n\n/* ─────────── Skeuomorphic card ───────────\n   ───────────────────────────────────────── */\n.dcs-card {\n  position: relative;\n  display: flex; flex-direction: column;\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-3);\n  overflow: hidden;\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast);\n}\n.dcs-card--clickable { cursor: pointer; }\n.dcs-card--clickable:hover { background: var(--dcs-surface-2); border-color: var(--dcs-line-strong); }\n.dcs-card[aria-selected=\"true\"] {\n  border-color: var(--dcs-accent);\n  background: var(--dcs-accent-dim);\n}\n.dcs-card__media {\n  flex: 0 0 auto;\n  position: relative;\n  background: var(--dcs-well);\n}\n.dcs-card__media img,\n.dcs-card__media .dcs-card__media-bg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.dcs-card__body {\n  padding: var(--dcs-s-4);\n  display: flex; flex-direction: column;\n  gap: var(--dcs-s-1);\n  min-width: 0;\n}\n.dcs-card__title {\n  font-size: var(--dcs-fs-md);\n  font-weight: 500;\n  color: var(--dcs-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dcs-card__meta {\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n  letter-spacing: .03em;\n}\n.dcs-card__desc {\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text-dim);\n  line-height: 1.4;\n}\n.dcs-card__footer {\n  display: flex; align-items: center; gap: var(--dcs-s-2);\n  padding: var(--dcs-s-3) var(--dcs-s-4);\n  background: var(--dcs-bg);\n  border-top: 1px solid var(--dcs-line);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n}\n.dcs-card__close {\n  position: absolute;\n  top: var(--dcs-s-2); right: var(--dcs-s-2);\n  width: 18px; height: 18px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--dcs-text-mute);\n  background: rgba(20, 22, 28, .65);\n  border-radius: var(--dcs-r-1);\n  cursor: pointer;\n  opacity: 0;\n  z-index: 2;\n  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);\n  backdrop-filter: blur(6px);\n}\n.dcs-card:hover .dcs-card__close { opacity: .8; }\n.dcs-card__close:hover { opacity: 1; color: var(--dcs-danger); background: rgba(239,107,107,.25); }\n.dcs-card__close svg { width: 12px; height: 12px; }\n.dcs-card__badges {\n  position: absolute;\n  top: var(--dcs-s-2); left: var(--dcs-s-2);\n  display: flex; gap: var(--dcs-s-1);\n  z-index: 1;\n}\n.dcs-card__tools {\n  position: absolute;\n  bottom: var(--dcs-s-2); right: var(--dcs-s-2);\n  display: flex; gap: 2px;\n  opacity: 0;\n  z-index: 2;\n  transition: opacity var(--dcs-t-fast);\n}\n.dcs-card:hover .dcs-card__tools { opacity: 1; }\n.dcs-card--horizontal {\n  flex-direction: row;\n  align-items: stretch;\n}\n.dcs-card--horizontal .dcs-card__media {\n  width: 80px; flex: 0 0 80px;\n}\n.dcs-card--horizontal .dcs-card__body { flex: 1; min-width: 0; }\n\n/* Card grid / list helpers */\n.dcs-card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n  gap: var(--dcs-s-4);\n}\n.dcs-card-list {\n  display: flex; flex-direction: column;\n  gap: var(--dcs-s-2);\n}\n\n\n/* ============================================================\n   23a · DOCK PANE — tabbed dockable view (Unity/Unreal style)\n   ============================================================ */\n.dcs-dockpane {\n  display: flex; flex-direction: column;\n  min-height: 0; min-width: 0;\n  background: var(--dcs-bg);\n  flex: 1;\n}\n.dcs-dockpane__tabs {\n  display: flex; align-items: stretch;\n  height: var(--dcs-h);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  flex-shrink: 0;\n}\n.dcs-dockpane__tab {\n  display: inline-flex; align-items: center; gap: var(--dcs-s-2);\n  padding: 0 var(--dcs-s-4);\n  border: none;\n  border-right: 1px solid var(--dcs-line);\n  background: transparent;\n  color: var(--dcs-text-mute);\n  font-size: var(--dcs-fs-sm);\n  font-family: var(--dcs-font);\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n.dcs-dockpane__tab:hover { color: var(--dcs-text-dim); background: var(--dcs-surface-2); }\n.dcs-dockpane__tab[aria-selected=\"true\"] {\n  background: var(--dcs-bg);\n  color: var(--dcs-text);\n  font-weight: 500;\n}\n.dcs-dockpane__tab[aria-selected=\"true\"]::after {\n  content: \"\"; position: absolute; left: 0; right: 0; bottom: -1px;\n  height: 1px; background: var(--dcs-bg);\n}\n.dcs-dockpane__tab[aria-selected=\"true\"]::before {\n  content: \"\"; position: absolute; left: 0; right: 0; top: 0;\n  height: 1px; background: var(--dcs-accent);\n}\n.dcs-dockpane__tab-close {\n  display: flex; align-items: center; justify-content: center;\n  width: 14px; height: 14px;\n  /* Reset the default <button> chrome so a close authored as either\n     a <span> or a <button> renders identically — no browser-default\n     border / background / padding bleeding through. */\n  border: 0;\n  background: transparent;\n  padding: 0;\n  font: inherit;\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-text-mute);\n  opacity: 0;\n  margin-left: var(--dcs-s-1);\n  transition: opacity var(--dcs-t-fast), background var(--dcs-t-fast), color var(--dcs-t-fast);\n  cursor: pointer;\n}\n.dcs-dockpane__tab:hover .dcs-dockpane__tab-close,\n.dcs-dockpane__tab[aria-selected=\"true\"] .dcs-dockpane__tab-close { opacity: .65; }\n.dcs-dockpane__tab-close:hover {\n  opacity: 1; color: var(--dcs-danger);\n  background: rgba(239,107,107,.18);\n}\n.dcs-dockpane__tab-close svg { width: 10px; height: 10px; }\n.dcs-dockpane__tools {\n  display: flex; align-items: center;\n  margin-left: auto;\n  padding: 0 var(--dcs-s-2);\n  gap: 1px;\n}\n.dcs-dockpane__body {\n  flex: 1; min-height: 0;\n  overflow: auto;\n}\n\n/* ============================================================\n   23b · MENU BAR — top-of-window menu strip\n   ============================================================ */\n.dcs-menubar {\n  display: flex; align-items: stretch;\n  height: var(--dcs-h-lg);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  padding: 0 var(--dcs-s-3);\n  font-size: var(--dcs-fs-sm);\n  user-select: none;\n  flex-shrink: 0;\n}\n.dcs-menubar__brand {\n  display: flex; align-items: center; gap: var(--dcs-s-2);\n  padding-right: var(--dcs-s-4);\n  margin-right: var(--dcs-s-3);\n  border-right: 1px solid var(--dcs-line);\n  font-weight: 600;\n  letter-spacing: .02em;\n  color: var(--dcs-text);\n}\n.dcs-menubar__brand svg { color: var(--dcs-accent); }\n.dcs-menubar__item {\n  display: inline-flex; align-items: center;\n  padding: var(--dcs-text-nudge) var(--dcs-s-4) 0;\n  background: none;\n  border: none;\n  color: var(--dcs-text-dim);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n.dcs-menubar__item:hover { background: var(--dcs-surface-2); color: var(--dcs-text); }\n/* Active (menu open) — solid accent, matches the toolbar \"selected tool\"\n   contract so the user can see which dropdown is owning the screen. */\n.dcs-menubar__item[aria-expanded=\"true\"] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n}\n.dcs-menubar__item[aria-expanded=\"true\"]:hover { background: var(--dcs-accent-hi); }\n.dcs-menubar__spacer { flex: 1; }\n.dcs-menubar__meta {\n  display: flex; align-items: center; gap: var(--dcs-s-3);\n  color: var(--dcs-text-mute);\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--dcs-fs-xs);\n  padding: 0 var(--dcs-s-3);\n}\n\n/* ============================================================\n   23c · VIEWPORT OVERLAY — floating toolbar on a 3D viewport\n   ============================================================ */\n.dcs-viewport {\n  position: relative;\n  overflow: hidden;\n  background: radial-gradient(ellipse at 50% 38%, #3a4054, #161922 80%);\n  min-height: 0;\n  height: 100%;\n}\n.dcs-viewport__overlay {\n  position: absolute;\n  display: flex; align-items: center; gap: var(--dcs-s-2);\n  padding: var(--dcs-s-3);\n  z-index: 2;\n}\n.dcs-viewport__overlay--tl { top: 0; left: 0; }\n.dcs-viewport__overlay--tr { top: 0; right: 0; }\n.dcs-viewport__overlay--bl { bottom: 0; left: 0; }\n.dcs-viewport__overlay--br { bottom: 0; right: 0; }\n.dcs-viewport__floater {\n  background: rgba(20, 22, 28, .82);\n  border: 1px solid rgba(255, 255, 255, .06);\n  border-radius: var(--dcs-r-2);\n  padding: 2px;\n  display: flex; align-items: center; gap: 1px;\n  backdrop-filter: blur(8px);\n}\n.dcs-viewport__floater--v { flex-direction: column; }\n.dcs-viewport__floater .dcs-btn {\n  background: transparent;\n  border-color: transparent;\n}\n.dcs-viewport__floater .dcs-btn:hover { background: rgba(255,255,255,.08); border-color: transparent; }\n.dcs-viewport__floater .dcs-btn[aria-pressed=\"true\"] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  border-color: transparent;\n}\n","/* ============================================================\n   24 · [data-dcs-style=\"3d\"] — Vital/synth-style bevels & gradients\n   Apply to any subtree you want rendered with depth instead of flat.\n   ============================================================ */\n[data-dcs-style=\"3d\"] .dcs-btn {\n  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));\n  box-shadow: var(--dcs-bevel-up);\n  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast), transform var(--dcs-t-fast);\n}\n[data-dcs-style=\"3d\"] .dcs-btn:hover { background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-2)); }\n[data-dcs-style=\"3d\"] .dcs-btn:active { background: var(--dcs-well); box-shadow: var(--dcs-bevel-down); transform: translateY(.5px); }\n[data-dcs-style=\"3d\"] .dcs-btn:focus-visible { box-shadow: var(--dcs-ring), var(--dcs-bevel-up); }\n\n[data-dcs-style=\"3d\"] .dcs-btn--primary {\n  background: linear-gradient(180deg, var(--dcs-accent-hi), var(--dcs-accent));\n  text-shadow: 0 1px 0 rgba(255,255,255,.12);\n}\n[data-dcs-style=\"3d\"] .dcs-btn--primary:hover { background: linear-gradient(180deg, #88c0ff, var(--dcs-accent-hi)); }\n[data-dcs-style=\"3d\"] .dcs-btn--ghost { box-shadow: none; }\n[data-dcs-style=\"3d\"] .dcs-btn--danger { background: linear-gradient(180deg, #ff8585, #ef6b6b); }\n[data-dcs-style=\"3d\"] .dcs-btn[aria-pressed=\"true\"] { box-shadow: var(--dcs-bevel-down); }\n\n[data-dcs-style=\"3d\"] .dcs-btn-group .dcs-btn { box-shadow: none; background: transparent; }\n/* Selected segment keeps the solid key colour (like flat) + a little depth. */\n[data-dcs-style=\"3d\"] .dcs-btn-group .dcs-btn[aria-pressed=\"true\"] {\n  background: var(--dcs-accent);\n  color: #0a1220;\n  box-shadow: var(--dcs-shadow-1);\n}\n[data-dcs-style=\"3d\"] .dcs-btn-group .dcs-btn[aria-pressed=\"true\"]:hover { background: var(--dcs-accent-hi); }\n\n[data-dcs-style=\"3d\"] .dcs-input,\n[data-dcs-style=\"3d\"] .dcs-select,\n[data-dcs-style=\"3d\"] .dcs-textarea {\n  box-shadow: var(--dcs-bevel-down);\n}\n[data-dcs-style=\"3d\"] .dcs-input:focus,\n[data-dcs-style=\"3d\"] .dcs-select:focus,\n[data-dcs-style=\"3d\"] .dcs-textarea:focus {\n  box-shadow: var(--dcs-bevel-down), 0 0 0 2px var(--dcs-accent-haze);\n}\n\n/* Combo — beveled inset display in 3D mode. Works like the flat version\n   (the value fill stays, so the level reads at a glance) with a synth glow. */\n[data-dcs-style=\"3d\"] .dcs-combo {\n  box-shadow: var(--dcs-bevel-down);\n  background: var(--dcs-well);\n}\n[data-dcs-style=\"3d\"] .dcs-combo__fill {\n  height: 3px;\n  opacity: 1;\n  box-shadow: 0 0 6px var(--dcs-accent-haze);\n}\n[data-dcs-style=\"3d\"] .dcs-combo__btn {\n  display: none;\n}\n[data-dcs-style=\"3d\"] .dcs-combo__label {\n  color: var(--dcs-text-mute);\n  flex: 0 0 auto;\n  padding-right: var(--dcs-s-2);\n}\n[data-dcs-style=\"3d\"] .dcs-combo__value {\n  color: var(--dcs-accent);\n  font-weight: 500;\n  flex: 1;\n  justify-content: flex-end;\n}\n\n/* Slider & fader — beveled thumbs */\n[data-dcs-style=\"3d\"] .dcs-slider__track { box-shadow: var(--dcs-bevel-down); }\n[data-dcs-style=\"3d\"] .dcs-slider__thumb {\n  width: 14px; height: 14px;\n  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));\n  border-color: var(--dcs-line);\n  box-shadow: var(--dcs-shadow-1), var(--dcs-bevel-up);\n}\n[data-dcs-style=\"3d\"] .dcs-slider:focus-within .dcs-slider__thumb,\n[data-dcs-style=\"3d\"] .dcs-slider--active .dcs-slider__thumb {\n  border-color: var(--dcs-accent);\n  box-shadow: 0 0 0 3px var(--dcs-accent-haze);\n}\n\n[data-dcs-style=\"3d\"] .dcs-fader { box-shadow: var(--dcs-bevel-down); }\n[data-dcs-style=\"3d\"] .dcs-fader__track { background: var(--dcs-line); }\n[data-dcs-style=\"3d\"] .dcs-fader__thumb {\n  width: 22px; height: 12px;\n  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));\n  border-color: var(--dcs-line);\n  box-shadow: var(--dcs-bevel-up), 0 2px 4px rgba(0,0,0,.4);\n}\n\n/* Knob — radial gradient cap, glowing indicator */\n[data-dcs-style=\"3d\"] .dcs-knob__cap {\n  background:\n    radial-gradient(circle at 30% 25%, var(--dcs-surface-3), var(--dcs-surface-1) 55%, var(--dcs-well) 100%);\n  box-shadow:\n    inset 0 1px 1px rgba(255,255,255,.08),\n    inset 0 -2px 4px rgba(0,0,0,.4),\n    0 2px 6px rgba(0,0,0,.4);\n}\n[data-dcs-style=\"3d\"] .dcs-knob__indicator {\n  box-shadow: 0 0 6px var(--dcs-accent-haze);\n}\n\n/* Check / switch */\n[data-dcs-style=\"3d\"] .dcs-check__box { box-shadow: var(--dcs-bevel-down); border-color: var(--dcs-line); }\n[data-dcs-style=\"3d\"] .dcs-switch { box-shadow: var(--dcs-bevel-down); border-color: var(--dcs-line); }\n[data-dcs-style=\"3d\"] .dcs-switch::after {\n  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));\n  box-shadow: var(--dcs-shadow-1), var(--dcs-bevel-up);\n}\n[data-dcs-style=\"3d\"] .dcs-switch[aria-checked=\"true\"]::after { background: linear-gradient(180deg, #fff, #d8dade); }\n\n/* Panel header glossy in 3D mode */\n[data-dcs-style=\"3d\"] .dcs-panel {\n  border: 1px solid var(--dcs-line);\n  box-shadow: var(--dcs-shadow-2);\n}\n[data-dcs-style=\"3d\"] .dcs-panel__header {\n  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));\n}\n[data-dcs-style=\"3d\"] .dcs-toolbar {\n  background: linear-gradient(180deg, var(--dcs-surface-1), var(--dcs-bg));\n}\n[data-dcs-style=\"3d\"] .dcs-swatch { box-shadow: var(--dcs-bevel-down); }\n[data-dcs-style=\"3d\"] .dcs-color-square,\n[data-dcs-style=\"3d\"] .dcs-hue-bar,\n[data-dcs-style=\"3d\"] .dcs-graph { box-shadow: var(--dcs-bevel-down); }\n","/* ============================================================\n   25 · MENU / DROPDOWN / CONTEXT MENU\n   A floating menu surface used for dropdowns (opened from a\n   button or menubar item) and right-click context menus.\n   Positioned at runtime by decius.js; hidden via [hidden].\n   ============================================================ */\n.dcs-menu[hidden] { display: none; }\n.dcs-menu {\n  position: fixed;\n  z-index: 200;\n  min-width: 180px;\n  max-width: 320px;\n  padding: var(--dcs-s-2);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-radius: 0;       /* flat square popups — no soft corners */\n  box-shadow: var(--dcs-shadow-pop);\n  color: var(--dcs-text);\n  font-size: var(--dcs-fs-sm);\n  user-select: none;\n  animation: dcs-menu-in var(--dcs-t-fast);\n}\n@keyframes dcs-menu-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.dcs-menu__label {\n  padding: var(--dcs-s-2) var(--dcs-s-3) var(--dcs-s-1);\n  font-size: var(--dcs-fs-xs);\n  font-weight: 600;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--dcs-text-mute);\n}\n\n.dcs-menu__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-3);\n  height: var(--dcs-h-in);\n  padding: var(--dcs-text-nudge) var(--dcs-s-3) 0;\n  border-radius: 0;                       /* flat square selection rect */\n  color: var(--dcs-text-dim);\n  cursor: default;\n  white-space: nowrap;\n  line-height: 1;\n}\n/* :hover is the transient mouse highlight; --active is the transient\n   keyboard-focus highlight (arrow keys). Neither is a \"checked\" state —\n   for persistent selection, use the `.dcs-menu__check` slot to render\n   a check icon. Dark text on accent reads better than white at decius\n   accent brightness, so we use --dcs-text-inv across the board. */\n.dcs-menu__item:hover,\n.dcs-menu__item--active {\n  background: var(--dcs-accent);\n  color: var(--dcs-text-inv);\n}\n.dcs-menu__item:hover .dcs-menu__shortcut,\n.dcs-menu__item--active .dcs-menu__shortcut { color: color-mix(in srgb, var(--dcs-text-inv) 70%, transparent); }\n.dcs-menu__item--danger { color: var(--dcs-danger); }\n.dcs-menu__item--danger:hover { background: var(--dcs-danger); color: var(--dcs-text-inv); }\n\n/* Persistent \"currently active / window shown\" indicator — a small\n   accent bullet in the leading padding, with text in the body color.\n   Distinct from --active (transient keyboard focus, accent fill) and\n   from :hover (transient pointer highlight). Use for menu items like\n   \"Layers\", \"Color\", etc. when their panel is currently visible. */\n.dcs-menu__item--checked::before {\n  content: \"\";\n  position: absolute;\n  left: 6px;\n  top: 50%;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--dcs-accent);\n  transform: translateY(-50%);\n}\n.dcs-menu__item--checked:hover::before { background: var(--dcs-text-inv); }\n.dcs-menu__item[aria-disabled=\"true\"],\n.dcs-menu__item--disabled {\n  color: var(--dcs-text-mute);\n  opacity: .5;\n  pointer-events: none;\n}\n\n.dcs-menu__icon { flex: 0 0 auto; width: 16px; display: flex; }\n.dcs-menu__check {\n  flex: 0 0 auto; width: 14px; display: flex; align-items: center;\n  color: var(--dcs-accent);\n}\n.dcs-menu__item:hover .dcs-menu__check { color: #fff; }\n.dcs-menu__label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.dcs-menu__shortcut {\n  flex: 0 0 auto;\n  font-family: var(--dcs-font-mono);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n  letter-spacing: .02em;\n}\n.dcs-menu__caret { flex: 0 0 auto; margin-right: -2px; color: inherit; opacity: .8; }\n\n.dcs-menu__sep {\n  height: 1px;\n  margin: var(--dcs-s-2) calc(-1 * var(--dcs-s-2));\n  background: var(--dcs-line);\n}\n\n/* Submenus — nested .dcs-menu, opened on hover. */\n.dcs-menu__sub {\n  position: absolute;\n  top: calc(-1 * var(--dcs-s-2));\n  left: 100%;\n  margin-left: var(--dcs-s-1);\n}\n.dcs-menu__item--has-sub > .dcs-menu__sub { display: none; }\n.dcs-menu__item--has-sub:hover > .dcs-menu__sub { display: block; }\n","/* ============================================================\n   26 · POPOVER / POPUP\n   A small floating card anchored to a trigger — richer than a\n   tooltip (can hold controls). Positioned by decius.js via\n   data-dcs-placement; hidden via [hidden].\n   ============================================================ */\n.dcs-popover[hidden] { display: none; }\n.dcs-popover {\n  position: fixed;\n  z-index: 190;\n  min-width: 200px;\n  max-width: 320px;\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: 0;       /* flat square popups */\n  box-shadow: var(--dcs-shadow-pop);\n  color: var(--dcs-text);\n  font-size: var(--dcs-fs-sm);\n  animation: dcs-menu-in var(--dcs-t-fast);\n}\n.dcs-popover__header {\n  display: flex; align-items: center; gap: var(--dcs-s-3);\n  height: var(--dcs-h);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  border-radius: 0;\n  font-size: var(--dcs-fs-sm);\n  font-weight: 500;\n}\n.dcs-popover__body { padding: var(--dcs-s-5); color: var(--dcs-text-dim); }\n.dcs-popover__body code {\n  font-family: var(--dcs-font-mono);\n  font-size: .92em;\n  padding: 1px 6px;\n  background: var(--dcs-well);\n  border-radius: var(--dcs-r-1);\n  color: var(--dcs-warn);\n}\n\n/* Little arrow pointing at the trigger; placed by decius.js. */\n.dcs-popover__arrow {\n  position: absolute;\n  width: 10px; height: 10px;\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line-soft);\n  transform: rotate(45deg);\n}\n.dcs-popover[data-dcs-pos=\"top\"] .dcs-popover__arrow {\n  bottom: -6px; border-top: none; border-left: none;\n}\n.dcs-popover[data-dcs-pos=\"bottom\"] .dcs-popover__arrow {\n  top: -6px; border-bottom: none; border-right: none;\n}\n.dcs-popover[data-dcs-pos=\"left\"] .dcs-popover__arrow {\n  right: -6px; border-bottom: none; border-left: none;\n}\n.dcs-popover[data-dcs-pos=\"right\"] .dcs-popover__arrow {\n  left: -6px; border-top: none; border-right: none;\n}\n","/* ============================================================\n   27 · TOAST / NOTIFICATION\n   Transient, stacked notifications. The container is created on\n   demand by decius.js (decius.toast({…})); markup is documented\n   so they can also be authored statically.\n   ============================================================ */\n.dcs-toasts {\n  position: fixed;\n  z-index: 300;\n  bottom: var(--dcs-s-6);\n  right: var(--dcs-s-6);\n  display: flex;\n  flex-direction: column;\n  gap: var(--dcs-s-3);\n  width: 320px;\n  max-width: calc(100vw - 2 * var(--dcs-s-6));\n  pointer-events: none;\n}\n.dcs-toasts--top-right  { top: var(--dcs-s-6); bottom: auto; }\n.dcs-toasts--top-left   { top: var(--dcs-s-6); bottom: auto; left: var(--dcs-s-6); right: auto; }\n.dcs-toasts--bottom-left { left: var(--dcs-s-6); right: auto; }\n\n.dcs-toast {\n  pointer-events: auto;\n  display: flex;\n  gap: var(--dcs-s-4);\n  padding: var(--dcs-s-4) var(--dcs-s-5);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line);\n  border-left: 3px solid var(--dcs-accent);\n  border-radius: var(--dcs-r-2);\n  box-shadow: var(--dcs-shadow-3);\n  font-size: var(--dcs-fs-sm);\n  align-items: flex-start;\n  animation: dcs-toast-in var(--dcs-t-slow);\n}\n@keyframes dcs-toast-in {\n  from { opacity: 0; transform: translateX(16px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n.dcs-toast--out { animation: dcs-toast-out var(--dcs-t) forwards; }\n@keyframes dcs-toast-out {\n  from { opacity: 1; transform: translateX(0); max-height: 80px; }\n  to   { opacity: 0; transform: translateX(16px); max-height: 0;\n         padding-top: 0; padding-bottom: 0; margin-top: -8px; }\n}\n\n.dcs-toast--ok     { border-left-color: var(--dcs-ok); }\n.dcs-toast--warn   { border-left-color: var(--dcs-warn); }\n.dcs-toast--danger { border-left-color: var(--dcs-danger); }\n.dcs-toast--info   { border-left-color: var(--dcs-accent); }\n\n.dcs-toast__icon { color: var(--dcs-accent); flex: 0 0 auto; margin-top: 1px; }\n.dcs-toast--ok     .dcs-toast__icon { color: var(--dcs-ok); }\n.dcs-toast--warn   .dcs-toast__icon { color: var(--dcs-warn); }\n.dcs-toast--danger .dcs-toast__icon { color: var(--dcs-danger); }\n\n.dcs-toast__body { flex: 1; min-width: 0; }\n.dcs-toast__title { color: var(--dcs-text); font-weight: 500; margin-bottom: 2px; }\n.dcs-toast__msg { color: var(--dcs-text-dim); }\n.dcs-toast__close {\n  flex: 0 0 auto;\n  display: flex; align-items: center; justify-content: center;\n  width: 16px; height: 16px;\n  color: var(--dcs-text-mute);\n  cursor: pointer;\n  border-radius: var(--dcs-r-1);\n}\n.dcs-toast__close:hover { color: var(--dcs-text); background: var(--dcs-surface-3); }\n","/* ============================================================\n   28 · STATUS BAR\n   The bottom strip of an app shell — counts, coordinates, mode\n   flags. Mirrors the menubar at the foot of the window.\n   ============================================================ */\n.dcs-statusbar {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-4);\n  height: var(--dcs-h-sm);\n  padding: 0 var(--dcs-s-4);\n  background: var(--dcs-surface-1);\n  border-top: 1px solid var(--dcs-line);\n  font-size: var(--dcs-fs-xs);\n  color: var(--dcs-text-mute);\n  user-select: none;\n  flex-shrink: 0;\n}\n.dcs-statusbar__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  font-family: var(--dcs-font-num);\n  font-variant-numeric: tabular-nums;\n}\n.dcs-statusbar__item--accent { color: var(--dcs-accent); }\n.dcs-statusbar__item--ok { color: var(--dcs-ok); }\n.dcs-statusbar__item--warn { color: var(--dcs-warn); }\n.dcs-statusbar__sep {\n  width: 1px;\n  align-self: stretch;\n  margin: var(--dcs-s-2) 0;\n  background: var(--dcs-line);\n}\n.dcs-statusbar__spacer { flex: 1; }\n","/* ============================================================\n   29 · FLOATING PANELS & TOOLBARS\n   ------------------------------------------------------------\n   Detached surfaces that hover over a host stage — a tear-off\n   panel, a floating toolbar pill, an inspector ripped out of a\n   dock. Host positions them via left/top in inline style; drag\n   handlers add the `dcs--dragging` state hook to raise elevation\n   while pointer drag is active.\n\n   These are the building blocks for tear-off / re-dock chrome.\n   The actual drag-to-move behaviour is wired by decius.js when an\n   element inside a floating surface has [data-dcs-drag-handle].\n   ============================================================ */\n\n/* ---- detached panel ----------------------------------------- */\n.dcs-panel--floating {\n  position: absolute;                /* host positions via left/top */\n  min-width: 160px;\n  background: var(--dcs-bg);\n  border: 1px solid var(--dcs-line);\n  border-radius: var(--dcs-r-4);\n  box-shadow: var(--dcs-shadow-pop);\n  overflow: hidden;\n  z-index: 60;\n}\n.dcs-panel--floating > .dcs-panel__header {\n  cursor: grab;\n  background: var(--dcs-surface-2);\n  border-bottom: 1px solid var(--dcs-line);\n  user-select: none;\n}\n.dcs-panel--floating.dcs--dragging > .dcs-panel__header { cursor: grabbing; }\n.dcs-panel--floating > .dcs-panel__header .dcs-panel__title { pointer-events: none; }\n\n/* A floating panel that wraps a dockpane (tear-off of a tab group)\n   uses the tab strip itself as the drag handle — both the wrapped\n   `__tabbar` form AND the bare `__tabs` form (Photo's tearoffs skip\n   the tabbar wrapper). Any empty area in the strip — the spacer\n   between the last tab and the hamburger, padding around tabs —\n   shows the grab cursor so users see it's draggable. Individual\n   tabs / the hamburger button restore their own pointer cursors. */\n.dcs-panel--floating > .dcs-dockpane > .dcs-dockpane__tabbar,\n.dcs-panel--floating > .dcs-dockpane > .dcs-dockpane__tabs,\n.dcs-panel--floating > .dcs-dockpane__tabbar,\n.dcs-panel--floating > .dcs-dockpane__tabs { cursor: grab; user-select: none; }\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane > .dcs-dockpane__tabbar,\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane > .dcs-dockpane__tabs,\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane__tabbar,\n.dcs-panel--floating.dcs--dragging > .dcs-dockpane__tabs { cursor: grabbing; }\n\n/* ---- detached toolbar -------------------------------------- */\n/* Extends the minimal _15 floating toolbar rule with absolute\n   positioning, intrinsic sizing, and the same shadow as panels. */\n.dcs-toolbar.dcs-toolbar--floating {\n  position: absolute;                /* host positions via left/top */\n  height: auto;\n  width: auto;\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: var(--dcs-r-4);\n  box-shadow: var(--dcs-shadow-pop);\n  background: var(--dcs-surface-1);\n  padding: var(--dcs-s-2);\n  gap: var(--dcs-s-1);\n  z-index: 60;\n}\n.dcs-toolbar--floating.dcs-toolbar--v { padding: var(--dcs-s-2); }\n\n/* ---- shared elevation while dragging ------------------------ */\n.dcs--dragging {\n  box-shadow: var(--dcs-shadow-3), 0 0 0 1px var(--dcs-accent-haze) !important;\n}\n\n/* ---- floating-panel resize: any edge or corner --------------\n   Eight invisible hit zones around the panel perimeter handle the\n   actual pointer events; each just sets the matching native resize\n   cursor. The visible SE grip is a decorative affordance only\n   (pointer-events: none, z-index: 1) so anything above — scrollbar\n   thumb, content overflow, badges — draws over it cleanly. */\n.dcs-panel__resize-zones {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  pointer-events: none;\n}\n.dcs-panel__resize-zone {\n  position: absolute;\n  pointer-events: auto;\n  background: transparent;\n}\n/* Edges — 5px wide strips along each side. */\n.dcs-panel__resize-zone--n { top: 0; left: 0; right: 0; height: 5px; cursor: ns-resize; }\n.dcs-panel__resize-zone--s { bottom: 0; left: 0; right: 0; height: 5px; cursor: ns-resize; }\n.dcs-panel__resize-zone--w { top: 0; left: 0; bottom: 0; width: 5px; cursor: ew-resize; }\n.dcs-panel__resize-zone--e { top: 0; right: 0; bottom: 0; width: 5px; cursor: ew-resize; }\n/* Corners — 12px squares; overlap the edge zones so the diagonal\n   cursor wins at the four corners. */\n.dcs-panel__resize-zone--nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }\n.dcs-panel__resize-zone--ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }\n.dcs-panel__resize-zone--sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }\n.dcs-panel__resize-zone--se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }\n\n/* Decorative SE grip — visual only. Bottom of the z-stack so scrollbars\n   and overflowing content overlay it naturally. Hit zones above handle\n   the actual pointer. */\n.dcs-panel__resize {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: 14px;\n  height: 14px;\n  z-index: 1;\n  pointer-events: none;\n  color: var(--dcs-line-strong);\n  opacity: .6;\n  transition: opacity var(--dcs-t-fast);\n}\n.dcs-panel--floating:hover .dcs-panel__resize { opacity: 1; }\n.dcs-panel__resize::after {\n  content: \"\";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 6px;\n  height: 6px;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid currentColor;\n  border-bottom-right-radius: 2px;\n}\n\n/* ---- reusable drag-handle grip ------------------------------\n   A dotted \"drag from here\" texture that tiles cleanly to whatever\n   space the grippable area gives it. Two knobs:\n     • `--dcs-grip-unit`  — pattern grid (one dot per cell). Defaults\n       to 4px so 3-up / 4-up grids feel natural.\n     • `--dcs-grip-thick` — the short-axis thickness (perpendicular\n       to the drag direction). Defaults to 12px.\n   `background-repeat: round` makes the browser slightly re-tune the\n   tile size so a whole number of dots fits — no clipped half-dots at\n   the edges, regardless of the host bar's measure.\n   Orientation: `.dcs-grip` is the default VERTICAL strip (narrow in\n   width, stretches in height — sits at the start of a horizontal\n   bar). `.dcs-grip--h` is the HORIZONTAL strip (narrow in height,\n   stretches in width — sits at the start of a vertical bar). Both\n   default to `align-self: stretch` so a single flex item fills the\n   bar's cross axis without further CSS. */\n.dcs-grip {\n  --dcs-grip-unit: 4px;\n  --dcs-grip-thick: 16px;\n  flex: none;\n  align-self: stretch;\n  width: var(--dcs-grip-thick);\n  min-height: var(--dcs-grip-thick);\n  /* Small separator gap between the grip and the first toolbar item\n     so the handle reads as a distinct affordance rather than as\n     another tool slot. */\n  margin-right: var(--dcs-s-2);\n  color: var(--dcs-line-strong);\n  /* Slightly inset surface, then two stacked radial gradients per cell:\n     a top-left highlight + a crisp dot face. The hard transition\n     (currentColor → transparent at 90%/100%) gives a near-pixel edge so\n     each dot reads as a small RAISED bead — not the soft anti-aliased\n     circles we had before. `repeat` (not `round`) leaves the tile size\n     fixed so dots stay perfectly square; we intentionally don't clip the\n     box with a border-radius so corner dots stay whole. */\n  background-color: rgba(0, 0, 0, .18);\n  background-image:\n    radial-gradient(closest-side at 35% 30%, rgba(255, 255, 255, .35) 55%, transparent 85%),\n    radial-gradient(closest-side, currentColor 88%, transparent 100%);\n  background-size: var(--dcs-grip-unit) var(--dcs-grip-unit);\n  background-position: 0 0;\n  background-repeat: repeat;\n  cursor: grab;\n  transition: color var(--dcs-t-fast);\n  user-select: none;\n}\n.dcs-grip:hover { color: var(--dcs-text-mute); }\n.dcs-grip--h {\n  width: auto;\n  height: var(--dcs-grip-thick);\n  min-width: var(--dcs-grip-thick);\n  min-height: 0;\n  /* Horizontal grip sits at the START of a column-flex toolbar, so\n     the separator gap goes UNDER it instead of to the right. */\n  margin-right: 0;\n  margin-bottom: var(--dcs-s-2);\n}\n.dcs--dragging .dcs-grip { cursor: grabbing; }\n\n/* Floating vertical toolbar with a first-child grip: a narrow band\n   spanning LEFT→RIGHT across the top of the toolbar. The short axis is\n   pinned to exactly 3 dot cells (3 × 4px = 12px) so the dot pattern\n   tiles cleanly vertically. The long axis stretches, with `background-\n   repeat: round` on X so the browser auto-fits an integer number of\n   cells across — no half-dots clipped at the rect edges. Pattern\n   anchored at (0,0) so the first cell is flush with the top-left. */\n.dcs-toolbar--v.dcs-toolbar--floating > .dcs-grip:first-child {\n  align-self: stretch;\n  width: auto;\n  height: 12px;                                      /* 3 rows × 4px */\n  min-height: 0;\n  margin: var(--dcs-s-2);                            /* inset on all sides */\n  border-radius: 0;\n  background-position: 0 0;\n  background-repeat: round repeat;                   /* X auto-fit, Y exact */\n}\n\n/* Floating HORIZONTAL toolbar with a first-child grip: the symmetric\n   case — a narrow band running TOP→BOTTOM down the left. 3 dot cells\n   wide (12px), height stretches with `background-repeat: repeat round`\n   so an integer number of cells fits the long axis. */\n.dcs-toolbar--floating:not(.dcs-toolbar--v) > .dcs-grip:first-child {\n  align-self: stretch;\n  width: 12px;                                       /* 3 cols × 4px */\n  height: auto;\n  min-height: 0;\n  margin: var(--dcs-s-2);                            /* inset on all sides */\n  border-radius: 0;\n  background-position: 0 0;\n  background-repeat: repeat round;                   /* X exact, Y auto-fit */\n}\n","/* ============================================================\n   30 · DOCKPANE EXTENSIONS — tabbar with toolbar slot, shelf\n   ------------------------------------------------------------\n   A DCC-tool dockpane uses every pixel: the unused portion of\n   the tab strip carries the active tab's toolbar (Blender-style)\n   instead of wasting it. When tabs grow wide enough to crowd\n   the toolbar, the toolbar drops to a SHELF row underneath.\n\n   Markup:\n     <div class=\"dcs-dockpane\">\n       <div class=\"dcs-dockpane__tabbar\">\n         <div class=\"dcs-dockpane__tabs\"> …tabs… </div>\n         <div class=\"dcs-dockpane__toolbars\">\n           <div class=\"dcs-dockpane__toolbar\" data-dcs-tabtoolbar=\"#panel-a\"> …controls for A… </div>\n           <div class=\"dcs-dockpane__toolbar\" data-dcs-tabtoolbar=\"#panel-b\" hidden> …controls for B… </div>\n         </div>\n       </div>\n       <div class=\"dcs-dockpane__shelf\" hidden></div>   <!-- target when overflowed -->\n       <div class=\"dcs-dockpane__body\"> …tabpanels… </div>\n     </div>\n\n   decius.js manages tab activation and the overflow class\n   (`.dcs-dockpane--shelved`), which CSS uses to swap the\n   visible toolbar from the tabbar to the shelf row.\n\n   The dockpane may also designate a CENTER panel — the main\n   editor surface (image canvas, 3D viewport) other panes\n   surround — via `.dcs-dockpane--center`.\n   ============================================================ */\n\n/* ---- tabbar wrapper (tabs + toolbar share one row) --------- */\n.dcs-dockpane__tabbar {\n  display: flex;\n  align-items: stretch;\n  height: var(--dcs-h);\n  min-width: 0;\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  flex-shrink: 0;\n}\n\n/* When wrapped in __tabbar, the tabs strip itself loses its own\n   chrome and shrinks to its natural width so the toolbar slot\n   takes the rest. The standalone .dcs-dockpane > .dcs-dockpane__tabs\n   case (no toolbar) is unchanged. */\n.dcs-dockpane__tabbar > .dcs-dockpane__tabs {\n  flex: 0 1 auto;\n  min-width: 0;\n  height: auto;\n  background: transparent;\n  border-bottom: none;\n  overflow: hidden;\n}\n\n/* ---- toolbar slot inside the tabbar ------------------------ */\n.dcs-dockpane__toolbars {\n  flex: 1 1 0;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  padding: 0 var(--dcs-s-2);\n  margin-left: var(--dcs-s-2);\n  border-left: 1px solid var(--dcs-line);\n}\n.dcs-dockpane__toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.dcs-dockpane__toolbar[hidden] { display: none; }\n\n/* ---- shelf row (active toolbar drops here when overflowed) - */\n.dcs-dockpane__shelf {\n  display: flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  padding: 0 var(--dcs-s-3);\n  height: var(--dcs-h);\n  min-height: var(--dcs-h);\n  background: var(--dcs-surface-1);\n  border-bottom: 1px solid var(--dcs-line);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.dcs-dockpane__shelf[hidden],\n.dcs-dockpane:not(.dcs-dockpane--shelved) > .dcs-dockpane__shelf { display: none; }\n.dcs-dockpane--shelved > .dcs-dockpane__tabbar > .dcs-dockpane__toolbars { display: none; }\n\n/* ---- one floating panel tab → title-only tearoff -----------\n   Floating panel-kind tearoffs never show a tabbar for a single tab.\n   JS moves the lone tab into this titlebar so the title text can still\n   be dragged to dock elsewhere, while the empty header area remains\n   the panel-move handle. Docked panels and document/editor dockpanes\n   keep their normal single-tab strip. */\n.dcs-dockpane--title-only > .dcs-dockpane__tabbar,\n.dcs-dockpane--title-only > .dcs-dockpane__tabs {\n  display: none;\n}\n.dcs-dockpane__titlebar {\n  flex-shrink: 0;\n}\n.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {\n  flex: 0 1 auto;\n  appearance: none;\n  border: 0;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: left;\n  cursor: grab;\n}\n.dcs-panel--floating .dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {\n  pointer-events: auto;\n}\n.dcs-panel--floating.dcs--dragging .dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {\n  cursor: grabbing;\n}\n.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab::before,\n.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab::after {\n  display: none;\n}\n\n/* ---- center \"Document\" pane (image canvas / 3D viewport) ---\n   The \"main view\" surface in a Photoshop-/Blender-style app: the\n   multi-tabbed editor area where each tab is a document (image,\n   scene, file) — NOT interchangeable with the surrounding dock\n   tabs (Layers, Tools, Outliner). Reads one shade LIGHTER than\n   the chrome via `--dcs-stage`, so the editor is the focal\n   surface and the dock chrome recedes.\n\n   `.dcs-dockpane--center` implies `data-dcs-dock-kind=\"documents\"`\n   for the tear-off/re-dock kind system below; any dockpane can\n   opt in explicitly via that attribute. Game-editor-style apps\n   that have no distinct center can simply not use this marker. */\n.dcs-dockpane--center,\n.dcs-dockpane[data-dcs-dock-kind=\"documents\"] {\n  background: var(--dcs-stage);\n}\n.dcs-dockpane--center > .dcs-dockpane__body,\n.dcs-dockpane[data-dcs-dock-kind=\"documents\"] > .dcs-dockpane__body {\n  position: relative;\n  overflow: hidden;\n  background: var(--dcs-stage);\n}\n.dcs-dockpane--center > .dcs-dockpane__tabbar,\n.dcs-dockpane[data-dcs-dock-kind=\"documents\"] > .dcs-dockpane__tabbar {\n  background: color-mix(in srgb, var(--dcs-stage) 88%, #000 12%);\n  border-bottom-color: color-mix(in srgb, var(--dcs-stage) 70%, #000 30%);\n}\n\n/* Document tabs — wider, flat, the active tab IS the stage color\n   so the editor reads as one continuous surface from header to body. */\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab,\n.dcs-dockpane[data-dcs-dock-kind=\"documents\"] > .dcs-dockpane__tabbar .dcs-dockpane__tab {\n  padding: 0 var(--dcs-s-4);\n  min-width: 110px;\n  max-width: 260px;\n  background: color-mix(in srgb, var(--dcs-stage) 78%, #000 22%);\n  color: var(--dcs-text-dim);\n  border-right: 1px solid color-mix(in srgb, var(--dcs-stage) 55%, #000 45%);\n  font-weight: 500;\n}\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab:hover,\n.dcs-dockpane[data-dcs-dock-kind=\"documents\"] > .dcs-dockpane__tabbar .dcs-dockpane__tab:hover {\n  background: color-mix(in srgb, var(--dcs-stage) 88%, #000 12%);\n  color: var(--dcs-text);\n}\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=\"true\"],\n.dcs-dockpane[data-dcs-dock-kind=\"documents\"] > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=\"true\"] {\n  background: var(--dcs-stage);\n  color: var(--dcs-text);\n}\n.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=\"true\"]::after,\n.dcs-dockpane[data-dcs-dock-kind=\"documents\"] > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=\"true\"]::after {\n  background: var(--dcs-stage);\n}\n\n/* ---- tear-off chrome --------------------------------------- */\n/* Ghost pill that follows the pointer while a tab is being dragged. */\n.dcs-dockpane__tab-ghost {\n  position: fixed;\n  z-index: 1000;\n  padding: 0 var(--dcs-s-3);\n  height: var(--dcs-h);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dcs-s-2);\n  background: var(--dcs-surface-1);\n  border: 1px solid var(--dcs-line-soft);\n  border-radius: var(--dcs-r-2);\n  font-size: var(--dcs-fs-sm);\n  color: var(--dcs-text);\n  pointer-events: none;\n  opacity: .92;\n  box-shadow: var(--dcs-shadow-pop);\n  user-select: none;\n}\n/* Center drop preview — a translucent accent wash + 2px ring covering\n   the WHOLE dockpane (tabbar, toolbars, shelf, body, content). Sits\n   ON TOP of everything via high z-index, but is `pointer-events:none`\n   so the user can still drag through it without it intercepting any\n   events. Translucency makes the underlying content readable through\n   the wash, so you can still see what tabs and foldouts are in the\n   pane you're about to drop into. */\n.dcs-dockpane__center-preview {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: var(--dcs-accent-dim);\n  box-shadow: inset 0 0 0 2px var(--dcs-accent);\n  z-index: 100;\n}\n\n/* Author-written floating panels that are normalized into a one-tab\n   dockpane keep their original panel body inside this generated\n   tabpanel. Make it fill like a normal dock body. */\n.dcs-dockpane__standalone-panel {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n.dcs-dockpane__standalone-panel > .dcs-panel__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ---- per-pane hamburger menu --------------------------------\n   Auto-injected by decius.js at the right edge of every tabbar.\n   Holds Close / Detach / etc. for the currently active tab. Apps\n   can supply their own via `data-dcs-tab-menu=\"#menu-id\"` or hide\n   it with `data-dcs-tab-menu=\"false\"`. Small (icon-sized) and\n   flat so it doesn't compete with the active tab. */\n.dcs-dockpane__menu {\n  flex: 0 0 auto;\n  align-self: stretch;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dcs-h);\n  padding: 0;\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--dcs-text-mute);\n  font: inherit;\n  font-size: var(--dcs-fs-sm);\n  cursor: pointer;\n  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);\n}\n.dcs-dockpane__menu:hover { background: var(--dcs-surface-2); color: var(--dcs-text); }\n.dcs-dockpane__menu[aria-expanded=\"true\"] { background: var(--dcs-surface-2); color: var(--dcs-text); }\n\n/* ---- edge-dock drop zones ----------------------------------\n   While a tab is being dragged, a translucent half-pane preview\n   appears against the edge it would split into when released —\n   left/right halve the target horizontally, top/bottom halve it\n   vertically. The preview is painted into a single overlay node\n   the runtime parents to the target dockpane during drag. */\n.dcs-dockpane__edge-preview {\n  position: absolute;\n  pointer-events: none;\n  background: var(--dcs-accent-dim);\n  box-shadow: inset 0 0 0 2px var(--dcs-accent);\n  z-index: 50;\n  transition: top var(--dcs-t-fast), left var(--dcs-t-fast),\n              width var(--dcs-t-fast), height var(--dcs-t-fast);\n}\n.dcs-dockpane__edge-preview[data-edge=\"left\"]   { left: 0; top: 0; width: 50%;  height: 100%; }\n.dcs-dockpane__edge-preview[data-edge=\"right\"]  { right: 0; top: 0; width: 50%; height: 100%; left: auto; }\n.dcs-dockpane__edge-preview[data-edge=\"top\"]    { left: 0; top: 0; width: 100%; height: 50%; }\n.dcs-dockpane__edge-preview[data-edge=\"bottom\"] { left: 0; bottom: 0; width: 100%; height: 50%; top: auto; }\n.dcs-dockpane__edge-preview[data-edge=\"center\"] { inset: 0; }\n.dcs-dockpane__edge-preview[data-window-edge=\"true\"][data-edge=\"left\"]  { width: min(320px, 20%); }\n.dcs-dockpane__edge-preview[data-window-edge=\"true\"][data-edge=\"right\"] { width: min(320px, 20%); }\n.dcs-dockpane__edge-preview[data-window-edge=\"true\"][data-edge=\"top\"]   { height: min(220px, 20%); }\n.dcs-dockpane__edge-preview[data-window-edge=\"true\"][data-edge=\"bottom\"] { height: min(220px, 20%); }\n"]}