npm - ui-style-kit-css - Versions diffs - 2.2.0 → 2.4.0 - Mend

ui-style-kit-css 2.2.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/CHANGELOG.md +77 -1
package/CONTRIBUTING.md +8 -1
package/README.md +171 -53
package/STYLE-MAP.md +28 -5
package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
package/dist/assets/bauhaus-barlow.ttf +0 -0
package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
package/dist/assets/bento-manrope-OFL.txt +93 -0
package/dist/assets/bento-manrope.ttf +0 -0
package/dist/assets/clay-grain.png +0 -0
package/dist/assets/clay-rounded-OFL.txt +93 -0
package/dist/assets/clay-rounded.ttf +0 -0
package/dist/assets/neo-noir-corner-dark.png +0 -0
package/dist/assets/neo-noir-corner-light.png +0 -0
package/dist/assets/neo-noir-texture-dark.png +0 -0
package/dist/assets/neo-noir-texture-light.png +0 -0
package/dist/assets/organic-display-OFL.txt +93 -0
package/dist/assets/organic-display.ttf +0 -0
package/dist/assets/organic-icons-LICENSE.txt +21 -0
package/dist/assets/organic-sans-OFL.txt +93 -0
package/dist/assets/organic-sans.ttf +0 -0
package/dist/ui-style-kit.css +55604 -6525
package/dist/ui-style-kit.min.css +2 -2
package/dist/ui-style-kit.visual.css +55443 -6942
package/dist/ui-style-kit.visual.min.css +2 -2
package/dist/ui-style-kit.with-bridge.css +55646 -6551
package/dist/ui-style-kit.with-bridge.min.css +2 -2
package/dist/visual/art-deco.css +7318 -0
package/dist/visual/bauhaus.css +2 -2961
package/dist/visual/bento.css +2 -2980
package/dist/visual/brutalism.css +2679 -352
package/dist/visual/clay.css +5 -0
package/dist/visual/cyberpunk.css +4482 -781
package/dist/visual/data-terminal.css +6182 -0
package/dist/visual/editorial-luxe.css +6450 -0
package/dist/visual/industrial-utility.css +7259 -0
package/dist/visual/maximalist.css +4080 -1025
package/dist/visual/minimal-saas.css +3305 -888
package/dist/visual/neo-noir.css +5 -0
package/dist/visual/neumorphism.css +3582 -975
package/dist/visual/organic-modern.css +5 -0
package/dist/visual/paper-editorial.css +7074 -0
package/dist/visual/retro-glass.css +4426 -760
package/dist/visual/retrofuturism.css +3676 -875
package/dist/visual/tactile.css +4568 -1036
package/dist/visual/technical-blueprint.css +6713 -0
package/dist/visual/y2k.css +3672 -753
package/docs/ART-DECO.md +80 -0
package/docs/BAUHAUS.md +152 -0
package/docs/BENTO.md +121 -0
package/docs/CLAY.md +127 -0
package/docs/DEMO-SHOWCASE.md +65 -0
package/docs/ECOSYSTEM.md +9 -5
package/docs/EDITORIAL-LUX.md +75 -0
package/docs/INDUSTRIAL-UTILITY.md +131 -0
package/docs/NATIVE-ELEMENTS.md +23 -17
package/docs/NEO-NOIR.md +94 -0
package/docs/ORGANIC-MODERN.md +91 -0
package/docs/PAPER-EDITORIAL.md +63 -0
package/docs/PUBLISHING.md +36 -11
package/docs/RELEASE-2.4.0.md +88 -0
package/docs/RETRO-GLASS.md +105 -0
package/docs/STYLE-GUIDE.md +68 -13
package/docs/TACTILE.md +38 -0
package/docs/TECHNICAL-BLUEPRINT.md +60 -0
package/docs/TOKENS.md +90 -4
package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
package/manifest.json +769 -20
package/package.json +79 -14
package/styles/art-deco.css +2068 -0
package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
package/styles/assets/bauhaus-barlow.ttf +0 -0
package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
package/styles/assets/bento-manrope-OFL.txt +93 -0
package/styles/assets/bento-manrope.ttf +0 -0
package/styles/assets/clay-grain.png +0 -0
package/styles/assets/clay-rounded-OFL.txt +93 -0
package/styles/assets/clay-rounded.ttf +0 -0
package/styles/assets/neo-noir-corner-dark.png +0 -0
package/styles/assets/neo-noir-corner-light.png +0 -0
package/styles/assets/neo-noir-texture-dark.png +0 -0
package/styles/assets/neo-noir-texture-light.png +0 -0
package/styles/assets/organic-display-OFL.txt +93 -0
package/styles/assets/organic-display.ttf +0 -0
package/styles/assets/organic-icons-LICENSE.txt +21 -0
package/styles/assets/organic-sans-OFL.txt +93 -0
package/styles/assets/organic-sans.ttf +0 -0
package/styles/bauhaus.css +1092 -87
package/styles/bento.css +1413 -86
package/styles/brutalism.css +493 -10
package/styles/clay.css +1927 -0
package/styles/compat-layout.css +1 -2
package/styles/components.css +698 -33
package/styles/content-overflow.css +434 -9
package/styles/cyberpunk.css +2082 -46
package/styles/data-terminal.css +1795 -0
package/styles/editorial-luxe.css +1251 -0
package/styles/industrial-utility.css +2449 -0
package/styles/interactive-surface-bridge.css +40 -24
package/styles/interactive-surface-theme.css +31 -13
package/styles/maximalist.css +1410 -94
package/styles/minimal-saas.css +675 -73
package/styles/native-elements.css +396 -168
package/styles/neo-noir.css +1332 -0
package/styles/neumorphism.css +1155 -52
package/styles/organic-modern.css +1353 -0
package/styles/paper-editorial.css +1724 -0
package/styles/retro-glass.css +870 -42
package/styles/retrofuturism.css +1173 -55
package/styles/tactile.css +2018 -84
package/styles/technical-blueprint.css +1337 -0
package/styles/theme-colors.css +796 -5
package/styles/y2k.css +1182 -40

package/styles/industrial-utility.css ADDED Viewed

