:root,[data-theme=dark]{--dui-color-dark-app-base: #070b14;--dui-color-dark-l2-mid-panel: #0c1322;--dui-color-dark-l2-border: #1b202c;--dui-color-dark-l2-operational-well: #0c111d;--dui-color-dark-l2-header-separator: #151923;--dui-color-dark-l1-main-panel: #111827;--dui-color-dark-l1-stroke: #252c3bba;--dui-color-dark-l1-operational-well: #1b2232;--dui-color-dark-l1-header-separator: #24283485;--dui-color-dark-accent-1: #9d91ff;--dui-color-dark-accent-2: #513cfb;--dui-color-text-main: #d7dbe4;--dui-color-text-secondary: #a0a7b5;--dui-color-success: #18c77a;--dui-color-warning: #f6a700;--dui-color-danger: #e25555;--dui-bg-app: var(--dui-color-dark-app-base);--dui-bg-grid: rgba(157, 145, 255, .035);--dui-surface-panel-l2: var(--dui-color-dark-l2-mid-panel);--dui-surface-panel-l1: var(--dui-color-dark-l1-main-panel);--dui-input-background-dark: #111218;--dui-input-background-light: #f1f4f8;--dui-input-background: var(--dui-input-background-dark);--dui-input-text-color: var(--dui-text-primary);--dui-input-placeholder-color: var(--dui-text-muted);--dui-input-helper-color: var(--dui-text-muted);--dui-input-text: var(--dui-text-main);--dui-input-helper-text: 400 11px / 1.4 var(--dui-font-family);--dui-combobox-option-hover: var(--dui-surface-muted-hover);--dui-combobox-option-selected: color-mix(in srgb, var(--dui-accent) 18%, var(--dui-input-background));--dui-combobox-option-selected-text: var(--dui-text-primary);--dui-combobox-open-border: #9d91ff85;--dui-surface-field: var(--dui-input-background);--dui-surface-sidebar: var(--dui-color-dark-l2-mid-panel);--dui-surface-muted: var(--dui-color-dark-l1-operational-well);--dui-surface-muted-hover: #20283a;--dui-top-bar-user-bg: #3d4f64;--dui-border-l2: var(--dui-color-dark-l2-border);--dui-border-l1: var(--dui-color-dark-l1-stroke);--dui-border-header-l2: var(--dui-color-dark-l2-header-separator);--dui-border-header-l1: var(--dui-color-dark-l1-header-separator);--dui-border-field: transparent;--dui-focus: var(--dui-color-dark-accent-1);--dui-accent: var(--dui-color-dark-accent-1);--dui-accent-hover: var(--dui-color-dark-accent-2);--dui-on-accent: #ffffff;--dui-text-primary: var(--dui-color-text-main);--dui-text-secondary-color: var(--dui-color-text-secondary);--dui-text-muted: var(--dui-color-text-secondary);--dui-text-on-muted: var(--dui-color-text-main);--dui-text-success: #42e49a;--dui-text-warning: #ffd166;--dui-text-danger: #f06f72;--dui-state-success-surface: color-mix(in srgb, var(--dui-color-success) 18%, var(--dui-surface-panel-l1));--dui-state-success-border: color-mix(in srgb, var(--dui-color-success) 42%, var(--dui-border-l1));--dui-state-warning-surface: color-mix(in srgb, var(--dui-color-warning) 18%, var(--dui-surface-panel-l1));--dui-state-warning-border: color-mix(in srgb, var(--dui-color-warning) 42%, var(--dui-border-l1));--dui-state-danger-surface: color-mix(in srgb, var(--dui-color-danger) 18%, var(--dui-surface-panel-l1));--dui-state-danger-border: color-mix(in srgb, var(--dui-color-danger) 42%, var(--dui-border-l1));--dui-background: var(--dui-bg-app);--dui-surface: var(--dui-surface-panel-l1);--dui-border: var(--dui-border-l1);--dui-text: var(--dui-text-primary);--dui-radius-l2: 12px;--dui-radius-l1: 8px;--dui-stroke-width: 1px;--dui-panel-header-height: 64px;--dui-panel-header-padding: 12px;--dui-panel-body-padding: 8px;--dui-form-group-gap: 28px;--dui-form-item-gap: 8px;--dui-form-group-title-gap: 8px;--dui-option-button-background: var(--dui-surface-muted);--dui-option-button-background-hover: var(--dui-surface-muted-hover);--dui-option-button-border: transparent;--dui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--dui-text-section-title: 600 14px / 1.3 var(--dui-font-family);--dui-text-main: 400 12px / 1.45 var(--dui-font-family);--dui-text-secondary: 400 12px / 1.45 var(--dui-font-family);--dui-text-section-header: 600 12px / 1.25 var(--dui-font-family);--dui-text-field-label: 400 10px / 1.2 var(--dui-font-family);--dui-field-label-color: color-mix(in srgb, var(--dui-text-primary) 50%, transparent);--dui-text-object-list-heading: 700 10px / 1.2 var(--dui-font-family);--dui-object-list-heading-divider: linear-gradient( 90deg, color-mix(in srgb, #242834 0%, transparent) 0%, #434e70 10%, #434e70 90%, color-mix(in srgb, #242834 0%, transparent) 100% );--dui-text-page-title: 600 18px / 1.2 var(--dui-font-family);--dui-text-control-sm: 600 12px / 1 var(--dui-font-family);--dui-text-control-md: 600 12px / 1 var(--dui-font-family);--dui-text-control-lg: 600 14px / 1 var(--dui-font-family);color:var(--dui-text-primary);font-family:var(--dui-font-family);font-synthesis:none;text-rendering:optimizeLegibility}[data-theme=light]{--dui-color-light-app-base: #f5f7fb;--dui-color-light-l2-mid-panel: #ffffff;--dui-color-light-l2-border: #d9e0ea;--dui-color-light-l2-operational-well: #eef2f7;--dui-color-light-l2-header-separator: #e4e9f0;--dui-color-light-l1-main-panel: #ffffff;--dui-color-light-l1-stroke: #d7dde7;--dui-color-light-l1-operational-well: #f1f4f8;--dui-color-light-l1-header-separator: #e7ebf2;--dui-color-light-accent-1: #5b5ce2;--dui-color-light-accent-2: #4546c9;--dui-color-light-text-main: #182033;--dui-color-light-text-secondary: #5d6678;--dui-color-success: #0c8f59;--dui-color-warning: #b16b00;--dui-color-danger: #b9363e;--dui-bg-app: var(--dui-color-light-app-base);--dui-bg-grid: rgba(91, 92, 226, .055);--dui-surface-panel-l2: var(--dui-color-light-l2-mid-panel);--dui-surface-panel-l1: var(--dui-color-light-l1-main-panel);--dui-input-background: var(--dui-input-background-light);--dui-input-text-color: var(--dui-text-primary);--dui-input-placeholder-color: var(--dui-text-muted);--dui-input-helper-color: var(--dui-text-muted);--dui-input-text: var(--dui-text-main);--dui-input-helper-text: 400 11px / 1.4 var(--dui-font-family);--dui-combobox-option-hover: var(--dui-surface-muted-hover);--dui-combobox-option-selected: color-mix(in srgb, var(--dui-accent) 12%, var(--dui-input-background));--dui-combobox-option-selected-text: var(--dui-text-primary);--dui-combobox-open-border: color-mix(in srgb, var(--dui-focus) 52%, transparent);--dui-surface-field: var(--dui-input-background);--dui-surface-sidebar: var(--dui-color-light-l2-mid-panel);--dui-surface-muted: var(--dui-color-light-l1-operational-well);--dui-surface-muted-hover: #e8edf5;--dui-top-bar-user-bg: #5a6e84;--dui-border-l2: var(--dui-color-light-l2-border);--dui-border-l1: var(--dui-color-light-l1-stroke);--dui-border-header-l2: var(--dui-color-light-l2-header-separator);--dui-border-header-l1: var(--dui-color-light-l1-header-separator);--dui-border-field: var(--dui-color-light-l1-stroke);--dui-focus: var(--dui-color-light-accent-1);--dui-accent: var(--dui-color-light-accent-1);--dui-accent-hover: var(--dui-color-light-accent-2);--dui-on-accent: #ffffff;--dui-text-primary: var(--dui-color-light-text-main);--dui-text-secondary-color: var(--dui-color-light-text-secondary);--dui-text-muted: var(--dui-color-light-text-secondary);--dui-text-on-muted: var(--dui-color-light-text-main);--dui-field-label-color: var(--dui-color-light-text-secondary);--dui-text-success: #08784b;--dui-text-warning: #895200;--dui-text-danger: #a92f38;--dui-state-success-surface: color-mix(in srgb, var(--dui-color-success) 12%, var(--dui-surface-panel-l1));--dui-state-success-border: color-mix(in srgb, var(--dui-color-success) 34%, var(--dui-border-l1));--dui-state-warning-surface: color-mix(in srgb, var(--dui-color-warning) 12%, var(--dui-surface-panel-l1));--dui-state-warning-border: color-mix(in srgb, var(--dui-color-warning) 34%, var(--dui-border-l1));--dui-state-danger-surface: color-mix(in srgb, var(--dui-color-danger) 12%, var(--dui-surface-panel-l1));--dui-state-danger-border: color-mix(in srgb, var(--dui-color-danger) 34%, var(--dui-border-l1));--dui-background: var(--dui-bg-app);--dui-surface: var(--dui-surface-panel-l1);--dui-border: var(--dui-border-l1);--dui-text: var(--dui-text-primary);--dui-option-button-background: var(--dui-surface-muted);--dui-option-button-background-hover: var(--dui-surface-muted-hover);--dui-option-button-border: var(--dui-border-l1)}.dui-text-section-title{color:var(--dui-text-primary);font:var(--dui-text-section-title);letter-spacing:0}.dui-text-main{color:var(--dui-text-primary);font:var(--dui-text-main);letter-spacing:0}.dui-text-secondary{color:var(--dui-text-muted);font:var(--dui-text-secondary);letter-spacing:0}.dui-text-section-header{color:var(--dui-text-primary);font:var(--dui-text-section-header);letter-spacing:0;text-transform:uppercase}.dui-text-page-title{color:var(--dui-text-primary);font:var(--dui-text-page-title);letter-spacing:0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--dui-bg-app);margin:0}a{color:inherit}.workbench-shell{background:var(--dui-bg-app);color:var(--dui-text-primary);display:grid;grid-template-columns:minmax(14rem,18rem) minmax(0,1fr);min-height:100vh}.workbench-topbar{grid-column:1 / -1;position:sticky;top:0;z-index:100}.workbench-sidebar{align-content:start;background:var(--dui-surface-sidebar);border-right:1px solid var(--dui-border-l2);display:grid;gap:2rem;height:calc(100vh - 38px);padding:1.5rem;position:sticky;top:38px}.workbench-kicker{color:var(--dui-accent);font:var(--dui-text-section-header);letter-spacing:0;margin:0 0 .5rem;text-transform:uppercase}.workbench-sidebar h1{color:var(--dui-text-primary);font:var(--dui-text-page-title);letter-spacing:0;margin:0}.workbench-theme-control{background:var(--dui-surface-muted);border:1px solid var(--dui-border-l2);border-radius:var(--dui-radius-l1);display:grid;gap:.25rem;grid-template-columns:repeat(2,minmax(0,1fr));padding:.25rem}.workbench-theme-control button{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--dui-text-muted);cursor:pointer;font:var(--dui-text-control-sm);letter-spacing:0;min-height:2rem;text-transform:capitalize}.workbench-theme-control button:hover,.workbench-theme-control button[aria-pressed=true]{background:var(--dui-surface-panel-l1);border-color:var(--dui-border-l1);color:var(--dui-text-primary)}.workbench-theme-control button:focus-visible{outline:3px solid color-mix(in srgb,var(--dui-focus) 28%,transparent);outline-offset:2px}.workbench-sidebar nav{display:grid;gap:.35rem}.workbench-sidebar a{border:1px solid transparent;border-radius:8px;color:var(--dui-text-muted);font:var(--dui-text-section-title);padding:.65rem .75rem;text-decoration:none}.workbench-sidebar a:hover{background:var(--dui-surface-muted);border-color:var(--dui-border-l2);color:var(--dui-text-primary)}.workbench-nav-app-link{align-items:center;background:color-mix(in srgb,var(--dui-accent) 10%,transparent)!important;border-color:color-mix(in srgb,var(--dui-accent) 30%,transparent)!important;color:var(--dui-accent)!important;display:flex;gap:6px;margin-bottom:.5rem}.workbench-nav-app-link:hover{background:color-mix(in srgb,var(--dui-accent) 18%,transparent)!important;border-color:color-mix(in srgb,var(--dui-accent) 50%,transparent)!important;color:var(--dui-accent)!important}.workbench-content{display:grid;gap:1rem;padding:1rem}.workbench-section-label{color:var(--dui-text-primary);font:var(--dui-text-section-header);letter-spacing:0;margin:0 0 .75rem;text-transform:uppercase}.workbench-section-label--spaced{margin-top:1rem}.workbench-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.workbench-demo .dui-panel__title{text-transform:capitalize}.workbench-demo .dui-panel__body{display:grid;gap:.75rem}.workbench-row{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem}.workbench-icon-btn{align-items:center;background:color-mix(in srgb,var(--dui-text-primary) 8%,transparent);border:1px solid var(--dui-border-l1);border-radius:8px;color:var(--dui-text-primary);cursor:pointer;display:inline-flex;height:32px;justify-content:center;padding:0;transition:background-color .12s ease;width:32px}.workbench-icon-btn:hover{background:color-mix(in srgb,var(--dui-text-primary) 14%,transparent)}.workbench-icon-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--dui-focus) 28%,transparent);outline-offset:2px}.workbench-form-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}.workbench-forms-panel,.workbench-forms-panel>.dui-panel__body,.workbench-field-demo,.workbench-field-demo>.dui-panel__body{overflow:visible}.workbench-field-demo{position:relative;z-index:1}.workbench-field-demo:focus-within{z-index:3}.workbench-inspector-demo{max-width:16rem}.workbench-option-icon{border:1px solid currentColor;border-radius:2px;display:block;height:14px;position:relative;width:14px}.workbench-option-icon:after{border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;content:"";display:block;height:4px;left:4px;position:absolute;top:4px;transform:rotate(45deg);width:4px}.workbench-icon-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr))}.workbench-icon-item{align-items:center;background:var(--dui-surface-muted);border:1px solid var(--dui-border-l1);border-radius:6px;display:flex;flex-direction:column;gap:.5rem;padding:.75rem .5rem}.workbench-icon-label{color:var(--dui-text-muted);font:var(--dui-text-field-label);letter-spacing:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}.workbench-token-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}.workbench-token .dui-panel__body{align-items:center;display:grid;gap:.75rem;grid-template-columns:2rem minmax(0,1fr)}.workbench-swatch{border:1px solid var(--dui-border-l1);border-radius:6px;display:block;height:2rem;width:2rem}.workbench-token-value{color:var(--dui-text-muted);font:var(--dui-text-secondary);letter-spacing:0}@media(max-width:760px){.workbench-shell{grid-template-columns:1fr}.workbench-sidebar{border-bottom:1px solid var(--dui-border-l2);border-right:0;height:auto;padding:1rem;position:static}.workbench-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.workbench-content{padding:.75rem}}
