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

ui-style-kit-css 2.1.0 → 2.2.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 (29) hide show

package/CHANGELOG.md +16 -0
package/README.md +93 -47
package/STYLE-MAP.md +36 -0
package/dist/ui-style-kit.css +688 -672
package/dist/ui-style-kit.min.css +2 -2
package/dist/ui-style-kit.visual.css +688 -672
package/dist/ui-style-kit.visual.min.css +2 -2
package/dist/ui-style-kit.with-bridge.css +694 -677
package/dist/ui-style-kit.with-bridge.min.css +2 -2
package/dist/visual/bauhaus.css +93 -77
package/dist/visual/bento.css +93 -77
package/dist/visual/brutalism.css +74 -58
package/dist/visual/cyberpunk.css +77 -61
package/dist/visual/maximalist.css +93 -77
package/dist/visual/minimal-saas.css +93 -77
package/dist/visual/neumorphism.css +97 -81
package/dist/visual/retro-glass.css +75 -59
package/dist/visual/retrofuturism.css +95 -79
package/dist/visual/tactile.css +93 -77
package/dist/visual/y2k.css +75 -59
package/docs/BRIDGE-MIGRATION.md +20 -0
package/docs/ECOSYSTEM.md +35 -4
package/docs/PUBLISHING.md +31 -10
package/docs/TOKENS.md +40 -0
package/manifest.json +323 -1
package/package.json +18 -5
package/styles/interactive-surface-bridge.css +6 -5
package/styles/interactive-surface-theme.css +6 -5
package/styles/native-elements.css +16 -0

package/dist/ui-style-kit.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.1.0
+ * UI Style Kit CSS v2.2.0
  * CSS theme and UI style preset library.
  * License: MIT
  */
@@ -846,6 +846,22 @@
   --usk-native-shadow: none;
   --usk-native-shadow-md: var(--usk-native-shadow);
   --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