@@ -0,0 +1,2449 @@
+/* =========================================================
+   UI Style Kit CSS — Industrial Utility Theme System
+   Includes 20 color schemes, light/dark/contrast modes,
+   component classes, native element coverage, and CSS-only
+   accessibility presentation helpers.
+   Usage:
+   <body data-ui="industrial-utility" data-theme="midnight-gold" data-mode="light">
+   <body data-ui="industrial-utility" data-theme="arctic-indigo" data-mode="dark">
+   <body data-ui="industrial-utility" data-theme="cyber-lime" data-mode="contrast">
+========================================================= */
+@import url("./theme-colors.css");
+@import url("./native-elements.css");
+@import url("./content-overflow.css");
+@layer ui-style-kit.industrial_utility {
+:root {
+  --utility-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --utility-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
+  --utility-font-body: var(--utility-font-sans);
+  --utility-font-heading: var(--utility-font-display);
+  --utility-font-control: var(--utility-font-display);
+  --utility-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --utility-radius-xs: .25rem;
+  --utility-radius-sm: .5rem;
+  --utility-radius-md: 0.75rem;
+  --utility-radius-lg: 1.125rem;
+  --utility-radius-xl: calc(1.125rem + .5rem);
+  --utility-radius-pill: 999px;
+  --utility-space-1: .25rem;
+  --utility-space-2: .5rem;
+  --utility-space-3: .75rem;
+  --utility-space-4: 1rem;
+  --utility-space-5: 1.25rem;
+  --utility-space-6: 1.5rem;
+  --utility-space-8: 2rem;
+  --utility-transition-fast: 150ms ease;
+  --utility-transition-base: 240ms ease;
+}
+[data-ui="industrial-utility"][data-mode="light"] {
+  color-scheme: light;
+  --utility-fallback-bg-rgb: 245 243 239;
+  --utility-fallback-surface-rgb: 255 255 255;
+  --utility-fallback-surface-strong-rgb: 251 250 248;
+  --utility-fallback-surface-soft-rgb: 228 224 218;
+  --utility-fallback-text-rgb: 24 21 18;
+  --utility-fallback-text-muted-rgb: 98 91 84;
+  --utility-fallback-border-rgb: 184 178 169;
+  --utility-fallback-primary-rgb: 183 78 22;
+  --utility-fallback-primary-hover-rgb: 142 63 18;
+  --utility-fallback-primary-text-rgb: 255 255 255;
+  --utility-fallback-secondary-rgb: 43 43 43;
+  --utility-fallback-secondary-hover-rgb: 27 27 27;
+  --utility-fallback-secondary-text-rgb: 255 255 255;
+  --utility-fallback-accent-rgb: 225 139 61;
+  --utility-fallback-accent-text-rgb: 0 0 0;
+  --utility-fallback-success-rgb: 47 125 84;
+  --utility-fallback-success-text-rgb: 255 255 255;
+  --utility-fallback-warning-rgb: 164 106 0;
+  --utility-fallback-warning-text-rgb: 0 0 0;
+  --utility-fallback-danger-rgb: 178 60 60;
+  --utility-fallback-danger-text-rgb: 255 255 255;
+  --utility-fallback-link-rgb: 142 63 18;
+  --utility-fallback-focus-rgb: 225 139 61;
+  --utility-panel-alpha: .98;
+  --utility-panel-soft-alpha: .78;
+  --utility-border-alpha: .58;
+  --utility-shadow-alpha: .12;
+  --utility-focus-alpha: .34;
+}
+[data-ui="industrial-utility"][data-mode="dark"] {
+  color-scheme: dark;
+  --utility-fallback-bg-rgb: 13 12 11;
+  --utility-fallback-surface-rgb: 26 26 26;
+  --utility-fallback-surface-strong-rgb: 43 43 43;
+  --utility-fallback-surface-soft-rgb: 18 17 16;
+  --utility-fallback-text-rgb: 247 242 235;
+  --utility-fallback-text-muted-rgb: 197 188 177;
+  --utility-fallback-border-rgb: 89 81 73;
+  --utility-fallback-primary-rgb: 255 138 61;
+  --utility-fallback-primary-hover-rgb: 255 174 113;
+  --utility-fallback-primary-text-rgb: 0 0 0;
+  --utility-fallback-secondary-rgb: 198 191 182;
+  --utility-fallback-secondary-hover-rgb: 227 222 215;
+  --utility-fallback-secondary-text-rgb: 0 0 0;
+  --utility-fallback-accent-rgb: 255 179 107;
+  --utility-fallback-accent-text-rgb: 0 0 0;
+  --utility-fallback-success-rgb: 139 223 178;
+  --utility-fallback-success-text-rgb: 0 0 0;
+  --utility-fallback-warning-rgb: 255 210 122;
+  --utility-fallback-warning-text-rgb: 0 0 0;
+  --utility-fallback-danger-rgb: 255 152 152;
+  --utility-fallback-danger-text-rgb: 0 0 0;
+  --utility-fallback-link-rgb: 255 179 107;
+  --utility-fallback-focus-rgb: 255 154 66;
+  --utility-panel-alpha: .92;
+  --utility-panel-soft-alpha: .64;
+  --utility-border-alpha: .52;
+  --utility-shadow-alpha: .34;
+  --utility-focus-alpha: .42;
+}
+[data-ui="industrial-utility"][data-mode="contrast"] {
+  color-scheme: dark;
+  --utility-fallback-bg-rgb: 0 0 0;
+  --utility-fallback-surface-rgb: 10 9 8;
+  --utility-fallback-surface-strong-rgb: 23 19 17;
+  --utility-fallback-surface-soft-rgb: 0 0 0;
+  --utility-fallback-text-rgb: 255 255 255;
+  --utility-fallback-text-muted-rgb: 247 241 234;
+  --utility-fallback-border-rgb: 255 255 255;
+  --utility-fallback-primary-rgb: 255 154 66;
+  --utility-fallback-primary-hover-rgb: 255 255 255;
+  --utility-fallback-primary-text-rgb: 0 0 0;
+  --utility-fallback-secondary-rgb: 244 241 236;
+  --utility-fallback-secondary-hover-rgb: 255 255 255;
+  --utility-fallback-secondary-text-rgb: 0 0 0;
+  --utility-fallback-accent-rgb: 255 195 111;
+  --utility-fallback-accent-text-rgb: 0 0 0;
+  --utility-fallback-success-rgb: 0 255 144;
+  --utility-fallback-success-text-rgb: 0 0 0;
+  --utility-fallback-warning-rgb: 255 212 0;
+  --utility-fallback-warning-text-rgb: 0 0 0;
+  --utility-fallback-danger-rgb: 255 92 92;
+  --utility-fallback-danger-text-rgb: 0 0 0;
+  --utility-fallback-link-rgb: 255 179 107;
+  --utility-fallback-focus-rgb: 255 255 255;
+  --utility-panel-alpha: 1;
+  --utility-panel-soft-alpha: .92;
+  --utility-border-alpha: 1;
+  --utility-shadow-alpha: .5;
+  --utility-focus-alpha: .72;
+}
+/** Preserves direct aliases for static extraction when a scheme is selected. */
+[data-ui="industrial-utility"][data-theme][data-mode] {
+  --utility-bg-rgb: var(--usk-bg-rgb);
+  --utility-surface-rgb: var(--usk-surface-rgb);
+  --utility-surface-strong-rgb: var(--usk-surface-strong-rgb);
+  --utility-surface-soft-rgb: var(--usk-surface-soft-rgb);
+  --utility-text-rgb: var(--usk-text-rgb);
+  --utility-text-muted-rgb: var(--usk-text-muted-rgb);
+  --utility-border-rgb: var(--usk-border-rgb);
+  --utility-primary-rgb: var(--usk-primary-rgb);
+  --utility-primary-hover-rgb: var(--usk-primary-hover-rgb);
+  --utility-primary-text-rgb: var(--usk-primary-text-rgb);
+  --utility-secondary-rgb: var(--usk-secondary-rgb);
+  --utility-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
+  --utility-secondary-text-rgb: var(--usk-secondary-text-rgb);
+  --utility-accent-rgb: var(--usk-accent-rgb);
+  --utility-accent-text-rgb: var(--usk-accent-text-rgb);
+  --utility-success-rgb: var(--usk-success-rgb);
+  --utility-success-text-rgb: var(--usk-success-text-rgb);
+  --utility-warning-rgb: var(--usk-warning-rgb);
+  --utility-warning-text-rgb: var(--usk-warning-text-rgb);
+  --utility-danger-rgb: var(--usk-danger-rgb);
+  --utility-danger-text-rgb: var(--usk-danger-text-rgb);
+  --utility-link-rgb: var(--usk-link-rgb);
+  --utility-focus-rgb: var(--usk-focus-rgb);
+}
+[data-ui="industrial-utility"][data-mode] {
+  --usk-native-bg: var(--utility-bg);
+  /* Explicit schemes win; reference colors are used only when no scheme exists. */
+  --utility-bg-rgb: var(--usk-bg-rgb, var(--utility-fallback-bg-rgb));
+  --utility-surface-rgb: var(--usk-surface-rgb, var(--utility-fallback-surface-rgb));
+  --utility-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--utility-fallback-surface-strong-rgb));
+  --utility-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--utility-fallback-surface-soft-rgb));
+  --utility-text-rgb: var(--usk-text-rgb, var(--utility-fallback-text-rgb));
+  --utility-text-muted-rgb: var(--usk-text-muted-rgb, var(--utility-fallback-text-muted-rgb));
+  --utility-border-rgb: var(--usk-border-rgb, var(--utility-fallback-border-rgb));
+  --utility-primary-rgb: var(--usk-primary-rgb, var(--utility-fallback-primary-rgb));
+  --utility-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--utility-fallback-primary-hover-rgb));
+  --utility-primary-text-rgb: var(--usk-primary-text-rgb, var(--utility-fallback-primary-text-rgb));
+  --utility-secondary-rgb: var(--usk-secondary-rgb, var(--utility-fallback-secondary-rgb));
+  --utility-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--utility-fallback-secondary-hover-rgb));
+  --utility-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--utility-fallback-secondary-text-rgb));
+  --utility-accent-rgb: var(--usk-accent-rgb, var(--utility-fallback-accent-rgb));
+  --utility-accent-text-rgb: var(--usk-accent-text-rgb, var(--utility-fallback-accent-text-rgb));
+  --utility-success-rgb: var(--usk-success-rgb, var(--utility-fallback-success-rgb));
+  --utility-success-text-rgb: var(--usk-success-text-rgb, var(--utility-fallback-success-text-rgb));
+  --utility-warning-rgb: var(--usk-warning-rgb, var(--utility-fallback-warning-rgb));
+  --utility-warning-text-rgb: var(--usk-warning-text-rgb, var(--utility-fallback-warning-text-rgb));
+  --utility-danger-rgb: var(--usk-danger-rgb, var(--utility-fallback-danger-rgb));
+  --utility-danger-text-rgb: var(--usk-danger-text-rgb, var(--utility-fallback-danger-text-rgb));
+  --utility-link-rgb: var(--usk-link-rgb, var(--utility-fallback-link-rgb));
+  --utility-focus-rgb: var(--usk-focus-rgb, var(--utility-fallback-focus-rgb));
+  /* Native fallback selectors inherit visual identity through shared tokens. */
+  --usk-native-surface: var(--utility-surface);
+  --usk-native-surface-strong: var(--utility-surface-strong);
+  --usk-native-surface-soft: var(--utility-surface-soft);
+  --usk-native-card-bg: var(--utility-card-bg);
+  --usk-native-control-bg: var(--utility-control-bg);
+  --usk-native-text: var(--utility-text);
+  --usk-native-text-muted: var(--utility-text-muted);
+  --usk-native-border: var(--utility-border);
+  --usk-native-primary: var(--utility-primary);
+  --usk-native-primary-hover: var(--utility-primary-hover);
+  --usk-native-on-primary: var(--utility-on-primary);
+  --usk-native-focus: var(--utility-focus);
+  --usk-native-success: var(--utility-success);
+  --usk-native-warning: var(--utility-warning);
+  --usk-native-danger: var(--utility-danger);
+  --usk-native-link: var(--utility-link);
+  --usk-native-font-body: var(--utility-font-body);
+  --usk-native-font-heading: var(--utility-font-heading);
+  --usk-native-font-control: var(--utility-font-control);
+  --usk-native-font-mono: var(--utility-font-mono);
+  --usk-native-radius-sm: var(--utility-radius-sm);
+  --usk-native-radius: var(--utility-radius-md);
+  --usk-native-radius-lg: var(--utility-radius-lg);
+  --usk-native-shadow: var(--utility-shadow-sm, none);
+  --usk-native-shadow-md: var(--utility-shadow-md, var(--usk-native-shadow));
+  --usk-native-focus-ring: var(--utility-focus-ring, 0 0 0 3px rgb(var(--utility-focus-rgb) / .28));
+  --usk-native-border-width: 1px;
+  --usk-native-field-gap: .5rem;
+  --usk-native-panel-padding: var(--utility-space-5);
+  --usk-native-control-min-block-size: 2.75rem;
+  --usk-native-control-padding-block: .74rem;
+  --usk-native-control-padding-inline: 1rem;
+  --usk-native-subcontrol-padding-block: .58rem;
+  --usk-native-subcontrol-padding-inline: .8rem;
+  --usk-native-choice-size: 1.35rem;
+  --usk-native-choice-background: var(--utility-control-bg);
+  --usk-native-choice-border: 2px solid var(--utility-border);
+  --usk-native-checkbox-radius: .08rem;
+  --usk-native-radio-radius: .08rem;
+  --usk-native-choice-shadow: 2px 2px 0 rgb(0 0 0 / .3);
+  --usk-native-choice-checked-background: var(--utility-primary);
+  --usk-native-choice-mark-color: var(--utility-on-primary);
+  --usk-native-select-indicator-image: linear-gradient(66deg, transparent 50%, var(--utility-primary) 50%), linear-gradient(114deg, var(--utility-primary) 50%, transparent 50%);
+  --usk-native-select-indicator-size: 0.46rem 0.46rem, 0.46rem 0.46rem;
+  --usk-native-select-indicator-position: calc(100% - 1.08rem) 50%, calc(100% - 0.78rem) 50%;
+  --usk-native-select-padding-inline-end: 2.4rem;
+  --usk-native-range-track-size: .7rem;
+  --usk-native-range-track-background: var(--utility-surface-soft);
+  --usk-native-range-track-border: 2px solid var(--utility-border);
+  --usk-native-range-track-radius: .06rem;
+  --usk-native-range-track-shadow: 2px 2px 0 rgb(0 0 0 / .3);
+  --usk-native-range-progress-background: var(--utility-primary);
+  --usk-native-range-thumb-size: 1.25rem;
+  --usk-native-range-thumb-background: var(--utility-surface-strong);
+  --usk-native-range-thumb-border: 2px solid var(--utility-border);
+  --usk-native-range-thumb-radius: .08rem;
+  --usk-native-range-thumb-shadow: 2px 2px 0 rgb(0 0 0 / .3);
+  --usk-native-progress-size: .76rem;
+  --usk-native-progress-track-background: var(--utility-surface-soft);
+  --usk-native-progress-track-border: 2px solid var(--utility-border);
+  --usk-native-progress-track-radius: .06rem;
+  --usk-native-progress-track-shadow: 2px 2px 0 rgb(0 0 0 / .3);
+  --usk-native-progress-value-background: var(--utility-primary);
+  --usk-native-progress-value-radius: .06rem;
+  --usk-native-progress-value-shadow: 2px 2px 0 rgb(0 0 0 / .3);
+  --usk-native-meter-optimum-background: var(--utility-success);
+  --usk-native-meter-suboptimum-background: var(--utility-warning);
+  --usk-native-meter-critical-background: var(--utility-danger);
+  --usk-native-file-button-background: var(--utility-primary);
+  --usk-native-file-button-border: 2px solid var(--utility-border);
+  --usk-native-file-button-radius: .08rem;
+  --usk-native-file-button-shadow: 2px 2px 0 rgb(0 0 0 / .3);
+  --usk-native-color-swatch-border: 2px solid var(--utility-border);
+  --usk-native-color-swatch-radius: .08rem;
+  --usk-native-indicator-opacity: 0.87;
+  --usk-native-indicator-filter: none;
+  --usk-native-scrollbar-size: .85rem;
+  --usk-native-scrollbar-track: var(--utility-surface-soft);
+  --usk-native-scrollbar-thumb: var(--utility-primary);
+  --usk-native-scrollbar-radius: .06rem;
+  --utility-bg: rgb(var(--utility-bg-rgb));
+  --utility-surface: rgb(var(--utility-surface-rgb) / var(--utility-panel-alpha));
+  --utility-surface-strong: rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha));
+  --utility-surface-soft: rgb(var(--utility-surface-soft-rgb) / var(--utility-panel-soft-alpha));
+  --utility-text: rgb(var(--utility-text-rgb));
+  --utility-text-muted: rgb(var(--utility-text-muted-rgb));
+  --utility-fg: var(--utility-text);
+  --utility-surface-fg: var(--utility-text);
+  --utility-muted: var(--utility-text-muted);
+  --utility-border: rgb(var(--utility-border-rgb) / max(var(--utility-border-alpha), var(--usk-border-min-alpha)));
+  --utility-control-fg: var(--utility-text);
+  --utility-primary: rgb(var(--utility-primary-rgb));
+  --utility-primary-hover: rgb(var(--utility-primary-hover-rgb));
+  --utility-primary-text: rgb(var(--utility-primary-text-rgb));
+  --utility-secondary: rgb(var(--utility-secondary-rgb));
+  --utility-secondary-hover: rgb(var(--utility-secondary-hover-rgb));
+  --utility-secondary-text: rgb(var(--utility-secondary-text-rgb));
+  --utility-on-primary: var(--utility-primary-text);
+  --utility-on-secondary: var(--utility-secondary-text);
+  --utility-on-accent: rgb(var(--utility-accent-text-rgb));
+  --utility-on-success: rgb(var(--utility-success-text-rgb));
+  --utility-on-warning: rgb(var(--utility-warning-text-rgb));
+  --utility-on-danger: rgb(var(--utility-danger-text-rgb));
+  --utility-accent: rgb(var(--utility-accent-rgb));
+  --utility-success: rgb(var(--utility-success-rgb));
+  --utility-warning: rgb(var(--utility-warning-rgb));
+  --utility-danger: rgb(var(--utility-danger-rgb));
+  --utility-link: rgb(var(--utility-link-rgb));
+  --utility-focus: rgb(var(--utility-focus-rgb));
+  --utility-focus-ring: 0 0 0 3px rgb(var(--utility-focus-rgb) / var(--utility-focus-alpha));
+  --utility-theme-bg-size: auto;
+  --utility-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--utility-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--utility-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--utility-secondary-rgb) / .10), transparent 34rem), var(--utility-bg);
+  --utility-card-bg: linear-gradient(135deg, rgb(var(--utility-primary-rgb) / .10), rgb(var(--utility-accent-rgb) / .055) 42%, rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha)) 100%), var(--utility-surface);
+  --utility-control-bg: linear-gradient(180deg, rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha)), rgb(var(--utility-surface-soft-rgb) / var(--utility-panel-soft-alpha)));
+  --utility-spinner-track: rgb(var(--utility-border-rgb) / max(.28, calc(var(--utility-border-alpha) * .7)));
+  --utility-spinner-stroke: var(--utility-primary);
+  --utility-spinner-accent: var(--utility-accent);
+}
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="industrial-utility"][data-mode] { --utility-border: color-mix(in srgb, rgb(var(--utility-border-rgb) / max(var(--utility-border-alpha), var(--usk-border-min-alpha))), var(--utility-text) var(--usk-border-text-mix)); }
+}
+/* =========================================================
+   Base Page + Layout
+========================================================= */
+[data-ui="industrial-utility"] {
+  min-height: 100vh;
+  background: linear-gradient(180deg, rgb(var(--utility-primary-rgb) / .04), transparent 22rem), var(--utility-bg);
+  color: var(--utility-text);
+  font-family: var(--utility-font-body);
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[data-ui="industrial-utility"] *,
+[data-ui="industrial-utility"] *::before,
+[data-ui="industrial-utility"] *::after { box-sizing: border-box; }
+[data-ui="industrial-utility"][data-mode] { background: var(--utility-theme-bg); background-size: var(--utility-theme-bg-size); }
+.utility-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
+.utility-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
+.utility-section { display: grid; gap: var(--utility-space-5); padding: clamp(1rem, 3vw, 2rem); }
+.utility-stack { display: flex; flex-direction: column; gap: var(--utility-space-4); }
+.utility-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--utility-space-3); }
+.utility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--utility-space-5); }
+.utility-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--utility-space-6); align-items: start; }
+/* =========================================================
+   Typography
+========================================================= */
+.utility-title, .utility-heading, .utility-kicker, .utility-button, .utility-badge, .utility-nav-link { font-family: var(--utility-font-heading); }
+.utility-title { margin: 0; color: var(--utility-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
+.utility-heading { margin: 0; color: var(--utility-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
+.utility-kicker { margin: 0; color: var(--utility-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
+.utility-subtitle, .utility-copy { margin: 0; color: var(--utility-text-muted); line-height: 1.65; }
+.utility-text-muted { color: var(--utility-text-muted); }
+.utility-divider { width: 100%; height: 1px; border: 0; background: var(--utility-border); }
+/* =========================================================
+   Surfaces
+========================================================= */
+.utility-surface, .utility-card, .utility-panel, .utility-toolbar, .utility-table-wrap {
+  position: relative;
+  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / 0)), var(--utility-surface);
+  color: var(--utility-text);
+  border: 1px solid var(--utility-border);
+  border-radius: var(--utility-radius-lg);
+  box-shadow: 0 10px 30px rgb(15 23 42 / var(--utility-shadow-alpha));
+  transition: transform var(--utility-transition-base), box-shadow var(--utility-transition-base), border-color var(--utility-transition-base), background var(--utility-transition-base);
+}
+.utility-card, .utility-panel { padding: var(--utility-space-6); }
+.utility-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--utility-space-4); padding: var(--utility-space-4); }
+.utility-surface-sm { border-radius: var(--utility-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--utility-shadow-alpha) * .72)); }
+.utility-surface-lg { border-radius: var(--utility-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--utility-shadow-alpha) + .08)); }
+.utility-well, .utility-inset { background: var(--utility-surface-soft); color: var(--utility-text); border: 1px solid rgb(var(--utility-border-rgb) / calc(var(--utility-border-alpha) * .7)); border-radius: var(--utility-radius-md); padding: var(--utility-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
+.utility-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--utility-shadow-alpha) + .12)); }
+/* =========================================================
+   Buttons
+========================================================= */
+.utility-button, .utility-icon-button {
+  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--utility-space-2);
+  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--utility-surface); color: var(--utility-text);
+  border: 1px solid var(--utility-border); border-radius: var(--utility-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--utility-shadow-alpha));
+  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
+  transition: color var(--utility-transition-fast), background var(--utility-transition-fast), border-color var(--utility-transition-fast), box-shadow var(--utility-transition-fast), transform var(--utility-transition-fast);
+}
+.utility-button:hover, .utility-icon-button:hover { transform: translateY(-1px); border-color: var(--utility-primary); }
+.utility-button:active, .utility-icon-button:active, .utility-button[aria-pressed="true"], .utility-icon-button[aria-pressed="true"], .utility-button.is-active, .utility-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
+.utility-button-primary { background: var(--utility-primary); color: var(--utility-on-primary); border-color: var(--utility-primary); }
+.utility-button-primary:hover { background: var(--utility-primary-hover); border-color: var(--utility-primary-hover); }
+.utility-button-secondary { background: var(--utility-secondary); color: var(--utility-on-secondary); border-color: var(--utility-secondary); }
+.utility-button-secondary:hover { background: var(--utility-secondary-hover); border-color: var(--utility-secondary-hover); }
+.utility-button-danger { background: var(--utility-danger); color: var(--utility-on-danger); border-color: var(--utility-danger); }
+.utility-button-ghost { background: transparent; color: var(--utility-text); box-shadow: none; }
+.utility-icon-button { width: 2.75rem; padding: 0; border-radius: var(--utility-radius-pill); }
+.utility-button:disabled, .utility-icon-button:disabled, .utility-disabled { opacity: .55; cursor: not-allowed; transform: none; }
+/* Theme-responsive component defaults */
+.utility-card, .utility-panel { background: var(--utility-card-bg); }
+.utility-toolbar, .utility-table-wrap { background: var(--utility-control-bg); }
+.utility-button:not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-warning):not(.utility-button-ghost):not(.utility-button-guarded), .utility-icon-button { background: var(--utility-control-bg); }
+.utility-button, .utility-icon-button, .utility-badge, .utility-nav-link { font-family: var(--utility-font-control); }
+/* =========================================================
+   Forms
+========================================================= */
+.utility-field { display: flex; flex-direction: column; gap: var(--utility-space-2); }
+.utility-label { color: var(--utility-text); font-size: .925rem; font-weight: 800; }
+.utility-input, .utility-textarea, .utility-select {
+  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--utility-surface-soft); color: var(--utility-text);
+  border: 1px solid var(--utility-border); border-radius: var(--utility-radius-md); font: inherit; outline: none;
+  transition: background var(--utility-transition-fast), border-color var(--utility-transition-fast), box-shadow var(--utility-transition-fast);
+}
+.utility-textarea { min-height: 8rem; resize: vertical; }
+.utility-input::placeholder, .utility-textarea::placeholder { color: var(--utility-text-muted); opacity: .82; }
+.utility-input:hover, .utility-textarea:hover, .utility-select:hover { border-color: rgb(var(--utility-primary-rgb) / .58); }
+.utility-input:focus, .utility-textarea:focus, .utility-select:focus { border-color: var(--utility-focus); box-shadow: var(--utility-focus-ring); }
+.utility-help-text { color: var(--utility-text-muted); font-size: .875rem; line-height: 1.45; }
+/* Checkbox / Radio */
+.utility-check, .utility-radio { display: inline-flex; align-items: center; gap: var(--utility-space-2); color: var(--utility-text); cursor: pointer; }
+.utility-check input, .utility-radio input { position: absolute; opacity: 0; pointer-events: none; }
+.utility-check-control, .utility-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--utility-surface-soft); border: 1px solid var(--utility-border); transition: background var(--utility-transition-fast), box-shadow var(--utility-transition-fast); }
+.utility-check-control { border-radius: var(--utility-radius-xs); }
+.utility-radio-control { border-radius: 50%; }
+.utility-check input:checked + .utility-check-control, .utility-radio input:checked + .utility-radio-control { background: var(--utility-primary); border-color: var(--utility-primary); box-shadow: var(--utility-focus-ring); }
+.utility-check input:checked + .utility-check-control::after { content: "✓"; color: var(--utility-on-primary); font-size: .9rem; font-weight: 900; }
+.utility-radio input:checked + .utility-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--utility-on-primary); border-radius: 50%; }
+/* Switch */
+.utility-switch { display: inline-flex; align-items: center; gap: var(--utility-space-3); color: var(--utility-text); cursor: pointer; }
+.utility-switch input { position: absolute; opacity: 0; pointer-events: none; }
+.utility-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--utility-surface-soft); border: 1px solid var(--utility-border); border-radius: var(--utility-radius-pill); transition: background var(--utility-transition-fast), box-shadow var(--utility-transition-fast); }
+.utility-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--utility-surface-strong); border: 1px solid var(--utility-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--utility-shadow-alpha)); transition: left var(--utility-transition-fast), background var(--utility-transition-fast); }
+.utility-switch input:checked + .utility-switch-track { background: var(--utility-primary); border-color: var(--utility-primary); }
+.utility-switch input:checked + .utility-switch-track .utility-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--utility-on-primary); }
+/* =========================================================
+   Badges / Nav / Progress / Alerts / Tables
+========================================================= */
+.utility-badge { display: inline-flex; align-items: center; gap: var(--utility-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--utility-surface-soft); color: var(--utility-text); border: 1px solid var(--utility-border); border-radius: var(--utility-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
+.utility-badge-primary { background: var(--utility-primary); color: var(--utility-on-primary); border-color: var(--utility-primary); }
+.utility-badge-secondary { background: var(--utility-secondary); color: var(--utility-on-secondary); border-color: var(--utility-secondary); }
+.utility-badge-success { background: var(--utility-success); color: var(--utility-on-success); border-color: var(--utility-success); }
+.utility-badge-warning { background: var(--utility-warning); color: var(--utility-on-warning); border-color: var(--utility-warning); }
+.utility-badge-danger { background: var(--utility-danger); color: var(--utility-on-danger); border-color: var(--utility-danger); }
+.utility-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--utility-space-2); padding: var(--utility-space-2); background: var(--utility-surface); border: 1px solid var(--utility-border); border-radius: var(--utility-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--utility-shadow-alpha)); }
+.utility-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--utility-text-muted); border-radius: var(--utility-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--utility-transition-fast), background var(--utility-transition-fast), box-shadow var(--utility-transition-fast); }
+.utility-nav-link:hover { color: var(--utility-text); background: var(--utility-surface-soft); }
+.utility-nav-link[aria-current="page"], .utility-nav-link.is-active { color: var(--utility-on-primary); background: var(--utility-primary); }
+/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
+.utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
+  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .55rem .75rem;
+  background: var(--utility-text); color: var(--utility-bg); border: 1px solid var(--utility-border); border-radius: var(--utility-radius-md);
+  box-shadow: 0 .75rem 1.6rem rgb(15 23 42 / .24); font-size: .82rem; font-weight: 850; line-height: 1.35;
+}
+.utility-tooltip-arrow { inline-size: .55rem; block-size: .55rem; flex: 0 0 auto; background: currentColor; border-radius: .12rem; opacity: .9; transform: rotate(45deg); }
+.utility-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--utility-surface-soft); border: 1px solid var(--utility-border); border-radius: var(--utility-radius-pill); }
+.utility-progress-bar { height: 100%; width: var(--utility-progress-value, 50%); background: linear-gradient(90deg, var(--utility-primary), var(--utility-accent)); border-radius: inherit; }
+.utility-alert { display: grid; gap: var(--utility-space-2); padding: var(--utility-space-4); background: var(--utility-surface); color: var(--utility-text); border: 1px solid var(--utility-border); border-radius: var(--utility-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--utility-shadow-alpha)); }
+.utility-alert-success { border-left-color: var(--utility-success); }
+.utility-alert-warning { border-left-color: var(--utility-warning); }
+.utility-alert-danger { border-left-color: var(--utility-danger); }
+.utility-alert-title { margin: 0; font-weight: 900; }
+.utility-alert-body { margin: 0; color: var(--utility-text-muted); line-height: 1.55; }
+.utility-table-wrap { overflow: auto; }
+.utility-table { width: 100%; border-collapse: collapse; }
+.utility-table th, .utility-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--utility-border); }
+.utility-table th { color: var(--utility-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--utility-primary-rgb) / .08); }
+.utility-table td { color: var(--utility-text-muted); }
+.utility-table tr:hover td { background: rgb(var(--utility-primary-rgb) / .045); }
+/* =========================================================
+   Utilities
+========================================================= */
+.utility-text-primary { color: var(--utility-primary); } .utility-text-secondary { color: var(--utility-secondary); } .utility-text-accent { color: var(--utility-accent); } .utility-text-success { color: var(--utility-success); } .utility-text-warning { color: var(--utility-warning); } .utility-text-danger { color: var(--utility-danger); }
+.utility-bg-primary { background: var(--utility-primary); color: var(--utility-on-primary); } .utility-bg-secondary { background: var(--utility-secondary); color: var(--utility-on-secondary); }
+.utility-border { border: 1px solid var(--utility-border); } .utility-rounded { border-radius: var(--utility-radius-md); } .utility-rounded-lg { border-radius: var(--utility-radius-lg); } .utility-rounded-xl { border-radius: var(--utility-radius-xl); } .utility-pill { border-radius: var(--utility-radius-pill); }
+.utility-sr-only, .utility-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
+.utility-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--utility-primary); color: var(--utility-on-primary); border-radius: var(--utility-radius-md); font-weight: 900; }
+.utility-skip-link:focus { transform: translateY(0); }
+/* Minimal SaaS-specific product helpers */
+.utility-metric { display: grid; gap: .25rem; padding: var(--utility-space-5); background: var(--utility-surface); border: 1px solid var(--utility-border); border-radius: var(--utility-radius-lg); }
+.utility-metric-value { color: var(--utility-text); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 850; line-height: 1; letter-spacing: -.04em; }
+.utility-metric-label { color: var(--utility-text-muted); font-size: .9rem; font-weight: 700; }
+.utility-empty-state { display: grid; place-items: center; gap: var(--utility-space-3); min-height: 14rem; padding: var(--utility-space-6); text-align: center; background: var(--utility-surface-soft); border: 1px dashed var(--utility-border); border-radius: var(--utility-radius-lg); }
+.utility-spinner, .utility-loading-spinner, [data-ui="industrial-utility"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
+  display: inline-block;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border: .25rem solid var(--utility-spinner-track);
+  border-block-start-color: var(--utility-spinner-stroke);
+  border-inline-end-color: var(--utility-spinner-accent);
+  border-radius: 50%;
+  vertical-align: -.2em;
+  animation: utility-spin .75s linear infinite;
+}
+.utility-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .16rem; }
+.utility-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .32rem; }
+.utility-button[aria-busy="true"], .utility-icon-button[aria-busy="true"], [data-ui="industrial-utility"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
+.utility-button[aria-busy="true"]::after, .utility-icon-button[aria-busy="true"]::after, [data-ui="industrial-utility"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
+  content: "";
+  display: inline-block;
+  inline-size: 1em;
+  block-size: 1em;
+  border: .16em solid rgb(var(--utility-primary-text-rgb) / .42);
+  border-block-start-color: currentColor;
+  border-radius: 50%;
+  animation: utility-spin .75s linear infinite;
+}
+@keyframes utility-spin { to { transform: rotate(360deg); } }
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+.utility-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid rgb(var(--utility-border-rgb) / .72);
+  border-radius: var(--utility-radius-lg);
+}
+.utility-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--utility-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.utility-card-service > .utility-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.utility-card-service > .utility-card-media + .utility-icon-medallion { margin-block-start: -2.15rem; }
+.utility-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--utility-space-4);
+  align-items: start;
+}
+.utility-card-accent-edge {
+  border-inline-start: .35rem solid var(--utility-primary);
+}
+.utility-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--utility-primary);
+  color: var(--utility-on-primary);
+  border: 2px solid rgb(var(--utility-border-rgb) / .82);
+  border-radius: 50%;
+  line-height: 1;
+}
+.utility-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+.utility-button.utility-button-cut,
+.utility-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
+}
+.utility-button.utility-button-cut:focus-visible,
+.utility-button-cut:focus-visible { outline-offset: -3px; }
+.utility-button.utility-button-outline-heavy,
+.utility-button-outline-heavy {
+  background: transparent;
+  color: var(--utility-primary);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--utility-primary);
+  box-shadow: none;
+}
+.utility-button.utility-button-outline-heavy:hover,
+.utility-button-outline-heavy:hover {
+  background: var(--utility-primary);
+  color: var(--utility-on-primary);
+  border-color: var(--utility-primary-hover);
+}
+.utility-badge-seal {
+  display: inline-grid;
+  place-items: center;
+  align-content: center;
+  inline-size: 5rem;
+  min-inline-size: 5rem;
+  aspect-ratio: 1;
+  padding: .65rem;
+  background: var(--utility-surface-strong);
+  color: var(--utility-text);
+  border: 2px solid var(--utility-primary);
+  border-radius: 50%;
+  text-align: center;
+  font-family: var(--utility-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+}
+.utility-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  background: var(--utility-card-bg);
+  color: var(--utility-text);
+  border: 1px solid var(--utility-border);
+  border-radius: var(--utility-radius-lg);
+}
+.utility-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--utility-space-3);
+  min-inline-size: 0;
+  padding: var(--utility-space-4);
+  border-inline-end: 1px solid rgb(var(--utility-border-rgb) / .62);
+}
+.utility-feature-item:last-child { border-inline-end: 0; }
+.utility-feature-item > :where(p, small) { margin: 0; color: var(--utility-text-muted); }
+.utility-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--utility-space-4);
+  padding: var(--utility-space-4) var(--utility-space-5);
+  background: var(--utility-card-bg);
+  color: var(--utility-text);
+  border: 1px solid var(--utility-border);
+  border-radius: var(--utility-radius-lg);
+}
+.utility-callout-bar > :where(p, div) { min-inline-size: 0; }
+.utility-callout-bar > :where(.utility-button, a, button):last-child { justify-self: end; }
+.utility-eyebrow {
+  margin: 0;
+  color: var(--utility-primary);
+  font-family: var(--utility-font-heading);
+  font-size: .76rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+.utility-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--utility-surface-soft);
+  border: 1px solid var(--utility-border);
+  border-radius: var(--utility-radius-lg);
+}
+.utility-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.utility-media-scrim > :where(figcaption, [data-media-caption]) {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: clamp(1rem, 4vw, 2rem);
+  color: #fff;
+  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
+}
+.utility-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+@media (max-width: 42rem) {
+  .utility-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .utility-callout-bar > :where(.utility-button, a, button):last-child { justify-self: stretch; }
+  .utility-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--utility-border-rgb) / .62); }
+  .utility-feature-item:last-child { border-block-end: 0; }
+}
+.utility-card-service, .utility-card-feature, .utility-feature-strip, .utility-callout-bar { box-shadow: 0 .9rem 2rem rgb(15 23 42 / calc(var(--utility-shadow-alpha) + .03)); }
+.utility-card-accent-edge { border-inline-start-width: .3rem; }
+.utility-icon-medallion { box-shadow: 0 .55rem 1.2rem rgb(15 23 42 / calc(var(--utility-shadow-alpha) + .05)); }
+/* =========================================================
+   Industrial Utility Identity
+========================================================= */
+:root {
+  --utility-font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
+  --utility-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
+  --utility-font-heading: var(--utility-font-display);
+  --utility-font-control: var(--utility-font-display);
+  --utility-radius-xs: .1rem;
+  --utility-radius-sm: .18rem;
+  --utility-radius-md: .28rem;
+  --utility-radius-lg: .38rem;
+  --utility-radius-xl: .5rem;
+}
+[data-ui="industrial-utility"] { letter-spacing: .01em; }
+[data-ui="industrial-utility"][data-mode] {
+  --utility-theme-bg: linear-gradient(90deg, rgb(var(--utility-border-rgb) / .1) 1px, transparent 1px), linear-gradient(rgb(var(--utility-border-rgb) / .08) 1px, transparent 1px), var(--utility-bg);
+  --utility-theme-bg-size: 3rem 3rem;
+  --utility-card-bg: linear-gradient(180deg, rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha)), rgb(var(--utility-surface-rgb) / var(--utility-panel-alpha)));
+}
+.utility-title { font-size: clamp(2.35rem, 6vw, 4.7rem); font-weight: 950; line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
+.utility-heading, .utility-kicker, .utility-eyebrow, .utility-label, .utility-table th { text-transform: uppercase; letter-spacing: .075em; font-family: var(--utility-font-display); }
+.utility-subtitle, .utility-copy { line-height: 1.45; }
+.utility-surface, .utility-card, .utility-panel, .utility-toolbar, .utility-table-wrap { border-radius: var(--utility-radius-md); box-shadow: inset 0 0 0 1px rgb(var(--utility-surface-strong-rgb) / .35), 0 .65rem 1.4rem rgb(0 0 0 / calc(var(--utility-shadow-alpha) * .65)); }
+.utility-card, .utility-panel { padding: var(--utility-space-4); }
+.utility-toolbar { padding: var(--utility-space-3); }
+.utility-button, .utility-icon-button { border-radius: var(--utility-radius-sm); text-transform: uppercase; letter-spacing: .07em; font-weight: 900; }
+.utility-nav { border-radius: var(--utility-radius-sm); padding: .25rem; }
+.utility-nav-link { min-height: 2.1rem; border-radius: var(--utility-radius-xs); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
+.utility-input, .utility-textarea, .utility-select { border-radius: var(--utility-radius-sm); padding: .65rem .75rem; }
+.utility-badge { border-radius: var(--utility-radius-xs); text-transform: uppercase; letter-spacing: .07em; }
+.utility-table th, .utility-table td { padding: .65rem .72rem; }
+.utility-metric { border-radius: var(--utility-radius-sm); padding: var(--utility-space-4); }
+.utility-metric-value { font-family: var(--utility-font-display); font-weight: 900; }
+.utility-card-media, .utility-media-scrim, .utility-feature-strip, .utility-callout-bar { border-radius: var(--utility-radius-sm); }
+.utility-icon-medallion, .utility-badge-seal { border-radius: var(--utility-radius-sm); box-shadow: inset 0 0 0 1px rgb(var(--utility-primary-rgb) / .18); }
+.utility-feature-item { padding: var(--utility-space-3); }
+.utility-card-accent-edge { border-inline-start-width: .28rem; }
+/* Filled and framed actions share an octagonal machine-control plate. */
+.utility-button.utility-button-cut, .utility-button-cut {
+  min-block-size: 2.75rem;
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: start;
+  justify-content: center;
+  clip-path: polygon(.62rem 0, calc(100% - .62rem) 0, 100% .62rem, 100% calc(100% - .62rem), calc(100% - .62rem) 100%, .62rem 100%, 0 calc(100% - .62rem), 0 .62rem);
+}
+.utility-button.utility-button-outline-heavy, .utility-button-outline-heavy {
+  border-width: 2px;
+  border-radius: 0;
+  clip-path: polygon(.45rem 0, calc(100% - .45rem) 0, 100% .45rem, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, .45rem 100%, 0 calc(100% - .45rem), 0 .45rem);
+  box-shadow: inset .28rem 0 0 rgb(var(--utility-primary-rgb) / .24);
+}
+/* Marketing and native surfaces use equipment borders and an inset status rail. */
+.utility-card-service, .utility-media-scrim, .utility-feature-strip, .utility-callout-bar, .utility-metric {
+  border: 2px solid var(--utility-border);
+  border-radius: var(--utility-radius-sm);
+  box-shadow: inset .34rem 0 0 rgb(var(--utility-primary-rgb) / .24);
+}
+[data-ui="industrial-utility"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  border: 2px solid var(--utility-primary);
+  border-radius: var(--utility-radius-sm);
+  box-shadow: inset .28rem 0 0 rgb(var(--utility-primary-rgb) / .24);
+}
+[data-ui="industrial-utility"][data-mode] :where(dialog) {
+  border: 2px solid var(--utility-border);
+  border-radius: var(--utility-radius-sm);
+  box-shadow: inset .4rem 0 0 rgb(var(--utility-primary-rgb) / .26), 0 1rem 2rem rgb(var(--utility-text-rgb) / .2);
+}
+/* Industrial Utility loaders use an octagonal hazard-control rotor. */
+.utility-spinner, .utility-loading-spinner, [data-ui="industrial-utility"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
+  border-radius: 0; background: conic-gradient(var(--utility-spinner-stroke) 0 12.5%, transparent 0 25%, var(--utility-spinner-accent) 0 37.5%, transparent 0 50%, var(--utility-spinner-stroke) 0 62.5%, transparent 0 75%, var(--utility-spinner-accent) 0 87.5%, transparent 0); box-shadow: inset 0 0 0 .18rem var(--utility-surface), .16rem .16rem 0 rgb(var(--utility-border-rgb) / .6); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); animation: utility-spin .8s steps(8, end) infinite;
+}
+.utility-button[aria-busy="true"]::after, .utility-icon-button[aria-busy="true"]::after, [data-ui="industrial-utility"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
+  border: .11em solid currentColor; border-radius: 0; background: conic-gradient(currentColor 0 12.5%, transparent 0 25%, currentColor 0 37.5%, transparent 0 50%, currentColor 0 62.5%, transparent 0 75%, currentColor 0 87.5%, transparent 0); box-shadow: inset 0 0 0 .12em rgb(0 0 0 / .16); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); animation: utility-spin .8s steps(8, end) infinite;
+}
+/**
+ * Final Industrial Utility fidelity layer.
+ * Uses raised metal frames, recessed instruments, and calibrated safety rails.
+ */
+[data-ui="industrial-utility"][data-mode] {
+  --usk-native-font-control: "Arial Narrow", Bahnschrift, "Segoe UI", sans-serif;
+  --usk-native-control-min-block-size: 2.72rem;
+  --usk-native-control-padding-block: .6rem;
+  --usk-native-control-padding-inline: .9rem;
+  --usk-native-border-width: 2px;
+  --usk-native-radius-sm: .12rem;
+  --usk-native-radius: .2rem;
+  --usk-native-radius-lg: .3rem;
+  --usk-native-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .72), 0 2px 0 rgb(var(--utility-text-rgb) / .28);
+  --usk-native-shadow-md: inset 0 0 0 1px rgb(var(--utility-surface-strong-rgb) / .5), 0 .55rem 1rem rgb(var(--utility-text-rgb) / .2);
+  --usk-native-focus-ring: 0 0 0 2px var(--utility-surface), 0 0 0 4px var(--utility-focus);
+  --usk-native-subcontrol-padding-block: .46rem;
+  --usk-native-subcontrol-padding-inline: .66rem;
+  --usk-native-choice-size: 1.22rem;
+  --usk-native-choice-background: linear-gradient(180deg, var(--utility-surface-strong), var(--utility-control-bg));
+  --usk-native-choice-border: 2px solid var(--utility-border);
+  --usk-native-checkbox-radius: .08rem;
+  --usk-native-radio-radius: 50%;
+  --usk-native-choice-shadow: inset 0 2px 3px rgb(var(--utility-text-rgb) / .22);
+  --usk-native-choice-checked-background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary));
+  --usk-native-choice-mark-color: var(--utility-on-primary);
+  --usk-native-select-indicator-image: linear-gradient(60deg, transparent 48%, var(--utility-text) 48% 58%, transparent 58%), linear-gradient(120deg, transparent 48%, var(--utility-text) 48% 58%, transparent 58%);
+  --usk-native-select-indicator-size: .52rem .52rem, .52rem .52rem;
+  --usk-native-select-indicator-position: calc(100% - 1.06rem) 50%, calc(100% - .7rem) 50%;
+  --usk-native-select-padding-inline-end: 2.3rem;
+  --usk-native-range-track-size: .64rem;
+  --usk-native-range-track-background: linear-gradient(90deg, var(--utility-success) 0 58%, var(--utility-warning) 58% 78%, var(--utility-danger) 78%);
+  --usk-native-range-track-border: 2px inset var(--utility-border);
+  --usk-native-range-track-radius: .06rem;
+  --usk-native-range-track-shadow: inset 0 2px 3px rgb(var(--utility-text-rgb) / .3);
+  --usk-native-range-progress-background: linear-gradient(90deg, var(--utility-success), var(--utility-primary));
+  --usk-native-range-thumb-size: 1.26rem;
+  --usk-native-range-thumb-background: linear-gradient(90deg, var(--utility-surface), var(--utility-surface-strong), var(--utility-surface));
+  --usk-native-range-thumb-border: 2px outset var(--utility-border);
+  --usk-native-range-thumb-radius: .1rem;
+  --usk-native-range-thumb-shadow: 1px 2px 0 rgb(var(--utility-text-rgb) / .3);
+  --usk-native-progress-size: .82rem;
+  --usk-native-progress-track-background: var(--utility-control-bg);
+  --usk-native-progress-track-border: 2px inset var(--utility-border);
+  --usk-native-progress-track-radius: .06rem;
+  --usk-native-progress-track-shadow: inset 0 2px 4px rgb(var(--utility-text-rgb) / .32);
+  --usk-native-progress-value-background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary));
+  --usk-native-progress-value-radius: .03rem;
+  --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .42);
+  --usk-native-scrollbar-size: .86rem;
+  --usk-native-scrollbar-track: linear-gradient(90deg, var(--utility-control-bg), var(--utility-surface));
+  --usk-native-scrollbar-thumb: linear-gradient(90deg, var(--utility-surface), var(--utility-primary), var(--utility-surface));
+  --usk-native-scrollbar-radius: .08rem;
+}
+.utility-title { margin-block: .75rem; font-weight: 950; letter-spacing: max(.04em, .5px); }
+.utility-label { font-size: .74rem; font-weight: 900; }
+.utility-card, .utility-panel { padding: 1rem; background: linear-gradient(180deg, var(--utility-surface-strong), var(--utility-card-bg)); border: 3px double var(--utility-border); border-radius: .28rem; box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .8), 0 .45rem .9rem rgb(var(--utility-text-rgb) / .2); }
+.utility-well, .utility-inset { padding: .76rem; background: var(--utility-control-bg); border: 2px inset var(--utility-border); border-radius: .12rem; box-shadow: inset 0 3px 6px rgb(var(--utility-text-rgb) / .25); }
+.utility-button, .utility-icon-button { min-height: 2.72rem; padding: .6rem .9rem; background: linear-gradient(180deg, var(--utility-surface-strong), transparent), var(--utility-control-bg); border: 2px outset var(--utility-border); border-radius: .12rem; box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .82), 0 2px 0 rgb(var(--utility-text-rgb) / .3); font-weight: 900; }
+.utility-button:active, .utility-button[aria-pressed="true"], .utility-button.is-active { transform: translateY(2px); border-style: inset; box-shadow: inset 0 3px 6px rgb(var(--utility-text-rgb) / .3); }
+.utility-input, .utility-textarea, .utility-select { min-height: 2.45rem; padding: .5rem .68rem; background: var(--utility-control-bg); border: 2px inset var(--utility-border); border-radius: .1rem; box-shadow: inset 0 2px 4px rgb(var(--utility-text-rgb) / .2); }
+.utility-nav, .utility-toolbar { border: 3px double var(--utility-border); border-radius: .22rem; box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .7); }
+.utility-nav-link { border-radius: .08rem; border-block-end: 2px solid transparent; }
+.utility-badge { min-height: 1.58rem; padding: .28rem .5rem; border: 2px outset var(--utility-border); border-radius: .08rem; box-shadow: 1px 2px 0 rgb(var(--utility-text-rgb) / .24); }
+.utility-alert { padding: .72rem .84rem; background: linear-gradient(180deg, var(--utility-surface-strong), var(--utility-surface)); border: 2px solid var(--utility-border); border-radius: .18rem; box-shadow: inset .35rem 0 0 currentColor, 0 3px 0 rgb(var(--utility-text-rgb) / .2); }
+.utility-progress { height: .82rem; background: var(--utility-control-bg); border: 2px inset var(--utility-border); border-radius: .06rem; }
+.utility-progress-bar { background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary)); border-radius: .03rem; box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .42); }
+.utility-table-wrap { background: var(--utility-card-bg); border: 3px double var(--utility-border); border-radius: .24rem; box-shadow: 0 .45rem .9rem rgb(var(--utility-text-rgb) / .18); }
+.utility-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
+.utility-table th { padding: .58rem .66rem; background: linear-gradient(180deg, var(--utility-surface-strong), var(--utility-surface-soft)); border: 1px solid var(--utility-border); font-weight: 900; }
+.utility-table td { padding: .54rem .66rem; border: 1px solid var(--utility-border); }
+.utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { border: 2px outset var(--utility-border); border-radius: .12rem; box-shadow: 0 3px 0 rgb(var(--utility-text-rgb) / .26); }
+.utility-card-service, .utility-card-feature, .utility-media-scrim, .utility-feature-strip, .utility-callout-bar { border: 3px double var(--utility-border); border-radius: .24rem; box-shadow: inset .32rem 0 0 rgb(var(--utility-primary-rgb) / .3), 0 .45rem .9rem rgb(var(--utility-text-rgb) / .18); }
+/* A safety-green metal wash and fine grain keep the operator console physical. */
+[data-ui="industrial-utility"][data-mode] {
+  --usk-native-card-bg: repeating-linear-gradient(90deg, rgb(var(--utility-text-rgb) / .035) 0 1px, transparent 1px 6px), linear-gradient(rgb(var(--utility-success-rgb) / .12), rgb(var(--utility-success-rgb) / .12)), var(--utility-surface);
+  --usk-native-control-bg: linear-gradient(180deg, var(--utility-surface-strong) 0 45%, var(--utility-surface-soft) 45% 100%);
+}
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="industrial-utility"][data-mode] {
+    --usk-native-control-bg: linear-gradient(180deg, var(--utility-surface-strong) 0 45%, color-mix(in srgb, var(--utility-surface-soft) 82%, var(--utility-text)) 45% 100%);
+  }
+}
+.utility-panel,
+.utility-card-service,
+.utility-feature-strip,
+.utility-callout-bar {
+  background:
+    repeating-linear-gradient(
+      90deg,
+      rgb(var(--utility-text-rgb) / .035) 0 1px,
+      transparent 1px 6px
+    ),
+    linear-gradient(rgb(var(--utility-success-rgb) / .12), rgb(var(--utility-success-rgb) / .12)),
+    var(--utility-card-bg);
+}
+[data-ui="industrial-utility"][data-mode] :where(fieldset, article, aside) {
+  background: repeating-linear-gradient(90deg, rgb(var(--utility-text-rgb) / .035) 0 1px, transparent 1px 6px), linear-gradient(rgb(var(--utility-success-rgb) / .12), rgb(var(--utility-success-rgb) / .12)), var(--utility-surface);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] *::before, [data-ui="industrial-utility"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
+}
+@media (prefers-contrast: more) {
+  [data-ui="industrial-utility"] { --utility-border-alpha: 1; --utility-focus-alpha: .75; }
+}
+@media (forced-colors: active) {
+  @supports (forced-color-adjust: auto) { [data-ui="industrial-utility"] * { forced-color-adjust: auto; } }
+  [data-ui="industrial-utility"] :where(:focus-visible) { outline: 3px solid CanvasText; }
+}
+@media print {
+  [data-ui="industrial-utility"] { background: #fff !important; color: #000 !important; }
+  [data-ui="industrial-utility"] * { box-shadow: none !important; text-shadow: none !important; }
+  [data-ui="industrial-utility"] a { color: #000 !important; text-decoration: underline; }
+}
+}
+@layer ui-style-kit.industrial_utility {
+/* Keeps semantic field states above preset-specific material paint. */
+.utility-input[aria-invalid="true"], .utility-textarea[aria-invalid="true"], .utility-select[aria-invalid="true"] { border-color: var(--utility-danger); box-shadow: 0 0 0 2px rgb(var(--utility-danger-rgb) / .2); }
+.utility-input[readonly], .utility-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+/* Restores semantic action paint after identity-specific geometry. */
+.utility-button-primary { background: var(--utility-primary); color: var(--utility-on-primary); border-color: var(--utility-primary); }
+.utility-button-secondary { background: var(--utility-secondary); color: var(--utility-on-secondary); border-color: var(--utility-secondary); }
+.utility-button-danger { background: var(--utility-danger); color: var(--utility-on-danger); border-color: var(--utility-danger); }
+.utility-button-ghost { background: transparent; color: var(--utility-primary); border-color: transparent; }
+}
+@layer ui-style-kit.industrial_utility {
+/* Shared annotation fidelity: readable display rhythm and appropriately scaled text icons. */
+.utility-feature-item > .utility-icon-medallion { font-size: 1.5rem; line-height: 1; }
+.utility-callout-bar > .utility-icon-medallion { min-inline-size: 4.5rem; min-block-size: 4.5rem; font-size: 2rem; font-weight: 800; line-height: 1; }
+}
+@layer ui-style-kit.industrial_utility {
+/** Industrial reference material mapped into the host semantic token contract. */
+[data-ui="industrial-utility"][data-mode="dark"] {
+  --utility-fallback-bg-rgb: 11 17 19;
+  --utility-fallback-surface-rgb: 24 33 36;
+  --utility-fallback-surface-strong-rgb: 34 44 47;
+  --utility-fallback-surface-soft-rgb: 14 21 23;
+  --utility-fallback-text-rgb: 214 217 213;
+  --utility-fallback-text-muted-rgb: 169 176 174;
+  --utility-fallback-border-rgb: 96 106 109;
+  --utility-fallback-primary-rgb: 244 194 13;
+  --utility-fallback-primary-hover-rgb: 255 213 47;
+  --utility-fallback-primary-text-rgb: 17 20 22;
+  --utility-fallback-secondary-rgb: 104 113 116;
+  --utility-fallback-secondary-text-rgb: 255 255 255;
+  --utility-fallback-accent-rgb: 95 157 204;
+  --utility-fallback-accent-text-rgb: 0 0 0;
+  --utility-fallback-success-rgb: 117 196 71;
+  --utility-fallback-success-text-rgb: 0 0 0;
+  --utility-fallback-warning-rgb: 244 194 13;
+  --utility-fallback-warning-text-rgb: 17 20 22;
+  --utility-fallback-danger-rgb: 199 58 35;
+  --utility-fallback-danger-text-rgb: 255 244 236;
+  --utility-fallback-link-rgb: 95 157 204;
+  --utility-fallback-focus-rgb: 244 194 13;
+  --utility-material-steel: rgb(var(--usk-border-rgb, 104 113 116));
+  --utility-material-steel-light: rgb(var(--usk-surface-strong-rgb, 161 168 167));
+  --utility-material-input: rgb(var(--usk-surface-rgb, 17 25 27));
+  --utility-material-header: rgb(var(--usk-industrial-header-rgb, 12 18 20));
+  --utility-material-shadow-opacity: .48;
+}
+[data-ui="industrial-utility"][data-mode="light"] {
+  --utility-fallback-bg-rgb: 201 198 189;
+  --utility-fallback-surface-rgb: 231 227 217;
+  --utility-fallback-surface-strong-rgb: 242 239 231;
+  --utility-fallback-surface-soft-rgb: 195 193 186;
+  --utility-fallback-text-rgb: 30 35 37;
+  --utility-fallback-text-muted-rgb: 69 75 76;
+  --utility-fallback-border-rgb: 104 108 107;
+  --utility-fallback-primary-rgb: 242 183 5;
+  --utility-fallback-primary-hover-rgb: 255 213 47;
+  --utility-fallback-primary-text-rgb: 18 23 25;
+  --utility-fallback-secondary-rgb: 119 123 122;
+  --utility-fallback-secondary-text-rgb: 0 0 0;
+  --utility-fallback-accent-rgb: 60 112 151;
+  --utility-fallback-accent-text-rgb: 255 255 255;
+  --utility-fallback-success-rgb: 77 143 45;
+  --utility-fallback-success-text-rgb: 0 0 0;
+  --utility-fallback-warning-rgb: 242 183 5;
+  --utility-fallback-warning-text-rgb: 18 23 25;
+  --utility-fallback-danger-rgb: 185 39 23;
+  --utility-fallback-danger-text-rgb: 255 249 245;
+  --utility-fallback-link-rgb: 60 112 151;
+  --utility-fallback-focus-rgb: 155 101 0;
+  --utility-material-steel: rgb(var(--usk-border-rgb, 119 123 122));
+  --utility-material-steel-light: rgb(var(--usk-surface-strong-rgb, 252 250 244));
+  --utility-material-input: rgb(var(--usk-surface-rgb, 239 237 230));
+  --utility-material-header: rgb(var(--usk-industrial-header-rgb, 23 32 35));
+  --utility-material-shadow-opacity: .28;
+}
+[data-ui="industrial-utility"][data-mode] {
+  --utility-font-display: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", sans-serif;
+  --utility-font-body: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
+  --utility-font-mono: "DejaVu Sans Mono", Consolas, monospace;
+  --utility-material-font-display: var(--utility-font-display);
+  --utility-material-font-body: var(--utility-font-body);
+  --utility-material-font-mono: var(--utility-font-mono);
+  --utility-material-radius: 2px;
+  --utility-material-control-height: 34px;
+  --utility-material-speed: 110ms;
+  --utility-material-ease: cubic-bezier(.2, .8, .2, 1);
+  --utility-material-canvas: var(--utility-bg);
+  --utility-material-shell: var(--utility-surface);
+  --utility-material-surface: var(--utility-surface);
+  --utility-material-surface-raised: var(--utility-surface-strong);
+  --utility-material-surface-low: var(--utility-surface-soft);
+  --utility-material-text: var(--utility-text);
+  --utility-material-text-soft: var(--utility-text-muted);
+  --utility-material-muted: var(--utility-text-muted);
+  --utility-material-line: rgb(var(--utility-border-rgb) / .6);
+  --utility-material-line-strong: var(--utility-border);
+  --utility-material-steel-dark: rgb(var(--usk-industrial-bezel-rgb, 52 57 58));
+  --utility-material-header-ink: rgb(var(--usk-industrial-header-text-rgb, 234 238 235));
+  --utility-material-header-muted: rgb(var(--usk-industrial-header-text-rgb, 177 190 187));
+  --utility-material-safety-amber: var(--utility-primary);
+  --utility-material-safety-ink: var(--utility-on-primary);
+  --utility-material-warning: var(--utility-warning);
+  --utility-material-hazard-red: var(--utility-danger);
+  --utility-material-hazard-ink: var(--utility-on-danger);
+  --utility-material-lamp-green: var(--utility-success);
+  --utility-material-lamp-blue: var(--utility-accent);
+  --utility-material-off: var(--utility-border);
+  --utility-material-focus: var(--utility-focus);
+  --utility-material-bevel: 0 1px 0 rgb(255 255 255 / .17), 0 3px 6px rgb(0 0 0 / var(--utility-material-shadow-opacity, .48)), inset 0 1px 0 rgb(255 255 255 / .25), inset 0 -2px 0 rgb(0 0 0 / .25);
+  --utility-material-inset-shadow: inset 0 2px 4px rgb(0 0 0 / .28), 0 1px 0 rgb(255 255 255 / .1);
+  --utility-material-panel-shadow: 0 3px 8px rgb(0 0 0 / .2), inset 0 1px 0 rgb(255 255 255 / .15);
+  --utility-material-lamp-glow: 0 0 8px rgb(var(--utility-success-rgb) / .45);
+  --utility-material-primary-top: var(--utility-primary);
+  --utility-material-danger-top: var(--utility-danger);
+  --utility-material-readout-ink: rgb(var(--usk-industrial-readout-text-rgb, 156 232 121));
+  --utility-material-badge-success: rgb(var(--usk-success-rgb, 52 95 38));
+  --utility-material-badge-success-ink: rgb(var(--usk-success-text-rgb, 223 245 211));
+  --utility-material-badge-info: rgb(var(--usk-accent-rgb, 49 85 113));
+  --utility-material-badge-info-ink: rgb(var(--usk-accent-text-rgb, 229 244 255));
+  --utility-material-badge-warning: rgb(var(--usk-warning-rgb, 133 95 6));
+  --utility-material-badge-warning-ink: rgb(var(--usk-warning-text-rgb, 255 242 192));
+  --utility-material-badge-danger: rgb(var(--usk-danger-rgb, 132 32 19));
+  --utility-material-badge-danger-ink: rgb(var(--usk-danger-text-rgb, 255 240 235));
+  --utility-theme-bg: var(--utility-bg);
+  --utility-radius-xs: 1px;
+  --utility-radius-sm: 2px;
+  --utility-radius-md: 2px;
+  --usk-native-card-bg: var(--utility-material-surface);
+  --usk-native-control-bg: var(--utility-material-input);
+  --usk-native-control-border: 1px solid var(--utility-material-line-strong);
+  --usk-native-control-radius: 1px;
+  --usk-native-control-shadow: var(--utility-material-inset-shadow);
+  --usk-native-font-body: var(--utility-font-body);
+  --usk-native-font-heading: var(--utility-font-display);
+  --usk-native-font-control: var(--utility-font-display);
+}
+[data-ui="industrial-utility"] *,
+[data-ui="industrial-utility"] *::before,
+[data-ui="industrial-utility"] *::after {
+  box-sizing: border-box;
+}
+[data-ui="industrial-utility"] :focus-visible {
+  outline: 2px solid var(--utility-material-focus);
+  outline-offset: 2px;
+}
+[data-ui="industrial-utility"] a {
+  color: var(--utility-material-lamp-blue);
+  font-weight: 700;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+[data-ui="industrial-utility"] a:hover,
+[data-ui="industrial-utility"] a.is-hover {
+  color: var(--utility-material-warning);
+}
+.utility-panel,
+.utility-card,
+.utility-dialog,
+.utility-popover,
+.utility-toast {
+  background: var(--utility-material-surface);
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: var(--utility-material-radius);
+  box-shadow: var(--utility-material-panel-shadow);
+  position: relative;
+}
+.utility-panel::before,
+.utility-card::before,
+.utility-dialog::before {
+  border: 1px solid rgb(var(--utility-border-rgb) / .25);
+  border-radius: 1px;
+  content: "";
+  inset: 3px;
+  pointer-events: none;
+  position: absolute;
+}
+.utility-panel-header {
+  align-items: center;
+  background: var(--utility-material-header);
+  border-bottom: 1px solid var(--utility-material-steel-dark);
+  color: var(--utility-material-header-ink);
+  display: flex;
+  font: 800 12px/1 var(--utility-material-font-display);
+  gap: 8px;
+  height: 31px;
+  letter-spacing: 0;
+  padding: 0 10px;
+  position: relative;
+  text-transform: uppercase;
+}
+.utility-panel-header::before {
+  background: var(--utility-material-safety-amber);
+  box-shadow: inset 0 -2px 0 rgba(0,0,0,.22);
+  content: "";
+  height: 13px;
+  width: 4px;
+}
+.utility-panel-header small {
+  color: var(--utility-material-header-muted);
+  font: 600 8px var(--utility-material-font-mono);
+  letter-spacing: 0;
+  margin-left: auto;
+}
+.utility-panel-body {
+  padding: 10px;
+  position: relative;
+}
+.utility-rivet {
+  z-index: 1;
+  pointer-events: none;
+  background: radial-gradient(circle at 38% 35%, var(--utility-material-steel-light) 0 12%, var(--utility-material-steel) 35%, var(--utility-material-steel-dark) 72%);
+  border: 1px solid var(--utility-material-steel-dark);
+  border-radius: 50%;
+  box-shadow: 0 1px 1px rgba(0,0,0,.4);
+  height: 7px;
+  position: absolute;
+  width: 7px;
+}
+.utility-rivet.is-tl { left: 5px; top: 5px; }
+.utility-rivet.is-tr { right: 5px; top: 5px; }
+.utility-rivet.is-bl { bottom: 5px; left: 5px; }
+.utility-rivet.is-br { bottom: 5px; right: 5px; }
+.utility-label,
+.utility-overline,
+.utility-readout-label {
+  color: var(--utility-material-muted);
+  display: block;
+  font: 700 9px/1 var(--utility-material-font-display);
+  letter-spacing: 0;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+}
+[data-ui="industrial-utility"][data-mode] .utility-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+.utility-overline {
+  color: var(--utility-material-warning);
+  font-family: var(--utility-material-font-mono);
+  font-size: 8px;
+  letter-spacing: 0;
+}
+.utility-help {
+  color: var(--utility-material-muted);
+  font: 8px/1.3 var(--utility-material-font-body);
+  margin: 4px 0 0;
+}
+.utility-help.is-error { color: var(--utility-material-hazard-red); }
+.utility-field {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+.utility-input,
+.utility-select,
+.utility-textarea,
+[data-ui="industrial-utility"] input[type="text"],
+[data-ui="industrial-utility"] input[type="password"],
+[data-ui="industrial-utility"] input[type="search"],
+[data-ui="industrial-utility"] input[type="number"],
+[data-ui="industrial-utility"] input[type="date"],
+[data-ui="industrial-utility"] input[type="time"] {
+  appearance: none;
+  background: var(--utility-material-input);
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: 1px;
+  box-shadow: var(--utility-material-inset-shadow);
+  color: var(--utility-material-text);
+  font: 11px var(--utility-material-font-body);
+  height: var(--utility-material-control-height);
+  min-width: 0;
+  padding: 0 10px;
+  width: 100%;
+}
+.utility-input::placeholder,
+.utility-textarea::placeholder,
+[data-ui="industrial-utility"] input::placeholder {
+  color: var(--utility-material-muted);
+  opacity: .75;
+}
+.utility-input:hover,
+.utility-select:hover,
+.utility-textarea:hover,
+[data-ui="industrial-utility"] input:hover {
+  border-color: var(--utility-material-steel-light);
+}
+.utility-input:focus,
+.utility-select:focus,
+.utility-textarea:focus,
+[data-ui="industrial-utility"] input:focus {
+  border-color: var(--utility-material-focus);
+  box-shadow: var(--utility-material-inset-shadow), 0 0 0 1px var(--utility-material-focus);
+  outline: 2px solid var(--utility-material-focus);
+}
+.utility-input.is-error,
+.utility-textarea.is-error {
+  border-color: var(--utility-material-hazard-red);
+  box-shadow: var(--utility-material-inset-shadow), 0 0 0 1px var(--utility-material-hazard-red);
+}
+.utility-input:disabled,
+.utility-select:disabled,
+.utility-textarea:disabled,
+[data-ui="industrial-utility"] input:disabled {
+  cursor: not-allowed;
+  opacity: .47;
+}
+.utility-textarea,
+[data-ui="industrial-utility"] textarea {
+  min-height: 68px;
+  padding: 8px 10px;
+  resize: vertical;
+}
+.utility-select,
+[data-ui="industrial-utility"] select {
+  appearance: none;
+  background-color: var(--utility-material-input);
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--utility-material-text-soft) 50%),
+    linear-gradient(135deg, var(--utility-material-text-soft) 50%, transparent 50%);
+  background-position: calc(100% - 13px) 48%, calc(100% - 9px) 48%;
+  background-repeat: no-repeat;
+  background-size: 4px 4px, 4px 4px;
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: 1px;
+  box-shadow: var(--utility-material-inset-shadow);
+  color: var(--utility-material-text);
+  font: 11px var(--utility-material-font-body);
+  height: var(--utility-material-control-height);
+  padding: 0 28px 0 10px;
+  width: 100%;
+}
+.utility-file {
+  color: var(--utility-material-text-soft);
+  font: 10px var(--utility-material-font-body);
+  width: 100%;
+}
+.utility-file::file-selector-button {
+  background: var(--utility-material-surface-raised);
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: 1px;
+  box-shadow: var(--utility-material-bevel);
+  color: var(--utility-material-text);
+  cursor: pointer;
+  font: 800 9px var(--utility-material-font-display);
+  height: 30px;
+  margin-right: 9px;
+  padding: 0 12px;
+  text-transform: uppercase;
+}
+.utility-button {
+  align-items: center;
+  appearance: none;
+  background: linear-gradient(var(--utility-material-surface-raised), var(--utility-material-surface-low));
+  border: 1px solid var(--utility-material-steel-dark);
+  border-radius: 2px;
+  box-shadow: var(--utility-material-bevel);
+  color: var(--utility-material-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: 900 11px/1 var(--utility-material-font-display);
+  gap: 7px;
+  height: var(--utility-material-control-height);
+  justify-content: center;
+  letter-spacing: 0;
+  min-width: 84px;
+  padding: 0 14px;
+  text-transform: uppercase;
+  transition: filter var(--utility-material-speed) var(--utility-material-ease), transform 70ms linear, box-shadow 70ms linear;
+}
+.utility-button:hover,
+.utility-button.is-hover {
+  filter: brightness(1.1);
+}
+.utility-button:active,
+.utility-button.is-pressed {
+  box-shadow: inset 0 3px 5px rgba(0,0,0,.52), 0 1px 0 rgba(255,255,255,.12);
+  transform: translateY(2px);
+}
+.utility-button-primary {
+  background: linear-gradient(var(--utility-material-primary-top), var(--utility-material-safety-amber));
+  border-color: var(--utility-material-safety-amber);
+  color: var(--utility-material-safety-ink);
+}
+.utility-button-secondary {
+  background: linear-gradient(var(--utility-material-steel-light), var(--utility-material-steel));
+  border-color: var(--utility-material-steel-dark);
+  color: #131719;
+}
+[data-ui="industrial-utility"][data-mode="dark"] .utility-button-secondary {
+  background: linear-gradient(#7f898b, #4c5659);
+  color: #f4f5f2;
+}
+.utility-button-ghost {
+  background: transparent;
+  border-color: var(--utility-material-line-strong);
+  box-shadow: inset 0 0 0 1px rgb(var(--utility-border-rgb) / .15);
+}
+.utility-button-danger {
+  background: linear-gradient(var(--utility-material-danger-top), var(--utility-material-hazard-red));
+  border-color: var(--utility-material-hazard-red);
+  color: var(--utility-material-hazard-ink);
+}
+.utility-button-guarded {
+  background: repeating-linear-gradient(-45deg, var(--utility-material-safety-amber) 0 7px, #201f19 7px 14px);
+  border-color: #5b4b05;
+  color: #fff;
+  text-shadow: 0 1px 2px #000;
+}
+.utility-button-guarded > span {
+  background: rgba(20,22,21,.92);
+  padding: 5px 9px;
+}
+.utility-button:disabled,
+.utility-button.is-disabled {
+  cursor: not-allowed;
+  filter: grayscale(.7);
+  opacity: .42;
+}
+.utility-button.is-loading::before,
+.utility-spinner {
+  animation: utility-material-spin .85s linear infinite;
+  border: 2px solid rgb(var(--utility-text-rgb) / .28);
+  border-radius: 50%;
+  border-top-color: currentColor;
+  content: "";
+  height: 14px;
+  width: 14px;
+}
+@keyframes utility-material-spin { to { transform: rotate(360deg); } }
+.utility-control-grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.utility-control-cell {
+  align-items: center;
+  background: rgb(var(--utility-surface-soft-rgb) / .72);
+  border: 1px solid var(--utility-material-line);
+  box-shadow: var(--utility-material-inset-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  justify-content: center;
+  min-height: 76px;
+  padding: 8px;
+}
+.utility-control-cell > label,
+.utility-control-name {
+  color: var(--utility-material-muted);
+  font: 700 8px var(--utility-material-font-display);
+  letter-spacing: 0;
+  text-align: center;
+  text-transform: uppercase;
+}
+.utility-emergency-stop {
+  align-items: center;
+  appearance: none;
+  background: radial-gradient(circle at 40% 30%, var(--utility-material-danger-top), var(--utility-material-hazard-red) 56%, var(--utility-material-hazard-red) 100%);
+  border: 4px solid #5d6464;
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px #171c1d, 0 5px 7px rgba(0,0,0,.45), inset 0 2px 2px rgba(255,255,255,.32);
+  color: var(--utility-material-hazard-ink);
+  cursor: pointer;
+  display: inline-flex;
+  font: 900 9px/1 var(--utility-material-font-display);
+  height: 48px;
+  justify-content: center;
+  letter-spacing: 0;
+  text-shadow: 0 1px 1px #4c0802;
+  width: 48px;
+}
+.utility-emergency-stop:active,
+.utility-emergency-stop.is-pressed {
+  box-shadow: 0 0 0 3px #171c1d, 0 2px 2px rgba(0,0,0,.5), inset 0 4px 5px rgba(75,0,0,.72);
+  transform: translateY(2px);
+}
+.utility-key-switch {
+  appearance: none;
+  background: radial-gradient(circle, #9ba1a0 0 12%, #3f4748 13% 36%, #a8aeac 37% 47%, #2a3031 48% 68%, #111617 69%);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: 0 3px 6px rgba(0,0,0,.48), inset 0 1px 2px rgba(255,255,255,.45);
+  cursor: pointer;
+  height: 48px;
+  position: relative;
+  width: 48px;
+}
+.utility-key-switch::after {
+  background: #151b1c;
+  border: 1px solid #aab0ae;
+  border-radius: 2px;
+  content: "";
+  height: 8px;
+  left: 20px;
+  position: absolute;
+  top: 10px;
+  transform: rotate(-28deg);
+  transform-origin: 4px 14px;
+  width: 8px;
+}
+.utility-pilot-light {
+  align-items: center;
+  background: radial-gradient(circle at 40% 32%, #e7ffdc 0 7%, var(--utility-material-lamp-green) 28%, #183f11 78%);
+  border: 2px solid var(--utility-material-steel-dark);
+  border-radius: 50%;
+  box-shadow: var(--utility-material-lamp-glow), inset 0 1px 2px rgba(255,255,255,.42);
+  display: inline-flex;
+  height: 17px;
+  justify-content: center;
+  width: 17px;
+}
+.utility-pilot-light.is-blue {
+  background: radial-gradient(circle at 40% 32%, #e7f7ff 0 7%, var(--utility-material-lamp-blue) 28%, #14324a 78%);
+  box-shadow: 0 0 0 1px rgba(95,157,204,.2), 0 0 8px rgba(95,157,204,.55);
+}
+.utility-pilot-light.is-red {
+  background: radial-gradient(circle at 40% 32%, #ffe9df 0 7%, var(--utility-material-hazard-red) 28%, #541208 78%);
+  box-shadow: 0 0 0 1px rgba(199,58,35,.2), 0 0 8px rgba(199,58,35,.55);
+}
+.utility-pilot-light.is-off {
+  background: radial-gradient(circle at 40% 32%, #a7aeaa, var(--utility-material-off) 38%, #262d2e 78%);
+  box-shadow: inset 0 1px 2px rgba(255,255,255,.2);
+}
+.utility-check,
+.utility-radio {
+  align-items: center;
+  color: var(--utility-material-text-soft);
+  cursor: pointer;
+  display: inline-flex;
+  font: 10px var(--utility-material-font-body);
+  gap: 7px;
+}
+.utility-check input,
+.utility-radio input {
+  appearance: none;
+  background: var(--utility-material-input);
+  border: 1px solid var(--utility-material-line-strong);
+  box-shadow: var(--utility-material-inset-shadow);
+  height: 15px;
+  margin: 0;
+  width: 15px;
+}
+.utility-radio input { border-radius: 50%; }
+.utility-check input:checked {
+  background: var(--utility-material-lamp-green);
+  box-shadow: inset 0 0 0 3px var(--utility-material-input), var(--utility-material-lamp-glow);
+}
+.utility-radio input:checked {
+  background: var(--utility-material-lamp-green);
+  box-shadow: inset 0 0 0 4px var(--utility-material-input), var(--utility-material-lamp-glow);
+}
+.utility-check input:indeterminate {
+  background: linear-gradient(var(--utility-material-input) 40%, var(--utility-material-safety-amber) 40% 60%, var(--utility-material-input) 60%);
+}
+.utility-check input:disabled,
+.utility-radio input:disabled,
+.utility-check.is-disabled,
+.utility-radio.is-disabled { cursor: not-allowed; opacity: .42; }
+.utility-toggle {
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+}
+.utility-toggle input {
+  appearance: none;
+  background: linear-gradient(#303738, #777d7b);
+  border: 1px solid #262b2c;
+  border-radius: 18px;
+  box-shadow: var(--utility-material-inset-shadow);
+  cursor: pointer;
+  height: 24px;
+  margin: 0;
+  position: relative;
+  width: 48px;
+}
+.utility-toggle input::after {
+  background: radial-gradient(circle at 36% 28%, #fff, #aaaead 57%, #535a5a 100%);
+  border: 1px solid #323839;
+  border-radius: 50%;
+  box-shadow: 0 2px 3px rgba(0,0,0,.45);
+  content: "";
+  height: 20px;
+  left: 1px;
+  position: absolute;
+  top: 1px;
+  transition: left var(--utility-material-speed) var(--utility-material-ease);
+  width: 20px;
+}
+.utility-toggle input:checked {
+  background: linear-gradient(rgb(255 255 255 / .35), transparent), var(--utility-material-lamp-green);
+}
+.utility-toggle input:checked::after { left: 25px; }
+.utility-toggle input:disabled { opacity: .42; }
+.utility-toggle span {
+  color: var(--utility-material-text-soft);
+  font: 800 9px var(--utility-material-font-display);
+  text-transform: uppercase;
+}
+.utility-three-position {
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  box-shadow: var(--utility-material-inset-shadow);
+  display: inline-grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 3px;
+}
+.utility-three-position button {
+  background: transparent;
+  border: 0;
+  color: var(--utility-material-muted);
+  cursor: pointer;
+  font: 800 8px var(--utility-material-font-display);
+  min-width: 42px;
+  padding: 7px 8px;
+  text-transform: uppercase;
+}
+.utility-three-position button.is-active {
+  background: var(--utility-material-safety-amber);
+  box-shadow: var(--utility-material-bevel);
+  color: var(--utility-material-safety-ink);
+}
+.utility-slider,
+[data-ui="industrial-utility"] input[type="range"] {
+  appearance: none;
+  background: linear-gradient(90deg, var(--utility-material-lamp-green) 0 54%, var(--utility-material-safety-amber) 54% 75%, var(--utility-material-hazard-red) 75% 100%);
+  border: 1px solid var(--utility-material-steel-dark);
+  box-shadow: var(--utility-material-inset-shadow);
+  height: 8px;
+  width: 100%;
+}
+.utility-slider::-webkit-slider-thumb,
+[data-ui="industrial-utility"] input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  background: linear-gradient(90deg, var(--utility-material-steel), var(--utility-material-steel-light), var(--utility-material-steel));
+  border: 1px solid var(--utility-material-steel-dark);
+  border-radius: 1px;
+  box-shadow: var(--utility-material-bevel);
+  cursor: ew-resize;
+  height: 24px;
+  width: 12px;
+}
+.utility-slider::-moz-range-thumb,
+[data-ui="industrial-utility"] input[type="range"]::-moz-range-thumb {
+  background: var(--utility-material-steel);
+  border: 1px solid var(--utility-material-steel-dark);
+  border-radius: 1px;
+  box-shadow: var(--utility-material-bevel);
+  height: 22px;
+  width: 10px;
+}
+.utility-ticks {
+  color: var(--utility-material-muted);
+  display: flex;
+  font: 7px var(--utility-material-font-mono);
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.utility-readout {
+  background: #08100c;
+  border: 1px solid var(--utility-material-steel-dark);
+  box-shadow: var(--utility-material-inset-shadow);
+  color: var(--utility-material-readout-ink);
+  display: inline-flex;
+  font: 700 15px/1 var(--utility-material-font-mono);
+  min-width: 74px;
+  padding: 8px 10px;
+  text-shadow: 0 0 6px rgba(137,226,98,.52);
+}
+.utility-readout small {
+  color: var(--utility-material-readout-ink);
+  font-size: 8px;
+  margin-left: auto;
+  padding-left: 8px;
+}
+.utility-meter {
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  box-shadow: var(--utility-material-inset-shadow);
+  height: 14px;
+  overflow: hidden;
+  position: relative;
+}
+.utility-meter > span {
+  background: repeating-linear-gradient(90deg, transparent 0 16px, rgb(0 0 0 / .35) 16px 18px), var(--utility-material-lamp-green);
+  display: block;
+  height: 100%;
+}
+.utility-meter.is-warning > span { background: var(--utility-material-safety-amber); }
+.utility-meter.is-danger > span { background: var(--utility-material-hazard-red); }
+.utility-meter::after {
+  background: repeating-linear-gradient(90deg, transparent 0 9.2%, rgba(0,0,0,.45) 9.2% 10%);
+  content: "";
+  inset: 0;
+  position: absolute;
+}
+.utility-progress,
+[data-ui="industrial-utility"] progress {
+  appearance: none;
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: 0;
+  box-shadow: var(--utility-material-inset-shadow);
+  height: 13px;
+  overflow: hidden;
+  width: 100%;
+}
+.utility-progress::-webkit-progress-bar,
+[data-ui="industrial-utility"] progress::-webkit-progress-bar { background: var(--utility-material-surface-low); }
+.utility-progress::-webkit-progress-value,
+[data-ui="industrial-utility"] progress::-webkit-progress-value { background: var(--utility-material-lamp-green); }
+.utility-progress::-moz-progress-bar,
+[data-ui="industrial-utility"] progress::-moz-progress-bar { background: var(--utility-material-lamp-green); }
+.utility-stage-track {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 9px;
+  position: relative;
+}
+.utility-stage-track::before {
+  background: var(--utility-material-line-strong);
+  content: "";
+  height: 2px;
+  left: 12%;
+  position: absolute;
+  right: 12%;
+  top: 8px;
+}
+.utility-stage {
+  color: var(--utility-material-muted);
+  font: 7px var(--utility-material-font-display);
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  z-index: 1;
+}
+.utility-stage b {
+  align-items: center;
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: 50%;
+  display: flex;
+  height: 18px;
+  justify-content: center;
+  margin: 0 auto 4px;
+  width: 18px;
+}
+.utility-stage.is-complete b,
+.utility-stage.is-current b {
+  background: var(--utility-material-lamp-green);
+  border-color: #2f5b1e;
+  color: #0c1707;
+  box-shadow: var(--utility-material-lamp-glow);
+}
+.utility-stage.is-current b { background: var(--utility-material-safety-amber); box-shadow: none; }
+.utility-tabs {
+  align-items: stretch;
+  border-bottom: 1px solid var(--utility-material-line-strong);
+  display: flex;
+  gap: 1px;
+}
+.utility-tab {
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line);
+  border-bottom: 0;
+  color: var(--utility-material-muted);
+  cursor: pointer;
+  font: 800 9px var(--utility-material-font-display);
+  min-height: 30px;
+  padding: 0 13px;
+  text-transform: uppercase;
+}
+.utility-tab.is-active,
+.utility-tab[aria-selected="true"] {
+  background: var(--utility-material-surface-raised);
+  color: var(--utility-material-text);
+  position: relative;
+}
+.utility-tab.is-active::before,
+.utility-tab[aria-selected="true"]::before {
+  background: var(--utility-material-safety-amber);
+  content: "";
+  height: 3px;
+  left: -1px;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+.utility-breadcrumb {
+  align-items: center;
+  color: var(--utility-material-muted);
+  display: flex;
+  font: 8px var(--utility-material-font-mono);
+  gap: 7px;
+  text-transform: uppercase;
+}
+.utility-breadcrumb b { color: var(--utility-material-text); }
+.utility-breadcrumb i { color: var(--utility-material-warning); font-style: normal; }
+.utility-pagination,
+.utility-segmented {
+  display: inline-flex;
+}
+.utility-pagination button,
+.utility-segmented button {
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  color: var(--utility-material-text-soft);
+  cursor: pointer;
+  font: 800 9px var(--utility-material-font-display);
+  height: 29px;
+  min-width: 29px;
+  padding: 0 8px;
+}
+.utility-pagination button + button,
+.utility-segmented button + button { border-left: 0; }
+.utility-pagination button.is-active,
+.utility-segmented button.is-active {
+  background: var(--utility-material-safety-amber);
+  color: var(--utility-material-safety-ink);
+}
+.utility-badge {
+  align-items: center;
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: 1px;
+  color: var(--utility-material-text-soft);
+  display: inline-flex;
+  font: 900 8px var(--utility-material-font-display);
+  height: 22px;
+  letter-spacing: 0;
+  padding: 0 7px;
+  text-transform: uppercase;
+}
+.utility-badge-success,
+.utility-badge-success { background: var(--utility-material-badge-success); border-color: var(--utility-material-lamp-green); color: var(--utility-material-badge-success-ink); }
+.utility-badge-primary { background: var(--utility-material-badge-info); border-color: var(--utility-material-lamp-blue); color: var(--utility-material-badge-info-ink); }
+.utility-badge-warning { background: var(--utility-material-badge-warning); border-color: var(--utility-material-safety-amber); color: var(--utility-material-badge-warning-ink); }
+.utility-badge-danger { background: var(--utility-material-badge-danger); border-color: var(--utility-material-hazard-red); color: var(--utility-material-badge-danger-ink); }
+.utility-table-wrap {
+  border: 1px solid var(--utility-material-line-strong);
+  box-shadow: var(--utility-material-inset-shadow);
+  overflow: auto;
+}
+.utility-table {
+  border-collapse: collapse;
+  font: 9px var(--utility-material-font-body);
+  width: 100%;
+}
+.utility-table th {
+  background: var(--utility-material-header);
+  border-bottom: 1px solid var(--utility-material-line-strong);
+  color: var(--utility-material-header-ink);
+  font: 800 8px var(--utility-material-font-display);
+  letter-spacing: 0;
+  padding: 7px 8px;
+  text-align: left;
+  text-transform: uppercase;
+}
+.utility-table td {
+  border-bottom: 1px solid var(--utility-material-line);
+  color: var(--utility-material-text-soft);
+  padding: 6px 8px;
+}
+.utility-table tr:last-child td { border-bottom: 0; }
+.utility-table tbody tr:nth-child(even) { background: rgb(var(--utility-surface-soft-rgb) / .48); }
+.utility-table tbody tr:hover { background: rgb(var(--utility-primary-rgb) / .12); }
+.utility-alert {
+  align-items: center;
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  border-left: 5px solid var(--utility-material-lamp-blue);
+  box-shadow: var(--utility-material-bevel);
+  color: var(--utility-material-text-soft);
+  display: flex;
+  font: 10px var(--utility-material-font-body);
+  gap: 8px;
+  min-height: 38px;
+  padding: 7px 9px;
+}
+.utility-alert strong {
+  color: var(--utility-material-text);
+  display: block;
+  font: 900 9px var(--utility-material-font-display);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+.utility-alert > div { flex: 1; min-width: 0; }
+.utility-alert .utility-pilot-light { height: 13px; width: 13px; }
+.utility-alert-success { border-left-color: var(--utility-material-lamp-green); }
+.utility-alert-warning { border-left-color: var(--utility-material-warning); background: linear-gradient(rgb(var(--utility-warning-rgb) / .12), rgb(var(--utility-warning-rgb) / .12)), var(--utility-material-surface); }
+.utility-alert-info { border-left-color: var(--utility-material-lamp-blue); }
+.utility-alert-danger { border-left-color: var(--utility-material-hazard-red); }
+.utility-toast-stack { display: grid; gap: 7px; }
+.utility-tooltip,
+[data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
+  background: #111718;
+  border: 1px solid #697173;
+  box-shadow: 0 5px 12px rgba(0,0,0,.45);
+  color: #dde0db;
+  font: 9px/1.35 var(--utility-material-font-body);
+  max-width: 180px;
+  padding: 8px 10px;
+  position: relative;
+}
+.utility-tooltip::before {
+  background: #111718;
+  border-left: 1px solid #697173;
+  border-top: 1px solid #697173;
+  content: "";
+  height: 9px;
+  left: 18px;
+  position: absolute;
+  top: -6px;
+  transform: rotate(45deg);
+  width: 9px;
+}
+.utility-popover {
+  max-width: 240px;
+  padding: 11px;
+}
+.utility-dialog {
+  padding: 11px;
+}
+.utility-dialog header {
+  align-items: center;
+  border-bottom: 1px solid var(--utility-material-line);
+  display: flex;
+  font: 900 11px var(--utility-material-font-display);
+  letter-spacing: 0;
+  padding-bottom: 8px;
+  text-transform: uppercase;
+}
+.utility-dialog header::before {
+  background: var(--utility-material-hazard-red);
+  content: "";
+  height: 11px;
+  margin-right: 7px;
+  width: 4px;
+}
+.utility-dialog p {
+  color: var(--utility-material-text-soft);
+  font-size: 10px;
+  margin: 11px 0;
+}
+.utility-dialog footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.utility-card {
+  padding: 11px;
+}
+.utility-card h4 {
+  font: 900 11px var(--utility-material-font-display);
+  letter-spacing: 0;
+  margin: 0 0 7px;
+  text-transform: uppercase;
+}
+.utility-card p {
+  color: var(--utility-material-text-soft);
+  font-size: 10px;
+  line-height: 1.35;
+  margin: 0;
+}
+.utility-details,
+[data-ui="industrial-utility"] details {
+  background: var(--utility-material-surface-low);
+  border: 1px solid var(--utility-material-line-strong);
+  box-shadow: var(--utility-material-inset-shadow);
+  color: var(--utility-material-text-soft);
+  font-size: 10px;
+  padding: 8px 10px;
+}
+.utility-details summary,
+[data-ui="industrial-utility"] summary {
+  color: var(--utility-material-text);
+  cursor: pointer;
+  font: 900 9px var(--utility-material-font-display);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+.utility-token-row {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.utility-token {
+  min-width: 0;
+}
+.utility-token i {
+  border: 1px solid var(--utility-material-line-strong);
+  box-shadow: var(--utility-material-bevel);
+  display: block;
+  height: 24px;
+}
+.utility-token span {
+  color: var(--utility-material-muted);
+  display: block;
+  font: 6px var(--utility-material-font-mono);
+  margin-top: 4px;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.utility-skeleton {
+  animation: utility-material-pulse 1.2s ease-in-out infinite alternate;
+  background: linear-gradient(90deg, var(--utility-material-surface-low), var(--utility-material-surface-raised), var(--utility-material-surface-low));
+  border: 1px solid var(--utility-material-line);
+  height: 11px;
+}
+@keyframes utility-material-pulse { to { opacity: .45; } }
+.utility-empty-state {
+  align-items: center;
+  color: var(--utility-material-muted);
+  display: flex;
+  flex-direction: column;
+  font: 700 9px var(--utility-material-font-display);
+  gap: 7px;
+  justify-content: center;
+  min-height: 74px;
+  text-align: center;
+  text-transform: uppercase;
+}
+.utility-empty-state .utility-pilot-light { height: 18px; width: 18px; }
+.utility-sr-only {
+  clip: rect(0,0,0,0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-ui="industrial-utility"] *,
+  [data-ui="industrial-utility"] *::before,
+  [data-ui="industrial-utility"] *::after {
+    animation-duration: .001ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: .001ms !important;
+  }
+}
+@media (max-width: 760px) {
+  .utility-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .utility-token-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .utility-table-wrap { overflow-x: auto; }
+  .utility-button { min-width: 72px; padding-inline: 10px; }
+}
+/** Canonical component resets prevent older identity and native rules leaking into the specimen. */
+.utility-panel { padding: 0; background: var(--utility-material-surface); }
+.utility-card, .utility-panel { clip-path: none; }
+.utility-panel::after, .utility-card::after { content: none; }
+.utility-button, .utility-icon-button { min-height: 34px; min-block-size: 34px; line-height: 1; }
+.utility-button-primary, .utility-button-danger { text-shadow: none; }
+.utility-button-secondary { color: rgb(var(--usk-secondary-text-rgb, 19 23 25)); background: linear-gradient(rgb(var(--usk-secondary-rgb, 231 233 230)), rgb(var(--usk-secondary-rgb, 146 154 152))); }
+[data-ui="industrial-utility"][data-mode="dark"] .utility-button-secondary { color: rgb(var(--usk-secondary-text-rgb, 255 255 255)); background: linear-gradient(rgb(var(--usk-secondary-rgb, 104 114 116)), rgb(var(--usk-secondary-rgb, 66 76 79))); }
+.utility-button.utility-button-guarded { background: repeating-linear-gradient(-45deg, var(--utility-material-safety-amber) 0 7px, #201f19 7px 14px); }
+.utility-button-ghost { color: var(--utility-material-text); }
+.utility-button[aria-busy="true"]::after { content: none; }
+.utility-button.is-loading::before { flex: 0 0 14px; padding: 0; }
+.utility-input, .utility-select, .utility-textarea { min-height: 34px; min-block-size: 34px; font-size: 14px; }
+.utility-label, .utility-help, .utility-control-name { font-size: 12px; line-height: 1.3; }
+.utility-button, .utility-tab { font-size: 12px; }
+.utility-badge { min-height: 22px; box-shadow: none; line-height: 1; }
+.utility-table th, .utility-table td { border-inline: 1px solid var(--utility-material-line); }
+.utility-table th { background: var(--utility-material-header); color: var(--utility-material-header-ink); }
+.utility-table td { background: transparent; }
+.utility-table-wrap { overflow-x: auto; border-radius: 1px; }
+.utility-check input, .utility-radio input { min-inline-size: 15px; flex: 0 0 15px; }
+.utility-check input:not(:has(+ .utility-check-control)), .utility-radio input:not(:has(+ .utility-radio-control)) { position: static; opacity: 1; pointer-events: auto; }
+[data-ui="industrial-utility"] input[type="range"] { min-block-size: 24px; height: 24px; padding: 0; background: transparent; border: 0; box-shadow: none; }
+[data-ui="industrial-utility"] input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--utility-material-lamp-green) 0 54%, var(--utility-material-safety-amber) 54% 75%, var(--utility-material-hazard-red) 75% 100%); border: 1px solid var(--utility-material-steel-dark); box-shadow: var(--utility-material-inset-shadow); }
+[data-ui="industrial-utility"] input[type="range"]::-webkit-slider-thumb { margin-top: -8px; }
+[data-ui="industrial-utility"] input[type="range"]::-moz-range-track { height: 8px; background: linear-gradient(90deg, var(--utility-material-lamp-green) 0 54%, var(--utility-material-safety-amber) 54% 75%, var(--utility-material-hazard-red) 75% 100%); border: 1px solid var(--utility-material-steel-dark); box-shadow: var(--utility-material-inset-shadow); }
+[data-ui="industrial-utility"] :is(.utility-pagination, .utility-segmented) button { border-color: var(--utility-material-line-strong); }
+.utility-nameplate { flex-shrink: 0; white-space: nowrap; }
+.utility-popover h3 { margin: 0 0 8px; font: 800 12px var(--utility-material-font-display); text-transform: uppercase; }
+.utility-toggle input { min-inline-size: 48px; min-block-size: 24px; flex: 0 0 48px; }
+.utility-toggle input::after { box-sizing: border-box; }
+.utility-stage { margin: 0; }
+.utility-stage b { color: var(--utility-material-text); }
+.utility-stage.is-complete b { color: var(--utility-on-success); }
+.utility-stage.is-current b { color: var(--utility-on-primary); }
+.utility-alert { box-shadow: var(--utility-material-bevel); }
+.utility-alert, .utility-alert strong, .utility-dialog p, .utility-tooltip,
+[data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { font-size: 14px; line-height: 1.4; }
+.utility-spinner { display: inline-block; flex: 0 0 20px; height: 20px; width: 20px; background: none; clip-path: none; box-shadow: none; }
+.utility-dropdown { background: var(--utility-material-input); border: 1px solid var(--utility-material-line-strong); box-shadow: var(--utility-material-inset-shadow); padding: 0; }
+.utility-option { display: block; width: 100%; padding: 8px; border: 0; border-radius: 0; background: transparent; color: var(--utility-material-text); text-align: left; font: 14px var(--utility-font-body); }
+.utility-option[aria-selected="true"] { background: var(--utility-material-badge-info); color: var(--utility-material-badge-info-ink); }
+.utility-nameplate { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 92px; min-block-size: 50px; padding: 8px; color: var(--utility-material-header-ink); border: 1px solid var(--utility-material-safety-amber); background: repeating-linear-gradient(-45deg, var(--utility-material-safety-amber) 0 7px, var(--utility-material-header) 7px 14px); font: 900 14px var(--utility-font-display); }
+.utility-nameplate > span { background: var(--utility-material-header); padding: 7px; }
+.utility-key-switch { --utility-key-angle: -28deg; min-height: 48px; padding: 0; }
+.utility-key-switch::after { height: 28px; transform: rotate(var(--utility-key-angle)); }
+.utility-key-switch[data-position="on"] { --utility-key-angle: 28deg; }
+.utility-key-switch[data-position="off"] { --utility-key-angle: -60deg; }
+.utility-emergency-stop { min-height: 48px; padding: 0; flex: 0 0 48px; }
+.utility-readout { background-color: #08100c; text-shadow: none; }
+.utility-readout output { color: var(--utility-material-readout-ink); }
+.utility-table-wrap { padding: 0; }
+[data-ui="industrial-utility"] :is(.utility-three-position, .utility-pagination, .utility-segmented) button { background: var(--utility-material-surface-low); border: 1px solid var(--utility-material-line-strong); color: var(--utility-material-text-soft); box-shadow: none; }
+[data-ui="industrial-utility"] :is(.utility-three-position, .utility-pagination, .utility-segmented) button.is-active { background: var(--utility-material-safety-amber); color: var(--utility-material-safety-ink); }
+[data-ui="industrial-utility"] .utility-input[aria-invalid="true"] { border: 2px solid var(--utility-material-hazard-red); }
+.utility-tooltip,
+[data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { opacity: 1; visibility: visible; inset: auto; transform: none; }
+.utility-toast { display: flex; align-items: center; gap: 8px; padding: 12px; }
+.utility-dialog::backdrop { background: rgb(0 0 0 / .65); }
+dialog.utility-dialog:not([open]) { display: none; }
+div.utility-dialog { display: block; }
+[data-ui="industrial-utility"][data-mode] :where(fieldset, article, aside) { background-image: none; }
+/** Aligns reviewed marketing controls with the preset's beveled machine plates. */
+.utility-callout-bar > .utility-button.utility-button-outline-heavy {
+  background: linear-gradient(180deg, var(--utility-material-surface-raised), var(--utility-material-surface-low));
+  color: var(--utility-material-text);
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: var(--utility-material-radius);
+  clip-path: none;
+  box-shadow: var(--utility-material-bevel);
+}
+.utility-callout-bar > .utility-button.utility-button-outline-heavy:is(:hover, :focus-visible) {
+  background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary));
+  color: var(--utility-on-primary);
+  border-color: var(--utility-primary);
+}
+/** Keeps the callout glyph centered across engines with different font metrics. */
+.utility-callout-bar > .utility-icon-medallion {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/** Enlarges the trust-mark type while preserving the fixed eighty-pixel plate. */
+.utility-badge-seal > strong { font-size: 13px; }
+.utility-badge-seal > small { font-size: 11px; }
+/** Signals an active warning without hiding its text during the blink cycle. */
+.utility-badge-warning {
+  animation: utility-warning-signal 1.1s steps(2, end) infinite;
+  border-color: var(--utility-warning);
+  box-shadow: 0 0 0 1px rgb(var(--utility-warning-rgb) / .28);
+  font-size: 10px;
+}
+@keyframes utility-warning-signal {
+  50% {
+    box-shadow: 0 0 0 2px rgb(var(--utility-warning-rgb) / .6), 0 0 8px rgb(var(--utility-warning-rgb) / .42);
+    filter: brightness(1.25);
+  }
+}
+/** Points each visible tooltip toward the edge named by its orientation class. */
+.utility-tooltip-top::before {
+  inset: auto auto -5px 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+.utility-tooltip-right::before {
+  inset: 50% auto auto -5px;
+  transform: translateY(-50%) rotate(45deg);
+}
+.utility-tooltip-bottom::before {
+  inset: -5px auto auto 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+.utility-tooltip-left::before {
+  inset: 50% -5px auto auto;
+  transform: translateY(-50%) rotate(45deg);
+}
+/** Gives time fields a lighter, low-contrast steel wash instead of a dark slab. */
+[data-ui="industrial-utility"][data-mode] input[type="time"] {
+  background-image: linear-gradient(180deg, var(--utility-material-surface-raised), var(--utility-material-input));
+}
+/** Restores the checked field behind the native mark for reliable contrast. */
+[data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked {
+  background-color: var(--utility-material-lamp-green);
+  border-color: var(--utility-material-steel-dark);
+}
+@media (prefers-reduced-motion: reduce) {
+  .utility-spinner, .utility-skeleton, .utility-button.is-loading::before, .utility-badge-warning { animation: none !important; }
+}
+/** Alarm state is opt-in for commands; ordinary destructive actions remain steady. */
+.utility-button.is-alarm,
+.utility-badge-danger,
+.utility-alert-danger,
+.utility-pilot-light.is-red:not(.is-off) {
+  animation: utility-danger-signal 1.1s steps(2, end) infinite;
+}
+@keyframes utility-danger-signal {
+  50% {
+    box-shadow: 0 0 0 2px rgb(var(--utility-danger-rgb) / .6), 0 0 8px rgb(var(--utility-danger-rgb) / .42);
+    filter: brightness(1.25);
+  }
+}
+/** All loading entry points use the same eight-step mechanical rotor. */
+.utility-spinner, .utility-loading-spinner,
+[data-ui="industrial-utility"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
+.utility-button.is-loading::before,
+.utility-button[aria-busy="true"]:not(.is-loading)::after,
+[data-ui="industrial-utility"] button:not([class])[aria-busy="true"]::after {
+  content: "";
+  display: inline-block;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 0;
+  background: conic-gradient(currentColor 0 12.5%, transparent 0 25%, currentColor 0 37.5%, transparent 0 50%, currentColor 0 62.5%, transparent 0 75%, currentColor 0 87.5%, transparent 0);
+  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
+  box-shadow: none;
+  animation: utility-spin .8s steps(8, end) infinite;
+}
+.utility-button.is-loading::before,
+.utility-button[aria-busy="true"]:not(.is-loading)::after {
+  inline-size: 14px;
+  block-size: 14px;
+  flex-basis: 14px;
+}
+/** Plain panels own a content inset; structured panels delegate it to their body. */
+.utility-panel { padding: 16px; }
+.utility-panel:has(> .utility-panel-body) { padding: 0; }
+.utility-container { box-sizing: border-box; padding-inline: 16px; }
+/** A single-line textarea has equal insets; multiline controls keep a normal text lane. */
+.utility-textarea, [data-ui="industrial-utility"] textarea { line-height: 18px; }
+.utility-textarea[rows="1"], [data-ui="industrial-utility"] textarea[rows="1"] {
+  height: 34px;
+  min-height: 34px;
+  padding-block: 7px;
+  box-sizing: border-box;
+}
+.utility-file, [data-ui="industrial-utility"][data-mode] input[type="file"] {
+  box-sizing: border-box;
+  height: 34px;
+  min-block-size: 34px;
+  padding: 2px;
+  line-height: 28px;
+  background: var(--utility-material-input);
+  border: 1px solid var(--utility-material-line-strong);
+  box-shadow: var(--utility-material-inset-shadow);
+  color: var(--utility-material-text);
+}
+.utility-file::file-selector-button,
+[data-ui="industrial-utility"][data-mode] input[type="file"]::file-selector-button {
+  box-sizing: border-box;
+  height: 28px;
+  padding-block: 0;
+  margin-block: 0;
+  vertical-align: top;
+  line-height: 26px;
+}
+/** Listboxes have a continuous inset, not a single-select arrow behind their options. */
+.utility-select[multiple], [data-ui="industrial-utility"][data-mode] select[multiple] {
+  height: auto;
+  min-height: 88px;
+  padding: 6px;
+  background: var(--utility-material-input);
+  box-shadow: var(--utility-material-inset-shadow);
+}
+[data-ui="industrial-utility"][data-mode] select[multiple] option {
+  background: transparent;
+  padding: 3px 8px;
+  line-height: 1.4;
+}
+/** Industrial checked state is a centered square inset, never a typographic tick. */
+[data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked:not([role="switch"]) {
+  background: var(--utility-material-lamp-green);
+  box-shadow: inset 0 0 0 4px var(--utility-material-input), var(--utility-material-inset-shadow);
+}
+[data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked:not([role="switch"])::after { content: none; }
+.utility-check input:checked + .utility-check-control::after {
+  content: "";
+  width: 50%;
+  height: 50%;
+  background: var(--utility-on-primary);
+}
+.utility-card-service > .utility-icon-medallion { font-size: 36px; line-height: 1; }
+.utility-button.utility-button-primary,
+[data-ui="industrial-utility"][data-mode] a.utility-button-primary {
+  color: var(--utility-on-primary);
+}
+/** Icon-only commands reserve their glyph box instead of inheriting text-button padding. */
+.utility-icon-button:has(> svg:only-child),
+[data-ui="industrial-utility"] button:has(> svg:only-child) {
+  padding: 0;
+  min-inline-size: 38px;
+  min-block-size: 38px;
+}
+[data-ui="industrial-utility"] button > svg:only-child {
+  flex: 0 0 20px;
+  min-inline-size: 20px;
+  min-block-size: 20px;
+}
+/** Native and prefixed tables share legible machine headers and fine cell rules. */
+.utility-table, [data-ui="industrial-utility"][data-mode] table {
+  border-collapse: collapse;
+  border: 1px solid var(--utility-material-line-strong);
+  border-radius: 1px;
+  font: 14px/1.4 var(--utility-material-font-body);
+}
+.utility-table th, [data-ui="industrial-utility"][data-mode] th {
+  background: var(--utility-material-header);
+  color: var(--utility-material-header-ink);
+  font: 800 12px/1.4 var(--utility-material-font-display);
+  padding: 10px 12px;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  border: 1px solid var(--utility-material-line);
+}
+.utility-table td, [data-ui="industrial-utility"][data-mode] td {
+  padding: 10px 12px;
+  border: 1px solid var(--utility-material-line);
+  color: var(--utility-material-text);
+}
+[data-ui="industrial-utility"][data-mode] tbody tr:nth-child(even) { background: var(--utility-material-surface-low); }
+[data-ui="industrial-utility"][data-mode] caption {
+  padding: 10px 12px;
+  border: 1px solid var(--utility-material-line);
+  border-top: 0;
+  text-align: left;
+  font: 12px/1.4 var(--utility-material-font-body);
+  color: var(--utility-material-text-soft);
+}
+@media (prefers-reduced-motion: reduce) {
+  .utility-button.is-alarm, .utility-badge-danger, .utility-alert-danger,
+  .utility-pilot-light.is-red, .utility-spinner, .utility-loading-spinner,
+  .utility-button.is-loading::before, .utility-button[aria-busy="true"]::after,
+  [data-ui="industrial-utility"] [aria-busy="true"]::after { animation: none !important; }
+}
+@media (pointer: coarse) {
+  .utility-button, .utility-icon-button, .utility-tab, .utility-option, .utility-pagination button, .utility-segmented button, .utility-three-position button { min-block-size: 44px; }
+  .utility-check, .utility-radio, .utility-toggle { min-block-size: 44px; }
+}
+@media (forced-colors: active) {
+  .utility-button, .utility-input, .utility-panel, .utility-check input, .utility-radio input, .utility-toggle input { border: 1px solid ButtonText; }
+  .utility-check input:checked, .utility-radio input:checked { background: Highlight; }
+}
+/** Warning actions inherit preset geometry and use the paired semantic warning colors. */
+/** Warning lamps retain the warning role even when primary actions use another hue. */
+.utility-pilot-light.is-warning {
+  background: radial-gradient(circle at 40% 32%, #fff9cf 0 7%, var(--utility-warning) 28%, rgb(var(--utility-warning-rgb) / .5) 78%);
+  box-shadow: 0 0 0 1px rgb(var(--utility-warning-rgb) / .2), 0 0 8px rgb(var(--utility-warning-rgb) / .55);
+  animation: utility-warning-signal 1.1s steps(2, end) infinite;
+}
+.utility-feature-item:first-child > .utility-icon-medallion { font-size: 36px; line-height: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .utility-pilot-light.is-warning { animation: none !important; }
+}
+[data-ui="industrial-utility"][data-mode] .utility-button.utility-button-warning {
+  background: var(--utility-warning);
+  color: var(--utility-on-warning);
+  border-color: var(--utility-warning);
+  text-shadow: none;
+}
+}