+  --usk-motion-duration: 140ms;
+  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
+  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
+  --ui-color-bg: rgb(var(--usk-bg-rgb));
+  --ui-color-surface: var(--usk-native-surface-strong);
+  --ui-color-text: var(--usk-native-text);
+  --ui-color-muted: var(--usk-native-text-muted);
+  --ui-color-primary: var(--usk-native-primary);
+  --ui-color-on-primary: var(--usk-native-on-primary);
+  --ui-color-border: var(--usk-native-border);
+  --ui-radius-control: var(--usk-native-radius);
+  --ui-shadow-control: var(--usk-native-shadow);
+  --ui-focus-color: var(--usk-native-focus);
+  --ui-motion-duration: var(--usk-motion-duration);
+  --ui-motion-easing: var(--usk-motion-easing);
 }
 [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
@@ -1536,7 +1552,7 @@
   [class~="rg-alert"],
   [class~="rg-table-wrap"],
   [class~="rg-nav"]
-) {
+), [data-ui]:where([data-ui="minimal-saas"],[data-ui="bento"],[data-ui="maximalist"],[data-ui="bauhaus"],[data-ui="tactile"],[data-ui="neumorphism"],[data-ui="retrofuturism"],[data-ui="brutalism"],[data-ui="cyberpunk"],[data-ui="y2k"],[data-ui="retro-glass"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
   max-inline-size: 100%;
   min-inline-size: 0;
   overflow-wrap: anywhere;
@@ -1587,7 +1603,7 @@
   [class~="rg-icon-button"],
   [class~="rg-badge"],
   [class~="rg-nav-link"]
-) {
+), [data-ui]:where([data-ui="minimal-saas"],[data-ui="bento"],[data-ui="maximalist"],[data-ui="bauhaus"],[data-ui="tactile"],[data-ui="neumorphism"],[data-ui="retrofuturism"],[data-ui="brutalism"],[data-ui="cyberpunk"],[data-ui="y2k"],[data-ui="retro-glass"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
   max-inline-size: 100%;
   min-inline-size: 0;
   white-space: normal;
@@ -1627,7 +1643,7 @@
   .rg-button,
   .rg-icon-button,
   .rg-button-pill
-) {
+), [data-ui]:where([data-ui="minimal-saas"],[data-ui="bento"],[data-ui="maximalist"],[data-ui="bauhaus"],[data-ui="tactile"],[data-ui="neumorphism"],[data-ui="retrofuturism"],[data-ui="brutalism"],[data-ui="cyberpunk"],[data-ui="y2k"],[data-ui="retro-glass"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -1951,13 +1967,13 @@
 .saas-divider, .bento-divider, .max-divider, .bau-divider, .tactile-divider, .neo-divider, .retro-divider, .brutal-divider, .cyber-divider, .y2k-divider, .rg-divider { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
 .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
-.saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost {
+.saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
   color: var(--usk-native-primary);
   background: transparent;
   border-color: var(--usk-native-border);
 }
-.saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch {
+.saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-check, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-radio, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-switch {
   display: inline-flex;
   align-items: center;
   gap: var(--usk-native-field-gap);
@@ -1965,13 +1981,13 @@
   color: var(--usk-native-text);
 }
-.saas-check-control, .saas-radio-control, .bento-check-control, .bento-radio-control, .max-check-control, .max-radio-control, .bau-check-control, .bau-radio-control, .tactile-check-control, .tactile-radio-control, .neo-check-control, .neo-radio-control, .retro-check-control, .retro-radio-control, .brutal-check-control, .brutal-radio-control, .cyber-check-control, .cyber-radio-control, .y2k-check-control, .y2k-radio-control, .rg-check-control, .rg-radio-control {
+.saas-check-control, .saas-radio-control, .bento-check-control, .bento-radio-control, .max-check-control, .max-radio-control, .bau-check-control, .bau-radio-control, .tactile-check-control, .tactile-radio-control, .neo-check-control, .neo-radio-control, .retro-check-control, .retro-radio-control, .brutal-check-control, .brutal-radio-control, .cyber-check-control, .cyber-radio-control, .y2k-check-control, .y2k-radio-control, .rg-check-control, .rg-radio-control, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-check-control, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-radio-control {
   inline-size: 1.5rem;
   block-size: 1.5rem;
   accent-color: var(--usk-native-primary);
 }
-.saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track {
+.saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-switch-track {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -1983,7 +1999,7 @@
   border-radius: 999px;
 }
-.saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb {
+.saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-switch-thumb {
   inline-size: 1rem;
   block-size: 1rem;
   background: var(--usk-native-thumb);
@@ -2002,7 +2018,7 @@
 .brutal-switch:has(input:checked) .brutal-switch-track,
 .cyber-switch:has(input:checked) .cyber-switch-track,
 .y2k-switch:has(input:checked) .y2k-switch-track,
-.rg-switch:has(input:checked) .rg-switch-track {
+.rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-switch:has(input:checked) .ui-switch-track {
   background: var(--usk-native-track-fill);
 }
@@ -2016,7 +2032,7 @@
 .brutal-switch:has(input:checked) .brutal-switch-thumb,
 .cyber-switch:has(input:checked) .cyber-switch-thumb,
 .y2k-switch:has(input:checked) .y2k-switch-thumb,
-.rg-switch:has(input:checked) .rg-switch-thumb {
+.rg-switch:has(input:checked) .rg-switch-thumb, :where([data-ui="minimal-saas"], [data-ui="bento"], [data-ui="maximalist"], [data-ui="bauhaus"], [data-ui="tactile"], [data-ui="neumorphism"], [data-ui="retrofuturism"], [data-ui="brutalism"], [data-ui="cyberpunk"], [data-ui="y2k"], [data-ui="retro-glass"]) .ui-switch:has(input:checked) .ui-switch-thumb {
   transform: translateX(1.25rem);
 }
@@ -2214,7 +2230,7 @@
     background-size: var(--saas-theme-bg-size);
   }
-  .saas-title, .saas-heading, .saas-kicker, .saas-button, .saas-badge, .saas-nav-link {
+  .saas-title, .saas-heading, .saas-kicker, .saas-button, .saas-badge, .saas-nav-link, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-badge, :where([data-ui="minimal-saas"]) .ui-nav-link {
     font-family: var(--saas-font-heading);
   }
@@ -2260,7 +2276,7 @@
     height: 1px;
   }
-  .saas-surface, .saas-card, .saas-panel, .saas-toolbar, .saas-table-wrap {
+  .saas-surface, .saas-card, .saas-panel, .saas-toolbar, .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-card, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap {
     background: linear-gradient(180deg,#ffffff0d,#fff0),var(--saas-surface);
     color: var(--saas-text);
     border: 1px solid var(--saas-border);
@@ -2270,11 +2286,11 @@
     position: relative;
   }
-  .saas-card, .saas-panel {
+  .saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
     padding: var(--saas-space-6);
   }
-  .saas-toolbar {
+  .saas-toolbar, :where([data-ui="minimal-saas"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--saas-space-4);
@@ -2307,7 +2323,7 @@
     transform: translateY(-2px);
   }
-  .saas-button, .saas-icon-button {
+  .saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -2331,87 +2347,87 @@
     display: inline-flex;
   }
-  .saas-button:hover, .saas-icon-button:hover {
+  .saas-button:hover, .saas-icon-button:hover, :where([data-ui="minimal-saas"]) .ui-button:hover, :where([data-ui="minimal-saas"]) .ui-icon-button:hover {
     border-color: var(--saas-primary);
     transform: translateY(-1px);
   }
-  .saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active {
+  .saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active, :where([data-ui="minimal-saas"]) .ui-button:active, :where([data-ui="minimal-saas"]) .ui-icon-button:active, :where([data-ui="minimal-saas"]) .ui-button[aria-pressed="true"], :where([data-ui="minimal-saas"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="minimal-saas"]) .ui-button.is-active, :where([data-ui="minimal-saas"]) .ui-icon-button.is-active {
     transform: translateY(1px);
     box-shadow: inset 0 3px 10px #0000002e;
   }
-  .saas-button-primary {
+  .saas-button-primary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--saas-primary);
     color: var(--saas-on-primary);
     border-color: var(--saas-primary);
   }
-  .saas-button-primary:hover {
+  .saas-button-primary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--saas-primary-hover);
     border-color: var(--saas-primary-hover);
   }
-  .saas-button-secondary {
+  .saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--saas-secondary);
     color: var(--saas-on-secondary);
     border-color: var(--saas-secondary);
   }
-  .saas-button-secondary:hover {
+  .saas-button-secondary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--saas-secondary-hover);
     border-color: var(--saas-secondary-hover);
   }
-  .saas-button-danger {
+  .saas-button-danger, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--saas-danger);
     color: var(--saas-on-danger);
     border-color: var(--saas-danger);
   }
-  .saas-button-ghost {
+  .saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
     color: var(--saas-text);
     box-shadow: none;
     background: none;
   }
-  .saas-icon-button {
+  .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
     border-radius: var(--saas-radius-pill);
     width: 2.75rem;
     padding: 0;
   }
-  .saas-button:disabled, .saas-icon-button:disabled, .saas-disabled {
+  .saas-button:disabled, .saas-icon-button:disabled, .saas-disabled, :where([data-ui="minimal-saas"]) .ui-button:disabled, :where([data-ui="minimal-saas"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .saas-card, .saas-panel {
+  .saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
     background: var(--saas-card-bg);
   }
-  .saas-toolbar, .saas-table-wrap, .saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-ghost), .saas-icon-button {
+  .saas-toolbar, .saas-table-wrap, .saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-ghost), .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-toolbar, :where([data-ui="minimal-saas"]) .ui-table-wrap, :where([data-ui="minimal-saas"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="minimal-saas"]) .ui-icon-button {
     background: var(--saas-control-bg);
   }
-  .saas-button, .saas-icon-button, .saas-badge, .saas-nav-link {
+  .saas-button, .saas-icon-button, .saas-badge, .saas-nav-link, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button, :where([data-ui="minimal-saas"]) .ui-badge, :where([data-ui="minimal-saas"]) .ui-nav-link {
     font-family: var(--saas-font-control);
   }
-  .saas-field {
+  .saas-field, :where([data-ui="minimal-saas"]) .ui-field {
     gap: var(--saas-space-2);
     flex-direction: column;
     display: flex;
   }
-  .saas-label {
+  .saas-label, :where([data-ui="minimal-saas"]) .ui-label {
     color: var(--saas-text);
     font-size: .925rem;
     font-weight: 800;
   }
-  .saas-input, .saas-textarea, .saas-select {
+  .saas-input, .saas-textarea, .saas-select, :where([data-ui="minimal-saas"]) .ui-input, :where([data-ui="minimal-saas"]) .ui-textarea, :where([data-ui="minimal-saas"]) .ui-select {
     background: var(--saas-surface-soft);
     width: 100%;
     min-height: 2.875rem;
@@ -2424,32 +2440,32 @@
     padding: .75rem 1rem;
   }
-  .saas-textarea {
+  .saas-textarea, :where([data-ui="minimal-saas"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .saas-input::placeholder, .saas-textarea::placeholder {
+  .saas-input::placeholder, .saas-textarea::placeholder, :where([data-ui="minimal-saas"]) .ui-input::placeholder, :where([data-ui="minimal-saas"]) .ui-textarea::placeholder {
     color: var(--saas-text-muted);
     opacity: .82;
   }
-  .saas-input:hover, .saas-textarea:hover, .saas-select:hover {
+  .saas-input:hover, .saas-textarea:hover, .saas-select:hover, :where([data-ui="minimal-saas"]) .ui-input:hover, :where([data-ui="minimal-saas"]) .ui-textarea:hover, :where([data-ui="minimal-saas"]) .ui-select:hover {
     border-color: rgb(var(--saas-primary-rgb)/.58);
   }
-  .saas-input:focus, .saas-textarea:focus, .saas-select:focus {
+  .saas-input:focus, .saas-textarea:focus, .saas-select:focus, :where([data-ui="minimal-saas"]) .ui-input:focus, :where([data-ui="minimal-saas"]) .ui-textarea:focus, :where([data-ui="minimal-saas"]) .ui-select:focus {
     border-color: var(--saas-focus);
     box-shadow: var(--saas-focus-ring);
   }
-  .saas-help-text {
+  .saas-help-text, :where([data-ui="minimal-saas"]) .ui-help-text {
     color: var(--saas-text-muted);
     font-size: .875rem;
     line-height: 1.45;
   }
-  .saas-check, .saas-radio {
+  .saas-check, .saas-radio, :where([data-ui="minimal-saas"]) .ui-check, :where([data-ui="minimal-saas"]) .ui-radio {
     align-items: center;
     gap: var(--saas-space-2);
     color: var(--saas-text);
@@ -2457,13 +2473,13 @@
     display: inline-flex;
   }
-  .saas-check input, .saas-radio input {
+  .saas-check input, .saas-radio input, :where([data-ui="minimal-saas"]) .ui-check input, :where([data-ui="minimal-saas"]) .ui-radio input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .saas-check-control, .saas-radio-control {
+  .saas-check-control, .saas-radio-control, :where([data-ui="minimal-saas"]) .ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio-control {
     background: var(--saas-surface-soft);
     border: 1px solid var(--saas-border);
     width: 1.35rem;
@@ -2473,28 +2489,28 @@
     display: inline-grid;
   }
-  .saas-check-control {
+  .saas-check-control, :where([data-ui="minimal-saas"]) .ui-check-control {
     border-radius: var(--saas-radius-xs);
   }
-  .saas-radio-control {
+  .saas-radio-control, :where([data-ui="minimal-saas"]) .ui-radio-control {
     border-radius: 50%;
   }
-  .saas-check input:checked + .saas-check-control, .saas-radio input:checked + .saas-radio-control {
+  .saas-check input:checked + .saas-check-control, .saas-radio input:checked + .saas-radio-control, :where([data-ui="minimal-saas"]) .ui-check input:checked+.ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio input:checked+.ui-radio-control {
     background: var(--saas-primary);
     border-color: var(--saas-primary);
     box-shadow: var(--saas-focus-ring);
   }
-  .saas-check input:checked + .saas-check-control:after {
+  .saas-check input:checked + .saas-check-control:after, :where([data-ui="minimal-saas"]) .ui-check input:checked+.ui-check-control:after {
     content: "✓";
     color: var(--saas-on-primary);
     font-size: .9rem;
     font-weight: 900;
   }
-  .saas-radio input:checked + .saas-radio-control:after {
+  .saas-radio input:checked + .saas-radio-control:after, :where([data-ui="minimal-saas"]) .ui-radio input:checked+.ui-radio-control:after {
     content: "";
     background: var(--saas-on-primary);
     border-radius: 50%;
@@ -2502,7 +2518,7 @@
     height: .55rem;
   }
-  .saas-switch {
+  .saas-switch, :where([data-ui="minimal-saas"]) .ui-switch {
     align-items: center;
     gap: var(--saas-space-3);
     color: var(--saas-text);
@@ -2510,13 +2526,13 @@
     display: inline-flex;
   }
-  .saas-switch input {
+  .saas-switch input, :where([data-ui="minimal-saas"]) .ui-switch input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .saas-switch-track {
+  .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-switch-track {
     background: var(--saas-surface-soft);
     border: 1px solid var(--saas-border);
     border-radius: var(--saas-radius-pill);
@@ -2526,7 +2542,7 @@
     position: relative;
   }
-  .saas-switch-thumb {
+  .saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch-thumb {
     background: var(--saas-surface-strong);
     border: 1px solid var(--saas-border);
     width: 1.34rem;
@@ -2539,17 +2555,17 @@
     left: .22rem;
   }
-  .saas-switch input:checked + .saas-switch-track {
+  .saas-switch input:checked + .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track {
     background: var(--saas-primary);
     border-color: var(--saas-primary);
   }
-  .saas-switch input:checked + .saas-switch-track .saas-switch-thumb {
+  .saas-switch input:checked + .saas-switch-track .saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
     background: var(--saas-on-primary);
     left: calc(100% - 1.56rem);
   }
-  .saas-badge {
+  .saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
     align-items: center;
     gap: var(--saas-space-1);
     background: var(--saas-surface-soft);
@@ -2564,37 +2580,37 @@
     display: inline-flex;
   }
-  .saas-badge-primary {
+  .saas-badge-primary, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--saas-primary);
     color: var(--saas-on-primary);
     border-color: var(--saas-primary);
   }
-  .saas-badge-secondary {
+  .saas-badge-secondary, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--saas-secondary);
     color: var(--saas-on-secondary);
     border-color: var(--saas-secondary);
   }
-  .saas-badge-success {
+  .saas-badge-success, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--saas-success);
     color: var(--saas-on-success);
     border-color: var(--saas-success);
   }
-  .saas-badge-warning {
+  .saas-badge-warning, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--saas-warning);
     color: var(--saas-on-warning);
     border-color: var(--saas-warning);
   }
-  .saas-badge-danger {
+  .saas-badge-danger, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--saas-danger);
     color: var(--saas-on-danger);
     border-color: var(--saas-danger);
   }
-  .saas-nav {
+  .saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
     align-items: center;
     gap: var(--saas-space-2);
     padding: var(--saas-space-2);
@@ -2606,7 +2622,7 @@
     display: flex;
   }
-  .saas-nav-link {
+  .saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--saas-text-muted);
     border-radius: var(--saas-radius-pill);
@@ -2619,12 +2635,12 @@
     display: inline-flex;
   }
-  .saas-nav-link:hover {
+  .saas-nav-link:hover, :where([data-ui="minimal-saas"]) .ui-nav-link:hover {
     color: var(--saas-text);
     background: var(--saas-surface-soft);
   }
-  .saas-nav-link[aria-current="page"], .saas-nav-link.is-active {
+  .saas-nav-link[aria-current="page"], .saas-nav-link.is-active, :where([data-ui="minimal-saas"]) .ui-nav-link[aria-current="page"], :where([data-ui="minimal-saas"]) .ui-nav-link.is-active {
     color: var(--saas-on-primary);
     background: var(--saas-primary);
   }
@@ -2655,7 +2671,7 @@
     transform: rotate(45deg);
   }
-  .saas-progress {
+  .saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
     background: var(--saas-surface-soft);
     border: 1px solid var(--saas-border);
     border-radius: var(--saas-radius-pill);
@@ -2664,14 +2680,14 @@
     overflow: hidden;
   }
-  .saas-progress-bar {
+  .saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
     height: 100%;
     width: var(--saas-progress-value, 50%);
     background: linear-gradient(90deg,var(--saas-primary),var(--saas-accent));
     border-radius: inherit;
   }
-  .saas-alert {
+  .saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
     gap: var(--saas-space-2);
     padding: var(--saas-space-4);
     background: var(--saas-surface);
@@ -2682,45 +2698,45 @@
     display: grid;
   }
-  .saas-alert-success {
+  .saas-alert-success, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--saas-success);
   }
-  .saas-alert-warning {
+  .saas-alert-warning, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--saas-warning);
   }
-  .saas-alert-danger {
+  .saas-alert-danger, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--saas-danger);
   }
-  .saas-alert-title {
+  .saas-alert-title, :where([data-ui="minimal-saas"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .saas-alert-body {
+  .saas-alert-body, :where([data-ui="minimal-saas"]) .ui-alert-body {
     color: var(--saas-text-muted);
     margin: 0;
     line-height: 1.55;
   }
-  .saas-table-wrap {
+  .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-table-wrap {
     overflow: auto;
   }
-  .saas-table {
+  .saas-table, :where([data-ui="minimal-saas"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .saas-table th, .saas-table td {
+  .saas-table th, .saas-table td, :where([data-ui="minimal-saas"]) .ui-table th, :where([data-ui="minimal-saas"]) .ui-table td {
     text-align: left;
     border-bottom: 1px solid var(--saas-border);
     padding: .95rem 1rem;
   }
-  .saas-table th {
+  .saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
     color: var(--saas-text);
     text-transform: uppercase;
     letter-spacing: .08em;
@@ -2729,11 +2745,11 @@
     font-weight: 900;
   }
-  .saas-table td {
+  .saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
     color: var(--saas-text-muted);
   }
-  .saas-table tr:hover td {
+  .saas-table tr:hover td, :where([data-ui="minimal-saas"]) .ui-table tr:hover td {
     background: rgb(var(--saas-primary-rgb)/.045);
   }
@@ -2879,12 +2895,12 @@
     inline-size: 3rem;
   }
-  .saas-button[aria-busy="true"], .saas-icon-button[aria-busy="true"], [data-ui="minimal-saas"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .saas-button[aria-busy="true"], .saas-icon-button[aria-busy="true"], [data-ui="minimal-saas"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="minimal-saas"]) .ui-button[aria-busy="true"], :where([data-ui="minimal-saas"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .saas-button[aria-busy="true"]:after, .saas-icon-button[aria-busy="true"]:after, [data-ui="minimal-saas"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .saas-button[aria-busy="true"]:after, .saas-icon-button[aria-busy="true"]:after, [data-ui="minimal-saas"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="minimal-saas"]) .ui-button[aria-busy="true"]:after, :where([data-ui="minimal-saas"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--saas-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -3110,7 +3126,7 @@
     background-size: var(--bento-theme-bg-size);
   }
-  .bento-title, .bento-heading, .bento-kicker, .bento-button, .bento-badge, .bento-nav-link {
+  .bento-title, .bento-heading, .bento-kicker, .bento-button, .bento-badge, .bento-nav-link, :where([data-ui="bento"]) .ui-button, :where([data-ui="bento"]) .ui-badge, :where([data-ui="bento"]) .ui-nav-link {
     font-family: var(--bento-font-heading);
   }
@@ -3156,7 +3172,7 @@
     height: 1px;
   }
-  .bento-surface, .bento-card, .bento-panel, .bento-toolbar, .bento-table-wrap {
+  .bento-surface, .bento-card, .bento-panel, .bento-toolbar, .bento-table-wrap, :where([data-ui="bento"]) .ui-card, :where([data-ui="bento"]) .ui-toolbar, :where([data-ui="bento"]) .ui-table-wrap {
     background: linear-gradient(135deg,rgb(var(--bento-primary-rgb)/.08),transparent 36%),linear-gradient(180deg,#ffffff14,#fff0),var(--bento-surface);
     color: var(--bento-text);
     border: 1px solid var(--bento-border);
@@ -3166,11 +3182,11 @@
     position: relative;
   }
-  .bento-card, .bento-panel {
+  .bento-card, .bento-panel, :where([data-ui="bento"]) .ui-card {
     padding: var(--bento-space-6);
   }
-  .bento-toolbar {
+  .bento-toolbar, :where([data-ui="bento"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--bento-space-4);
@@ -3203,7 +3219,7 @@
     transform: translateY(-3px) scale(1.005);
   }
-  .bento-button, .bento-icon-button {
+  .bento-button, .bento-icon-button, :where([data-ui="bento"]) .ui-button, :where([data-ui="bento"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -3227,87 +3243,87 @@
     display: inline-flex;
   }
-  .bento-button:hover, .bento-icon-button:hover {
+  .bento-button:hover, .bento-icon-button:hover, :where([data-ui="bento"]) .ui-button:hover, :where([data-ui="bento"]) .ui-icon-button:hover {
     border-color: var(--bento-primary);
     transform: translateY(-1px);
   }
-  .bento-button:active, .bento-icon-button:active, .bento-button[aria-pressed="true"], .bento-icon-button[aria-pressed="true"], .bento-button.is-active, .bento-icon-button.is-active {
+  .bento-button:active, .bento-icon-button:active, .bento-button[aria-pressed="true"], .bento-icon-button[aria-pressed="true"], .bento-button.is-active, .bento-icon-button.is-active, :where([data-ui="bento"]) .ui-button:active, :where([data-ui="bento"]) .ui-icon-button:active, :where([data-ui="bento"]) .ui-button[aria-pressed="true"], :where([data-ui="bento"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="bento"]) .ui-button.is-active, :where([data-ui="bento"]) .ui-icon-button.is-active {
     transform: translateY(1px);
     box-shadow: inset 0 3px 10px #0000002e;
   }
-  .bento-button-primary {
+  .bento-button-primary, :where([data-ui="bento"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--bento-primary);
     color: var(--bento-on-primary);
     border-color: var(--bento-primary);
   }
-  .bento-button-primary:hover {
+  .bento-button-primary:hover, :where([data-ui="bento"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--bento-primary-hover);
     border-color: var(--bento-primary-hover);
   }
-  .bento-button-secondary {
+  .bento-button-secondary, :where([data-ui="bento"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--bento-secondary);
     color: var(--bento-on-secondary);
     border-color: var(--bento-secondary);
   }
-  .bento-button-secondary:hover {
+  .bento-button-secondary:hover, :where([data-ui="bento"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--bento-secondary-hover);
     border-color: var(--bento-secondary-hover);
   }
-  .bento-button-danger {
+  .bento-button-danger, :where([data-ui="bento"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--bento-danger);
     color: var(--bento-on-danger);
     border-color: var(--bento-danger);
   }
-  .bento-button-ghost {
+  .bento-button-ghost, :where([data-ui="bento"]) .ui-button:where([data-ui-variant="ghost"]) {
     color: var(--bento-text);
     box-shadow: none;
     background: none;
   }
-  .bento-icon-button {
+  .bento-icon-button, :where([data-ui="bento"]) .ui-icon-button {
     border-radius: var(--bento-radius-pill);
     width: 2.75rem;
     padding: 0;
   }
-  .bento-button:disabled, .bento-icon-button:disabled, .bento-disabled {
+  .bento-button:disabled, .bento-icon-button:disabled, .bento-disabled, :where([data-ui="bento"]) .ui-button:disabled, :where([data-ui="bento"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .bento-card, .bento-panel {
+  .bento-card, .bento-panel, :where([data-ui="bento"]) .ui-card {
     background: var(--bento-card-bg);
   }
-  .bento-toolbar, .bento-table-wrap, .bento-button:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-ghost), .bento-icon-button {
+  .bento-toolbar, .bento-table-wrap, .bento-button:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-ghost), .bento-icon-button, :where([data-ui="bento"]) .ui-toolbar, :where([data-ui="bento"]) .ui-table-wrap, :where([data-ui="bento"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="bento"]) .ui-icon-button {
     background: var(--bento-control-bg);
   }
-  .bento-button, .bento-icon-button, .bento-badge, .bento-nav-link {
+  .bento-button, .bento-icon-button, .bento-badge, .bento-nav-link, :where([data-ui="bento"]) .ui-button, :where([data-ui="bento"]) .ui-icon-button, :where([data-ui="bento"]) .ui-badge, :where([data-ui="bento"]) .ui-nav-link {
     font-family: var(--bento-font-control);
   }
-  .bento-field {
+  .bento-field, :where([data-ui="bento"]) .ui-field {
     gap: var(--bento-space-2);
     flex-direction: column;
     display: flex;
   }
-  .bento-label {
+  .bento-label, :where([data-ui="bento"]) .ui-label {
     color: var(--bento-text);
     font-size: .925rem;
     font-weight: 800;
   }
-  .bento-input, .bento-textarea, .bento-select {
+  .bento-input, .bento-textarea, .bento-select, :where([data-ui="bento"]) .ui-input, :where([data-ui="bento"]) .ui-textarea, :where([data-ui="bento"]) .ui-select {
     background: var(--bento-surface-soft);
     width: 100%;
     min-height: 2.875rem;
@@ -3320,32 +3336,32 @@
     padding: .75rem 1rem;
   }
-  .bento-textarea {
+  .bento-textarea, :where([data-ui="bento"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .bento-input::placeholder, .bento-textarea::placeholder {
+  .bento-input::placeholder, .bento-textarea::placeholder, :where([data-ui="bento"]) .ui-input::placeholder, :where([data-ui="bento"]) .ui-textarea::placeholder {
     color: var(--bento-text-muted);
     opacity: .82;
   }
-  .bento-input:hover, .bento-textarea:hover, .bento-select:hover {
+  .bento-input:hover, .bento-textarea:hover, .bento-select:hover, :where([data-ui="bento"]) .ui-input:hover, :where([data-ui="bento"]) .ui-textarea:hover, :where([data-ui="bento"]) .ui-select:hover {
     border-color: rgb(var(--bento-primary-rgb)/.58);
   }
-  .bento-input:focus, .bento-textarea:focus, .bento-select:focus {
+  .bento-input:focus, .bento-textarea:focus, .bento-select:focus, :where([data-ui="bento"]) .ui-input:focus, :where([data-ui="bento"]) .ui-textarea:focus, :where([data-ui="bento"]) .ui-select:focus {
     border-color: var(--bento-focus);
     box-shadow: var(--bento-focus-ring);
   }
-  .bento-help-text {
+  .bento-help-text, :where([data-ui="bento"]) .ui-help-text {
     color: var(--bento-text-muted);
     font-size: .875rem;
     line-height: 1.45;
   }
-  .bento-check, .bento-radio {
+  .bento-check, .bento-radio, :where([data-ui="bento"]) .ui-check, :where([data-ui="bento"]) .ui-radio {
     align-items: center;
     gap: var(--bento-space-2);
     color: var(--bento-text);
@@ -3353,13 +3369,13 @@
     display: inline-flex;
   }
-  .bento-check input, .bento-radio input {
+  .bento-check input, .bento-radio input, :where([data-ui="bento"]) .ui-check input, :where([data-ui="bento"]) .ui-radio input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .bento-check-control, .bento-radio-control {
+  .bento-check-control, .bento-radio-control, :where([data-ui="bento"]) .ui-check-control, :where([data-ui="bento"]) .ui-radio-control {
     background: var(--bento-surface-soft);
     border: 1px solid var(--bento-border);
     width: 1.35rem;
@@ -3369,28 +3385,28 @@
     display: inline-grid;
   }
-  .bento-check-control {
+  .bento-check-control, :where([data-ui="bento"]) .ui-check-control {
     border-radius: var(--bento-radius-xs);
   }
-  .bento-radio-control {
+  .bento-radio-control, :where([data-ui="bento"]) .ui-radio-control {
     border-radius: 50%;
   }
-  .bento-check input:checked + .bento-check-control, .bento-radio input:checked + .bento-radio-control {
+  .bento-check input:checked + .bento-check-control, .bento-radio input:checked + .bento-radio-control, :where([data-ui="bento"]) .ui-check input:checked+.ui-check-control, :where([data-ui="bento"]) .ui-radio input:checked+.ui-radio-control {
     background: var(--bento-primary);
     border-color: var(--bento-primary);
     box-shadow: var(--bento-focus-ring);
   }
-  .bento-check input:checked + .bento-check-control:after {
+  .bento-check input:checked + .bento-check-control:after, :where([data-ui="bento"]) .ui-check input:checked+.ui-check-control:after {
     content: "✓";
     color: var(--bento-on-primary);
     font-size: .9rem;
     font-weight: 900;
   }
-  .bento-radio input:checked + .bento-radio-control:after {
+  .bento-radio input:checked + .bento-radio-control:after, :where([data-ui="bento"]) .ui-radio input:checked+.ui-radio-control:after {
     content: "";
     background: var(--bento-on-primary);
     border-radius: 50%;
@@ -3398,7 +3414,7 @@
     height: .55rem;
   }
-  .bento-switch {
+  .bento-switch, :where([data-ui="bento"]) .ui-switch {
     align-items: center;
     gap: var(--bento-space-3);
     color: var(--bento-text);
@@ -3406,13 +3422,13 @@
     display: inline-flex;
   }
-  .bento-switch input {
+  .bento-switch input, :where([data-ui="bento"]) .ui-switch input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .bento-switch-track {
+  .bento-switch-track, :where([data-ui="bento"]) .ui-switch-track {
     background: var(--bento-surface-soft);
     border: 1px solid var(--bento-border);
     border-radius: var(--bento-radius-pill);
@@ -3422,7 +3438,7 @@
     position: relative;
   }
-  .bento-switch-thumb {
+  .bento-switch-thumb, :where([data-ui="bento"]) .ui-switch-thumb {
     background: var(--bento-surface-strong);
     border: 1px solid var(--bento-border);
     width: 1.34rem;
@@ -3435,17 +3451,17 @@
     left: .22rem;
   }
-  .bento-switch input:checked + .bento-switch-track {
+  .bento-switch input:checked + .bento-switch-track, :where([data-ui="bento"]) .ui-switch input:checked+.ui-switch-track {
     background: var(--bento-primary);
     border-color: var(--bento-primary);
   }
-  .bento-switch input:checked + .bento-switch-track .bento-switch-thumb {
+  .bento-switch input:checked + .bento-switch-track .bento-switch-thumb, :where([data-ui="bento"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
     background: var(--bento-on-primary);
     left: calc(100% - 1.56rem);
   }
-  .bento-badge {
+  .bento-badge, :where([data-ui="bento"]) .ui-badge {
     align-items: center;
     gap: var(--bento-space-1);
     background: var(--bento-surface-soft);
@@ -3460,37 +3476,37 @@
     display: inline-flex;
   }
-  .bento-badge-primary {
+  .bento-badge-primary, :where([data-ui="bento"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--bento-primary);
     color: var(--bento-on-primary);
     border-color: var(--bento-primary);
   }
-  .bento-badge-secondary {
+  .bento-badge-secondary, :where([data-ui="bento"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--bento-secondary);
     color: var(--bento-on-secondary);
     border-color: var(--bento-secondary);
   }
-  .bento-badge-success {
+  .bento-badge-success, :where([data-ui="bento"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--bento-success);
     color: var(--bento-on-success);
     border-color: var(--bento-success);
   }
-  .bento-badge-warning {
+  .bento-badge-warning, :where([data-ui="bento"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--bento-warning);
     color: var(--bento-on-warning);
     border-color: var(--bento-warning);
   }
-  .bento-badge-danger {
+  .bento-badge-danger, :where([data-ui="bento"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--bento-danger);
     color: var(--bento-on-danger);
     border-color: var(--bento-danger);
   }
-  .bento-nav {
+  .bento-nav, :where([data-ui="bento"]) .ui-nav {
     align-items: center;
     gap: var(--bento-space-2);
     padding: var(--bento-space-2);
@@ -3502,7 +3518,7 @@
     display: flex;
   }
-  .bento-nav-link {
+  .bento-nav-link, :where([data-ui="bento"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--bento-text-muted);
     border-radius: var(--bento-radius-pill);
@@ -3515,12 +3531,12 @@
     display: inline-flex;
   }
-  .bento-nav-link:hover {
+  .bento-nav-link:hover, :where([data-ui="bento"]) .ui-nav-link:hover {
     color: var(--bento-text);
     background: var(--bento-surface-soft);
   }
-  .bento-nav-link[aria-current="page"], .bento-nav-link.is-active {
+  .bento-nav-link[aria-current="page"], .bento-nav-link.is-active, :where([data-ui="bento"]) .ui-nav-link[aria-current="page"], :where([data-ui="bento"]) .ui-nav-link.is-active {
     color: var(--bento-on-primary);
     background: var(--bento-primary);
   }
@@ -3550,7 +3566,7 @@
     transform: rotate(45deg);
   }
-  .bento-progress {
+  .bento-progress, :where([data-ui="bento"]) .ui-progress {
     background: var(--bento-surface-soft);
     border: 1px solid var(--bento-border);
     border-radius: var(--bento-radius-pill);
@@ -3559,14 +3575,14 @@
     overflow: hidden;
   }
-  .bento-progress-bar {
+  .bento-progress-bar, :where([data-ui="bento"]) .ui-progress-bar {
     height: 100%;
     width: var(--bento-progress-value, 50%);
     background: linear-gradient(90deg,var(--bento-primary),var(--bento-accent));
     border-radius: inherit;
   }
-  .bento-alert {
+  .bento-alert, :where([data-ui="bento"]) .ui-alert {
     gap: var(--bento-space-2);
     padding: var(--bento-space-4);
     background: var(--bento-surface);
@@ -3577,45 +3593,45 @@
     display: grid;
   }
-  .bento-alert-success {
+  .bento-alert-success, :where([data-ui="bento"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--bento-success);
   }
-  .bento-alert-warning {
+  .bento-alert-warning, :where([data-ui="bento"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--bento-warning);
   }
-  .bento-alert-danger {
+  .bento-alert-danger, :where([data-ui="bento"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--bento-danger);
   }
-  .bento-alert-title {
+  .bento-alert-title, :where([data-ui="bento"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .bento-alert-body {
+  .bento-alert-body, :where([data-ui="bento"]) .ui-alert-body {
     color: var(--bento-text-muted);
     margin: 0;
     line-height: 1.55;
   }
-  .bento-table-wrap {
+  .bento-table-wrap, :where([data-ui="bento"]) .ui-table-wrap {
     overflow: auto;
   }
-  .bento-table {
+  .bento-table, :where([data-ui="bento"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .bento-table th, .bento-table td {
+  .bento-table th, .bento-table td, :where([data-ui="bento"]) .ui-table th, :where([data-ui="bento"]) .ui-table td {
     text-align: left;
     border-bottom: 1px solid var(--bento-border);
     padding: .95rem 1rem;
   }
-  .bento-table th {
+  .bento-table th, :where([data-ui="bento"]) .ui-table th {
     color: var(--bento-text);
     text-transform: uppercase;
     letter-spacing: .08em;
@@ -3624,11 +3640,11 @@
     font-weight: 900;
   }
-  .bento-table td {
+  .bento-table td, :where([data-ui="bento"]) .ui-table td {
     color: var(--bento-text-muted);
   }
-  .bento-table tr:hover td {
+  .bento-table tr:hover td, :where([data-ui="bento"]) .ui-table tr:hover td {
     background: rgb(var(--bento-primary-rgb)/.045);
   }
@@ -3796,12 +3812,12 @@
     inline-size: 3rem;
   }
-  .bento-button[aria-busy="true"], .bento-icon-button[aria-busy="true"], [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .bento-button[aria-busy="true"], .bento-icon-button[aria-busy="true"], [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="bento"]) .ui-button[aria-busy="true"], :where([data-ui="bento"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .bento-button[aria-busy="true"]:after, .bento-icon-button[aria-busy="true"]:after, [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .bento-button[aria-busy="true"]:after, .bento-icon-button[aria-busy="true"]:after, [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="bento"]) .ui-button[aria-busy="true"]:after, :where([data-ui="bento"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--bento-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -4027,7 +4043,7 @@
     background-size: var(--max-theme-bg-size);
   }
-  .max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link {
+  .max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-badge, :where([data-ui="maximalist"]) .ui-nav-link {
     font-family: var(--max-font-heading);
   }
@@ -4074,7 +4090,7 @@
     height: 3px;
   }
-  .max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap {
+  .max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap, :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap {
     background: linear-gradient(135deg,rgb(var(--max-accent-rgb)/.18),transparent 42%),var(--max-surface);
     color: var(--max-text);
     border: 3px solid var(--max-border);
@@ -4084,11 +4100,11 @@
     position: relative;
   }
-  .max-card, .max-panel {
+  .max-card, .max-panel, :where([data-ui="maximalist"]) .ui-card {
     padding: var(--max-space-6);
   }
-  .max-toolbar {
+  .max-toolbar, :where([data-ui="maximalist"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--max-space-4);
@@ -4121,7 +4137,7 @@
     transform: translate(-2px, -2px);
   }
-  .max-button, .max-icon-button {
+  .max-button, .max-icon-button, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -4145,87 +4161,87 @@
     display: inline-flex;
   }
-  .max-button:hover, .max-icon-button:hover {
+  .max-button:hover, .max-icon-button:hover, :where([data-ui="maximalist"]) .ui-button:hover, :where([data-ui="maximalist"]) .ui-icon-button:hover {
     border-color: var(--max-primary);
     transform: translateY(-1px);
   }
-  .max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active {
+  .max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active, :where([data-ui="maximalist"]) .ui-button:active, :where([data-ui="maximalist"]) .ui-icon-button:active, :where([data-ui="maximalist"]) .ui-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-button.is-active, :where([data-ui="maximalist"]) .ui-icon-button.is-active {
     transform: translateY(1px);
     box-shadow: inset 0 3px 10px #0000002e;
   }
-  .max-button-primary {
+  .max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--max-primary);
     color: var(--max-on-primary);
     border-color: var(--max-primary);
   }
-  .max-button-primary:hover {
+  .max-button-primary:hover, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--max-primary-hover);
     border-color: var(--max-primary-hover);
   }
-  .max-button-secondary {
+  .max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--max-secondary);
     color: var(--max-on-secondary);
     border-color: var(--max-secondary);
   }
-  .max-button-secondary:hover {
+  .max-button-secondary:hover, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--max-secondary-hover);
     border-color: var(--max-secondary-hover);
   }
-  .max-button-danger {
+  .max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--max-danger);
     color: var(--max-on-danger);
     border-color: var(--max-danger);
   }
-  .max-button-ghost {
+  .max-button-ghost, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="ghost"]) {
     color: var(--max-text);
     box-shadow: none;
     background: none;
   }
-  .max-icon-button {
+  .max-icon-button, :where([data-ui="maximalist"]) .ui-icon-button {
     border-radius: var(--max-radius-pill);
     width: 2.75rem;
     padding: 0;
   }
-  .max-button:disabled, .max-icon-button:disabled, .max-disabled {
+  .max-button:disabled, .max-icon-button:disabled, .max-disabled, :where([data-ui="maximalist"]) .ui-button:disabled, :where([data-ui="maximalist"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .max-card, .max-panel {
+  .max-card, .max-panel, :where([data-ui="maximalist"]) .ui-card {
     background: var(--max-card-bg);
   }
-  .max-toolbar, .max-table-wrap, .max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-ghost), .max-icon-button {
+  .max-toolbar, .max-table-wrap, .max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-ghost), .max-icon-button, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="maximalist"]) .ui-icon-button {
     background: var(--max-control-bg);
   }
-  .max-button, .max-icon-button, .max-badge, .max-nav-link {
+  .max-button, .max-icon-button, .max-badge, .max-nav-link, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button, :where([data-ui="maximalist"]) .ui-badge, :where([data-ui="maximalist"]) .ui-nav-link {
     font-family: var(--max-font-control);
   }
-  .max-field {
+  .max-field, :where([data-ui="maximalist"]) .ui-field {
     gap: var(--max-space-2);
     flex-direction: column;
     display: flex;
   }
-  .max-label {
+  .max-label, :where([data-ui="maximalist"]) .ui-label {
     color: var(--max-text);
     font-size: .925rem;
     font-weight: 800;
   }
-  .max-input, .max-textarea, .max-select {
+  .max-input, .max-textarea, .max-select, :where([data-ui="maximalist"]) .ui-input, :where([data-ui="maximalist"]) .ui-textarea, :where([data-ui="maximalist"]) .ui-select {
     background: var(--max-surface-soft);
     width: 100%;
     min-height: 2.875rem;
@@ -4238,32 +4254,32 @@
     padding: .75rem 1rem;
   }
-  .max-textarea {
+  .max-textarea, :where([data-ui="maximalist"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .max-input::placeholder, .max-textarea::placeholder {
+  .max-input::placeholder, .max-textarea::placeholder, :where([data-ui="maximalist"]) .ui-input::placeholder, :where([data-ui="maximalist"]) .ui-textarea::placeholder {
     color: var(--max-text-muted);
     opacity: .82;
   }
-  .max-input:hover, .max-textarea:hover, .max-select:hover {
+  .max-input:hover, .max-textarea:hover, .max-select:hover, :where([data-ui="maximalist"]) .ui-input:hover, :where([data-ui="maximalist"]) .ui-textarea:hover, :where([data-ui="maximalist"]) .ui-select:hover {
     border-color: rgb(var(--max-primary-rgb)/.58);
   }
-  .max-input:focus, .max-textarea:focus, .max-select:focus {
+  .max-input:focus, .max-textarea:focus, .max-select:focus, :where([data-ui="maximalist"]) .ui-input:focus, :where([data-ui="maximalist"]) .ui-textarea:focus, :where([data-ui="maximalist"]) .ui-select:focus {
     border-color: var(--max-focus);
     box-shadow: var(--max-focus-ring);
   }
-  .max-help-text {
+  .max-help-text, :where([data-ui="maximalist"]) .ui-help-text {
     color: var(--max-text-muted);
     font-size: .875rem;
     line-height: 1.45;
   }
-  .max-check, .max-radio {
+  .max-check, .max-radio, :where([data-ui="maximalist"]) .ui-check, :where([data-ui="maximalist"]) .ui-radio {
     align-items: center;
     gap: var(--max-space-2);
     color: var(--max-text);
@@ -4271,13 +4287,13 @@
     display: inline-flex;
   }
-  .max-check input, .max-radio input {
+  .max-check input, .max-radio input, :where([data-ui="maximalist"]) .ui-check input, :where([data-ui="maximalist"]) .ui-radio input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .max-check-control, .max-radio-control {
+  .max-check-control, .max-radio-control, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-radio-control {
     background: var(--max-surface-soft);
     border: 3px solid var(--max-border);
     width: 1.35rem;
@@ -4287,28 +4303,28 @@
     display: inline-grid;
   }
-  .max-check-control {
+  .max-check-control, :where([data-ui="maximalist"]) .ui-check-control {
     border-radius: var(--max-radius-xs);
   }
-  .max-radio-control {
+  .max-radio-control, :where([data-ui="maximalist"]) .ui-radio-control {
     border-radius: 50%;
   }
-  .max-check input:checked + .max-check-control, .max-radio input:checked + .max-radio-control {
+  .max-check input:checked + .max-check-control, .max-radio input:checked + .max-radio-control, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control, :where([data-ui="maximalist"]) .ui-radio input:checked+.ui-radio-control {
     background: var(--max-primary);
     border-color: var(--max-primary);
     box-shadow: var(--max-focus-ring);
   }
-  .max-check input:checked + .max-check-control:after {
+  .max-check input:checked + .max-check-control:after, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control:after {
     content: "✓";
     color: var(--max-on-primary);
     font-size: .9rem;
     font-weight: 900;
   }
-  .max-radio input:checked + .max-radio-control:after {
+  .max-radio input:checked + .max-radio-control:after, :where([data-ui="maximalist"]) .ui-radio input:checked+.ui-radio-control:after {
     content: "";
     background: var(--max-on-primary);
     border-radius: 50%;
@@ -4316,7 +4332,7 @@
     height: .55rem;
   }
-  .max-switch {
+  .max-switch, :where([data-ui="maximalist"]) .ui-switch {
     align-items: center;
     gap: var(--max-space-3);
     color: var(--max-text);
@@ -4324,13 +4340,13 @@
     display: inline-flex;
   }
-  .max-switch input {
+  .max-switch input, :where([data-ui="maximalist"]) .ui-switch input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .max-switch-track {
+  .max-switch-track, :where([data-ui="maximalist"]) .ui-switch-track {
     background: var(--max-surface-soft);
     border: 3px solid var(--max-border);
     border-radius: var(--max-radius-pill);
@@ -4340,7 +4356,7 @@
     position: relative;
   }
-  .max-switch-thumb {
+  .max-switch-thumb, :where([data-ui="maximalist"]) .ui-switch-thumb {
     background: var(--max-surface-strong);
     border: 3px solid var(--max-border);
     width: 1.34rem;
@@ -4353,17 +4369,17 @@
     left: .22rem;
   }
-  .max-switch input:checked + .max-switch-track {
+  .max-switch input:checked + .max-switch-track, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track {
     background: var(--max-primary);
     border-color: var(--max-primary);
   }
-  .max-switch input:checked + .max-switch-track .max-switch-thumb {
+  .max-switch input:checked + .max-switch-track .max-switch-thumb, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
     background: var(--max-on-primary);
     left: calc(100% - 1.56rem);
   }
-  .max-badge {
+  .max-badge, :where([data-ui="maximalist"]) .ui-badge {
     align-items: center;
     gap: var(--max-space-1);
     background: var(--max-surface-soft);
@@ -4378,37 +4394,37 @@
     display: inline-flex;
   }
-  .max-badge-primary {
+  .max-badge-primary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--max-primary);
     color: var(--max-on-primary);
     border-color: var(--max-primary);
   }
-  .max-badge-secondary {
+  .max-badge-secondary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--max-secondary);
     color: var(--max-on-secondary);
     border-color: var(--max-secondary);
   }
-  .max-badge-success {
+  .max-badge-success, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--max-success);
     color: var(--max-on-success);
     border-color: var(--max-success);
   }
-  .max-badge-warning {
+  .max-badge-warning, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--max-warning);
     color: var(--max-on-warning);
     border-color: var(--max-warning);
   }
-  .max-badge-danger {
+  .max-badge-danger, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--max-danger);
     color: var(--max-on-danger);
     border-color: var(--max-danger);
   }
-  .max-nav {
+  .max-nav, :where([data-ui="maximalist"]) .ui-nav {
     align-items: center;
     gap: var(--max-space-2);
     padding: var(--max-space-2);
@@ -4420,7 +4436,7 @@
     display: flex;
   }
-  .max-nav-link {
+  .max-nav-link, :where([data-ui="maximalist"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--max-text-muted);
     border-radius: var(--max-radius-pill);
@@ -4433,12 +4449,12 @@
     display: inline-flex;
   }
-  .max-nav-link:hover {
+  .max-nav-link:hover, :where([data-ui="maximalist"]) .ui-nav-link:hover {
     color: var(--max-text);
     background: var(--max-surface-soft);
   }
-  .max-nav-link[aria-current="page"], .max-nav-link.is-active {
+  .max-nav-link[aria-current="page"], .max-nav-link.is-active, :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active {
     color: var(--max-on-primary);
     background: var(--max-primary);
   }
@@ -4470,7 +4486,7 @@
     transform: rotate(45deg);
   }
-  .max-progress {
+  .max-progress, :where([data-ui="maximalist"]) .ui-progress {
     background: var(--max-surface-soft);
     border: 3px solid var(--max-border);
     border-radius: var(--max-radius-pill);
@@ -4479,14 +4495,14 @@
     overflow: hidden;
   }
-  .max-progress-bar {
+  .max-progress-bar, :where([data-ui="maximalist"]) .ui-progress-bar {
     height: 100%;
     width: var(--max-progress-value, 50%);
     background: linear-gradient(90deg,var(--max-primary),var(--max-accent));
     border-radius: inherit;
   }
-  .max-alert {
+  .max-alert, :where([data-ui="maximalist"]) .ui-alert {
     gap: var(--max-space-2);
     padding: var(--max-space-4);
     background: var(--max-surface);
@@ -4497,45 +4513,45 @@
     display: grid;
   }
-  .max-alert-success {
+  .max-alert-success, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--max-success);
   }
-  .max-alert-warning {
+  .max-alert-warning, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--max-warning);
   }
-  .max-alert-danger {
+  .max-alert-danger, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--max-danger);
   }
-  .max-alert-title {
+  .max-alert-title, :where([data-ui="maximalist"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .max-alert-body {
+  .max-alert-body, :where([data-ui="maximalist"]) .ui-alert-body {
     color: var(--max-text-muted);
     margin: 0;
     line-height: 1.55;
   }
-  .max-table-wrap {
+  .max-table-wrap, :where([data-ui="maximalist"]) .ui-table-wrap {
     overflow: auto;
   }
-  .max-table {
+  .max-table, :where([data-ui="maximalist"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .max-table th, .max-table td {
+  .max-table th, .max-table td, :where([data-ui="maximalist"]) .ui-table th, :where([data-ui="maximalist"]) .ui-table td {
     text-align: left;
     border-bottom: 3px solid var(--max-border);
     padding: .95rem 1rem;
   }
-  .max-table th {
+  .max-table th, :where([data-ui="maximalist"]) .ui-table th {
     color: var(--max-text);
     text-transform: uppercase;
     letter-spacing: .08em;
@@ -4544,11 +4560,11 @@
     font-weight: 900;
   }
-  .max-table td {
+  .max-table td, :where([data-ui="maximalist"]) .ui-table td {
     color: var(--max-text-muted);
   }
-  .max-table tr:hover td {
+  .max-table tr:hover td, :where([data-ui="maximalist"]) .ui-table tr:hover td {
     background: rgb(var(--max-primary-rgb)/.045);
   }
@@ -4701,12 +4717,12 @@
     inline-size: 3rem;
   }
-  .max-button[aria-busy="true"], .max-icon-button[aria-busy="true"], [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .max-button[aria-busy="true"], .max-icon-button[aria-busy="true"], [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="maximalist"]) .ui-button[aria-busy="true"], :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="maximalist"]) .ui-button[aria-busy="true"]:after, :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--max-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -4933,7 +4949,7 @@
     background-size: var(--bau-theme-bg-size);
   }
-  .bau-title, .bau-heading, .bau-kicker, .bau-button, .bau-badge, .bau-nav-link {
+  .bau-title, .bau-heading, .bau-kicker, .bau-button, .bau-badge, .bau-nav-link, :where([data-ui="bauhaus"]) .ui-button, :where([data-ui="bauhaus"]) .ui-badge, :where([data-ui="bauhaus"]) .ui-nav-link {
     font-family: var(--bau-font-heading);
   }
@@ -4980,7 +4996,7 @@
     height: 2px;
   }
-  .bau-surface, .bau-card, .bau-panel, .bau-toolbar, .bau-table-wrap {
+  .bau-surface, .bau-card, .bau-panel, .bau-toolbar, .bau-table-wrap, :where([data-ui="bauhaus"]) .ui-card, :where([data-ui="bauhaus"]) .ui-toolbar, :where([data-ui="bauhaus"]) .ui-table-wrap {
     background: linear-gradient(90deg,rgb(var(--bau-primary-rgb)/.1)0 .5rem,transparent .5rem),var(--bau-surface);
     color: var(--bau-text);
     border: 2px solid var(--bau-border);
@@ -4990,11 +5006,11 @@
     position: relative;
   }
-  .bau-card, .bau-panel {
+  .bau-card, .bau-panel, :where([data-ui="bauhaus"]) .ui-card {
     padding: var(--bau-space-6);
   }
-  .bau-toolbar {
+  .bau-toolbar, :where([data-ui="bauhaus"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--bau-space-4);
@@ -5027,7 +5043,7 @@
     transform: translate(-3px, -3px);
   }
-  .bau-button, .bau-icon-button {
+  .bau-button, .bau-icon-button, :where([data-ui="bauhaus"]) .ui-button, :where([data-ui="bauhaus"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -5051,87 +5067,87 @@
     display: inline-flex;
   }
-  .bau-button:hover, .bau-icon-button:hover {
+  .bau-button:hover, .bau-icon-button:hover, :where([data-ui="bauhaus"]) .ui-button:hover, :where([data-ui="bauhaus"]) .ui-icon-button:hover {
     border-color: var(--bau-primary);
     transform: translateY(-1px);
   }
-  .bau-button:active, .bau-icon-button:active, .bau-button[aria-pressed="true"], .bau-icon-button[aria-pressed="true"], .bau-button.is-active, .bau-icon-button.is-active {
+  .bau-button:active, .bau-icon-button:active, .bau-button[aria-pressed="true"], .bau-icon-button[aria-pressed="true"], .bau-button.is-active, .bau-icon-button.is-active, :where([data-ui="bauhaus"]) .ui-button:active, :where([data-ui="bauhaus"]) .ui-icon-button:active, :where([data-ui="bauhaus"]) .ui-button[aria-pressed="true"], :where([data-ui="bauhaus"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="bauhaus"]) .ui-button.is-active, :where([data-ui="bauhaus"]) .ui-icon-button.is-active {
     transform: translateY(1px);
     box-shadow: inset 0 3px 10px #0000002e;
   }
-  .bau-button-primary {
+  .bau-button-primary, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--bau-primary);
     color: var(--bau-on-primary);
     border-color: var(--bau-primary);
   }
-  .bau-button-primary:hover {
+  .bau-button-primary:hover, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--bau-primary-hover);
     border-color: var(--bau-primary-hover);
   }
-  .bau-button-secondary {
+  .bau-button-secondary, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--bau-secondary);
     color: var(--bau-on-secondary);
     border-color: var(--bau-secondary);
   }
-  .bau-button-secondary:hover {
+  .bau-button-secondary:hover, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--bau-secondary-hover);
     border-color: var(--bau-secondary-hover);
   }
-  .bau-button-danger {
+  .bau-button-danger, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--bau-danger);
     color: var(--bau-on-danger);
     border-color: var(--bau-danger);
   }
-  .bau-button-ghost {
+  .bau-button-ghost, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="ghost"]) {
     color: var(--bau-text);
     box-shadow: none;
     background: none;
   }
-  .bau-icon-button {
+  .bau-icon-button, :where([data-ui="bauhaus"]) .ui-icon-button {
     border-radius: var(--bau-radius-pill);
     width: 2.75rem;
     padding: 0;
   }
-  .bau-button:disabled, .bau-icon-button:disabled, .bau-disabled {
+  .bau-button:disabled, .bau-icon-button:disabled, .bau-disabled, :where([data-ui="bauhaus"]) .ui-button:disabled, :where([data-ui="bauhaus"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .bau-card, .bau-panel {
+  .bau-card, .bau-panel, :where([data-ui="bauhaus"]) .ui-card {
     background: var(--bau-card-bg);
   }
-  .bau-toolbar, .bau-table-wrap, .bau-button:not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-ghost), .bau-icon-button {
+  .bau-toolbar, .bau-table-wrap, .bau-button:not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-ghost), .bau-icon-button, :where([data-ui="bauhaus"]) .ui-toolbar, :where([data-ui="bauhaus"]) .ui-table-wrap, :where([data-ui="bauhaus"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="bauhaus"]) .ui-icon-button {
     background: var(--bau-control-bg);
   }
-  .bau-button, .bau-icon-button, .bau-badge, .bau-nav-link {
+  .bau-button, .bau-icon-button, .bau-badge, .bau-nav-link, :where([data-ui="bauhaus"]) .ui-button, :where([data-ui="bauhaus"]) .ui-icon-button, :where([data-ui="bauhaus"]) .ui-badge, :where([data-ui="bauhaus"]) .ui-nav-link {
     font-family: var(--bau-font-control);
   }
-  .bau-field {
+  .bau-field, :where([data-ui="bauhaus"]) .ui-field {
     gap: var(--bau-space-2);
     flex-direction: column;
     display: flex;
   }
-  .bau-label {
+  .bau-label, :where([data-ui="bauhaus"]) .ui-label {
     color: var(--bau-text);
     font-size: .925rem;
     font-weight: 800;
   }
-  .bau-input, .bau-textarea, .bau-select {
+  .bau-input, .bau-textarea, .bau-select, :where([data-ui="bauhaus"]) .ui-input, :where([data-ui="bauhaus"]) .ui-textarea, :where([data-ui="bauhaus"]) .ui-select {
     background: var(--bau-surface-soft);
     width: 100%;
     min-height: 2.875rem;
@@ -5144,32 +5160,32 @@
     padding: .75rem 1rem;
   }
-  .bau-textarea {
+  .bau-textarea, :where([data-ui="bauhaus"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .bau-input::placeholder, .bau-textarea::placeholder {
+  .bau-input::placeholder, .bau-textarea::placeholder, :where([data-ui="bauhaus"]) .ui-input::placeholder, :where([data-ui="bauhaus"]) .ui-textarea::placeholder {
     color: var(--bau-text-muted);
     opacity: .82;
   }
-  .bau-input:hover, .bau-textarea:hover, .bau-select:hover {
+  .bau-input:hover, .bau-textarea:hover, .bau-select:hover, :where([data-ui="bauhaus"]) .ui-input:hover, :where([data-ui="bauhaus"]) .ui-textarea:hover, :where([data-ui="bauhaus"]) .ui-select:hover {
     border-color: rgb(var(--bau-primary-rgb)/.58);
   }
-  .bau-input:focus, .bau-textarea:focus, .bau-select:focus {
+  .bau-input:focus, .bau-textarea:focus, .bau-select:focus, :where([data-ui="bauhaus"]) .ui-input:focus, :where([data-ui="bauhaus"]) .ui-textarea:focus, :where([data-ui="bauhaus"]) .ui-select:focus {
     border-color: var(--bau-focus);
     box-shadow: var(--bau-focus-ring);
   }
-  .bau-help-text {
+  .bau-help-text, :where([data-ui="bauhaus"]) .ui-help-text {
     color: var(--bau-text-muted);
     font-size: .875rem;
     line-height: 1.45;
   }
-  .bau-check, .bau-radio {
+  .bau-check, .bau-radio, :where([data-ui="bauhaus"]) .ui-check, :where([data-ui="bauhaus"]) .ui-radio {
     align-items: center;
     gap: var(--bau-space-2);
     color: var(--bau-text);
@@ -5177,13 +5193,13 @@
     display: inline-flex;
   }
-  .bau-check input, .bau-radio input {
+  .bau-check input, .bau-radio input, :where([data-ui="bauhaus"]) .ui-check input, :where([data-ui="bauhaus"]) .ui-radio input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .bau-check-control, .bau-radio-control {
+  .bau-check-control, .bau-radio-control, :where([data-ui="bauhaus"]) .ui-check-control, :where([data-ui="bauhaus"]) .ui-radio-control {
     background: var(--bau-surface-soft);
     border: 2px solid var(--bau-border);
     width: 1.35rem;
@@ -5193,28 +5209,28 @@
     display: inline-grid;
   }
-  .bau-check-control {
+  .bau-check-control, :where([data-ui="bauhaus"]) .ui-check-control {
     border-radius: var(--bau-radius-xs);
   }
-  .bau-radio-control {
+  .bau-radio-control, :where([data-ui="bauhaus"]) .ui-radio-control {
     border-radius: 50%;
   }
-  .bau-check input:checked + .bau-check-control, .bau-radio input:checked + .bau-radio-control {
+  .bau-check input:checked + .bau-check-control, .bau-radio input:checked + .bau-radio-control, :where([data-ui="bauhaus"]) .ui-check input:checked+.ui-check-control, :where([data-ui="bauhaus"]) .ui-radio input:checked+.ui-radio-control {
     background: var(--bau-primary);
     border-color: var(--bau-primary);
     box-shadow: var(--bau-focus-ring);
   }
-  .bau-check input:checked + .bau-check-control:after {
+  .bau-check input:checked + .bau-check-control:after, :where([data-ui="bauhaus"]) .ui-check input:checked+.ui-check-control:after {
     content: "✓";
     color: var(--bau-on-primary);
     font-size: .9rem;
     font-weight: 900;
   }
-  .bau-radio input:checked + .bau-radio-control:after {
+  .bau-radio input:checked + .bau-radio-control:after, :where([data-ui="bauhaus"]) .ui-radio input:checked+.ui-radio-control:after {
     content: "";
     background: var(--bau-on-primary);
     border-radius: 50%;
@@ -5222,7 +5238,7 @@
     height: .55rem;
   }
-  .bau-switch {
+  .bau-switch, :where([data-ui="bauhaus"]) .ui-switch {
     align-items: center;
     gap: var(--bau-space-3);
     color: var(--bau-text);
@@ -5230,13 +5246,13 @@
     display: inline-flex;
   }
-  .bau-switch input {
+  .bau-switch input, :where([data-ui="bauhaus"]) .ui-switch input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .bau-switch-track {
+  .bau-switch-track, :where([data-ui="bauhaus"]) .ui-switch-track {
     background: var(--bau-surface-soft);
     border: 2px solid var(--bau-border);
     border-radius: var(--bau-radius-pill);
@@ -5246,7 +5262,7 @@
     position: relative;
   }
-  .bau-switch-thumb {
+  .bau-switch-thumb, :where([data-ui="bauhaus"]) .ui-switch-thumb {
     background: var(--bau-surface-strong);
     border: 2px solid var(--bau-border);
     width: 1.34rem;
@@ -5259,17 +5275,17 @@
     left: .22rem;
   }
-  .bau-switch input:checked + .bau-switch-track {
+  .bau-switch input:checked + .bau-switch-track, :where([data-ui="bauhaus"]) .ui-switch input:checked+.ui-switch-track {
     background: var(--bau-primary);
     border-color: var(--bau-primary);
   }
-  .bau-switch input:checked + .bau-switch-track .bau-switch-thumb {
+  .bau-switch input:checked + .bau-switch-track .bau-switch-thumb, :where([data-ui="bauhaus"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
     background: var(--bau-on-primary);
     left: calc(100% - 1.56rem);
   }
-  .bau-badge {
+  .bau-badge, :where([data-ui="bauhaus"]) .ui-badge {
     align-items: center;
     gap: var(--bau-space-1);
     background: var(--bau-surface-soft);
@@ -5284,37 +5300,37 @@
     display: inline-flex;
   }
-  .bau-badge-primary {
+  .bau-badge-primary, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--bau-primary);
     color: var(--bau-on-primary);
     border-color: var(--bau-primary);
   }
-  .bau-badge-secondary {
+  .bau-badge-secondary, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--bau-secondary);
     color: var(--bau-on-secondary);
     border-color: var(--bau-secondary);
   }
-  .bau-badge-success {
+  .bau-badge-success, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--bau-success);
     color: var(--bau-on-success);
     border-color: var(--bau-success);
   }
-  .bau-badge-warning {
+  .bau-badge-warning, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--bau-warning);
     color: var(--bau-on-warning);
     border-color: var(--bau-warning);
   }
-  .bau-badge-danger {
+  .bau-badge-danger, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--bau-danger);
     color: var(--bau-on-danger);
     border-color: var(--bau-danger);
   }
-  .bau-nav {
+  .bau-nav, :where([data-ui="bauhaus"]) .ui-nav {
     align-items: center;
     gap: var(--bau-space-2);
     padding: var(--bau-space-2);
@@ -5326,7 +5342,7 @@
     display: flex;
   }
-  .bau-nav-link {
+  .bau-nav-link, :where([data-ui="bauhaus"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--bau-text-muted);
     border-radius: var(--bau-radius-pill);
@@ -5339,12 +5355,12 @@
     display: inline-flex;
   }
-  .bau-nav-link:hover {
+  .bau-nav-link:hover, :where([data-ui="bauhaus"]) .ui-nav-link:hover {
     color: var(--bau-text);
     background: var(--bau-surface-soft);
   }
-  .bau-nav-link[aria-current="page"], .bau-nav-link.is-active {
+  .bau-nav-link[aria-current="page"], .bau-nav-link.is-active, :where([data-ui="bauhaus"]) .ui-nav-link[aria-current="page"], :where([data-ui="bauhaus"]) .ui-nav-link.is-active {
     color: var(--bau-on-primary);
     background: var(--bau-primary);
   }
@@ -5375,7 +5391,7 @@
     transform: rotate(45deg);
   }
-  .bau-progress {
+  .bau-progress, :where([data-ui="bauhaus"]) .ui-progress {
     background: var(--bau-surface-soft);
     border: 2px solid var(--bau-border);
     border-radius: var(--bau-radius-pill);
@@ -5384,14 +5400,14 @@
     overflow: hidden;
   }
-  .bau-progress-bar {
+  .bau-progress-bar, :where([data-ui="bauhaus"]) .ui-progress-bar {
     height: 100%;
     width: var(--bau-progress-value, 50%);
     background: linear-gradient(90deg,var(--bau-primary),var(--bau-accent));
     border-radius: inherit;
   }
-  .bau-alert {
+  .bau-alert, :where([data-ui="bauhaus"]) .ui-alert {
     gap: var(--bau-space-2);
     padding: var(--bau-space-4);
     background: var(--bau-surface);
@@ -5402,45 +5418,45 @@
     display: grid;
   }
-  .bau-alert-success {
+  .bau-alert-success, :where([data-ui="bauhaus"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--bau-success);
   }
-  .bau-alert-warning {
+  .bau-alert-warning, :where([data-ui="bauhaus"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--bau-warning);
   }
-  .bau-alert-danger {
+  .bau-alert-danger, :where([data-ui="bauhaus"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--bau-danger);
   }
-  .bau-alert-title {
+  .bau-alert-title, :where([data-ui="bauhaus"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .bau-alert-body {
+  .bau-alert-body, :where([data-ui="bauhaus"]) .ui-alert-body {
     color: var(--bau-text-muted);
     margin: 0;
     line-height: 1.55;
   }
-  .bau-table-wrap {
+  .bau-table-wrap, :where([data-ui="bauhaus"]) .ui-table-wrap {
     overflow: auto;
   }
-  .bau-table {
+  .bau-table, :where([data-ui="bauhaus"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .bau-table th, .bau-table td {
+  .bau-table th, .bau-table td, :where([data-ui="bauhaus"]) .ui-table th, :where([data-ui="bauhaus"]) .ui-table td {
     text-align: left;
     border-bottom: 2px solid var(--bau-border);
     padding: .95rem 1rem;
   }
-  .bau-table th {
+  .bau-table th, :where([data-ui="bauhaus"]) .ui-table th {
     color: var(--bau-text);
     text-transform: uppercase;
     letter-spacing: .08em;
@@ -5449,11 +5465,11 @@
     font-weight: 900;
   }
-  .bau-table td {
+  .bau-table td, :where([data-ui="bauhaus"]) .ui-table td {
     color: var(--bau-text-muted);
   }
-  .bau-table tr:hover td {
+  .bau-table tr:hover td, :where([data-ui="bauhaus"]) .ui-table tr:hover td {
     background: rgb(var(--bau-primary-rgb)/.045);
   }
@@ -5599,12 +5615,12 @@
     inline-size: 3rem;
   }
-  .bau-button[aria-busy="true"], .bau-icon-button[aria-busy="true"], [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .bau-button[aria-busy="true"], .bau-icon-button[aria-busy="true"], [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="bauhaus"]) .ui-button[aria-busy="true"], :where([data-ui="bauhaus"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .bau-button[aria-busy="true"]:after, .bau-icon-button[aria-busy="true"]:after, [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .bau-button[aria-busy="true"]:after, .bau-icon-button[aria-busy="true"]:after, [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="bauhaus"]) .ui-button[aria-busy="true"]:after, :where([data-ui="bauhaus"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--bau-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -5830,7 +5846,7 @@
     background-size: var(--tactile-theme-bg-size);
   }
-  .tactile-title, .tactile-heading, .tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link {
+  .tactile-title, .tactile-heading, .tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-badge, :where([data-ui="tactile"]) .ui-nav-link {
     font-family: var(--tactile-font-heading);
   }
@@ -5876,7 +5892,7 @@
     height: 1px;
   }
-  .tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap {
+  .tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap, :where([data-ui="tactile"]) .ui-card, :where([data-ui="tactile"]) .ui-toolbar, :where([data-ui="tactile"]) .ui-table-wrap {
     background: linear-gradient(180deg,#ffffff2e,#ffffff08),linear-gradient(135deg,rgb(var(--tactile-primary-rgb)/.07),transparent 46%),var(--tactile-surface);
     color: var(--tactile-text);
     border: 1px solid var(--tactile-border);
@@ -5886,11 +5902,11 @@
     position: relative;
   }
-  .tactile-card, .tactile-panel {
+  .tactile-card, .tactile-panel, :where([data-ui="tactile"]) .ui-card {
     padding: var(--tactile-space-6);
   }
-  .tactile-toolbar {
+  .tactile-toolbar, :where([data-ui="tactile"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--tactile-space-4);
@@ -5923,7 +5939,7 @@
     transform: translateY(-2px);
   }
-  .tactile-button, .tactile-icon-button {
+  .tactile-button, .tactile-icon-button, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -5947,87 +5963,87 @@
     display: inline-flex;
   }
-  .tactile-button:hover, .tactile-icon-button:hover {
+  .tactile-button:hover, .tactile-icon-button:hover, :where([data-ui="tactile"]) .ui-button:hover, :where([data-ui="tactile"]) .ui-icon-button:hover {
     border-color: var(--tactile-primary);
     transform: translateY(-1px);
   }
-  .tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active {
+  .tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active, :where([data-ui="tactile"]) .ui-button:active, :where([data-ui="tactile"]) .ui-icon-button:active, :where([data-ui="tactile"]) .ui-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-button.is-active, :where([data-ui="tactile"]) .ui-icon-button.is-active {
     transform: translateY(1px);
     box-shadow: inset 0 3px 10px #0000002e;
   }
-  .tactile-button-primary {
+  .tactile-button-primary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--tactile-primary);
     color: var(--tactile-on-primary);
     border-color: var(--tactile-primary);
   }
-  .tactile-button-primary:hover {
+  .tactile-button-primary:hover, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--tactile-primary-hover);
     border-color: var(--tactile-primary-hover);
   }
-  .tactile-button-secondary {
+  .tactile-button-secondary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--tactile-secondary);
     color: var(--tactile-on-secondary);
     border-color: var(--tactile-secondary);
   }
-  .tactile-button-secondary:hover {
+  .tactile-button-secondary:hover, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--tactile-secondary-hover);
     border-color: var(--tactile-secondary-hover);
   }
-  .tactile-button-danger {
+  .tactile-button-danger, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--tactile-danger);
     color: var(--tactile-on-danger);
     border-color: var(--tactile-danger);
   }
-  .tactile-button-ghost {
+  .tactile-button-ghost, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="ghost"]) {
     color: var(--tactile-text);
     box-shadow: none;
     background: none;
   }
-  .tactile-icon-button {
+  .tactile-icon-button, :where([data-ui="tactile"]) .ui-icon-button {
     border-radius: var(--tactile-radius-pill);
     width: 2.75rem;
     padding: 0;
   }
-  .tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled {
+  .tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled, :where([data-ui="tactile"]) .ui-button:disabled, :where([data-ui="tactile"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .tactile-card, .tactile-panel {
+  .tactile-card, .tactile-panel, :where([data-ui="tactile"]) .ui-card {
     background: var(--tactile-card-bg);
   }
-  .tactile-toolbar, .tactile-table-wrap, .tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-ghost), .tactile-icon-button {
+  .tactile-toolbar, .tactile-table-wrap, .tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-ghost), .tactile-icon-button, :where([data-ui="tactile"]) .ui-toolbar, :where([data-ui="tactile"]) .ui-table-wrap, :where([data-ui="tactile"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="tactile"]) .ui-icon-button {
     background: var(--tactile-control-bg);
   }
-  .tactile-button, .tactile-icon-button, .tactile-badge, .tactile-nav-link {
+  .tactile-button, .tactile-icon-button, .tactile-badge, .tactile-nav-link, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-icon-button, :where([data-ui="tactile"]) .ui-badge, :where([data-ui="tactile"]) .ui-nav-link {
     font-family: var(--tactile-font-control);
   }
-  .tactile-field {
+  .tactile-field, :where([data-ui="tactile"]) .ui-field {
     gap: var(--tactile-space-2);
     flex-direction: column;
     display: flex;
   }
-  .tactile-label {
+  .tactile-label, :where([data-ui="tactile"]) .ui-label {
     color: var(--tactile-text);
     font-size: .925rem;
     font-weight: 800;
   }
-  .tactile-input, .tactile-textarea, .tactile-select {
+  .tactile-input, .tactile-textarea, .tactile-select, :where([data-ui="tactile"]) .ui-input, :where([data-ui="tactile"]) .ui-textarea, :where([data-ui="tactile"]) .ui-select {
     background: var(--tactile-surface-soft);
     width: 100%;
     min-height: 2.875rem;
@@ -6040,32 +6056,32 @@
     padding: .75rem 1rem;
   }
-  .tactile-textarea {
+  .tactile-textarea, :where([data-ui="tactile"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .tactile-input::placeholder, .tactile-textarea::placeholder {
+  .tactile-input::placeholder, .tactile-textarea::placeholder, :where([data-ui="tactile"]) .ui-input::placeholder, :where([data-ui="tactile"]) .ui-textarea::placeholder {
     color: var(--tactile-text-muted);
     opacity: .82;
   }
-  .tactile-input:hover, .tactile-textarea:hover, .tactile-select:hover {
+  .tactile-input:hover, .tactile-textarea:hover, .tactile-select:hover, :where([data-ui="tactile"]) .ui-input:hover, :where([data-ui="tactile"]) .ui-textarea:hover, :where([data-ui="tactile"]) .ui-select:hover {
     border-color: rgb(var(--tactile-primary-rgb)/.58);
   }
-  .tactile-input:focus, .tactile-textarea:focus, .tactile-select:focus {
+  .tactile-input:focus, .tactile-textarea:focus, .tactile-select:focus, :where([data-ui="tactile"]) .ui-input:focus, :where([data-ui="tactile"]) .ui-textarea:focus, :where([data-ui="tactile"]) .ui-select:focus {
     border-color: var(--tactile-focus);
     box-shadow: var(--tactile-focus-ring);
   }
-  .tactile-help-text {
+  .tactile-help-text, :where([data-ui="tactile"]) .ui-help-text {
     color: var(--tactile-text-muted);
     font-size: .875rem;
     line-height: 1.45;
   }
-  .tactile-check, .tactile-radio {
+  .tactile-check, .tactile-radio, :where([data-ui="tactile"]) .ui-check, :where([data-ui="tactile"]) .ui-radio {
     align-items: center;
     gap: var(--tactile-space-2);
     color: var(--tactile-text);
@@ -6073,13 +6089,13 @@
     display: inline-flex;
   }
-  .tactile-check input, .tactile-radio input {
+  .tactile-check input, .tactile-radio input, :where([data-ui="tactile"]) .ui-check input, :where([data-ui="tactile"]) .ui-radio input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .tactile-check-control, .tactile-radio-control {
+  .tactile-check-control, .tactile-radio-control, :where([data-ui="tactile"]) .ui-check-control, :where([data-ui="tactile"]) .ui-radio-control {
     background: var(--tactile-surface-soft);
     border: 1px solid var(--tactile-border);
     width: 1.35rem;
@@ -6089,28 +6105,28 @@
     display: inline-grid;
   }
-  .tactile-check-control {
+  .tactile-check-control, :where([data-ui="tactile"]) .ui-check-control {
     border-radius: var(--tactile-radius-xs);
   }
-  .tactile-radio-control {
+  .tactile-radio-control, :where([data-ui="tactile"]) .ui-radio-control {
     border-radius: 50%;
   }
-  .tactile-check input:checked + .tactile-check-control, .tactile-radio input:checked + .tactile-radio-control {
+  .tactile-check input:checked + .tactile-check-control, .tactile-radio input:checked + .tactile-radio-control, :where([data-ui="tactile"]) .ui-check input:checked+.ui-check-control, :where([data-ui="tactile"]) .ui-radio input:checked+.ui-radio-control {
     background: var(--tactile-primary);
     border-color: var(--tactile-primary);
     box-shadow: var(--tactile-focus-ring);
   }
-  .tactile-check input:checked + .tactile-check-control:after {
+  .tactile-check input:checked + .tactile-check-control:after, :where([data-ui="tactile"]) .ui-check input:checked+.ui-check-control:after {
     content: "✓";
     color: var(--tactile-on-primary);
     font-size: .9rem;
     font-weight: 900;
   }
-  .tactile-radio input:checked + .tactile-radio-control:after {
+  .tactile-radio input:checked + .tactile-radio-control:after, :where([data-ui="tactile"]) .ui-radio input:checked+.ui-radio-control:after {
     content: "";
     background: var(--tactile-on-primary);
     border-radius: 50%;
@@ -6118,7 +6134,7 @@
     height: .55rem;
   }
-  .tactile-switch {
+  .tactile-switch, :where([data-ui="tactile"]) .ui-switch {
     align-items: center;
     gap: var(--tactile-space-3);
     color: var(--tactile-text);
@@ -6126,13 +6142,13 @@
     display: inline-flex;
   }
-  .tactile-switch input {
+  .tactile-switch input, :where([data-ui="tactile"]) .ui-switch input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .tactile-switch-track {
+  .tactile-switch-track, :where([data-ui="tactile"]) .ui-switch-track {
     background: var(--tactile-surface-soft);
     border: 1px solid var(--tactile-border);
     border-radius: var(--tactile-radius-pill);
@@ -6142,7 +6158,7 @@
     position: relative;
   }
-  .tactile-switch-thumb {
+  .tactile-switch-thumb, :where([data-ui="tactile"]) .ui-switch-thumb {
     background: var(--tactile-surface-strong);
     border: 1px solid var(--tactile-border);
     width: 1.34rem;
@@ -6155,17 +6171,17 @@
     left: .22rem;
   }
-  .tactile-switch input:checked + .tactile-switch-track {
+  .tactile-switch input:checked + .tactile-switch-track, :where([data-ui="tactile"]) .ui-switch input:checked+.ui-switch-track {
     background: var(--tactile-primary);
     border-color: var(--tactile-primary);
   }
-  .tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb {
+  .tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb, :where([data-ui="tactile"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
     background: var(--tactile-on-primary);
     left: calc(100% - 1.56rem);
   }
-  .tactile-badge {
+  .tactile-badge, :where([data-ui="tactile"]) .ui-badge {
     align-items: center;
     gap: var(--tactile-space-1);
     background: var(--tactile-surface-soft);
@@ -6180,37 +6196,37 @@
     display: inline-flex;
   }
-  .tactile-badge-primary {
+  .tactile-badge-primary, :where([data-ui="tactile"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--tactile-primary);
     color: var(--tactile-on-primary);
     border-color: var(--tactile-primary);
   }
-  .tactile-badge-secondary {
+  .tactile-badge-secondary, :where([data-ui="tactile"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--tactile-secondary);
     color: var(--tactile-on-secondary);
     border-color: var(--tactile-secondary);
   }
-  .tactile-badge-success {
+  .tactile-badge-success, :where([data-ui="tactile"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--tactile-success);
     color: var(--tactile-on-success);
     border-color: var(--tactile-success);
   }
-  .tactile-badge-warning {
+  .tactile-badge-warning, :where([data-ui="tactile"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--tactile-warning);
     color: var(--tactile-on-warning);
     border-color: var(--tactile-warning);
   }
-  .tactile-badge-danger {
+  .tactile-badge-danger, :where([data-ui="tactile"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--tactile-danger);
     color: var(--tactile-on-danger);
     border-color: var(--tactile-danger);
   }
-  .tactile-nav {
+  .tactile-nav, :where([data-ui="tactile"]) .ui-nav {
     align-items: center;
     gap: var(--tactile-space-2);
     padding: var(--tactile-space-2);
@@ -6222,7 +6238,7 @@
     display: flex;
   }
-  .tactile-nav-link {
+  .tactile-nav-link, :where([data-ui="tactile"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--tactile-text-muted);
     border-radius: var(--tactile-radius-pill);
@@ -6235,12 +6251,12 @@
     display: inline-flex;
   }
-  .tactile-nav-link:hover {
+  .tactile-nav-link:hover, :where([data-ui="tactile"]) .ui-nav-link:hover {
     color: var(--tactile-text);
     background: var(--tactile-surface-soft);
   }
-  .tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active {
+  .tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active, :where([data-ui="tactile"]) .ui-nav-link[aria-current="page"], :where([data-ui="tactile"]) .ui-nav-link.is-active {
     color: var(--tactile-on-primary);
     background: var(--tactile-primary);
   }
@@ -6271,7 +6287,7 @@
     transform: rotate(45deg);
   }
-  .tactile-progress {
+  .tactile-progress, :where([data-ui="tactile"]) .ui-progress {
     background: var(--tactile-surface-soft);
     border: 1px solid var(--tactile-border);
     border-radius: var(--tactile-radius-pill);
@@ -6280,14 +6296,14 @@
     overflow: hidden;
   }
-  .tactile-progress-bar {
+  .tactile-progress-bar, :where([data-ui="tactile"]) .ui-progress-bar {
     height: 100%;
     width: var(--tactile-progress-value, 50%);
     background: linear-gradient(90deg,var(--tactile-primary),var(--tactile-accent));
     border-radius: inherit;
   }
-  .tactile-alert {
+  .tactile-alert, :where([data-ui="tactile"]) .ui-alert {
     gap: var(--tactile-space-2);
     padding: var(--tactile-space-4);
     background: var(--tactile-surface);
@@ -6298,45 +6314,45 @@
     display: grid;
   }
-  .tactile-alert-success {
+  .tactile-alert-success, :where([data-ui="tactile"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--tactile-success);
   }
-  .tactile-alert-warning {
+  .tactile-alert-warning, :where([data-ui="tactile"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--tactile-warning);
   }
-  .tactile-alert-danger {
+  .tactile-alert-danger, :where([data-ui="tactile"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--tactile-danger);
   }
-  .tactile-alert-title {
+  .tactile-alert-title, :where([data-ui="tactile"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .tactile-alert-body {
+  .tactile-alert-body, :where([data-ui="tactile"]) .ui-alert-body {
     color: var(--tactile-text-muted);
     margin: 0;
     line-height: 1.55;
   }
-  .tactile-table-wrap {
+  .tactile-table-wrap, :where([data-ui="tactile"]) .ui-table-wrap {
     overflow: auto;
   }
-  .tactile-table {
+  .tactile-table, :where([data-ui="tactile"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .tactile-table th, .tactile-table td {
+  .tactile-table th, .tactile-table td, :where([data-ui="tactile"]) .ui-table th, :where([data-ui="tactile"]) .ui-table td {
     text-align: left;
     border-bottom: 1px solid var(--tactile-border);
     padding: .95rem 1rem;
   }
-  .tactile-table th {
+  .tactile-table th, :where([data-ui="tactile"]) .ui-table th {
     color: var(--tactile-text);
     text-transform: uppercase;
     letter-spacing: .08em;
@@ -6345,11 +6361,11 @@
     font-weight: 900;
   }
-  .tactile-table td {
+  .tactile-table td, :where([data-ui="tactile"]) .ui-table td {
     color: var(--tactile-text-muted);
   }
-  .tactile-table tr:hover td {
+  .tactile-table tr:hover td, :where([data-ui="tactile"]) .ui-table tr:hover td {
     background: rgb(var(--tactile-primary-rgb)/.045);
   }
@@ -6482,12 +6498,12 @@
     inline-size: 3rem;
   }
-  .tactile-button[aria-busy="true"], .tactile-icon-button[aria-busy="true"], [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .tactile-button[aria-busy="true"], .tactile-icon-button[aria-busy="true"], [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="tactile"]) .ui-button[aria-busy="true"], :where([data-ui="tactile"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .tactile-button[aria-busy="true"]:after, .tactile-icon-button[aria-busy="true"]:after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .tactile-button[aria-busy="true"]:after, .tactile-icon-button[aria-busy="true"]:after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="tactile"]) .ui-button[aria-busy="true"]:after, :where([data-ui="tactile"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--tactile-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -6713,7 +6729,7 @@
     background-size: var(--neo-theme-bg-size);
   }
-  .neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link {
+  .neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-badge, :where([data-ui="neumorphism"]) .ui-nav-link {
     font-family: var(--neo-font-heading);
   }
@@ -6759,7 +6775,7 @@
     height: 1px;
   }
-  .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
+  .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap, :where([data-ui="neumorphism"]) .ui-card, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap {
     background: linear-gradient(180deg,#ffffff2e,#ffffff08),linear-gradient(135deg,rgb(var(--neo-primary-rgb)/.07),transparent 46%),var(--neo-surface);
     color: var(--neo-text);
     border: 1px solid var(--neo-border);
@@ -6769,11 +6785,11 @@
     position: relative;
   }
-  .neo-card, .neo-panel {
+  .neo-card, .neo-panel, :where([data-ui="neumorphism"]) .ui-card {
     padding: var(--neo-space-6);
   }
-  .neo-toolbar {
+  .neo-toolbar, :where([data-ui="neumorphism"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--neo-space-4);
@@ -6806,7 +6822,7 @@
     transform: translateY(-2px);
   }
-  .neo-button, .neo-icon-button {
+  .neo-button, .neo-icon-button, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -6830,87 +6846,87 @@
     display: inline-flex;
   }
-  .neo-button:hover, .neo-icon-button:hover {
+  .neo-button:hover, .neo-icon-button:hover, :where([data-ui="neumorphism"]) .ui-button:hover, :where([data-ui="neumorphism"]) .ui-icon-button:hover {
     border-color: var(--neo-primary);
     transform: translateY(-1px);
   }
-  .neo-button:active, .neo-icon-button:active, .neo-button[aria-pressed="true"], .neo-icon-button[aria-pressed="true"], .neo-button.is-active, .neo-icon-button.is-active {
+  .neo-button:active, .neo-icon-button:active, .neo-button[aria-pressed="true"], .neo-icon-button[aria-pressed="true"], .neo-button.is-active, .neo-icon-button.is-active, :where([data-ui="neumorphism"]) .ui-button:active, :where([data-ui="neumorphism"]) .ui-icon-button:active, :where([data-ui="neumorphism"]) .ui-button[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="neumorphism"]) .ui-button.is-active, :where([data-ui="neumorphism"]) .ui-icon-button.is-active {
     transform: translateY(1px);
     box-shadow: inset 0 3px 10px #0000002e;
   }
-  .neo-button-primary {
+  .neo-button-primary, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--neo-primary);
     color: var(--neo-on-primary);
     border-color: var(--neo-primary);
   }
-  .neo-button-primary:hover {
+  .neo-button-primary:hover, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--neo-primary-hover);
     border-color: var(--neo-primary-hover);
   }
-  .neo-button-secondary {
+  .neo-button-secondary, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--neo-secondary);
     color: var(--neo-on-secondary);
     border-color: var(--neo-secondary);
   }
-  .neo-button-secondary:hover {
+  .neo-button-secondary:hover, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--neo-secondary-hover);
     border-color: var(--neo-secondary-hover);
   }
-  .neo-button-danger {
+  .neo-button-danger, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--neo-danger);
     color: var(--neo-on-danger);
     border-color: var(--neo-danger);
   }
-  .neo-button-ghost {
+  .neo-button-ghost, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="ghost"]) {
     color: var(--neo-text);
     box-shadow: none;
     background: none;
   }
-  .neo-icon-button {
+  .neo-icon-button, :where([data-ui="neumorphism"]) .ui-icon-button {
     border-radius: var(--neo-radius-pill);
     width: 2.75rem;
     padding: 0;
   }
-  .neo-button:disabled, .neo-icon-button:disabled, .neo-disabled {
+  .neo-button:disabled, .neo-icon-button:disabled, .neo-disabled, :where([data-ui="neumorphism"]) .ui-button:disabled, :where([data-ui="neumorphism"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .neo-card, .neo-panel {
+  .neo-card, .neo-panel, :where([data-ui="neumorphism"]) .ui-card {
     background: var(--neo-card-bg);
   }
-  .neo-toolbar, .neo-table-wrap, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-ghost), .neo-icon-button {
+  .neo-toolbar, .neo-table-wrap, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-ghost), .neo-icon-button, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap, :where([data-ui="neumorphism"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="neumorphism"]) .ui-icon-button {
     background: var(--neo-control-bg);
   }
-  .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link {
+  .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button, :where([data-ui="neumorphism"]) .ui-badge, :where([data-ui="neumorphism"]) .ui-nav-link {
     font-family: var(--neo-font-control);
   }
-  .neo-field {
+  .neo-field, :where([data-ui="neumorphism"]) .ui-field {
     gap: var(--neo-space-2);
     flex-direction: column;
     display: flex;
   }
-  .neo-label {
+  .neo-label, :where([data-ui="neumorphism"]) .ui-label {
     color: var(--neo-text);
     font-size: .925rem;
     font-weight: 800;
   }
-  .neo-input, .neo-textarea, .neo-select {
+  .neo-input, .neo-textarea, .neo-select, :where([data-ui="neumorphism"]) .ui-input, :where([data-ui="neumorphism"]) .ui-textarea, :where([data-ui="neumorphism"]) .ui-select {
     background: var(--neo-surface-soft);
     width: 100%;
     min-height: 2.875rem;
@@ -6923,32 +6939,32 @@
     padding: .75rem 1rem;
   }
-  .neo-textarea {
+  .neo-textarea, :where([data-ui="neumorphism"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .neo-input::placeholder, .neo-textarea::placeholder {
+  .neo-input::placeholder, .neo-textarea::placeholder, :where([data-ui="neumorphism"]) .ui-input::placeholder, :where([data-ui="neumorphism"]) .ui-textarea::placeholder {
     color: var(--neo-text-muted);
     opacity: .82;
   }
-  .neo-input:hover, .neo-textarea:hover, .neo-select:hover {
+  .neo-input:hover, .neo-textarea:hover, .neo-select:hover, :where([data-ui="neumorphism"]) .ui-input:hover, :where([data-ui="neumorphism"]) .ui-textarea:hover, :where([data-ui="neumorphism"]) .ui-select:hover {
     border-color: rgb(var(--neo-primary-rgb)/.58);
   }
-  .neo-input:focus, .neo-textarea:focus, .neo-select:focus {
+  .neo-input:focus, .neo-textarea:focus, .neo-select:focus, :where([data-ui="neumorphism"]) .ui-input:focus, :where([data-ui="neumorphism"]) .ui-textarea:focus, :where([data-ui="neumorphism"]) .ui-select:focus {
     border-color: var(--neo-focus);
     box-shadow: var(--neo-focus-ring);
   }
-  .neo-help-text {
+  .neo-help-text, :where([data-ui="neumorphism"]) .ui-help-text {
     color: var(--neo-text-muted);
     font-size: .875rem;
     line-height: 1.45;
   }
-  .neo-check, .neo-radio {
+  .neo-check, .neo-radio, :where([data-ui="neumorphism"]) .ui-check, :where([data-ui="neumorphism"]) .ui-radio {
     align-items: center;
     gap: var(--neo-space-2);
     color: var(--neo-text);
@@ -6956,13 +6972,13 @@
     display: inline-flex;
   }
-  .neo-check input, .neo-radio input {
+  .neo-check input, .neo-radio input, :where([data-ui="neumorphism"]) .ui-check input, :where([data-ui="neumorphism"]) .ui-radio input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .neo-check-control, .neo-radio-control {
+  .neo-check-control, .neo-radio-control, :where([data-ui="neumorphism"]) .ui-check-control, :where([data-ui="neumorphism"]) .ui-radio-control {
     background: var(--neo-surface-soft);
     border: 1px solid var(--neo-border);
     width: 1.35rem;
@@ -6972,28 +6988,28 @@
     display: inline-grid;
   }
-  .neo-check-control {
+  .neo-check-control, :where([data-ui="neumorphism"]) .ui-check-control {
     border-radius: var(--neo-radius-xs);
   }
-  .neo-radio-control {
+  .neo-radio-control, :where([data-ui="neumorphism"]) .ui-radio-control {
     border-radius: 50%;
   }
-  .neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control {
+  .neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control, :where([data-ui="neumorphism"]) .ui-radio input:checked+.ui-radio-control {
     background: var(--neo-primary);
     border-color: var(--neo-primary);
     box-shadow: var(--neo-focus-ring);
   }
-  .neo-check input:checked + .neo-check-control:after {
+  .neo-check input:checked + .neo-check-control:after, :where([data-ui="neumorphism"]) .ui-check input:checked+.ui-check-control:after {
     content: "✓";
     color: var(--neo-on-primary);
     font-size: .9rem;
     font-weight: 900;
   }
-  .neo-radio input:checked + .neo-radio-control:after {
+  .neo-radio input:checked + .neo-radio-control:after, :where([data-ui="neumorphism"]) .ui-radio input:checked+.ui-radio-control:after {
     content: "";
     background: var(--neo-on-primary);
     border-radius: 50%;
@@ -7001,7 +7017,7 @@
     height: .55rem;
   }
-  .neo-switch {
+  .neo-switch, :where([data-ui="neumorphism"]) .ui-switch {
     align-items: center;
     gap: var(--neo-space-3);
     color: var(--neo-text);
@@ -7009,13 +7025,13 @@
     display: inline-flex;
   }
-  .neo-switch input {
+  .neo-switch input, :where([data-ui="neumorphism"]) .ui-switch input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .neo-switch-track {
+  .neo-switch-track, :where([data-ui="neumorphism"]) .ui-switch-track {
     background: var(--neo-surface-soft);
     border: 1px solid var(--neo-border);
     border-radius: var(--neo-radius-pill);
@@ -7025,7 +7041,7 @@
     position: relative;
   }
-  .neo-switch-thumb {
+  .neo-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch-thumb {
     background: var(--neo-surface-strong);
     border: 1px solid var(--neo-border);
     width: 1.34rem;
@@ -7038,17 +7054,17 @@
     left: .22rem;
   }
-  .neo-switch input:checked + .neo-switch-track {
+  .neo-switch input:checked + .neo-switch-track, :where([data-ui="neumorphism"]) .ui-switch input:checked+.ui-switch-track {
     background: var(--neo-primary);
     border-color: var(--neo-primary);
   }
-  .neo-switch input:checked + .neo-switch-track .neo-switch-thumb {
+  .neo-switch input:checked + .neo-switch-track .neo-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
     background: var(--neo-on-primary);
     left: calc(100% - 1.56rem);
   }
-  .neo-badge {
+  .neo-badge, :where([data-ui="neumorphism"]) .ui-badge {
     align-items: center;
     gap: var(--neo-space-1);
     background: var(--neo-surface-soft);
@@ -7063,37 +7079,37 @@
     display: inline-flex;
   }
-  .neo-badge-primary {
+  .neo-badge-primary, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--neo-primary);
     color: var(--neo-on-primary);
     border-color: var(--neo-primary);
   }
-  .neo-badge-secondary {
+  .neo-badge-secondary, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--neo-secondary);
     color: var(--neo-on-secondary);
     border-color: var(--neo-secondary);
   }
-  .neo-badge-success {
+  .neo-badge-success, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--neo-success);
     color: var(--neo-on-success);
     border-color: var(--neo-success);
   }
-  .neo-badge-warning {
+  .neo-badge-warning, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--neo-warning);
     color: var(--neo-on-warning);
     border-color: var(--neo-warning);
   }
-  .neo-badge-danger {
+  .neo-badge-danger, :where([data-ui="neumorphism"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--neo-danger);
     color: var(--neo-on-danger);
     border-color: var(--neo-danger);
   }
-  .neo-nav {
+  .neo-nav, :where([data-ui="neumorphism"]) .ui-nav {
     align-items: center;
     gap: var(--neo-space-2);
     padding: var(--neo-space-2);
@@ -7105,7 +7121,7 @@
     display: flex;
   }
-  .neo-nav-link {
+  .neo-nav-link, :where([data-ui="neumorphism"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--neo-text-muted);
     border-radius: var(--neo-radius-pill);
@@ -7118,12 +7134,12 @@
     display: inline-flex;
   }
-  .neo-nav-link:hover {
+  .neo-nav-link:hover, :where([data-ui="neumorphism"]) .ui-nav-link:hover {
     color: var(--neo-text);
     background: var(--neo-surface-soft);
   }
-  .neo-nav-link[aria-current="page"], .neo-nav-link.is-active {
+  .neo-nav-link[aria-current="page"], .neo-nav-link.is-active, :where([data-ui="neumorphism"]) .ui-nav-link[aria-current="page"], :where([data-ui="neumorphism"]) .ui-nav-link.is-active {
     color: var(--neo-on-primary);
     background: var(--neo-primary);
   }
@@ -7153,7 +7169,7 @@
     box-shadow: inset .12rem .12rem .24rem #0000001f;
   }
-  .neo-progress {
+  .neo-progress, :where([data-ui="neumorphism"]) .ui-progress {
     background: var(--neo-surface-soft);
     border: 1px solid var(--neo-border);
     border-radius: var(--neo-radius-pill);
@@ -7162,14 +7178,14 @@
     overflow: hidden;
   }
-  .neo-progress-bar {
+  .neo-progress-bar, :where([data-ui="neumorphism"]) .ui-progress-bar {
     height: 100%;
     width: var(--neo-progress-value, 50%);
     background: linear-gradient(90deg,var(--neo-primary),var(--neo-accent));
     border-radius: inherit;
   }
-  .neo-alert {
+  .neo-alert, :where([data-ui="neumorphism"]) .ui-alert {
     gap: var(--neo-space-2);
     padding: var(--neo-space-4);
     background: var(--neo-surface);
@@ -7180,45 +7196,45 @@
     display: grid;
   }
-  .neo-alert-success {
+  .neo-alert-success, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--neo-success);
   }
-  .neo-alert-warning {
+  .neo-alert-warning, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--neo-warning);
   }
-  .neo-alert-danger {
+  .neo-alert-danger, :where([data-ui="neumorphism"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--neo-danger);
   }
-  .neo-alert-title {
+  .neo-alert-title, :where([data-ui="neumorphism"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .neo-alert-body {
+  .neo-alert-body, :where([data-ui="neumorphism"]) .ui-alert-body {
     color: var(--neo-text-muted);
     margin: 0;
     line-height: 1.55;
   }
-  .neo-table-wrap {
+  .neo-table-wrap, :where([data-ui="neumorphism"]) .ui-table-wrap {
     overflow: auto;
   }
-  .neo-table {
+  .neo-table, :where([data-ui="neumorphism"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .neo-table th, .neo-table td {
+  .neo-table th, .neo-table td, :where([data-ui="neumorphism"]) .ui-table th, :where([data-ui="neumorphism"]) .ui-table td {
     text-align: left;
     border-bottom: 1px solid var(--neo-border);
     padding: .95rem 1rem;
   }
-  .neo-table th {
+  .neo-table th, :where([data-ui="neumorphism"]) .ui-table th {
     color: var(--neo-text);
     text-transform: uppercase;
     letter-spacing: .08em;
@@ -7227,11 +7243,11 @@
     font-weight: 900;
   }
-  .neo-table td {
+  .neo-table td, :where([data-ui="neumorphism"]) .ui-table td {
     color: var(--neo-text-muted);
   }
-  .neo-table tr:hover td {
+  .neo-table tr:hover td, :where([data-ui="neumorphism"]) .ui-table tr:hover td {
     background: rgb(var(--neo-primary-rgb)/.045);
   }
@@ -7337,7 +7353,7 @@
     background: var(--neo-bg);
   }
-  .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
+  .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap, :where([data-ui="neumorphism"]) .ui-card, :where([data-ui="neumorphism"]) .ui-toolbar, :where([data-ui="neumorphism"]) .ui-table-wrap {
     border-color: rgb(var(--neo-border-rgb)/.14);
     box-shadow: 10px 10px 22px var(--neo-nm-dark),-10px -10px 22px var(--neo-nm-light);
   }
@@ -7346,15 +7362,15 @@
     box-shadow: 16px 16px 32px var(--neo-nm-dark),-16px -16px 32px var(--neo-nm-light);
   }
-  .neo-well, .neo-inset, .neo-input, .neo-textarea, .neo-select, .neo-progress {
+  .neo-well, .neo-inset, .neo-input, .neo-textarea, .neo-select, .neo-progress, :where([data-ui="neumorphism"]) .ui-input, :where([data-ui="neumorphism"]) .ui-textarea, :where([data-ui="neumorphism"]) .ui-select, :where([data-ui="neumorphism"]) .ui-progress {
     box-shadow: inset 5px 5px 11px var(--neo-nm-dark),inset -5px -5px 11px var(--neo-nm-light);
   }
-  .neo-button, .neo-icon-button, .neo-badge, .neo-nav {
+  .neo-button, .neo-icon-button, .neo-badge, .neo-nav, :where([data-ui="neumorphism"]) .ui-button, :where([data-ui="neumorphism"]) .ui-icon-button, :where([data-ui="neumorphism"]) .ui-badge, :where([data-ui="neumorphism"]) .ui-nav {
     box-shadow: 5px 5px 11px var(--neo-nm-dark),-5px -5px 11px var(--neo-nm-light);
   }
-  .neo-button:active, .neo-icon-button:active, .neo-button.is-active, .neo-icon-button.is-active, .neo-nav-link.is-active {
+  .neo-button:active, .neo-icon-button:active, .neo-button.is-active, .neo-icon-button.is-active, .neo-nav-link.is-active, :where([data-ui="neumorphism"]) .ui-button:active, :where([data-ui="neumorphism"]) .ui-icon-button:active, :where([data-ui="neumorphism"]) .ui-button.is-active, :where([data-ui="neumorphism"]) .ui-icon-button.is-active, :where([data-ui="neumorphism"]) .ui-nav-link.is-active {
     box-shadow: inset 4px 4px 9px var(--neo-nm-dark),inset -4px -4px 9px var(--neo-nm-light);
   }
@@ -7384,12 +7400,12 @@
     inline-size: 3rem;
   }
-  .neo-button[aria-busy="true"], .neo-icon-button[aria-busy="true"], [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .neo-button[aria-busy="true"], .neo-icon-button[aria-busy="true"], [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"], :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--neo-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -7615,7 +7631,7 @@
     background-size: var(--retro-theme-bg-size);
   }
-  .retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link {
+  .retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link, :where([data-ui="retrofuturism"]) .ui-button, :where([data-ui="retrofuturism"]) .ui-badge, :where([data-ui="retrofuturism"]) .ui-nav-link {
     font-family: var(--retro-font-heading);
   }
@@ -7661,7 +7677,7 @@
     height: 1px;
   }
-  .retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap {
+  .retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap, :where([data-ui="retrofuturism"]) .ui-card, :where([data-ui="retrofuturism"]) .ui-toolbar, :where([data-ui="retrofuturism"]) .ui-table-wrap {
     background: linear-gradient(135deg,rgb(var(--retro-primary-rgb)/.08),transparent 36%),linear-gradient(180deg,#ffffff14,#fff0),var(--retro-surface);
     color: var(--retro-text);
     border: 1px solid var(--retro-border);
@@ -7671,11 +7687,11 @@
     position: relative;
   }
-  .retro-card, .retro-panel {
+  .retro-card, .retro-panel, :where([data-ui="retrofuturism"]) .ui-card {
     padding: var(--retro-space-6);
   }
-  .retro-toolbar {
+  .retro-toolbar, :where([data-ui="retrofuturism"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--retro-space-4);
@@ -7708,7 +7724,7 @@
     transform: translateY(-3px) scale(1.005);
   }
-  .retro-button, .retro-icon-button {
+  .retro-button, .retro-icon-button, :where([data-ui="retrofuturism"]) .ui-button, :where([data-ui="retrofuturism"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -7732,87 +7748,87 @@
     display: inline-flex;
   }
-  .retro-button:hover, .retro-icon-button:hover {
+  .retro-button:hover, .retro-icon-button:hover, :where([data-ui="retrofuturism"]) .ui-button:hover, :where([data-ui="retrofuturism"]) .ui-icon-button:hover {
     border-color: var(--retro-primary);
     transform: translateY(-1px);
   }
-  .retro-button:active, .retro-icon-button:active, .retro-button[aria-pressed="true"], .retro-icon-button[aria-pressed="true"], .retro-button.is-active, .retro-icon-button.is-active {
+  .retro-button:active, .retro-icon-button:active, .retro-button[aria-pressed="true"], .retro-icon-button[aria-pressed="true"], .retro-button.is-active, .retro-icon-button.is-active, :where([data-ui="retrofuturism"]) .ui-button:active, :where([data-ui="retrofuturism"]) .ui-icon-button:active, :where([data-ui="retrofuturism"]) .ui-button[aria-pressed="true"], :where([data-ui="retrofuturism"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="retrofuturism"]) .ui-button.is-active, :where([data-ui="retrofuturism"]) .ui-icon-button.is-active {
     transform: translateY(1px);
     box-shadow: inset 0 3px 10px #0000002e;
   }
-  .retro-button-primary {
+  .retro-button-primary, :where([data-ui="retrofuturism"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--retro-primary);
     color: var(--retro-on-primary);
     border-color: var(--retro-primary);
   }
-  .retro-button-primary:hover {
+  .retro-button-primary:hover, :where([data-ui="retrofuturism"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--retro-primary-hover);
     border-color: var(--retro-primary-hover);
   }
-  .retro-button-secondary {
+  .retro-button-secondary, :where([data-ui="retrofuturism"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--retro-secondary);
     color: var(--retro-on-secondary);
     border-color: var(--retro-secondary);
   }
-  .retro-button-secondary:hover {
+  .retro-button-secondary:hover, :where([data-ui="retrofuturism"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--retro-secondary-hover);
     border-color: var(--retro-secondary-hover);
   }
-  .retro-button-danger {
+  .retro-button-danger, :where([data-ui="retrofuturism"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--retro-danger);
     color: var(--retro-on-danger);
     border-color: var(--retro-danger);
   }
-  .retro-button-ghost {
+  .retro-button-ghost, :where([data-ui="retrofuturism"]) .ui-button:where([data-ui-variant="ghost"]) {
     color: var(--retro-text);
     box-shadow: none;
     background: none;
   }
-  .retro-icon-button {
+  .retro-icon-button, :where([data-ui="retrofuturism"]) .ui-icon-button {
     border-radius: var(--retro-radius-pill);
     width: 2.75rem;
     padding: 0;
   }
-  .retro-button:disabled, .retro-icon-button:disabled, .retro-disabled {
+  .retro-button:disabled, .retro-icon-button:disabled, .retro-disabled, :where([data-ui="retrofuturism"]) .ui-button:disabled, :where([data-ui="retrofuturism"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .retro-card, .retro-panel {
+  .retro-card, .retro-panel, :where([data-ui="retrofuturism"]) .ui-card {
     background: var(--retro-card-bg);
   }
-  .retro-toolbar, .retro-table-wrap, .retro-button:not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-ghost), .retro-icon-button {
+  .retro-toolbar, .retro-table-wrap, .retro-button:not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-ghost), .retro-icon-button, :where([data-ui="retrofuturism"]) .ui-toolbar, :where([data-ui="retrofuturism"]) .ui-table-wrap, :where([data-ui="retrofuturism"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="retrofuturism"]) .ui-icon-button {
     background: var(--retro-control-bg);
   }
-  .retro-button, .retro-icon-button, .retro-badge, .retro-nav-link {
+  .retro-button, .retro-icon-button, .retro-badge, .retro-nav-link, :where([data-ui="retrofuturism"]) .ui-button, :where([data-ui="retrofuturism"]) .ui-icon-button, :where([data-ui="retrofuturism"]) .ui-badge, :where([data-ui="retrofuturism"]) .ui-nav-link {
     font-family: var(--retro-font-control);
   }
-  .retro-field {
+  .retro-field, :where([data-ui="retrofuturism"]) .ui-field {
     gap: var(--retro-space-2);
     flex-direction: column;
     display: flex;
   }
-  .retro-label {
+  .retro-label, :where([data-ui="retrofuturism"]) .ui-label {
     color: var(--retro-text);
     font-size: .925rem;
     font-weight: 800;
   }
-  .retro-input, .retro-textarea, .retro-select {
+  .retro-input, .retro-textarea, .retro-select, :where([data-ui="retrofuturism"]) .ui-input, :where([data-ui="retrofuturism"]) .ui-textarea, :where([data-ui="retrofuturism"]) .ui-select {
     background: var(--retro-surface-soft);
     width: 100%;
     min-height: 2.875rem;
@@ -7825,32 +7841,32 @@
     padding: .75rem 1rem;
   }
-  .retro-textarea {
+  .retro-textarea, :where([data-ui="retrofuturism"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .retro-input::placeholder, .retro-textarea::placeholder {
+  .retro-input::placeholder, .retro-textarea::placeholder, :where([data-ui="retrofuturism"]) .ui-input::placeholder, :where([data-ui="retrofuturism"]) .ui-textarea::placeholder {
     color: var(--retro-text-muted);
     opacity: .82;
   }
-  .retro-input:hover, .retro-textarea:hover, .retro-select:hover {
+  .retro-input:hover, .retro-textarea:hover, .retro-select:hover, :where([data-ui="retrofuturism"]) .ui-input:hover, :where([data-ui="retrofuturism"]) .ui-textarea:hover, :where([data-ui="retrofuturism"]) .ui-select:hover {
     border-color: rgb(var(--retro-primary-rgb)/.58);
   }
-  .retro-input:focus, .retro-textarea:focus, .retro-select:focus {
+  .retro-input:focus, .retro-textarea:focus, .retro-select:focus, :where([data-ui="retrofuturism"]) .ui-input:focus, :where([data-ui="retrofuturism"]) .ui-textarea:focus, :where([data-ui="retrofuturism"]) .ui-select:focus {
     border-color: var(--retro-focus);
     box-shadow: var(--retro-focus-ring);
   }
-  .retro-help-text {
+  .retro-help-text, :where([data-ui="retrofuturism"]) .ui-help-text {
     color: var(--retro-text-muted);
     font-size: .875rem;
     line-height: 1.45;
   }
-  .retro-check, .retro-radio {
+  .retro-check, .retro-radio, :where([data-ui="retrofuturism"]) .ui-check, :where([data-ui="retrofuturism"]) .ui-radio {
     align-items: center;
     gap: var(--retro-space-2);
     color: var(--retro-text);
@@ -7858,13 +7874,13 @@
     display: inline-flex;
   }
-  .retro-check input, .retro-radio input {
+  .retro-check input, .retro-radio input, :where([data-ui="retrofuturism"]) .ui-check input, :where([data-ui="retrofuturism"]) .ui-radio input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .retro-check-control, .retro-radio-control {
+  .retro-check-control, .retro-radio-control, :where([data-ui="retrofuturism"]) .ui-check-control, :where([data-ui="retrofuturism"]) .ui-radio-control {
     background: var(--retro-surface-soft);
     border: 1px solid var(--retro-border);
     width: 1.35rem;
@@ -7874,28 +7890,28 @@
     display: inline-grid;
   }
-  .retro-check-control {
+  .retro-check-control, :where([data-ui="retrofuturism"]) .ui-check-control {
     border-radius: var(--retro-radius-xs);
   }
-  .retro-radio-control {
+  .retro-radio-control, :where([data-ui="retrofuturism"]) .ui-radio-control {
     border-radius: 50%;
   }
-  .retro-check input:checked + .retro-check-control, .retro-radio input:checked + .retro-radio-control {
+  .retro-check input:checked + .retro-check-control, .retro-radio input:checked + .retro-radio-control, :where([data-ui="retrofuturism"]) .ui-check input:checked+.ui-check-control, :where([data-ui="retrofuturism"]) .ui-radio input:checked+.ui-radio-control {
     background: var(--retro-primary);
     border-color: var(--retro-primary);
     box-shadow: var(--retro-focus-ring);
   }
-  .retro-check input:checked + .retro-check-control:after {
+  .retro-check input:checked + .retro-check-control:after, :where([data-ui="retrofuturism"]) .ui-check input:checked+.ui-check-control:after {
     content: "✓";
     color: var(--retro-on-primary);
     font-size: .9rem;
     font-weight: 900;
   }
-  .retro-radio input:checked + .retro-radio-control:after {
+  .retro-radio input:checked + .retro-radio-control:after, :where([data-ui="retrofuturism"]) .ui-radio input:checked+.ui-radio-control:after {
     content: "";
     background: var(--retro-on-primary);
     border-radius: 50%;
@@ -7903,7 +7919,7 @@
     height: .55rem;
   }
-  .retro-switch {
+  .retro-switch, :where([data-ui="retrofuturism"]) .ui-switch {
     align-items: center;
     gap: var(--retro-space-3);
     color: var(--retro-text);
@@ -7911,13 +7927,13 @@
     display: inline-flex;
   }
-  .retro-switch input {
+  .retro-switch input, :where([data-ui="retrofuturism"]) .ui-switch input {
     opacity: 0;
     pointer-events: none;
     position: absolute;
   }
-  .retro-switch-track {
+  .retro-switch-track, :where([data-ui="retrofuturism"]) .ui-switch-track {
     background: var(--retro-surface-soft);
     border: 1px solid var(--retro-border);
     border-radius: var(--retro-radius-pill);
@@ -7927,7 +7943,7 @@
     position: relative;
   }
-  .retro-switch-thumb {
+  .retro-switch-thumb, :where([data-ui="retrofuturism"]) .ui-switch-thumb {
     background: var(--retro-surface-strong);
     border: 1px solid var(--retro-border);
     width: 1.34rem;
@@ -7940,17 +7956,17 @@
     left: .22rem;
   }
-  .retro-switch input:checked + .retro-switch-track {
+  .retro-switch input:checked + .retro-switch-track, :where([data-ui="retrofuturism"]) .ui-switch input:checked+.ui-switch-track {
     background: var(--retro-primary);
     border-color: var(--retro-primary);
   }
-  .retro-switch input:checked + .retro-switch-track .retro-switch-thumb {
+  .retro-switch input:checked + .retro-switch-track .retro-switch-thumb, :where([data-ui="retrofuturism"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
     background: var(--retro-on-primary);
     left: calc(100% - 1.56rem);
   }
-  .retro-badge {
+  .retro-badge, :where([data-ui="retrofuturism"]) .ui-badge {
     align-items: center;
     gap: var(--retro-space-1);
     background: var(--retro-surface-soft);
@@ -7965,37 +7981,37 @@
     display: inline-flex;
   }
-  .retro-badge-primary {
+  .retro-badge-primary, :where([data-ui="retrofuturism"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--retro-primary);
     color: var(--retro-on-primary);
     border-color: var(--retro-primary);
   }
-  .retro-badge-secondary {
+  .retro-badge-secondary, :where([data-ui="retrofuturism"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--retro-secondary);
     color: var(--retro-on-secondary);
     border-color: var(--retro-secondary);
   }
-  .retro-badge-success {
+  .retro-badge-success, :where([data-ui="retrofuturism"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--retro-success);
     color: var(--retro-on-success);
     border-color: var(--retro-success);
   }
-  .retro-badge-warning {
+  .retro-badge-warning, :where([data-ui="retrofuturism"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--retro-warning);
     color: var(--retro-on-warning);
     border-color: var(--retro-warning);
   }
-  .retro-badge-danger {
+  .retro-badge-danger, :where([data-ui="retrofuturism"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--retro-danger);
     color: var(--retro-on-danger);
     border-color: var(--retro-danger);
   }
-  .retro-nav {
+  .retro-nav, :where([data-ui="retrofuturism"]) .ui-nav {
     align-items: center;
     gap: var(--retro-space-2);
     padding: var(--retro-space-2);
@@ -8007,7 +8023,7 @@
     display: flex;
   }
-  .retro-nav-link {
+  .retro-nav-link, :where([data-ui="retrofuturism"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--retro-text-muted);
     border-radius: var(--retro-radius-pill);
@@ -8020,12 +8036,12 @@
     display: inline-flex;
   }
-  .retro-nav-link:hover {
+  .retro-nav-link:hover, :where([data-ui="retrofuturism"]) .ui-nav-link:hover {
     color: var(--retro-text);
     background: var(--retro-surface-soft);
   }
-  .retro-nav-link[aria-current="page"], .retro-nav-link.is-active {
+  .retro-nav-link[aria-current="page"], .retro-nav-link.is-active, :where([data-ui="retrofuturism"]) .ui-nav-link[aria-current="page"], :where([data-ui="retrofuturism"]) .ui-nav-link.is-active {
     color: var(--retro-on-primary);
     background: var(--retro-primary);
   }
@@ -8057,7 +8073,7 @@
     flex: none;
   }
-  .retro-progress {
+  .retro-progress, :where([data-ui="retrofuturism"]) .ui-progress {
     background: var(--retro-surface-soft);
     border: 1px solid var(--retro-border);
     border-radius: var(--retro-radius-pill);
@@ -8066,14 +8082,14 @@
     overflow: hidden;
   }
-  .retro-progress-bar {
+  .retro-progress-bar, :where([data-ui="retrofuturism"]) .ui-progress-bar {
     height: 100%;
     width: var(--retro-progress-value, 50%);
     background: linear-gradient(90deg,var(--retro-primary),var(--retro-accent));
     border-radius: inherit;
   }
-  .retro-alert {
+  .retro-alert, :where([data-ui="retrofuturism"]) .ui-alert {
     gap: var(--retro-space-2);
     padding: var(--retro-space-4);
     background: var(--retro-surface);
@@ -8084,45 +8100,45 @@
     display: grid;
   }
-  .retro-alert-success {
+  .retro-alert-success, :where([data-ui="retrofuturism"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--retro-success);
   }
-  .retro-alert-warning {
+  .retro-alert-warning, :where([data-ui="retrofuturism"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--retro-warning);
   }
-  .retro-alert-danger {
+  .retro-alert-danger, :where([data-ui="retrofuturism"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--retro-danger);
   }
-  .retro-alert-title {
+  .retro-alert-title, :where([data-ui="retrofuturism"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .retro-alert-body {
+  .retro-alert-body, :where([data-ui="retrofuturism"]) .ui-alert-body {
     color: var(--retro-text-muted);
     margin: 0;
     line-height: 1.55;
   }
-  .retro-table-wrap {
+  .retro-table-wrap, :where([data-ui="retrofuturism"]) .ui-table-wrap {
     overflow: auto;
   }
-  .retro-table {
+  .retro-table, :where([data-ui="retrofuturism"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .retro-table th, .retro-table td {
+  .retro-table th, .retro-table td, :where([data-ui="retrofuturism"]) .ui-table th, :where([data-ui="retrofuturism"]) .ui-table td {
     text-align: left;
     border-bottom: 1px solid var(--retro-border);
     padding: .95rem 1rem;
   }
-  .retro-table th {
+  .retro-table th, :where([data-ui="retrofuturism"]) .ui-table th {
     color: var(--retro-text);
     text-transform: uppercase;
     letter-spacing: .08em;
@@ -8131,11 +8147,11 @@
     font-weight: 900;
   }
-  .retro-table td {
+  .retro-table td, :where([data-ui="retrofuturism"]) .ui-table td {
     color: var(--retro-text-muted);
   }
-  .retro-table tr:hover td {
+  .retro-table tr:hover td, :where([data-ui="retrofuturism"]) .ui-table tr:hover td {
     background: rgb(var(--retro-primary-rgb)/.045);
   }
@@ -8238,12 +8254,12 @@
     text-shadow: 0 0 12px rgb(var(--retro-primary-rgb)/.24),0 0 26px rgb(var(--retro-accent-rgb)/.16);
   }
-  .retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap {
+  .retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap, :where([data-ui="retrofuturism"]) .ui-card, :where([data-ui="retrofuturism"]) .ui-toolbar, :where([data-ui="retrofuturism"]) .ui-table-wrap {
     background: linear-gradient(180deg,#ffffff1a,#ffffff05),linear-gradient(135deg,rgb(var(--retro-primary-rgb)/.08),transparent 46%),var(--retro-surface);
     box-shadow: 0 18px 48px rgb(0 0 0 / var(--retro-shadow-alpha)),0 0 0 1px rgb(var(--retro-border-rgb)/.2),0 0 26px rgb(var(--retro-primary-rgb)/.14);
   }
-  .retro-button-primary, .retro-badge-primary, .retro-nav-link.is-active {
+  .retro-button-primary, .retro-badge-primary, .retro-nav-link.is-active, :where([data-ui="retrofuturism"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="retrofuturism"]) .ui-badge:where([data-ui-variant="primary"]), :where([data-ui="retrofuturism"]) .ui-nav-link.is-active {
     box-shadow: 0 0 0 1px rgb(var(--retro-primary-rgb)/.34),0 0 22px rgb(var(--retro-primary-rgb)/.22);
   }
@@ -8273,12 +8289,12 @@
     inline-size: 3rem;
   }
-  .retro-button[aria-busy="true"], .retro-icon-button[aria-busy="true"], [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .retro-button[aria-busy="true"], .retro-icon-button[aria-busy="true"], [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="retrofuturism"]) .ui-button[aria-busy="true"], :where([data-ui="retrofuturism"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .retro-button[aria-busy="true"]:after, .retro-icon-button[aria-busy="true"]:after, [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .retro-button[aria-busy="true"]:after, .retro-icon-button[aria-busy="true"]:after, [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retrofuturism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retrofuturism"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--retro-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -8550,12 +8566,12 @@
     inline-size: 3rem;
   }
-  .brutal-button[aria-busy="true"], .brutal-icon-button[aria-busy="true"], [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .brutal-button[aria-busy="true"], .brutal-icon-button[aria-busy="true"], [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="brutalism"]) .ui-button[aria-busy="true"], :where([data-ui="brutalism"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .brutal-button[aria-busy="true"]:after, .brutal-icon-button[aria-busy="true"]:after, [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .brutal-button[aria-busy="true"]:after, .brutal-icon-button[aria-busy="true"]:after, [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="brutalism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="brutalism"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--brutal-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -8572,7 +8588,7 @@
     }
   }
-  .brutal-title, .brutal-heading, .brutal-kicker, .brutal-button, .brutal-badge, .brutal-nav-link {
+  .brutal-title, .brutal-heading, .brutal-kicker, .brutal-button, .brutal-badge, .brutal-nav-link, :where([data-ui="brutalism"]) .ui-button, :where([data-ui="brutalism"]) .ui-badge, :where([data-ui="brutalism"]) .ui-nav-link {
     font-family: var(--brutal-font-heading);
     text-transform: uppercase;
   }
@@ -8611,7 +8627,7 @@
     color: var(--brutal-text-muted);
   }
-  .brutal-card, .brutal-panel, .brutal-surface, .brutal-toolbar, .brutal-table-wrap {
+  .brutal-card, .brutal-panel, .brutal-surface, .brutal-toolbar, .brutal-table-wrap, :where([data-ui="brutalism"]) .ui-card, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap {
     background: var(--brutal-surface-strong);
     color: var(--brutal-text);
     border: 3px solid var(--brutal-border);
@@ -8620,11 +8636,11 @@
     transition: transform var(--brutal-transition-fast),box-shadow var(--brutal-transition-fast),background var(--brutal-transition-fast);
   }
-  .brutal-card, .brutal-panel {
+  .brutal-card, .brutal-panel, :where([data-ui="brutalism"]) .ui-card {
     padding: var(--brutal-space-6);
   }
-  .brutal-toolbar {
+  .brutal-toolbar, :where([data-ui="brutalism"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--brutal-space-4);
@@ -8655,7 +8671,7 @@
     transform: translate(4px, 4px);
   }
-  .brutal-button, .brutal-icon-button {
+  .brutal-button, .brutal-icon-button, :where([data-ui="brutalism"]) .ui-button, :where([data-ui="brutalism"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -8678,76 +8694,76 @@
     display: inline-flex;
   }
-  .brutal-button:hover, .brutal-icon-button:hover {
+  .brutal-button:hover, .brutal-icon-button:hover, :where([data-ui="brutalism"]) .ui-button:hover, :where([data-ui="brutalism"]) .ui-icon-button:hover {
     box-shadow: 8px 8px 0 var(--brutal-primary);
     transform: translate(-2px, -2px);
   }
-  .brutal-button:active, .brutal-icon-button:active, .brutal-button.is-active, .brutal-button[aria-pressed="true"] {
+  .brutal-button:active, .brutal-icon-button:active, .brutal-button.is-active, .brutal-button[aria-pressed="true"], :where([data-ui="brutalism"]) .ui-button:active, :where([data-ui="brutalism"]) .ui-icon-button:active, :where([data-ui="brutalism"]) .ui-button.is-active, :where([data-ui="brutalism"]) .ui-button[aria-pressed="true"] {
     box-shadow: 2px 2px 0 var(--brutal-secondary);
     transform: translate(4px, 4px);
   }
-  .brutal-button-primary {
+  .brutal-button-primary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="primary"]) {
     background: var(--brutal-primary);
     color: var(--brutal-on-primary);
   }
-  .brutal-button-primary:hover {
+  .brutal-button-primary:hover, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--brutal-primary-hover);
   }
-  .brutal-button-secondary {
+  .brutal-button-secondary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: var(--brutal-secondary);
     color: var(--brutal-on-secondary);
     box-shadow: 6px 6px 0 var(--brutal-primary);
   }
-  .brutal-button-secondary:hover {
+  .brutal-button-secondary:hover, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--brutal-secondary-hover);
   }
-  .brutal-button-danger {
+  .brutal-button-danger, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--brutal-danger);
     color: var(--brutal-on-danger);
   }
-  .brutal-icon-button {
+  .brutal-icon-button, :where([data-ui="brutalism"]) .ui-icon-button {
     width: 2.85rem;
     padding: 0;
   }
-  .brutal-button:disabled, .brutal-icon-button:disabled, .brutal-disabled {
+  .brutal-button:disabled, .brutal-icon-button:disabled, .brutal-disabled, :where([data-ui="brutalism"]) .ui-button:disabled, :where([data-ui="brutalism"]) .ui-icon-button:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
   }
-  .brutal-card, .brutal-panel {
+  .brutal-card, .brutal-panel, :where([data-ui="brutalism"]) .ui-card {
     background: var(--brutal-card-bg);
   }
-  .brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button {
+  .brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap, :where([data-ui="brutalism"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="brutalism"]) .ui-icon-button {
     background: var(--brutal-control-bg);
   }
-  .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link {
+  .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link, :where([data-ui="brutalism"]) .ui-button, :where([data-ui="brutalism"]) .ui-icon-button, :where([data-ui="brutalism"]) .ui-badge, :where([data-ui="brutalism"]) .ui-nav-link {
     font-family: var(--brutal-font-control);
   }
-  .brutal-field {
+  .brutal-field, :where([data-ui="brutalism"]) .ui-field {
     gap: var(--brutal-space-2);
     flex-direction: column;
     display: flex;
   }
-  .brutal-label {
+  .brutal-label, :where([data-ui="brutalism"]) .ui-label {
     text-transform: uppercase;
     letter-spacing: .05em;
     font-weight: 900;
   }
-  .brutal-input, .brutal-textarea, .brutal-select {
+  .brutal-input, .brutal-textarea, .brutal-select, :where([data-ui="brutalism"]) .ui-input, :where([data-ui="brutalism"]) .ui-textarea, :where([data-ui="brutalism"]) .ui-select {
     background: var(--brutal-surface-strong);
     width: 100%;
     min-height: 2.9rem;
@@ -8760,22 +8776,22 @@
     box-shadow: inset 4px 4px #0000001f;
   }
-  .brutal-textarea {
+  .brutal-textarea, :where([data-ui="brutalism"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .brutal-input:focus, .brutal-textarea:focus, .brutal-select:focus {
+  .brutal-input:focus, .brutal-textarea:focus, .brutal-select:focus, :where([data-ui="brutalism"]) .ui-input:focus, :where([data-ui="brutalism"]) .ui-textarea:focus, :where([data-ui="brutalism"]) .ui-select:focus {
     border-color: var(--brutal-focus);
     box-shadow: 0 0 0 4px rgb(var(--brutal-focus-rgb)/.28),inset 4px 4px 0 #0000001f;
   }
-  .brutal-help-text {
+  .brutal-help-text, :where([data-ui="brutalism"]) .ui-help-text {
     color: var(--brutal-text-muted);
     font-size: .9rem;
   }
-  .brutal-badge {
+  .brutal-badge, :where([data-ui="brutalism"]) .ui-badge {
     background: var(--brutal-surface-strong);
     min-height: 1.8rem;
     color: var(--brutal-text);
@@ -8788,32 +8804,32 @@
     display: inline-flex;
   }
-  .brutal-badge-primary {
+  .brutal-badge-primary, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--brutal-primary);
     color: var(--brutal-on-primary);
   }
-  .brutal-badge-secondary {
+  .brutal-badge-secondary, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--brutal-secondary);
     color: var(--brutal-on-secondary);
   }
-  .brutal-badge-success {
+  .brutal-badge-success, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--brutal-success);
     color: var(--brutal-on-success);
   }
-  .brutal-badge-warning {
+  .brutal-badge-warning, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--brutal-warning);
     color: var(--brutal-on-warning);
   }
-  .brutal-badge-danger {
+  .brutal-badge-danger, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--brutal-danger);
     color: var(--brutal-on-danger);
   }
-  .brutal-nav {
+  .brutal-nav, :where([data-ui="brutalism"]) .ui-nav {
     gap: var(--brutal-space-2);
     padding: var(--brutal-space-2);
     background: var(--brutal-surface-strong);
@@ -8823,7 +8839,7 @@
     display: flex;
   }
-  .brutal-nav-link {
+  .brutal-nav-link, :where([data-ui="brutalism"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--brutal-text);
     border: 3px solid #0000;
@@ -8834,12 +8850,12 @@
     display: inline-flex;
   }
-  .brutal-nav-link:hover {
+  .brutal-nav-link:hover, :where([data-ui="brutalism"]) .ui-nav-link:hover {
     border-color: var(--brutal-border);
     background: var(--brutal-surface-soft);
   }
-  .brutal-nav-link.is-active, .brutal-nav-link[aria-current="page"] {
+  .brutal-nav-link.is-active, .brutal-nav-link[aria-current="page"], :where([data-ui="brutalism"]) .ui-nav-link.is-active, :where([data-ui="brutalism"]) .ui-nav-link[aria-current="page"] {
     background: var(--brutal-primary);
     color: var(--brutal-on-primary);
     border-color: var(--brutal-border);
@@ -8872,66 +8888,66 @@
     transform: rotate(45deg);
   }
-  .brutal-progress {
+  .brutal-progress, :where([data-ui="brutalism"]) .ui-progress {
     background: var(--brutal-surface-soft);
     border: 3px solid var(--brutal-border);
     width: 100%;
     height: 1rem;
   }
-  .brutal-progress-bar {
+  .brutal-progress-bar, :where([data-ui="brutalism"]) .ui-progress-bar {
     height: 100%;
     width: var(--brutal-progress-value, 50%);
     background: var(--brutal-primary);
   }
-  .brutal-alert {
+  .brutal-alert, :where([data-ui="brutalism"]) .ui-alert {
     padding: var(--brutal-space-4);
     background: var(--brutal-surface-strong);
     border: 3px solid var(--brutal-border);
     box-shadow: 8px 8px 0 var(--brutal-accent);
   }
-  .brutal-alert-success {
+  .brutal-alert-success, :where([data-ui="brutalism"]) .ui-alert:where([data-ui-variant="success"]) {
     box-shadow: 8px 8px 0 var(--brutal-success);
   }
-  .brutal-alert-warning {
+  .brutal-alert-warning, :where([data-ui="brutalism"]) .ui-alert:where([data-ui-variant="warning"]) {
     box-shadow: 8px 8px 0 var(--brutal-warning);
   }
-  .brutal-alert-danger {
+  .brutal-alert-danger, :where([data-ui="brutalism"]) .ui-alert:where([data-ui-variant="danger"]) {
     box-shadow: 8px 8px 0 var(--brutal-danger);
   }
-  .brutal-alert-title {
+  .brutal-alert-title, :where([data-ui="brutalism"]) .ui-alert-title {
     text-transform: uppercase;
     margin: 0;
     font-weight: 900;
   }
-  .brutal-alert-body {
+  .brutal-alert-body, :where([data-ui="brutalism"]) .ui-alert-body {
     color: var(--brutal-text-muted);
     margin: .5rem 0 0;
   }
-  .brutal-table-wrap {
+  .brutal-table-wrap, :where([data-ui="brutalism"]) .ui-table-wrap {
     box-shadow: 8px 8px 0 var(--brutal-primary);
     overflow: auto;
   }
-  .brutal-table {
+  .brutal-table, :where([data-ui="brutalism"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .brutal-table th, .brutal-table td {
+  .brutal-table th, .brutal-table td, :where([data-ui="brutalism"]) .ui-table th, :where([data-ui="brutalism"]) .ui-table td {
     border: 2px solid var(--brutal-border);
     text-align: left;
     padding: .9rem 1rem;
   }
-  .brutal-table th {
+  .brutal-table th, :where([data-ui="brutalism"]) .ui-table th {
     background: var(--brutal-primary);
     color: var(--brutal-on-primary);
     text-transform: uppercase;
@@ -9205,7 +9221,7 @@
     color: var(--cyber-on-primary);
   }
-  .cyber-title, .cyber-heading, .cyber-kicker, .cyber-button, .cyber-badge, .cyber-nav-link {
+  .cyber-title, .cyber-heading, .cyber-kicker, .cyber-button, .cyber-badge, .cyber-nav-link, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-badge, :where([data-ui="cyberpunk"]) .ui-nav-link {
     font-family: var(--cyber-font-heading);
     text-transform: uppercase;
   }
@@ -9243,7 +9259,7 @@
     color: var(--cyber-text-muted);
   }
-  .cyber-card, .cyber-panel, .cyber-console, .cyber-toolbar, .cyber-table-wrap {
+  .cyber-card, .cyber-panel, .cyber-console, .cyber-toolbar, .cyber-table-wrap, :where([data-ui="cyberpunk"]) .ui-card, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap {
     background: linear-gradient(135deg,#ffffff14,#ffffff05),var(--cyber-surface);
     color: var(--cyber-text);
     border: 1px solid var(--cyber-border);
@@ -9255,7 +9271,7 @@
     overflow: hidden;
   }
-  .cyber-card:before, .cyber-panel:before, .cyber-console:before, .cyber-toolbar:before {
+  .cyber-card:before, .cyber-panel:before, .cyber-console:before, .cyber-toolbar:before, :where([data-ui="cyberpunk"]) .ui-card:before, :where([data-ui="cyberpunk"]) .ui-toolbar:before {
     content: "";
     pointer-events: none;
     border-top: 2px solid rgb(var(--cyber-primary-rgb)/.5);
@@ -9264,7 +9280,7 @@
     inset: 0;
   }
-  .cyber-card, .cyber-panel, .cyber-console {
+  .cyber-card, .cyber-panel, .cyber-console, :where([data-ui="cyberpunk"]) .ui-card {
     padding: var(--cyber-space-6);
   }
@@ -9272,7 +9288,7 @@
     background: linear-gradient(180deg,rgb(var(--cyber-primary-rgb)/.08),transparent),var(--cyber-surface-strong);
   }
-  .cyber-toolbar {
+  .cyber-toolbar, :where([data-ui="cyberpunk"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--cyber-space-4);
@@ -9298,7 +9314,7 @@
     padding: var(--cyber-space-5);
   }
-  .cyber-button, .cyber-icon-button {
+  .cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -9321,52 +9337,52 @@
     display: inline-flex;
   }
-  .cyber-button:hover, .cyber-icon-button:hover {
+  .cyber-button:hover, .cyber-icon-button:hover, :where([data-ui="cyberpunk"]) .ui-button:hover, :where([data-ui="cyberpunk"]) .ui-icon-button:hover {
     box-shadow: var(--cyber-shadow-md),0 0 26px var(--cyber-glow-primary);
     transform: translateY(-1px);
   }
-  .cyber-button:active, .cyber-icon-button:active, .cyber-button.is-active, .cyber-button[aria-pressed="true"] {
+  .cyber-button:active, .cyber-icon-button:active, .cyber-button.is-active, .cyber-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-button:active, :where([data-ui="cyberpunk"]) .ui-icon-button:active, :where([data-ui="cyberpunk"]) .ui-button.is-active, :where([data-ui="cyberpunk"]) .ui-button[aria-pressed="true"] {
     box-shadow: inset 0 0 18px #00000038,0 0 18px var(--cyber-glow-primary);
     transform: translateY(1px);
   }
-  .cyber-button-primary {
+  .cyber-button-primary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]) {
     background: linear-gradient(135deg,#ffffff24,transparent),var(--cyber-primary);
     color: var(--cyber-on-primary);
   }
-  .cyber-button-primary:hover {
+  .cyber-button-primary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--cyber-primary-hover);
   }
-  .cyber-button-secondary {
+  .cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: linear-gradient(135deg,#ffffff24,transparent),var(--cyber-secondary);
     color: var(--cyber-on-secondary);
     border-color: rgb(var(--cyber-secondary-rgb)/.7);
   }
-  .cyber-button-secondary:hover {
+  .cyber-button-secondary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--cyber-secondary-hover);
   }
-  .cyber-button-danger {
+  .cyber-button-danger, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--cyber-danger);
     color: var(--cyber-on-danger);
   }
-  .cyber-icon-button {
+  .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
     width: 2.85rem;
     padding: 0;
   }
-  .cyber-field {
+  .cyber-field, :where([data-ui="cyberpunk"]) .ui-field {
     gap: var(--cyber-space-2);
     flex-direction: column;
     display: flex;
   }
-  .cyber-label {
+  .cyber-label, :where([data-ui="cyberpunk"]) .ui-label {
     font-family: var(--cyber-font-heading);
     text-transform: uppercase;
     letter-spacing: .14em;
@@ -9374,7 +9390,7 @@
     font-weight: 800;
   }
-  .cyber-input, .cyber-textarea, .cyber-select {
+  .cyber-input, .cyber-textarea, .cyber-select, :where([data-ui="cyberpunk"]) .ui-input, :where([data-ui="cyberpunk"]) .ui-textarea, :where([data-ui="cyberpunk"]) .ui-select {
     background: var(--cyber-surface-soft);
     width: 100%;
     min-height: 2.9rem;
@@ -9387,22 +9403,22 @@
     box-shadow: inset 0 0 18px #0003;
   }
-  .cyber-textarea {
+  .cyber-textarea, :where([data-ui="cyberpunk"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus {
+  .cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus, :where([data-ui="cyberpunk"]) .ui-input:focus, :where([data-ui="cyberpunk"]) .ui-textarea:focus, :where([data-ui="cyberpunk"]) .ui-select:focus {
     border-color: var(--cyber-focus);
     box-shadow: 0 0 0 2px rgb(var(--cyber-focus-rgb)/.24),0 0 24px rgb(var(--cyber-focus-rgb)/.24),inset 0 0 18px #0003;
   }
-  .cyber-help-text {
+  .cyber-help-text, :where([data-ui="cyberpunk"]) .ui-help-text {
     color: var(--cyber-text-muted);
     font-size: .9rem;
   }
-  .cyber-badge {
+  .cyber-badge, :where([data-ui="cyberpunk"]) .ui-badge {
     background: var(--cyber-surface);
     min-height: 1.8rem;
     color: var(--cyber-text);
@@ -9417,32 +9433,32 @@
     display: inline-flex;
   }
-  .cyber-badge-primary {
+  .cyber-badge-primary, :where([data-ui="cyberpunk"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--cyber-primary);
     color: var(--cyber-on-primary);
   }
-  .cyber-badge-secondary {
+  .cyber-badge-secondary, :where([data-ui="cyberpunk"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--cyber-secondary);
     color: var(--cyber-on-secondary);
   }
-  .cyber-badge-success {
+  .cyber-badge-success, :where([data-ui="cyberpunk"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--cyber-success);
     color: var(--cyber-on-success);
   }
-  .cyber-badge-warning {
+  .cyber-badge-warning, :where([data-ui="cyberpunk"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--cyber-warning);
     color: var(--cyber-on-warning);
   }
-  .cyber-badge-danger {
+  .cyber-badge-danger, :where([data-ui="cyberpunk"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--cyber-danger);
     color: var(--cyber-on-danger);
   }
-  .cyber-nav {
+  .cyber-nav, :where([data-ui="cyberpunk"]) .ui-nav {
     gap: var(--cyber-space-2);
     padding: var(--cyber-space-2);
     background: var(--cyber-surface);
@@ -9453,7 +9469,7 @@
     display: flex;
   }
-  .cyber-nav-link {
+  .cyber-nav-link, :where([data-ui="cyberpunk"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--cyber-text-muted);
     border-radius: var(--cyber-radius-xs);
@@ -9466,12 +9482,12 @@
     display: inline-flex;
   }
-  .cyber-nav-link:hover {
+  .cyber-nav-link:hover, :where([data-ui="cyberpunk"]) .ui-nav-link:hover {
     color: var(--cyber-text);
     border-color: rgb(var(--cyber-primary-rgb)/.48);
   }
-  .cyber-nav-link.is-active, .cyber-nav-link[aria-current="page"] {
+  .cyber-nav-link.is-active, .cyber-nav-link[aria-current="page"], :where([data-ui="cyberpunk"]) .ui-nav-link.is-active, :where([data-ui="cyberpunk"]) .ui-nav-link[aria-current="page"] {
     background: var(--cyber-primary);
     color: var(--cyber-on-primary);
     border-color: var(--cyber-primary);
@@ -9506,7 +9522,7 @@
     flex: none;
   }
-  .cyber-progress {
+  .cyber-progress, :where([data-ui="cyberpunk"]) .ui-progress {
     background: var(--cyber-surface-soft);
     border: 1px solid var(--cyber-border);
     width: 100%;
@@ -9514,14 +9530,14 @@
     box-shadow: inset 0 0 18px #0000002e;
   }
-  .cyber-progress-bar {
+  .cyber-progress-bar, :where([data-ui="cyberpunk"]) .ui-progress-bar {
     height: 100%;
     width: var(--cyber-progress-value, 50%);
     background: linear-gradient(90deg,var(--cyber-primary),var(--cyber-accent));
     box-shadow: 0 0 18px var(--cyber-glow-primary);
   }
-  .cyber-alert {
+  .cyber-alert, :where([data-ui="cyberpunk"]) .ui-alert {
     padding: var(--cyber-space-4);
     background: var(--cyber-surface);
     border: 1px solid var(--cyber-border);
@@ -9529,56 +9545,56 @@
     box-shadow: var(--cyber-shadow-md),0 0 22px var(--cyber-glow-primary);
   }
-  .cyber-alert-success {
+  .cyber-alert-success, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left-color: var(--cyber-success);
   }
-  .cyber-alert-warning {
+  .cyber-alert-warning, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left-color: var(--cyber-warning);
   }
-  .cyber-alert-danger {
+  .cyber-alert-danger, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left-color: var(--cyber-danger);
   }
-  .cyber-alert-title {
+  .cyber-alert-title, :where([data-ui="cyberpunk"]) .ui-alert-title {
     font-family: var(--cyber-font-heading);
     text-transform: uppercase;
     margin: 0;
   }
-  .cyber-alert-body {
+  .cyber-alert-body, :where([data-ui="cyberpunk"]) .ui-alert-body {
     color: var(--cyber-text-muted);
     margin: .5rem 0 0;
   }
-  .cyber-table-wrap {
+  .cyber-table-wrap, :where([data-ui="cyberpunk"]) .ui-table-wrap {
     overflow: auto;
   }
-  .cyber-table {
+  .cyber-table, :where([data-ui="cyberpunk"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .cyber-table th, .cyber-table td {
+  .cyber-table th, .cyber-table td, :where([data-ui="cyberpunk"]) .ui-table th, :where([data-ui="cyberpunk"]) .ui-table td {
     border-bottom: 1px solid rgb(var(--cyber-border-rgb)/.38);
     text-align: left;
     padding: .9rem 1rem;
   }
-  .cyber-table th {
+  .cyber-table th, :where([data-ui="cyberpunk"]) .ui-table th {
     background: rgb(var(--cyber-primary-rgb)/.12);
     font-family: var(--cyber-font-heading);
     text-transform: uppercase;
     letter-spacing: .1em;
   }
-  .cyber-table td {
+  .cyber-table td, :where([data-ui="cyberpunk"]) .ui-table td {
     color: var(--cyber-text-muted);
   }
-  .cyber-table tr:hover td {
+  .cyber-table tr:hover td, :where([data-ui="cyberpunk"]) .ui-table tr:hover td {
     background: rgb(var(--cyber-primary-rgb)/.06);
   }
@@ -9611,7 +9627,7 @@
     outline-offset: 3px;
   }
-  .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-input:focus-visible, .cyber-nav-link:focus-visible {
+  .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-input:focus-visible, .cyber-nav-link:focus-visible, :where([data-ui="cyberpunk"]) .ui-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-icon-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-input:focus-visible, :where([data-ui="cyberpunk"]) .ui-nav-link:focus-visible {
     box-shadow: 0 0 0 3px rgb(var(--cyber-focus-rgb)/.28),0 0 28px rgb(var(--cyber-focus-rgb)/.28);
   }
@@ -9622,15 +9638,15 @@
     }
   }
-  .cyber-card, .cyber-panel {
+  .cyber-card, .cyber-panel, :where([data-ui="cyberpunk"]) .ui-card {
     background: var(--cyber-card-bg);
   }
-  .cyber-toolbar, .cyber-table-wrap, .cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-ghost), .cyber-icon-button {
+  .cyber-toolbar, .cyber-table-wrap, .cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-ghost), .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap, :where([data-ui="cyberpunk"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="cyberpunk"]) .ui-icon-button {
     background: var(--cyber-control-bg);
   }
-  .cyber-button, .cyber-icon-button, .cyber-badge, .cyber-nav-link {
+  .cyber-button, .cyber-icon-button, .cyber-badge, .cyber-nav-link, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button, :where([data-ui="cyberpunk"]) .ui-badge, :where([data-ui="cyberpunk"]) .ui-nav-link {
     font-family: var(--cyber-font-control);
   }
@@ -9661,12 +9677,12 @@
     inline-size: 3rem;
   }
-  .cyber-button[aria-busy="true"], .cyber-icon-button[aria-busy="true"], [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .cyber-button[aria-busy="true"], .cyber-icon-button[aria-busy="true"], [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="cyberpunk"]) .ui-button[aria-busy="true"], :where([data-ui="cyberpunk"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .cyber-button[aria-busy="true"]:after, .cyber-icon-button[aria-busy="true"]:after, [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .cyber-button[aria-busy="true"]:after, .cyber-icon-button[aria-busy="true"]:after, [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="cyberpunk"]) .ui-button[aria-busy="true"]:after, :where([data-ui="cyberpunk"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--cyber-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -9911,7 +9927,7 @@
     color: var(--y2k-on-primary);
   }
-  .y2k-title, .y2k-heading, .y2k-kicker, .y2k-button, .y2k-badge, .y2k-nav-link {
+  .y2k-title, .y2k-heading, .y2k-kicker, .y2k-button, .y2k-badge, .y2k-nav-link, :where([data-ui="y2k"]) .ui-button, :where([data-ui="y2k"]) .ui-badge, :where([data-ui="y2k"]) .ui-nav-link {
     font-family: var(--y2k-font-heading);
   }
@@ -9949,7 +9965,7 @@
     color: var(--y2k-text-muted);
   }
-  .y2k-card, .y2k-panel, .y2k-bubble, .y2k-toolbar, .y2k-table-wrap {
+  .y2k-card, .y2k-panel, .y2k-bubble, .y2k-toolbar, .y2k-table-wrap, :where([data-ui="y2k"]) .ui-card, :where([data-ui="y2k"]) .ui-toolbar, :where([data-ui="y2k"]) .ui-table-wrap {
     background: linear-gradient(145deg,#ffffff6b,#ffffff14),var(--y2k-surface);
     color: var(--y2k-text);
     border: 1px solid #ffffff61;
@@ -9962,7 +9978,7 @@
     overflow: hidden;
   }
-  .y2k-card:before, .y2k-panel:before, .y2k-bubble:before {
+  .y2k-card:before, .y2k-panel:before, .y2k-bubble:before, :where([data-ui="y2k"]) .ui-card:before {
     content: "";
     pointer-events: none;
     background: radial-gradient(circle at 20% 0%,#ffffff6b,transparent 22%),linear-gradient(120deg,transparent 0 55%,rgb(var(--y2k-accent-rgb)/.12));
@@ -9970,11 +9986,11 @@
     inset: 0;
   }
-  .y2k-card, .y2k-panel, .y2k-bubble {
+  .y2k-card, .y2k-panel, .y2k-bubble, :where([data-ui="y2k"]) .ui-card {
     padding: var(--y2k-space-6);
   }
-  .y2k-toolbar {
+  .y2k-toolbar, :where([data-ui="y2k"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--y2k-space-4);
@@ -10000,7 +10016,7 @@
     padding: var(--y2k-space-5);
   }
-  .y2k-button, .y2k-icon-button {
+  .y2k-button, .y2k-icon-button, :where([data-ui="y2k"]) .ui-button, :where([data-ui="y2k"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -10022,56 +10038,56 @@
     display: inline-flex;
   }
-  .y2k-button:hover, .y2k-icon-button:hover {
+  .y2k-button:hover, .y2k-icon-button:hover, :where([data-ui="y2k"]) .ui-button:hover, :where([data-ui="y2k"]) .ui-icon-button:hover {
     box-shadow: var(--y2k-shadow-md),0 0 26px var(--y2k-glow-accent);
     transform: translateY(-2px);
   }
-  .y2k-button:active, .y2k-icon-button:active, .y2k-button.is-active, .y2k-button[aria-pressed="true"] {
+  .y2k-button:active, .y2k-icon-button:active, .y2k-button.is-active, .y2k-button[aria-pressed="true"], :where([data-ui="y2k"]) .ui-button:active, :where([data-ui="y2k"]) .ui-icon-button:active, :where([data-ui="y2k"]) .ui-button.is-active, :where([data-ui="y2k"]) .ui-button[aria-pressed="true"] {
     transform: translateY(1px) scale(.99);
     box-shadow: inset 0 8px 16px #00000024;
   }
-  .y2k-button-primary {
+  .y2k-button-primary, :where([data-ui="y2k"]) .ui-button:where([data-ui-variant="primary"]) {
     background: linear-gradient(180deg,#ffffff75,#ffffff14),var(--y2k-primary);
     color: var(--y2k-on-primary);
   }
-  .y2k-button-primary:hover {
+  .y2k-button-primary:hover, :where([data-ui="y2k"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: linear-gradient(180deg,#ffffff80,#ffffff1a),var(--y2k-primary-hover);
   }
-  .y2k-button-secondary {
+  .y2k-button-secondary, :where([data-ui="y2k"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: linear-gradient(180deg,#ffffff75,#ffffff14),var(--y2k-secondary);
     color: var(--y2k-on-secondary);
   }
-  .y2k-button-secondary:hover {
+  .y2k-button-secondary:hover, :where([data-ui="y2k"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--y2k-secondary-hover);
   }
-  .y2k-button-danger {
+  .y2k-button-danger, :where([data-ui="y2k"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--y2k-danger);
     color: var(--y2k-on-danger);
   }
-  .y2k-icon-button {
+  .y2k-icon-button, :where([data-ui="y2k"]) .ui-icon-button {
     width: 2.85rem;
     padding: 0;
   }
-  .y2k-field {
+  .y2k-field, :where([data-ui="y2k"]) .ui-field {
     gap: var(--y2k-space-2);
     flex-direction: column;
     display: flex;
   }
-  .y2k-label {
+  .y2k-label, :where([data-ui="y2k"]) .ui-label {
     letter-spacing: .04em;
     font-weight: 900;
   }
-  .y2k-input, .y2k-textarea, .y2k-select {
+  .y2k-input, .y2k-textarea, .y2k-select, :where([data-ui="y2k"]) .ui-input, :where([data-ui="y2k"]) .ui-textarea, :where([data-ui="y2k"]) .ui-select {
     background: linear-gradient(180deg,#ffffff38,#0000000d),var(--y2k-surface-soft);
     width: 100%;
     min-height: 2.9rem;
@@ -10084,22 +10100,22 @@
     box-shadow: inset 0 6px 14px #0000001f;
   }
-  .y2k-textarea {
+  .y2k-textarea, :where([data-ui="y2k"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .y2k-input:focus, .y2k-textarea:focus, .y2k-select:focus {
+  .y2k-input:focus, .y2k-textarea:focus, .y2k-select:focus, :where([data-ui="y2k"]) .ui-input:focus, :where([data-ui="y2k"]) .ui-textarea:focus, :where([data-ui="y2k"]) .ui-select:focus {
     border-color: var(--y2k-focus);
     box-shadow: inset 0 6px 14px #0000001f,0 0 0 3px rgb(var(--y2k-focus-rgb)/.25),0 0 24px rgb(var(--y2k-focus-rgb)/.22);
   }
-  .y2k-help-text {
+  .y2k-help-text, :where([data-ui="y2k"]) .ui-help-text {
     color: var(--y2k-text-muted);
     font-size: .9rem;
   }
-  .y2k-badge {
+  .y2k-badge, :where([data-ui="y2k"]) .ui-badge {
     background: linear-gradient(180deg,#fff6,#ffffff14),var(--y2k-surface-strong);
     min-height: 1.8rem;
     color: var(--y2k-text);
@@ -10113,32 +10129,32 @@
     display: inline-flex;
   }
-  .y2k-badge-primary {
+  .y2k-badge-primary, :where([data-ui="y2k"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--y2k-primary);
     color: var(--y2k-on-primary);
   }
-  .y2k-badge-secondary {
+  .y2k-badge-secondary, :where([data-ui="y2k"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--y2k-secondary);
     color: var(--y2k-on-secondary);
   }
-  .y2k-badge-success {
+  .y2k-badge-success, :where([data-ui="y2k"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--y2k-success);
     color: var(--y2k-on-success);
   }
-  .y2k-badge-warning {
+  .y2k-badge-warning, :where([data-ui="y2k"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--y2k-warning);
     color: var(--y2k-on-warning);
   }
-  .y2k-badge-danger {
+  .y2k-badge-danger, :where([data-ui="y2k"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--y2k-danger);
     color: var(--y2k-on-danger);
   }
-  .y2k-nav {
+  .y2k-nav, :where([data-ui="y2k"]) .ui-nav {
     gap: var(--y2k-space-2);
     padding: var(--y2k-space-2);
     background: linear-gradient(180deg,#ffffff61,#ffffff14),var(--y2k-surface);
@@ -10149,7 +10165,7 @@
     display: flex;
   }
-  .y2k-nav-link {
+  .y2k-nav-link, :where([data-ui="y2k"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--y2k-text-muted);
     border-radius: var(--y2k-radius-pill);
@@ -10160,12 +10176,12 @@
     display: inline-flex;
   }
-  .y2k-nav-link:hover {
+  .y2k-nav-link:hover, :where([data-ui="y2k"]) .ui-nav-link:hover {
     color: var(--y2k-text);
     background: #ffffff29;
   }
-  .y2k-nav-link.is-active, .y2k-nav-link[aria-current="page"] {
+  .y2k-nav-link.is-active, .y2k-nav-link[aria-current="page"], :where([data-ui="y2k"]) .ui-nav-link.is-active, :where([data-ui="y2k"]) .ui-nav-link[aria-current="page"] {
     background: var(--y2k-primary);
     color: var(--y2k-on-primary);
     box-shadow: 0 0 20px var(--y2k-glow-primary);
@@ -10196,7 +10212,7 @@
     flex: none;
   }
-  .y2k-progress {
+  .y2k-progress, :where([data-ui="y2k"]) .ui-progress {
     background: var(--y2k-surface-soft);
     border-radius: var(--y2k-radius-pill);
     width: 100%;
@@ -10205,14 +10221,14 @@
     box-shadow: inset 0 6px 14px #0000001f;
   }
-  .y2k-progress-bar {
+  .y2k-progress-bar, :where([data-ui="y2k"]) .ui-progress-bar {
     height: 100%;
     width: var(--y2k-progress-value, 50%);
     background: linear-gradient(90deg,var(--y2k-primary),var(--y2k-accent),var(--y2k-secondary));
     border-radius: inherit;
   }
-  .y2k-alert {
+  .y2k-alert, :where([data-ui="y2k"]) .ui-alert {
     padding: var(--y2k-space-4);
     background: var(--y2k-surface);
     border-radius: var(--y2k-radius-xl);
@@ -10220,49 +10236,49 @@
     border: 1px solid #ffffff61;
   }
-  .y2k-alert-title {
+  .y2k-alert-title, :where([data-ui="y2k"]) .ui-alert-title {
     margin: 0;
     font-weight: 900;
   }
-  .y2k-alert-body {
+  .y2k-alert-body, :where([data-ui="y2k"]) .ui-alert-body {
     color: var(--y2k-text-muted);
     margin: .5rem 0 0;
   }
-  .y2k-alert-success {
+  .y2k-alert-success, :where([data-ui="y2k"]) .ui-alert:where([data-ui-variant="success"]) {
     box-shadow: var(--y2k-shadow-md),0 0 22px rgb(var(--y2k-success-rgb)/.2);
   }
-  .y2k-alert-warning {
+  .y2k-alert-warning, :where([data-ui="y2k"]) .ui-alert:where([data-ui-variant="warning"]) {
     box-shadow: var(--y2k-shadow-md),0 0 22px rgb(var(--y2k-warning-rgb)/.2);
   }
-  .y2k-alert-danger {
+  .y2k-alert-danger, :where([data-ui="y2k"]) .ui-alert:where([data-ui-variant="danger"]) {
     box-shadow: var(--y2k-shadow-md),0 0 22px rgb(var(--y2k-danger-rgb)/.2);
   }
-  .y2k-table-wrap {
+  .y2k-table-wrap, :where([data-ui="y2k"]) .ui-table-wrap {
     overflow: auto;
   }
-  .y2k-table {
+  .y2k-table, :where([data-ui="y2k"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .y2k-table th, .y2k-table td {
+  .y2k-table th, .y2k-table td, :where([data-ui="y2k"]) .ui-table th, :where([data-ui="y2k"]) .ui-table td {
     border-bottom: 1px solid rgb(var(--y2k-border-rgb)/.34);
     text-align: left;
     padding: .9rem 1rem;
   }
-  .y2k-table th {
+  .y2k-table th, :where([data-ui="y2k"]) .ui-table th {
     background: #ffffff29;
     font-weight: 900;
   }
-  .y2k-table td {
+  .y2k-table td, :where([data-ui="y2k"]) .ui-table td {
     color: var(--y2k-text-muted);
   }
@@ -10302,15 +10318,15 @@
     }
   }
-  .y2k-card, .y2k-panel {
+  .y2k-card, .y2k-panel, :where([data-ui="y2k"]) .ui-card {
     background: var(--y2k-card-bg);
   }
-  .y2k-toolbar, .y2k-table-wrap, .y2k-button:not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-ghost), .y2k-icon-button {
+  .y2k-toolbar, .y2k-table-wrap, .y2k-button:not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-ghost), .y2k-icon-button, :where([data-ui="y2k"]) .ui-toolbar, :where([data-ui="y2k"]) .ui-table-wrap, :where([data-ui="y2k"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="y2k"]) .ui-icon-button {
     background: var(--y2k-control-bg);
   }
-  .y2k-button, .y2k-icon-button, .y2k-badge, .y2k-nav-link {
+  .y2k-button, .y2k-icon-button, .y2k-badge, .y2k-nav-link, :where([data-ui="y2k"]) .ui-button, :where([data-ui="y2k"]) .ui-icon-button, :where([data-ui="y2k"]) .ui-badge, :where([data-ui="y2k"]) .ui-nav-link {
     font-family: var(--y2k-font-control);
   }
@@ -10340,12 +10356,12 @@
     inline-size: 3rem;
   }
-  .y2k-button[aria-busy="true"], .y2k-icon-button[aria-busy="true"], [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .y2k-button[aria-busy="true"], .y2k-icon-button[aria-busy="true"], [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="y2k"]) .ui-button[aria-busy="true"], :where([data-ui="y2k"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .y2k-button[aria-busy="true"]:after, .y2k-icon-button[aria-busy="true"]:after, [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .y2k-button[aria-busy="true"]:after, .y2k-icon-button[aria-busy="true"]:after, [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="y2k"]) .ui-button[aria-busy="true"]:after, :where([data-ui="y2k"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--y2k-primary-text-rgb)/.42);
     border-block-start-color: currentColor;
@@ -10590,7 +10606,7 @@
     color: var(--rg-on-primary);
   }
-  .rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link {
+  .rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-badge, :where([data-ui="retro-glass"]) .ui-nav-link {
     font-family: var(--rg-font-heading);
     text-transform: uppercase;
   }
@@ -10627,7 +10643,7 @@
     color: var(--rg-text-muted);
   }
-  .rg-card, .rg-panel, .rg-console, .rg-toolbar, .rg-table-wrap {
+  .rg-card, .rg-panel, .rg-console, .rg-toolbar, .rg-table-wrap, :where([data-ui="retro-glass"]) .ui-card, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap {
     background: linear-gradient(135deg,#ffffff2e,#ffffff0a),linear-gradient(135deg,rgb(var(--rg-primary-rgb)/.06),transparent 52%),var(--rg-surface);
     color: var(--rg-text);
     border: 1px solid var(--rg-border);
@@ -10641,7 +10657,7 @@
     overflow: hidden;
   }
-  .rg-card:before, .rg-panel:before, .rg-console:before {
+  .rg-card:before, .rg-panel:before, .rg-console:before, :where([data-ui="retro-glass"]) .ui-card:before {
     content: "";
     pointer-events: none;
     background: linear-gradient(180deg,#ffffff1a,transparent 30%),linear-gradient(90deg,transparent,rgb(var(--rg-accent-rgb)/.08),transparent);
@@ -10649,7 +10665,7 @@
     inset: 0;
   }
-  .rg-card, .rg-panel, .rg-console {
+  .rg-card, .rg-panel, .rg-console, :where([data-ui="retro-glass"]) .ui-card {
     padding: var(--rg-space-6);
   }
@@ -10658,7 +10674,7 @@
     box-shadow: var(--rg-shadow-lg),inset 0 0 28px rgb(var(--rg-primary-rgb)/.08),0 0 32px var(--rg-glow-primary);
   }
-  .rg-toolbar {
+  .rg-toolbar, :where([data-ui="retro-glass"]) .ui-toolbar {
     justify-content: space-between;
     align-items: center;
     gap: var(--rg-space-4);
@@ -10685,7 +10701,7 @@
     padding: var(--rg-space-5);
   }
-  .rg-button, .rg-icon-button {
+  .rg-button, .rg-icon-button, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button {
     appearance: none;
     justify-content: center;
     align-items: center;
@@ -10709,54 +10725,54 @@
     display: inline-flex;
   }
-  .rg-button:hover, .rg-icon-button:hover {
+  .rg-button:hover, .rg-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover {
     border-color: rgb(var(--rg-primary-rgb)/.68);
     box-shadow: var(--rg-shadow-md),0 0 24px var(--rg-glow-primary);
     transform: translateY(-2px);
   }
-  .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"] {
+  .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button.is-active, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"] {
     box-shadow: inset 0 8px 18px #0000002e,0 0 18px var(--rg-glow-primary);
     transform: translateY(1px);
   }
-  .rg-button-primary {
+  .rg-button-primary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]) {
     background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-primary);
     color: var(--rg-on-primary);
     border-color: rgb(var(--rg-primary-rgb)/.72);
   }
-  .rg-button-primary:hover {
+  .rg-button-primary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]):hover {
     background: var(--rg-primary-hover);
   }
-  .rg-button-secondary {
+  .rg-button-secondary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]) {
     background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-secondary);
     color: var(--rg-on-secondary);
     border-color: rgb(var(--rg-secondary-rgb)/.72);
   }
-  .rg-button-secondary:hover {
+  .rg-button-secondary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]):hover {
     background: var(--rg-secondary-hover);
   }
-  .rg-button-danger {
+  .rg-button-danger, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="danger"]) {
     background: var(--rg-danger);
     color: var(--rg-on-danger);
   }
-  .rg-icon-button {
+  .rg-icon-button, :where([data-ui="retro-glass"]) .ui-icon-button {
     width: 2.85rem;
     padding: 0;
   }
-  .rg-field {
+  .rg-field, :where([data-ui="retro-glass"]) .ui-field {
     gap: var(--rg-space-2);
     flex-direction: column;
     display: flex;
   }
-  .rg-label {
+  .rg-label, :where([data-ui="retro-glass"]) .ui-label {
     font-family: var(--rg-font-heading);
     text-transform: uppercase;
     letter-spacing: .12em;
@@ -10764,7 +10780,7 @@
     font-weight: 900;
   }
-  .rg-input, .rg-textarea, .rg-select {
+  .rg-input, .rg-textarea, .rg-select, :where([data-ui="retro-glass"]) .ui-input, :where([data-ui="retro-glass"]) .ui-textarea, :where([data-ui="retro-glass"]) .ui-select {
     background: linear-gradient(180deg,#ffffff0f,#00000014),var(--rg-surface-soft);
     width: 100%;
     min-height: 2.9rem;
@@ -10778,22 +10794,22 @@
     box-shadow: inset 0 8px 18px #00000024;
   }
-  .rg-textarea {
+  .rg-textarea, :where([data-ui="retro-glass"]) .ui-textarea {
     resize: vertical;
     min-height: 8rem;
   }
-  .rg-input:focus, .rg-textarea:focus, .rg-select:focus {
+  .rg-input:focus, .rg-textarea:focus, .rg-select:focus, :where([data-ui="retro-glass"]) .ui-input:focus, :where([data-ui="retro-glass"]) .ui-textarea:focus, :where([data-ui="retro-glass"]) .ui-select:focus {
     border-color: var(--rg-focus);
     box-shadow: inset 0 8px 18px #00000024,0 0 0 3px rgb(var(--rg-focus-rgb)/.24),0 0 26px rgb(var(--rg-focus-rgb)/.22);
   }
-  .rg-help-text {
+  .rg-help-text, :where([data-ui="retro-glass"]) .ui-help-text {
     color: var(--rg-text-muted);
     font-size: .9rem;
   }
-  .rg-badge {
+  .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
     background: linear-gradient(135deg,#fff3,#ffffff0a),var(--rg-surface);
     min-height: 1.8rem;
     color: var(--rg-text);
@@ -10809,32 +10825,32 @@
     display: inline-flex;
   }
-  .rg-badge-primary {
+  .rg-badge-primary, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="primary"]) {
     background: var(--rg-primary);
     color: var(--rg-on-primary);
   }
-  .rg-badge-secondary {
+  .rg-badge-secondary, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="secondary"]) {
     background: var(--rg-secondary);
     color: var(--rg-on-secondary);
   }
-  .rg-badge-success {
+  .rg-badge-success, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="success"]) {
     background: var(--rg-success);
     color: var(--rg-on-success);
   }
-  .rg-badge-warning {
+  .rg-badge-warning, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="warning"]) {
     background: var(--rg-warning);
     color: var(--rg-on-warning);
   }
-  .rg-badge-danger {
+  .rg-badge-danger, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="danger"]) {
     background: var(--rg-danger);
     color: var(--rg-on-danger);
   }
-  .rg-nav {
+  .rg-nav, :where([data-ui="retro-glass"]) .ui-nav {
     gap: var(--rg-space-2);
     padding: var(--rg-space-2);
     background: linear-gradient(135deg,#ffffff2e,#ffffff0a),var(--rg-surface);
@@ -10846,7 +10862,7 @@
     display: flex;
   }
-  .rg-nav-link {
+  .rg-nav-link, :where([data-ui="retro-glass"]) .ui-nav-link {
     min-height: 2.5rem;
     color: var(--rg-text-muted);
     border-radius: var(--rg-radius-pill);
@@ -10859,13 +10875,13 @@
     display: inline-flex;
   }
-  .rg-nav-link:hover {
+  .rg-nav-link:hover, :where([data-ui="retro-glass"]) .ui-nav-link:hover {
     color: var(--rg-text);
     border-color: rgb(var(--rg-primary-rgb)/.36);
     background: #ffffff1a;
   }
-  .rg-nav-link.is-active, .rg-nav-link[aria-current="page"] {
+  .rg-nav-link.is-active, .rg-nav-link[aria-current="page"], :where([data-ui="retro-glass"]) .ui-nav-link.is-active, :where([data-ui="retro-glass"]) .ui-nav-link[aria-current="page"] {
     background: var(--rg-primary);
     color: var(--rg-on-primary);
     box-shadow: 0 0 22px var(--rg-glow-primary);
@@ -10899,7 +10915,7 @@
     transform: rotate(45deg);
   }
-  .rg-progress {
+  .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
     background: var(--rg-surface-soft);
     border: 1px solid rgb(var(--rg-border-rgb)/.4);
     border-radius: var(--rg-radius-pill);
@@ -10909,7 +10925,7 @@
     box-shadow: inset 0 8px 18px #00000024;
   }
-  .rg-progress-bar {
+  .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
     height: 100%;
     width: var(--rg-progress-value, 50%);
     background: linear-gradient(90deg,var(--rg-primary),var(--rg-accent),var(--rg-secondary));
@@ -10917,7 +10933,7 @@
     box-shadow: 0 0 18px var(--rg-glow-primary);
   }
-  .rg-alert {
+  .rg-alert, :where([data-ui="retro-glass"]) .ui-alert {
     padding: var(--rg-space-4);
     background: var(--rg-surface);
     border: 1px solid var(--rg-border);
@@ -10926,52 +10942,52 @@
     backdrop-filter: blur(16px);
   }
-  .rg-alert-title {
+  .rg-alert-title, :where([data-ui="retro-glass"]) .ui-alert-title {
     font-family: var(--rg-font-heading);
     text-transform: uppercase;
     margin: 0;
   }
-  .rg-alert-body {
+  .rg-alert-body, :where([data-ui="retro-glass"]) .ui-alert-body {
     color: var(--rg-text-muted);
     margin: .5rem 0 0;
   }
-  .rg-alert-success {
+  .rg-alert-success, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"]) {
     border-left: 4px solid var(--rg-success);
   }
-  .rg-alert-warning {
+  .rg-alert-warning, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"]) {
     border-left: 4px solid var(--rg-warning);
   }
-  .rg-alert-danger {
+  .rg-alert-danger, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"]) {
     border-left: 4px solid var(--rg-danger);
   }
-  .rg-table-wrap {
+  .rg-table-wrap, :where([data-ui="retro-glass"]) .ui-table-wrap {
     overflow: auto;
   }
-  .rg-table {
+  .rg-table, :where([data-ui="retro-glass"]) .ui-table {
     border-collapse: collapse;
     width: 100%;
   }
-  .rg-table th, .rg-table td {
+  .rg-table th, .rg-table td, :where([data-ui="retro-glass"]) .ui-table th, :where([data-ui="retro-glass"]) .ui-table td {
     border-bottom: 1px solid rgb(var(--rg-border-rgb)/.34);
     text-align: left;
     padding: .9rem 1rem;
   }
-  .rg-table th {
+  .rg-table th, :where([data-ui="retro-glass"]) .ui-table th {
     background: rgb(var(--rg-primary-rgb)/.1);
     font-family: var(--rg-font-heading);
     text-transform: uppercase;
     letter-spacing: .1em;
   }
-  .rg-table td {
+  .rg-table td, :where([data-ui="retro-glass"]) .ui-table td {
     color: var(--rg-text-muted);
   }
@@ -11019,15 +11035,15 @@
     }
   }
-  .rg-card, .rg-panel {
+  .rg-card, .rg-panel, :where([data-ui="retro-glass"]) .ui-card {
     background: var(--rg-card-bg);
   }
-  .rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-ghost), .rg-icon-button {
+  .rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-ghost), .rg-icon-button, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap, :where([data-ui="retro-glass"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="retro-glass"]) .ui-icon-button {
     background: var(--rg-control-bg);
   }
-  .rg-button, .rg-icon-button, .rg-badge, .rg-nav-link {
+  .rg-button, .rg-icon-button, .rg-badge, .rg-nav-link, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button, :where([data-ui="retro-glass"]) .ui-badge, :where([data-ui="retro-glass"]) .ui-nav-link {
     font-family: var(--rg-font-control);
   }
@@ -11058,12 +11074,12 @@
     inline-size: 3rem;
   }
-  .rg-button[aria-busy="true"], .rg-icon-button[aria-busy="true"], [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
+  .rg-button[aria-busy="true"], .rg-icon-button[aria-busy="true"], [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"], :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"] {
     cursor: progress;
     gap: .55rem;
   }
-  .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
+  .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
     content: "";
     border: .16em solid rgb(var(--rg-primary-text-rgb)/.42);
     border-block-start-color: currentColor;