/*!
 * UI Style Kit CSS v2.4.1
 * CSS theme and UI style preset library.
 * License: MIT
 */

@layer ui-style-kit.theme_colors, ui-style-kit.native_elements, ui-style-kit.components, ui-style-kit.presets, ui-style-kit.compat_layout;

/* styles/theme-colors.css */
/* =========================================================
   UI Style Kit CSS - Shared Theme Color Roles
   Defines active scheme and mode colors once for every UI preset.
========================================================= */

@layer ui-style-kit.theme_colors {
/**
 * Optional text inks let bright palette fills retain their color without making
 * text on neutral surfaces unreadable. Initial values preserve preset colors and
 * prevent an outer palette's text override from leaking into a nested UI root.
 */
:where([data-ui]) {
  --usk-primary-ink: initial;
  --usk-accent-ink: initial;
}

/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
:where([data-ui][data-mode="light"]) {
  /* Keep vivid fills intact while using the darker link role for text treatments. */
  --usk-primary-ink: rgb(var(--usk-link-rgb));
  --usk-accent-ink: rgb(var(--usk-link-rgb));
  --usk-border-text-mix: 45%;
  --usk-border-min-alpha: 1;
}

:where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
  --usk-border-text-mix: 0%;
  --usk-border-min-alpha: 0;
}

:where([data-ui][data-theme="midnight-gold"][data-mode="light"]) {
  --usk-bg-rgb: 246 243 234;
  --usk-surface-rgb: 255 250 240;
  --usk-surface-strong-rgb: 255 255 255;
  --usk-surface-soft-rgb: 237 230 211;
  --usk-text-rgb: 23 32 51;
  --usk-text-muted-rgb: 95 104 121;
  --usk-border-rgb: 214 200 165;
  --usk-primary-rgb: 184 135 47;
  --usk-primary-hover-rgb: 162 118 38;
  --usk-primary-text-rgb: 16 16 16;
  --usk-secondary-rgb: 34 49 79;
  --usk-secondary-hover-rgb: 23 36 60;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 217 164 65;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 167 106 0;
  --usk-danger-rgb: 185 63 63;
  --usk-link-rgb: 132 94 27;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 217 164 65;
}

:where([data-ui][data-theme="midnight-gold"][data-mode="dark"]) {
  --usk-bg-rgb: 7 17 31;
  --usk-surface-rgb: 16 27 45;
  --usk-surface-strong-rgb: 23 36 58;
  --usk-surface-soft-rgb: 12 22 39;
  --usk-text-rgb: 247 237 215;
  --usk-text-muted-rgb: 185 192 204;
  --usk-border-rgb: 57 72 97;
  --usk-primary-rgb: 214 168 79;
  --usk-primary-hover-rgb: 240 200 109;
  --usk-primary-text-rgb: 16 16 16;
  --usk-secondary-rgb: 111 134 184;
  --usk-secondary-hover-rgb: 146 167 209;
  --usk-secondary-text-rgb: 8 16 29;
  --usk-accent-rgb: 243 210 122;
  --usk-success-rgb: 107 214 156;
  --usk-warning-rgb: 255 203 91;
  --usk-danger-rgb: 255 123 123;
  --usk-link-rgb: 243 210 122;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 214 107;
}

:where([data-ui][data-theme="midnight-gold"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 8 8 8;
  --usk-surface-strong-rgb: 17 17 17;
  --usk-surface-soft-rgb: 5 5 5;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 245 245 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 212 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 217 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 234 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 191 0;
  --usk-danger-rgb: 255 77 77;
  --usk-link-rgb: 0 217 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="ocean-steel"][data-mode="light"]) {
  --usk-bg-rgb: 238 248 251;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 248 253 255;
  --usk-surface-soft-rgb: 220 236 242;
  --usk-text-rgb: 16 36 46;
  --usk-text-muted-rgb: 78 101 112;
  --usk-border-rgb: 184 211 221;
  --usk-primary-rgb: 8 125 157;
  --usk-primary-hover-rgb: 6 100 126;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 57 86 107;
  --usk-secondary-hover-rgb: 44 67 84;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 21 184 200;
  --usk-success-rgb: 38 122 92;
  --usk-warning-rgb: 167 101 0;
  --usk-danger-rgb: 182 70 70;
  --usk-link-rgb: 6 100 126;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 21 184 200;
}

:where([data-ui][data-theme="ocean-steel"][data-mode="dark"]) {
  --usk-bg-rgb: 6 22 29;
  --usk-surface-rgb: 13 37 48;
  --usk-surface-strong-rgb: 20 52 66;
  --usk-surface-soft-rgb: 8 29 38;
  --usk-text-rgb: 233 251 255;
  --usk-text-muted-rgb: 167 192 201;
  --usk-border-rgb: 49 86 102;
  --usk-primary-rgb: 54 196 221;
  --usk-primary-hover-rgb: 115 227 244;
  --usk-primary-text-rgb: 4 18 22;
  --usk-secondary-rgb: 140 183 201;
  --usk-secondary-hover-rgb: 178 213 226;
  --usk-secondary-text-rgb: 6 22 29;
  --usk-accent-rgb: 83 240 255;
  --usk-success-rgb: 103 216 166;
  --usk-warning-rgb: 255 192 97;
  --usk-danger-rgb: 255 123 123;
  --usk-link-rgb: 115 227 244;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 83 240 255;
}

:where([data-ui][data-theme="ocean-steel"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 8 10;
  --usk-surface-rgb: 0 16 20;
  --usk-surface-strong-rgb: 0 26 32;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 234 255 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 0 229 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 255 0;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 0 255 255;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 208 0;
  --usk-danger-rgb: 255 59 59;
  --usk-link-rgb: 0 229 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="forest-moss"][data-mode="light"]) {
  --usk-bg-rgb: 242 247 239;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 251 255 248;
  --usk-surface-soft-rgb: 226 234 219;
  --usk-text-rgb: 24 36 23;
  --usk-text-muted-rgb: 88 104 82;
  --usk-border-rgb: 197 211 186;
  --usk-primary-rgb: 63 125 58;
  --usk-primary-hover-rgb: 47 97 43;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 106 95 56;
  --usk-secondary-hover-rgb: 81 73 43;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 156 186 82;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 154 106 0;
  --usk-danger-rgb: 173 69 69;
  --usk-link-rgb: 47 97 43;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 156 186 82;
}

:where([data-ui][data-theme="forest-moss"][data-mode="dark"]) {
  --usk-bg-rgb: 7 16 6;
  --usk-surface-rgb: 16 28 15;
  --usk-surface-strong-rgb: 26 42 24;
  --usk-surface-soft-rgb: 11 22 10;
  --usk-text-rgb: 237 247 232;
  --usk-text-muted-rgb: 180 197 173;
  --usk-border-rgb: 61 83 56;
  --usk-primary-rgb: 130 210 122;
  --usk-primary-hover-rgb: 162 237 153;
  --usk-primary-text-rgb: 7 16 6;
  --usk-secondary-rgb: 210 189 114;
  --usk-secondary-hover-rgb: 239 217 139;
  --usk-secondary-text-rgb: 20 16 6;
  --usk-accent-rgb: 185 239 107;
  --usk-success-rgb: 117 223 167;
  --usk-warning-rgb: 255 210 99;
  --usk-danger-rgb: 255 133 133;
  --usk-link-rgb: 162 237 153;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 185 239 107;
}

:where([data-ui][data-theme="forest-moss"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 7 16 7;
  --usk-surface-strong-rgb: 11 25 11;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 240 255 240;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 108 255 95;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 223 0;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 182 255 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 208 0;
  --usk-danger-rgb: 255 64 64;
  --usk-link-rgb: 108 255 95;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="sunset-ember"][data-mode="light"]) {
  --usk-bg-rgb: 255 244 236;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 255 250 246;
  --usk-surface-soft-rgb: 244 222 210;
  --usk-text-rgb: 42 23 17;
  --usk-text-muted-rgb: 118 88 77;
  --usk-border-rgb: 227 189 170;
  --usk-primary-rgb: 196 81 43;
  --usk-primary-hover-rgb: 159 63 32;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 124 63 92;
  --usk-secondary-hover-rgb: 97 48 71;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 230 154 58;
  --usk-success-rgb: 49 122 87;
  --usk-warning-rgb: 184 111 0;
  --usk-danger-rgb: 189 61 61;
  --usk-link-rgb: 159 63 32;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 230 154 58;
}

:where([data-ui][data-theme="sunset-ember"][data-mode="dark"]) {
  --usk-bg-rgb: 23 9 5;
  --usk-surface-rgb: 38 17 11;
  --usk-surface-strong-rgb: 53 25 18;
  --usk-surface-soft-rgb: 30 12 7;
  --usk-text-rgb: 255 240 232;
  --usk-text-muted-rgb: 208 177 165;
  --usk-border-rgb: 106 59 45;
  --usk-primary-rgb: 255 138 91;
  --usk-primary-hover-rgb: 255 173 138;
  --usk-primary-text-rgb: 26 8 3;
  --usk-secondary-rgb: 227 138 181;
  --usk-secondary-hover-rgb: 255 175 208;
  --usk-secondary-text-rgb: 26 7 18;
  --usk-accent-rgb: 255 193 102;
  --usk-success-rgb: 112 215 163;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 119 119;
  --usk-link-rgb: 255 173 138;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 193 102;
}

:where([data-ui][data-theme="sunset-ember"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 18 4 0;
  --usk-surface-strong-rgb: 29 7 0;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 245 239;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 106 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 79 184;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 208 0;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 191 0;
  --usk-danger-rgb: 255 48 48;
  --usk-link-rgb: 255 157 0;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="royal-plum"][data-mode="light"]) {
  --usk-bg-rgb: 248 241 251;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 253 248 255;
  --usk-surface-soft-rgb: 234 220 240;
  --usk-text-rgb: 36 21 45;
  --usk-text-muted-rgb: 105 86 113;
  --usk-border-rgb: 213 187 221;
  --usk-primary-rgb: 123 63 160;
  --usk-primary-hover-rgb: 99 49 127;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 63 76 154;
  --usk-secondary-hover-rgb: 48 58 119;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 192 90 198;
  --usk-success-rgb: 49 124 92;
  --usk-warning-rgb: 166 106 0;
  --usk-danger-rgb: 183 65 95;
  --usk-link-rgb: 99 49 127;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 192 90 198;
}

:where([data-ui][data-theme="royal-plum"][data-mode="dark"]) {
  --usk-bg-rgb: 16 6 20;
  --usk-surface-rgb: 29 16 36;
  --usk-surface-strong-rgb: 42 23 52;
  --usk-surface-soft-rgb: 22 11 27;
  --usk-text-rgb: 250 236 255;
  --usk-text-muted-rgb: 200 176 209;
  --usk-border-rgb: 85 57 100;
  --usk-primary-rgb: 216 145 242;
  --usk-primary-hover-rgb: 235 184 255;
  --usk-primary-text-rgb: 19 6 23;
  --usk-secondary-rgb: 157 168 255;
  --usk-secondary-hover-rgb: 195 202 255;
  --usk-secondary-text-rgb: 8 11 31;
  --usk-accent-rgb: 255 156 246;
  --usk-success-rgb: 118 220 169;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 122 156;
  --usk-link-rgb: 235 184 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 156 246;
}

:where([data-ui][data-theme="royal-plum"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 16 0 20;
  --usk-surface-strong-rgb: 26 0 34;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 240 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 228 92 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 217 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 0 245;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 63 110;
  --usk-link-rgb: 228 92 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="graphite-cyan"][data-mode="light"]) {
  --usk-bg-rgb: 242 245 246;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 249 251 252;
  --usk-surface-soft-rgb: 225 231 234;
  --usk-text-rgb: 23 29 33;
  --usk-text-muted-rgb: 93 104 112;
  --usk-border-rgb: 197 206 212;
  --usk-primary-rgb: 0 124 137;
  --usk-primary-hover-rgb: 0 99 110;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 63 72 80;
  --usk-secondary-hover-rgb: 47 54 60;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 34 184 199;
  --usk-success-rgb: 40 122 91;
  --usk-warning-rgb: 167 103 0;
  --usk-danger-rgb: 182 64 64;
  --usk-link-rgb: 0 99 110;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 34 184 199;
}

:where([data-ui][data-theme="graphite-cyan"][data-mode="dark"]) {
  --usk-bg-rgb: 8 11 13;
  --usk-surface-rgb: 18 24 28;
  --usk-surface-strong-rgb: 28 37 43;
  --usk-surface-soft-rgb: 13 17 20;
  --usk-text-rgb: 237 246 248;
  --usk-text-muted-rgb: 174 187 193;
  --usk-border-rgb: 59 72 79;
  --usk-primary-rgb: 62 217 232;
  --usk-primary-hover-rgb: 123 243 255;
  --usk-primary-text-rgb: 6 16 18;
  --usk-secondary-rgb: 170 181 188;
  --usk-secondary-hover-rgb: 210 219 224;
  --usk-secondary-text-rgb: 8 11 13;
  --usk-accent-rgb: 123 243 255;
  --usk-success-rgb: 110 218 165;
  --usk-warning-rgb: 255 200 97;
  --usk-danger-rgb: 255 125 125;
  --usk-link-rgb: 123 243 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 62 217 232;
}

:where([data-ui][data-theme="graphite-cyan"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 7 7 7;
  --usk-surface-strong-rgb: 17 17 17;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 245 245 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 0 240 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 242 242 242;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 0 240 255;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 208 0;
  --usk-danger-rgb: 255 64 64;
  --usk-link-rgb: 0 240 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="desert-sage"][data-mode="light"]) {
  --usk-bg-rgb: 248 242 231;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 255 250 241;
  --usk-surface-soft-rgb: 234 223 205;
  --usk-text-rgb: 43 36 25;
  --usk-text-muted-rgb: 107 97 78;
  --usk-border-rgb: 215 198 167;
  --usk-primary-rgb: 140 106 61;
  --usk-primary-hover-rgb: 112 83 47;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 95 118 85;
  --usk-secondary-hover-rgb: 72 92 64;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 201 151 74;
  --usk-success-rgb: 81 125 72;
  --usk-warning-rgb: 166 107 0;
  --usk-danger-rgb: 174 74 63;
  --usk-link-rgb: 112 83 47;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 201 151 74;
}

:where([data-ui][data-theme="desert-sage"][data-mode="dark"]) {
  --usk-bg-rgb: 18 15 9;
  --usk-surface-rgb: 33 27 18;
  --usk-surface-strong-rgb: 47 40 27;
  --usk-surface-soft-rgb: 25 20 13;
  --usk-text-rgb: 248 239 223;
  --usk-text-muted-rgb: 199 186 163;
  --usk-border-rgb: 91 78 56;
  --usk-primary-rgb: 217 184 120;
  --usk-primary-hover-rgb: 240 211 154;
  --usk-primary-text-rgb: 21 16 6;
  --usk-secondary-rgb: 168 206 153;
  --usk-secondary-hover-rgb: 200 233 187;
  --usk-secondary-text-rgb: 9 20 7;
  --usk-accent-rgb: 241 196 110;
  --usk-success-rgb: 141 219 125;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 136 122;
  --usk-link-rgb: 240 211 154;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 241 196 110;
}

:where([data-ui][data-theme="desert-sage"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 15 11 3;
  --usk-surface-strong-rgb: 26 18 5;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 248 232;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 209 102;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 157 255 107;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 176 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 77 77;
  --usk-link-rgb: 255 209 102;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="rose-quartz"][data-mode="light"]) {
  --usk-bg-rgb: 255 242 245;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 255 248 250;
  --usk-surface-soft-rgb: 242 220 227;
  --usk-text-rgb: 43 21 29;
  --usk-text-muted-rgb: 118 90 99;
  --usk-border-rgb: 223 184 198;
  --usk-primary-rgb: 184 71 109;
  --usk-primary-hover-rgb: 150 55 87;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 122 85 126;
  --usk-secondary-hover-rgb: 96 65 99;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 223 125 157;
  --usk-success-rgb: 49 122 92;
  --usk-warning-rgb: 166 106 0;
  --usk-danger-rgb: 189 63 85;
  --usk-link-rgb: 150 55 87;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 223 125 157;
}

:where([data-ui][data-theme="rose-quartz"][data-mode="dark"]) {
  --usk-bg-rgb: 22 7 12;
  --usk-surface-rgb: 37 16 24;
  --usk-surface-strong-rgb: 53 24 36;
  --usk-surface-soft-rgb: 28 11 17;
  --usk-text-rgb: 255 240 244;
  --usk-text-muted-rgb: 210 174 185;
  --usk-border-rgb: 101 55 71;
  --usk-primary-rgb: 255 143 179;
  --usk-primary-hover-rgb: 255 182 205;
  --usk-primary-text-rgb: 24 6 13;
  --usk-secondary-rgb: 217 160 223;
  --usk-secondary-hover-rgb: 239 194 244;
  --usk-secondary-text-rgb: 22 6 24;
  --usk-accent-rgb: 255 173 197;
  --usk-success-rgb: 119 219 169;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 120 144;
  --usk-link-rgb: 255 182 205;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 173 197;
}

:where([data-ui][data-theme="rose-quartz"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 18 0 6;
  --usk-surface-strong-rgb: 32 0 13;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 240 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 79 147;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 240 0 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 138 179;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 48 48;
  --usk-link-rgb: 255 138 179;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="cyber-lime"][data-mode="light"]) {
  --usk-bg-rgb: 244 250 237;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 251 255 246;
  --usk-surface-soft-rgb: 226 239 211;
  --usk-text-rgb: 23 34 20;
  --usk-text-muted-rgb: 89 105 82;
  --usk-border-rgb: 198 216 179;
  --usk-primary-rgb: 95 159 31;
  --usk-primary-hover-rgb: 86 145 26;
  --usk-primary-text-rgb: 16 16 16;
  --usk-secondary-rgb: 20 127 134;
  --usk-secondary-hover-rgb: 14 98 104;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 164 215 46;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 156 104 0;
  --usk-danger-rgb: 179 65 65;
  --usk-link-rgb: 65 112 19;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 164 215 46;
}

:where([data-ui][data-theme="cyber-lime"][data-mode="dark"]) {
  --usk-bg-rgb: 5 11 5;
  --usk-surface-rgb: 13 24 12;
  --usk-surface-strong-rgb: 22 37 21;
  --usk-surface-soft-rgb: 8 17 8;
  --usk-text-rgb: 239 255 233;
  --usk-text-muted-rgb: 180 199 173;
  --usk-border-rgb: 57 82 54;
  --usk-primary-rgb: 168 255 61;
  --usk-primary-hover-rgb: 202 255 127;
  --usk-primary-text-rgb: 6 16 5;
  --usk-secondary-rgb: 61 235 242;
  --usk-secondary-hover-rgb: 134 248 255;
  --usk-secondary-text-rgb: 3 16 18;
  --usk-accent-rgb: 198 255 77;
  --usk-success-rgb: 111 240 168;
  --usk-warning-rgb: 255 218 98;
  --usk-danger-rgb: 255 119 119;
  --usk-link-rgb: 202 255 127;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 168 255 61;
}

:where([data-ui][data-theme="cyber-lime"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 5 11 0;
  --usk-surface-strong-rgb: 11 22 0;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 244 255 232;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 170 255 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 240 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 204 255 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 48 48;
  --usk-link-rgb: 170 255 0;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="arctic-indigo"][data-mode="light"]) {
  --usk-bg-rgb: 241 245 255;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 248 251 255;
  --usk-surface-soft-rgb: 223 231 246;
  --usk-text-rgb: 20 27 46;
  --usk-text-muted-rgb: 88 100 122;
  --usk-border-rgb: 190 203 227;
  --usk-primary-rgb: 64 94 184;
  --usk-primary-hover-rgb: 49 72 148;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 46 125 157;
  --usk-secondary-hover-rgb: 35 97 122;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 123 147 232;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 166 106 0;
  --usk-danger-rgb: 182 64 82;
  --usk-link-rgb: 49 72 148;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 123 147 232;
}

:where([data-ui][data-theme="arctic-indigo"][data-mode="dark"]) {
  --usk-bg-rgb: 6 10 22;
  --usk-surface-rgb: 16 24 43;
  --usk-surface-strong-rgb: 24 35 66;
  --usk-surface-soft-rgb: 10 16 32;
  --usk-text-rgb: 237 243 255;
  --usk-text-muted-rgb: 178 191 217;
  --usk-border-rgb: 58 75 120;
  --usk-primary-rgb: 145 168 255;
  --usk-primary-hover-rgb: 183 197 255;
  --usk-primary-text-rgb: 5 8 22;
  --usk-secondary-rgb: 118 216 243;
  --usk-secondary-hover-rgb: 165 234 255;
  --usk-secondary-text-rgb: 4 17 22;
  --usk-accent-rgb: 194 206 255;
  --usk-success-rgb: 114 219 166;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 125 145;
  --usk-link-rgb: 183 197 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 145 168 255;
}

:where([data-ui][data-theme="arctic-indigo"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 3 8 22;
  --usk-surface-strong-rgb: 8 18 42;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 238 244 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 111 140 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 217 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 184 196 255;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 63 95;
  --usk-link-rgb: 159 178 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}


:where([data-ui][data-theme="chrome-navy"][data-mode="light"]) {
  --usk-bg-rgb: 245 247 250;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 253 254 255;
  --usk-surface-soft-rgb: 230 234 240;
  --usk-text-rgb: 13 27 42;
  --usk-text-muted-rgb: 78 90 105;
  --usk-border-rgb: 192 198 207;
  --usk-primary-rgb: 31 58 95;
  --usk-primary-hover-rgb: 22 44 72;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 62 107 142;
  --usk-secondary-hover-rgb: 50 87 118;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 90 127 166;
  --usk-success-rgb: 31 107 83;
  --usk-warning-rgb: 164 106 0;
  --usk-danger-rgb: 178 60 60;
  --usk-link-rgb: 26 53 86;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 90 127 166;
}

:where([data-ui][data-theme="chrome-navy"][data-mode="dark"]) {
  --usk-bg-rgb: 8 17 28;
  --usk-surface-rgb: 16 33 49;
  --usk-surface-strong-rgb: 23 48 66;
  --usk-surface-soft-rgb: 12 26 39;
  --usk-text-rgb: 239 244 250;
  --usk-text-muted-rgb: 181 192 205;
  --usk-border-rgb: 69 87 107;
  --usk-primary-rgb: 126 169 211;
  --usk-primary-hover-rgb: 165 194 225;
  --usk-primary-text-rgb: 8 17 28;
  --usk-secondary-rgb: 168 193 220;
  --usk-secondary-hover-rgb: 199 216 234;
  --usk-secondary-text-rgb: 8 17 28;
  --usk-accent-rgb: 199 213 229;
  --usk-success-rgb: 120 216 181;
  --usk-warning-rgb: 255 209 122;
  --usk-danger-rgb: 255 144 144;
  --usk-link-rgb: 199 213 229;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 159 188 224;
}

:where([data-ui][data-theme="chrome-navy"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 5 8 12;
  --usk-surface-strong-rgb: 10 19 32;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 242 247 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 156 197 240;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 230 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 230 240 255;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 92 92;
  --usk-link-rgb: 156 197 240;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="recycled-emerald"][data-mode="light"]) {
  --usk-bg-rgb: 246 251 249;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 252 255 254;
  --usk-surface-soft-rgb: 232 242 239;
  --usk-text-rgb: 14 44 41;
  --usk-text-muted-rgb: 88 112 109;
  --usk-border-rgb: 199 216 212;
  --usk-primary-rgb: 14 91 79;
  --usk-primary-hover-rgb: 10 72 63;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 15 118 110;
  --usk-secondary-hover-rgb: 12 95 89;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 52 211 153;
  --usk-success-rgb: 21 115 71;
  --usk-warning-rgb: 150 99 0;
  --usk-danger-rgb: 185 63 79;
  --usk-link-rgb: 12 81 71;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 52 211 153;
}

:where([data-ui][data-theme="recycled-emerald"][data-mode="dark"]) {
  --usk-bg-rgb: 7 22 20;
  --usk-surface-rgb: 16 38 34;
  --usk-surface-strong-rgb: 22 54 47;
  --usk-surface-soft-rgb: 11 29 26;
  --usk-text-rgb: 236 251 247;
  --usk-text-muted-rgb: 183 208 203;
  --usk-border-rgb: 65 97 92;
  --usk-primary-rgb: 69 209 175;
  --usk-primary-hover-rgb: 114 227 197;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 103 221 209;
  --usk-secondary-hover-rgb: 141 236 227;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 139 255 214;
  --usk-success-rgb: 141 229 184;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 154 168;
  --usk-link-rgb: 139 255 214;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 103 221 209;
}

:where([data-ui][data-theme="recycled-emerald"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 3 16 13;
  --usk-surface-strong-rgb: 8 33 28;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 239 255 248;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 56 240 185;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 240 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 160 255 217;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 102 128;
  --usk-link-rgb: 56 240 185;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="industrial-orange"][data-mode="light"]) {
  --usk-bg-rgb: 245 243 239;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 251 250 248;
  --usk-surface-soft-rgb: 228 224 218;
  --usk-text-rgb: 24 21 18;
  --usk-text-muted-rgb: 98 91 84;
  --usk-border-rgb: 184 178 169;
  --usk-primary-rgb: 183 78 22;
  --usk-primary-hover-rgb: 142 63 18;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 43 43 43;
  --usk-secondary-hover-rgb: 27 27 27;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 225 139 61;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 164 106 0;
  --usk-danger-rgb: 178 60 60;
  --usk-link-rgb: 142 63 18;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 225 139 61;
}

:where([data-ui][data-theme="industrial-orange"][data-mode="dark"]) {
  --usk-bg-rgb: 13 12 11;
  --usk-surface-rgb: 26 26 26;
  --usk-surface-strong-rgb: 43 43 43;
  --usk-surface-soft-rgb: 18 17 16;
  --usk-text-rgb: 247 242 235;
  --usk-text-muted-rgb: 197 188 177;
  --usk-border-rgb: 89 81 73;
  --usk-primary-rgb: 255 138 61;
  --usk-primary-hover-rgb: 255 174 113;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 198 191 182;
  --usk-secondary-hover-rgb: 227 222 215;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 179 107;
  --usk-success-rgb: 139 223 178;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 152 152;
  --usk-link-rgb: 255 179 107;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 154 66;
}

:where([data-ui][data-theme="industrial-orange"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 10 9 8;
  --usk-surface-strong-rgb: 23 19 17;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 247 241 234;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 154 66;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 244 241 236;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 195 111;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 92 92;
  --usk-link-rgb: 255 179 107;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="performance-red"][data-mode="light"]) {
  --usk-bg-rgb: 246 246 247;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 252 252 253;
  --usk-surface-soft-rgb: 230 231 234;
  --usk-text-rgb: 18 19 23;
  --usk-text-muted-rgb: 92 97 107;
  --usk-border-rgb: 199 203 210;
  --usk-primary-rgb: 200 16 46;
  --usk-primary-hover-rgb: 163 14 37;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 31 31 31;
  --usk-secondary-hover-rgb: 17 17 17;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 232 76 97;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 164 106 0;
  --usk-danger-rgb: 168 15 41;
  --usk-link-rgb: 163 14 37;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 232 76 97;
}

:where([data-ui][data-theme="performance-red"][data-mode="dark"]) {
  --usk-bg-rgb: 9 9 10;
  --usk-surface-rgb: 20 20 22;
  --usk-surface-strong-rgb: 31 31 34;
  --usk-surface-soft-rgb: 15 16 18;
  --usk-text-rgb: 249 249 250;
  --usk-text-muted-rgb: 192 197 207;
  --usk-border-rgb: 76 79 86;
  --usk-primary-rgb: 255 76 102;
  --usk-primary-hover-rgb: 255 112 133;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 209 211 216;
  --usk-secondary-hover-rgb: 232 233 236;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 131 148;
  --usk-success-rgb: 143 223 182;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 127 144;
  --usk-link-rgb: 255 131 148;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 76 102;
}

:where([data-ui][data-theme="performance-red"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 7 7 7;
  --usk-surface-strong-rgb: 18 18 18;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 245 245 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 54 86;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 242 242 242;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 149 163;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 106 125;
  --usk-link-rgb: 255 149 163;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="heritage-brass"][data-mode="light"]) {
  --usk-bg-rgb: 250 244 234;
  --usk-surface-rgb: 255 253 249;
  --usk-surface-strong-rgb: 255 255 255;
  --usk-surface-soft-rgb: 239 228 207;
  --usk-text-rgb: 42 31 26;
  --usk-text-muted-rgb: 109 92 84;
  --usk-border-rgb: 212 192 166;
  --usk-primary-rgb: 107 15 26;
  --usk-primary-hover-rgb: 91 13 22;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 17 17 17;
  --usk-secondary-hover-rgb: 0 0 0;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 201 154 70;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 160 107 19;
  --usk-danger-rgb: 178 60 60;
  --usk-link-rgb: 91 13 22;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 201 154 70;
}

:where([data-ui][data-theme="heritage-brass"][data-mode="dark"]) {
  --usk-bg-rgb: 19 13 10;
  --usk-surface-rgb: 33 24 20;
  --usk-surface-strong-rgb: 50 36 30;
  --usk-surface-soft-rgb: 25 18 15;
  --usk-text-rgb: 251 245 236;
  --usk-text-muted-rgb: 211 195 183;
  --usk-border-rgb: 106 82 62;
  --usk-primary-rgb: 201 138 93;
  --usk-primary-hover-rgb: 224 169 126;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 246 235 215;
  --usk-secondary-hover-rgb: 255 248 235;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 231 184 95;
  --usk-success-rgb: 152 224 182;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 160 154;
  --usk-link-rgb: 240 200 125;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 231 184 95;
}

:where([data-ui][data-theme="heritage-brass"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 15 10 7;
  --usk-surface-strong-rgb: 28 18 13;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 245 232;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 200 138 54;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 243 217;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 211 107;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 107 107;
  --usk-link-rgb: 255 211 107;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="service-blue-red"][data-mode="light"]) {
  --usk-bg-rgb: 245 247 250;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 252 252 253;
  --usk-surface-soft-rgb: 232 235 240;
  --usk-text-rgb: 17 36 59;
  --usk-text-muted-rgb: 90 104 119;
  --usk-border-rgb: 200 207 217;
  --usk-primary-rgb: 13 59 102;
  --usk-primary-hover-rgb: 11 49 85;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 214 43 43;
  --usk-secondary-hover-rgb: 178 35 35;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 233 90 90;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 164 106 0;
  --usk-danger-rgb: 198 40 40;
  --usk-link-rgb: 11 49 85;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 214 43 43;
}

:where([data-ui][data-theme="service-blue-red"][data-mode="dark"]) {
  --usk-bg-rgb: 8 17 28;
  --usk-surface-rgb: 16 32 48;
  --usk-surface-strong-rgb: 24 49 73;
  --usk-surface-soft-rgb: 11 23 36;
  --usk-text-rgb: 243 247 251;
  --usk-text-muted-rgb: 188 200 213;
  --usk-border-rgb: 71 96 121;
  --usk-primary-rgb: 108 169 227;
  --usk-primary-hover-rgb: 147 193 237;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 106 106;
  --usk-secondary-hover-rgb: 255 146 146;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 154 154;
  --usk-success-rgb: 143 223 182;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 143 143;
  --usk-link-rgb: 165 203 241;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 106 106;
}

:where([data-ui][data-theme="service-blue-red"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 6 16 26;
  --usk-surface-strong-rgb: 10 29 48;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 238 244 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 102 181 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 102 102;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 170 170;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 92 92;
  --usk-link-rgb: 140 198 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="newsprint-crimson"][data-mode="light"]) {
  --usk-bg-rgb: 238 229 212;
  --usk-surface-rgb: 248 241 229;
  --usk-surface-strong-rgb: 255 249 238;
  --usk-surface-soft-rgb: 222 209 188;
  --usk-text-rgb: 44 38 34;
  --usk-text-muted-rgb: 99 88 80;
  --usk-border-rgb: 184 170 152;
  --usk-primary-rgb: 122 35 41;
  --usk-primary-hover-rgb: 92 24 29;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 64 58 54;
  --usk-secondary-hover-rgb: 45 41 38;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 199 137 114;
  --usk-success-rgb: 47 114 82;
  --usk-warning-rgb: 154 101 0;
  --usk-danger-rgb: 165 42 50;
  --usk-link-rgb: 106 30 36;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 165 42 50;
}

:where([data-ui][data-theme="newsprint-crimson"][data-mode="dark"]) {
  --usk-bg-rgb: 22 16 13;
  --usk-surface-rgb: 33 24 20;
  --usk-surface-strong-rgb: 48 35 30;
  --usk-surface-soft-rgb: 26 18 15;
  --usk-text-rgb: 244 235 221;
  --usk-text-muted-rgb: 198 184 168;
  --usk-border-rgb: 106 90 76;
  --usk-primary-rgb: 216 124 131;
  --usk-primary-hover-rgb: 238 160 166;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 200 185 166;
  --usk-secondary-hover-rgb: 229 214 194;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 240 165 151;
  --usk-success-rgb: 138 214 175;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 154 154;
  --usk-link-rgb: 240 165 151;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 240 165 151;
}

:where([data-ui][data-theme="newsprint-crimson"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 13 8 6;
  --usk-surface-strong-rgb: 26 16 12;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 245 232;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 122 132;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 243 218;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 179 167;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 102 102;
  --usk-link-rgb: 255 154 163;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="foundry-amber"][data-mode="light"]) {
  --usk-bg-rgb: 241 240 237;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 250 250 248;
  --usk-surface-soft-rgb: 223 221 216;
  --usk-text-rgb: 29 28 26;
  --usk-text-muted-rgb: 96 93 88;
  --usk-border-rgb: 167 163 155;
  --usk-primary-rgb: 169 87 0;
  --usk-primary-hover-rgb: 134 70 0;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 58 58 60;
  --usk-secondary-hover-rgb: 39 39 41;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 232 154 45;
  --usk-success-rgb: 47 114 82;
  --usk-warning-rgb: 154 101 0;
  --usk-danger-rgb: 173 54 54;
  --usk-link-rgb: 134 70 0;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 232 154 45;
}

:where([data-ui][data-theme="foundry-amber"][data-mode="dark"]) {
  --usk-bg-rgb: 17 17 19;
  --usk-surface-rgb: 27 28 31;
  --usk-surface-strong-rgb: 39 40 44;
  --usk-surface-soft-rgb: 22 23 26;
  --usk-text-rgb: 244 242 237;
  --usk-text-muted-rgb: 187 184 177;
  --usk-border-rgb: 88 90 95;
  --usk-primary-rgb: 240 160 58;
  --usk-primary-hover-rgb: 255 183 95;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 174 179 184;
  --usk-secondary-hover-rgb: 208 211 214;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 209 122;
  --usk-success-rgb: 138 214 175;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 153 153;
  --usk-link-rgb: 255 209 122;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 240 160 58;
}

:where([data-ui][data-theme="foundry-amber"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 9 9 9;
  --usk-surface-strong-rgb: 21 21 21;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 244 244 242;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 176 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 242 242 242;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 211 107;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 102 102;
  --usk-link-rgb: 255 194 71;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="soft-orchid"][data-mode="light"]) {
  --usk-bg-rgb: 247 244 252;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 252 250 255;
  --usk-surface-soft-rgb: 233 226 246;
  --usk-text-rgb: 36 26 58;
  --usk-text-muted-rgb: 103 92 121;
  --usk-border-rgb: 207 197 227;
  --usk-primary-rgb: 101 82 184;
  --usk-primary-hover-rgb: 75 59 152;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 105 82 163;
  --usk-secondary-hover-rgb: 81 63 129;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 196 156 232;
  --usk-success-rgb: 62 122 98;
  --usk-warning-rgb: 152 100 0;
  --usk-danger-rgb: 168 58 96;
  --usk-link-rgb: 75 59 152;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 141 117 209;
}

:where([data-ui][data-theme="soft-orchid"][data-mode="dark"]) {
  --usk-bg-rgb: 18 13 29;
  --usk-surface-rgb: 28 21 43;
  --usk-surface-strong-rgb: 42 32 64;
  --usk-surface-soft-rgb: 23 17 34;
  --usk-text-rgb: 245 240 255;
  --usk-text-muted-rgb: 196 184 217;
  --usk-border-rgb: 93 79 120;
  --usk-primary-rgb: 169 148 242;
  --usk-primary-hover-rgb: 196 181 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 209 183 245;
  --usk-secondary-hover-rgb: 229 213 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 231 198 255;
  --usk-success-rgb: 145 223 184;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 153 183;
  --usk-link-rgb: 209 183 245;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 209 183 245;
}

:where([data-ui][data-theme="soft-orchid"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 12 7 20;
  --usk-surface-strong-rgb: 26 16 40;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 247 240 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 184 156 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 113 255 226;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 208 242;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 102 139;
  --usk-link-rgb: 201 181 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="electric-noir"][data-mode="light"]) {
  --usk-bg-rgb: 244 245 248;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 251 252 255;
  --usk-surface-soft-rgb: 230 232 240;
  --usk-text-rgb: 20 17 28;
  --usk-text-muted-rgb: 95 90 104;
  --usk-border-rgb: 198 199 209;
  --usk-primary-rgb: 140 26 120;
  --usk-primary-hover-rgb: 114 21 98;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 33 58 85;
  --usk-secondary-hover-rgb: 23 42 62;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 46 117 144;
  --usk-success-rgb: 47 114 82;
  --usk-warning-rgb: 152 100 0;
  --usk-danger-rgb: 168 40 90;
  --usk-link-rgb: 114 21 98;
  --usk-accent-text-rgb: 255 255 255;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 168 48 160;
}

:where([data-ui][data-theme="electric-noir"][data-mode="dark"]) {
  --usk-bg-rgb: 9 7 20;
  --usk-surface-rgb: 17 11 27;
  --usk-surface-strong-rgb: 27 16 43;
  --usk-surface-soft-rgb: 13 9 22;
  --usk-text-rgb: 246 244 250;
  --usk-text-muted-rgb: 188 179 199;
  --usk-border-rgb: 75 50 92;
  --usk-primary-rgb: 226 74 196;
  --usk-primary-hover-rgb: 255 114 223;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 75 166 201;
  --usk-secondary-hover-rgb: 120 197 226;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 122 225;
  --usk-success-rgb: 138 214 175;
  --usk-warning-rgb: 255 210 122;
  --usk-danger-rgb: 255 122 159;
  --usk-link-rgb: 255 122 225;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 122 225;
}

:where([data-ui][data-theme="electric-noir"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 9 5 18;
  --usk-surface-strong-rgb: 22 10 36;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 248 242 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 89 215;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 215 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 146 230;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 102 139;
  --usk-link-rgb: 255 123 224;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

/** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
:where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
  --usk-primary-ink: rgb(var(--usk-link-rgb));
  --usk-accent-ink: rgb(var(--usk-link-rgb));
  --usk-bg-rgb: 255 251 232;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 255 254 245;
  --usk-surface-soft-rgb: 247 237 187;
  --usk-text-rgb: 33 29 12;
  --usk-text-muted-rgb: 100 91 55;
  --usk-border-rgb: 217 199 111;
  --usk-primary-rgb: 255 204 0;
  --usk-primary-hover-rgb: 222 175 0;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 37 50 78;
  --usk-secondary-hover-rgb: 25 37 61;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 255 228 92;
  --usk-success-rgb: 34 122 75;
  --usk-warning-rgb: 144 92 0;
  --usk-danger-rgb: 177 54 54;
  --usk-link-rgb: 112 79 0;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 255 204 0;
}

:where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
  --usk-bg-rgb: 18 15 3;
  --usk-surface-rgb: 32 27 7;
  --usk-surface-strong-rgb: 48 40 10;
  --usk-surface-soft-rgb: 25 21 5;
  --usk-text-rgb: 255 249 222;
  --usk-text-muted-rgb: 207 195 145;
  --usk-border-rgb: 104 88 31;
  --usk-primary-rgb: 255 216 59;
  --usk-primary-hover-rgb: 255 234 130;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 142 198 255;
  --usk-secondary-hover-rgb: 182 220 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 232 102;
  --usk-success-rgb: 103 217 151;
  --usk-warning-rgb: 255 194 62;
  --usk-danger-rgb: 255 119 119;
  --usk-link-rgb: 255 232 102;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 232 102;
}

:where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 13 11 0;
  --usk-surface-strong-rgb: 26 22 0;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 250 222;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 214 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 217 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 234 0;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 191 0;
  --usk-danger-rgb: 255 77 77;
  --usk-link-rgb: 255 234 0;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

/** Botanical Green pairs leaf-green actions with restrained berry support. */
:where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
  --usk-bg-rgb: 239 249 242;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 248 253 249;
  --usk-surface-soft-rgb: 214 237 220;
  --usk-text-rgb: 14 38 23;
  --usk-text-muted-rgb: 75 98 81;
  --usk-border-rgb: 176 207 185;
  --usk-primary-rgb: 13 126 66;
  --usk-primary-hover-rgb: 8 97 50;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 121 48 88;
  --usk-secondary-hover-rgb: 91 35 65;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 64 201 117;
  --usk-success-rgb: 24 116 65;
  --usk-warning-rgb: 150 96 0;
  --usk-danger-rgb: 178 60 70;
  --usk-link-rgb: 8 97 50;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 64 201 117;
}

:where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
  --usk-bg-rgb: 4 17 9;
  --usk-surface-rgb: 10 32 18;
  --usk-surface-strong-rgb: 17 48 28;
  --usk-surface-soft-rgb: 7 24 14;
  --usk-text-rgb: 235 252 241;
  --usk-text-muted-rgb: 173 205 182;
  --usk-border-rgb: 49 91 63;
  --usk-primary-rgb: 82 222 139;
  --usk-primary-hover-rgb: 128 240 169;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 238 148 199;
  --usk-secondary-hover-rgb: 255 187 222;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 107 240 164;
  --usk-success-rgb: 100 218 149;
  --usk-warning-rgb: 255 205 91;
  --usk-danger-rgb: 255 126 137;
  --usk-link-rgb: 128 240 169;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 107 240 164;
}

:where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 0 14 5;
  --usk-surface-strong-rgb: 0 29 11;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 238 255 244;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 0 255 112;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 92 178;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 103 255 166;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 77 91;
  --usk-link-rgb: 103 255 166;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

/** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
:where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
  --usk-bg-rgb: 240 244 255;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 248 250 255;
  --usk-surface-soft-rgb: 220 229 250;
  --usk-text-rgb: 14 27 57;
  --usk-text-muted-rgb: 73 89 123;
  --usk-border-rgb: 177 195 232;
  --usk-primary-rgb: 0 82 204;
  --usk-primary-hover-rgb: 0 61 158;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 181 57 72;
  --usk-secondary-hover-rgb: 143 41 54;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 82 121 255;
  --usk-success-rgb: 35 121 78;
  --usk-warning-rgb: 151 96 0;
  --usk-danger-rgb: 180 55 74;
  --usk-link-rgb: 0 64 163;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 82 121 255;
}

:where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
  --usk-bg-rgb: 4 9 25;
  --usk-surface-rgb: 10 20 48;
  --usk-surface-strong-rgb: 16 32 72;
  --usk-surface-soft-rgb: 7 14 36;
  --usk-text-rgb: 239 244 255;
  --usk-text-muted-rgb: 174 188 218;
  --usk-border-rgb: 49 70 122;
  --usk-primary-rgb: 111 149 255;
  --usk-primary-hover-rgb: 164 188 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 133 147;
  --usk-secondary-hover-rgb: 255 173 183;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 143 170 255;
  --usk-success-rgb: 105 219 159;
  --usk-warning-rgb: 255 205 91;
  --usk-danger-rgb: 255 121 139;
  --usk-link-rgb: 164 188 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 143 170 255;
}

:where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 0 7 22;
  --usk-surface-strong-rgb: 0 15 44;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 239 245 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 76 133 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 105 125;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 132 168 255;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 92 112;
  --usk-link-rgb: 132 168 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

/** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
:where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
  --usk-bg-rgb: 244 244 242;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 250 250 248;
  --usk-surface-soft-rgb: 227 229 225;
  --usk-text-rgb: 27 29 28;
  --usk-text-muted-rgb: 86 91 88;
  --usk-border-rgb: 184 189 185;
  --usk-primary-rgb: 56 60 58;
  --usk-primary-hover-rgb: 37 40 38;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 91 97 93;
  --usk-secondary-hover-rgb: 69 74 71;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 184 190 186;
  --usk-success-rgb: 48 115 79;
  --usk-warning-rgb: 145 94 0;
  --usk-danger-rgb: 168 60 60;
  --usk-link-rgb: 52 60 56;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 112 121 116;
}

:where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
  --usk-bg-rgb: 12 13 13;
  --usk-surface-rgb: 25 27 26;
  --usk-surface-strong-rgb: 40 43 41;
  --usk-surface-soft-rgb: 18 20 19;
  --usk-text-rgb: 245 246 245;
  --usk-text-muted-rgb: 189 193 190;
  --usk-border-rgb: 78 84 80;
  --usk-primary-rgb: 208 212 209;
  --usk-primary-hover-rgb: 235 237 235;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 164 170 166;
  --usk-secondary-hover-rgb: 194 199 196;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 230 232 231;
  --usk-success-rgb: 130 210 165;
  --usk-warning-rgb: 242 197 112;
  --usk-danger-rgb: 240 137 137;
  --usk-link-rgb: 220 224 221;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 8 8 8;
  --usk-surface-strong-rgb: 20 20 20;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 245 245 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 255 255;
  --usk-primary-hover-rgb: 221 221 221;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 205 205 205;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 245 245 245;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 92 92;
  --usk-link-rgb: 255 255 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

/** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
:where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
  --usk-bg-rgb: 248 241 233;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 253 249 245;
  --usk-surface-soft-rgb: 232 216 202;
  --usk-text-rgb: 49 36 29;
  --usk-text-muted-rgb: 102 84 74;
  --usk-border-rgb: 199 172 154;
  --usk-primary-rgb: 112 67 48;
  --usk-primary-hover-rgb: 83 47 34;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 88 98 78;
  --usk-secondary-hover-rgb: 66 75 57;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 190 111 82;
  --usk-success-rgb: 53 117 76;
  --usk-warning-rgb: 147 91 0;
  --usk-danger-rgb: 173 61 55;
  --usk-link-rgb: 105 60 43;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 190 111 82;
}

:where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
  --usk-bg-rgb: 18 12 9;
  --usk-surface-rgb: 35 24 19;
  --usk-surface-strong-rgb: 51 34 26;
  --usk-surface-soft-rgb: 27 18 14;
  --usk-text-rgb: 250 241 233;
  --usk-text-muted-rgb: 205 184 169;
  --usk-border-rgb: 107 78 61;
  --usk-primary-rgb: 218 158 124;
  --usk-primary-hover-rgb: 240 188 156;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 178 192 157;
  --usk-secondary-hover-rgb: 207 217 190;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 235 169 136;
  --usk-success-rgb: 133 214 164;
  --usk-warning-rgb: 255 203 100;
  --usk-danger-rgb: 255 135 128;
  --usk-link-rgb: 240 188 156;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 235 169 136;
}

:where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 15 7 3;
  --usk-surface-strong-rgb: 31 15 7;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 244 237;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 174 128;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 208 234 166;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 194 160;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 212 0;
  --usk-danger-rgb: 255 102 96;
  --usk-link-rgb: 255 194 160;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}
}


/* styles/native-elements.css */
/* =========================================================
   UI Style Kit CSS - Shared Native Element Layer

   Native fallback selectors are shared so UI presets can focus
   on visual identity while inheriting the same semantic coverage.
   Presets map --usk-native-* tokens to their public prefix tokens.
========================================================= */

@layer ui-style-kit.native_elements {
[data-ui][data-mode] {
  --usk-native-bg: rgb(var(--usk-bg-rgb));
  --usk-native-surface: rgb(var(--usk-surface-rgb));
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
  --usk-native-card-bg: var(--usk-native-surface);
  --usk-native-control-bg: var(--usk-native-surface-soft);
  --usk-native-text: rgb(var(--usk-text-rgb));
  --usk-native-text-muted: rgb(var(--usk-text-muted-rgb));
  --usk-native-border: rgb(var(--usk-border-rgb));
  --usk-native-primary: rgb(var(--usk-primary-rgb));
  --usk-native-primary-hover: rgb(var(--usk-primary-hover-rgb));
  --usk-native-on-primary: rgb(var(--usk-primary-text-rgb));
  --usk-native-focus: rgb(var(--usk-focus-rgb));
  --usk-native-success: rgb(var(--usk-success-rgb));
  --usk-native-warning: rgb(var(--usk-warning-rgb));
  --usk-native-danger: rgb(var(--usk-danger-rgb));
  --usk-native-link: rgb(var(--usk-link-rgb));
  --usk-native-font-body: inherit;
  --usk-native-font-heading: inherit;
  --usk-native-font-control: inherit;
  --usk-native-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --usk-native-radius-sm: .5rem;
  --usk-native-radius: .75rem;
  --usk-native-radius-lg: 1rem;
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: 1rem;
  --usk-native-control-min-block-size: 2.75rem;
  --usk-native-control-padding-block: .72rem;
  --usk-native-control-padding-inline: .95rem;
  --usk-native-subcontrol-padding-block: .55rem;
  --usk-native-subcontrol-padding-inline: .8rem;
  --usk-native-track: var(--usk-native-border);
  --usk-native-track-fill: var(--usk-native-primary);
  --usk-native-thumb: var(--usk-native-surface-strong);
  --usk-native-thumb-border: var(--usk-native-primary);
  --usk-native-indicator: var(--usk-native-primary);
  --usk-native-choice-size: 1.5rem;
  --usk-native-choice-background: var(--usk-native-control-bg);
  --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
  --usk-native-checkbox-radius: .3rem;
  --usk-native-radio-radius: 50%;
  --usk-native-choice-shadow: none;
  --usk-native-choice-checked-background: var(--usk-native-primary);
  --usk-native-choice-mark-color: var(--usk-native-on-primary);
  --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
  --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
  --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
  --usk-native-select-padding-inline-end: 2.5rem;
  --usk-native-range-track-size: .45rem;
  --usk-native-range-track-background: var(--usk-native-track);
  --usk-native-range-track-border: 0 solid transparent;
  --usk-native-range-track-radius: 999px;
  --usk-native-range-track-shadow: none;
  --usk-native-range-progress-background: var(--usk-native-track-fill);
  --usk-native-range-thumb-size: 1.2rem;
  --usk-native-range-thumb-background: var(--usk-native-thumb);
  --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
  --usk-native-range-thumb-radius: 50%;
  --usk-native-range-thumb-shadow: var(--usk-native-shadow);
  --usk-native-progress-size: .9rem;
  --usk-native-progress-track-background: var(--usk-native-track);
  --usk-native-progress-track-border: 0 solid transparent;
  --usk-native-progress-track-radius: 999px;
  --usk-native-progress-track-shadow: none;
  --usk-native-progress-value-background: var(--usk-native-track-fill);
  --usk-native-progress-value-radius: inherit;
  --usk-native-progress-value-shadow: none;
  --usk-native-meter-optimum-background: var(--usk-native-success);
  --usk-native-meter-suboptimum-background: var(--usk-native-warning);
  --usk-native-meter-critical-background: var(--usk-native-danger);
  --usk-native-file-button-background: var(--usk-native-primary);
  --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
  --usk-native-file-button-radius: var(--usk-native-radius-sm);
  --usk-native-file-button-shadow: var(--usk-native-shadow);
  --usk-native-color-swatch-border: 0 solid transparent;
  --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
  --usk-native-indicator-opacity: .78;
  --usk-native-indicator-filter: none;
  --usk-native-scrollbar-size: .75rem;
  --usk-native-scrollbar-track: var(--usk-native-track);
  --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
  --usk-native-scrollbar-radius: 999px;
  --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: var(--usk-native-bg);
  --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-mode] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--usk-native-text);
  font-family: var(--usk-native-font-heading);
  line-height: 1.15;
  margin: 0 0 .65em;
}

@supports (text-wrap: balance) {
  [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
}

[data-ui][data-mode] :where(hgroup) {
  display: grid;
  gap: .35rem;
  margin-block: 0 1rem;
}

[data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
[data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
[data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }

[data-ui][data-mode] :where(p) {
  margin: 0 0 1rem;
  color: var(--usk-native-text-muted);
  line-height: 1.7;
}

[data-ui][data-mode] :where(a) {
  color: var(--usk-native-link);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

[data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }

[data-ui][data-mode] :where(ul, ol, menu) {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  color: var(--usk-native-text-muted);
}

[data-ui][data-mode] :where(li) { margin-block: .25rem; }

[data-ui][data-mode] :where(blockquote) {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-soft);
  border-left: .35rem solid var(--usk-native-primary);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-mode] :where(code, kbd, samp) {
  padding: .15em .35em;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-soft);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius-sm);
  font-family: var(--usk-native-font-mono);
  font-size: .92em;
}

[data-ui][data-mode] :where(pre) {
  overflow: auto;
  margin: 1rem 0;
  padding: 1rem;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-soft);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-mode] :where(pre code) {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}

[data-ui][data-mode] :where(hr) {
  height: 1px;
  margin: 2rem 0;
  background: var(--usk-native-border);
  border: 0;
}

[data-ui][data-mode] :where(mark) {
  padding-inline: .15em;
  color: var(--usk-native-text);
  background: rgb(var(--usk-warning-rgb) / .32);
  border-radius: .2em;
}

[data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
[data-ui][data-mode] :where(rt, rp) { font-size: .72em; }

[data-ui][data-mode] :where(abbr[title]) {
  text-decoration: underline dotted var(--usk-native-primary);
  text-underline-offset: .18em;
  cursor: help;
}

[data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
  max-width: 100%;
}

[data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }

/** Native playback retains browser accessibility while inheriting preset material and geometry. */
[data-ui][data-mode] audio[controls] {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 60px;
  padding: 3px;
  background: var(--usk-native-control-bg);
  color: var(--usk-native-text);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
  box-shadow: var(--usk-native-shadow);
  accent-color: var(--usk-native-primary);
  color-scheme: light;
}
[data-ui][data-mode="dark"] audio[controls],
[data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
[data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
  border-radius: var(--usk-native-radius);
  background: transparent;
}
[data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
  background: var(--usk-native-control-bg);
  color: var(--usk-native-text);
}
[data-ui][data-mode] audio[controls]:focus-visible {
  outline: 2px solid var(--usk-native-focus);
  outline-offset: 2px;
}

[data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }

[data-ui][data-mode] :where(figcaption) {
  margin-top: .5rem;
  color: var(--usk-native-text-muted);
  font-size: .9rem;
}

[data-ui][data-mode] :where(form) {
  display: grid;
  gap: var(--usk-native-field-gap);
  min-inline-size: 0;
}

[data-ui][data-mode] :where(fieldset) {
  display: grid;
  gap: .9rem;
  min-inline-size: 0;
  margin: 0 0 1rem;
  padding: var(--usk-native-panel-padding);
  background: var(--usk-native-card-bg);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-mode] :where(legend) {
  padding-inline: .35rem;
  color: var(--usk-native-text);
  font-weight: 900;
}

[data-ui][data-mode] :where(label) {
  color: var(--usk-native-text);
  font-weight: 750;
}

[data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
  display: grid;
  gap: var(--usk-native-field-gap);
  align-content: start;
}

[data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
  display: inline-flex;
  gap: var(--usk-native-field-gap);
  align-items: center;
}

[data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
  width: 100%;
  min-block-size: var(--usk-native-control-min-block-size);
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
  color: var(--usk-native-text);
  background: var(--usk-native-control-bg);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
  font: inherit;
}

[data-ui][data-mode] :where(input, textarea, select, button) {
  color-scheme: inherit;
  accent-color: var(--usk-native-primary);
}

[data-ui][data-mode] :where(input, textarea)::placeholder {
  color: var(--usk-native-text-muted);
  opacity: .78;
}

[data-ui][data-mode] :where(textarea) {
  min-height: 7rem;
  resize: vertical;
}

[data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }

[data-ui][data-mode] :where(select:not([multiple])) {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: var(--usk-native-select-padding-inline-end);
  background-image: var(--usk-native-select-indicator-image);
  background-repeat: no-repeat;
  background-position: var(--usk-native-select-indicator-position);
  background-size: var(--usk-native-select-indicator-size);
}

[data-ui][data-mode] :where(select[multiple]) {
  padding-inline-end: var(--usk-native-control-padding-inline);
  background-image: none;
}

[dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
[data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
  --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
}

[data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-block-size: var(--usk-native-control-min-block-size);
  padding: .7rem 1rem;
  font: inherit;
}

[data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
  color: var(--usk-native-on-primary);
  background: var(--usk-native-primary);
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
  border-radius: var(--usk-native-radius);
  font-family: var(--usk-native-font-control);
  font-weight: 850;
  cursor: pointer;
}

/* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}

[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  flex: 0 0 1em;
}

[data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
  background: var(--usk-native-primary-hover);
  border-color: var(--usk-native-primary-hover);
}

[data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--usk-native-choice-size);
  block-size: var(--usk-native-choice-size);
  background: var(--usk-native-choice-background);
  border: var(--usk-native-choice-border);
  box-shadow: var(--usk-native-choice-shadow);
  accent-color: var(--usk-native-primary);
}

[data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
[data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }

[data-ui][data-mode] :where(input[type="checkbox"]:checked) {
  background-color: var(--usk-native-choice-checked-background);
  background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
}

[data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
  border-color: var(--usk-native-primary);
  filter: brightness(1.04);
}

[data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
  filter: brightness(.94);
  transform: scale(.94);
}

[data-ui][data-mode] :where(input[type="radio"]:checked) {
  background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
}

[data-ui][data-mode] :where(input[type="range"]) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-block-size: 1.5rem;
  background: transparent;
  accent-color: var(--usk-native-primary);
}

[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
  block-size: var(--usk-native-range-track-size);
  background: var(--usk-native-range-track-background);
  border: var(--usk-native-range-track-border);
  border-radius: var(--usk-native-range-track-radius);
  box-shadow: var(--usk-native-range-track-shadow);
}

[data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
  block-size: var(--usk-native-range-track-size);
  background: var(--usk-native-range-track-background);
  border: var(--usk-native-range-track-border);
  border-radius: var(--usk-native-range-track-radius);
  box-shadow: var(--usk-native-range-track-shadow);
}

[data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
  block-size: var(--usk-native-range-track-size);
  background: var(--usk-native-range-progress-background);
  border-radius: var(--usk-native-range-track-radius);
}

[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--usk-native-range-thumb-size);
  block-size: var(--usk-native-range-thumb-size);
  margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
  background: var(--usk-native-range-thumb-background);
  border: var(--usk-native-range-thumb-border);
  border-radius: var(--usk-native-range-thumb-radius);
  box-shadow: var(--usk-native-range-thumb-shadow);
}

[data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
  inline-size: var(--usk-native-range-thumb-size);
  block-size: var(--usk-native-range-thumb-size);
  background: var(--usk-native-range-thumb-background);
  border: var(--usk-native-range-thumb-border);
  border-radius: var(--usk-native-range-thumb-radius);
  box-shadow: var(--usk-native-range-thumb-shadow);
}

[data-ui][data-mode] :where(input[type="color"]) {
  inline-size: 3rem;
  block-size: 2.4rem;
  padding: .2rem;
  background: var(--usk-native-control-bg);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius-sm);
}

[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
  padding: 0;
}

[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
  border: var(--usk-native-color-swatch-border);
  border-radius: var(--usk-native-color-swatch-radius);
}

[data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
  border: var(--usk-native-color-swatch-border);
  border-radius: var(--usk-native-color-swatch-radius);
}

[data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }

/* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
  margin-inline-end: .75rem;
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
  color: var(--usk-native-on-primary);
  background: var(--usk-native-file-button-background);
  border: var(--usk-native-file-button-border);
  border-radius: var(--usk-native-file-button-radius);
  box-shadow: var(--usk-native-file-button-shadow);
  font-weight: 800;
  cursor: pointer;
}

[data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
[data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
  background: var(--usk-native-primary-hover);
  border-color: var(--usk-native-primary-hover);
}

[data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
  box-shadow: var(--usk-native-focus-ring);
}

[data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
[data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
  filter: brightness(.96);
}

[data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
[data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
  color: var(--usk-native-text-muted);
  background: var(--usk-native-surface-soft);
  border-color: var(--usk-native-border);
  cursor: not-allowed;
}

[data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
  background: var(--usk-native-surface-soft);
}

[data-ui][data-mode] :where(input:required, textarea:required, select:required) {
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
}

[data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
  border-color: var(--usk-native-success);
}

[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
  border-color: var(--usk-native-danger);
}

[data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
  background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
  accent-color: var(--usk-native-warning);
}

[data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
  filter: brightness(.96);
}

[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
  color: var(--usk-native-text-muted);
  background: var(--usk-native-surface-soft);
  border-color: var(--usk-native-border);
  box-shadow: none;
  opacity: .55;
  cursor: not-allowed;
}

[data-ui][data-mode] :where(table) {
  width: 100%;
  margin: 1rem 0;
  background: var(--usk-native-surface);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
  border-collapse: collapse;
}

[data-ui][data-mode] :where(caption) {
  caption-side: bottom;
  padding: .75rem;
  color: var(--usk-native-text-muted);
  font-size: .9rem;
}

[data-ui][data-mode] :where(th, td) {
  padding: .8rem .9rem;
  text-align: left;
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
}

[data-ui][data-mode] :where(th) {
  color: var(--usk-native-text);
  background: var(--usk-native-surface-soft);
}

[data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }

[data-ui][data-mode] :where(details) {
  margin: 1rem 0;
  padding: .9rem 1rem;
  color: var(--usk-native-text);
  background: var(--usk-native-surface);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-mode] :where(summary) {
  color: var(--usk-native-text);
  font-weight: 900;
  cursor: pointer;
}

[data-ui][data-mode] :where(dialog) {
  max-width: min(92vw, 42rem);
  padding: 0;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-strong);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius-lg);
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
}

[data-ui][data-mode] :where(dialog p) { color: inherit; }

[data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }

[data-ui][data-mode] :where(progress, meter) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: var(--usk-native-progress-size);
  accent-color: var(--usk-native-primary);
}

[data-ui][data-mode] :where(progress:not([value])) {
  background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
  background-size: 200% 100%;
  border: var(--usk-native-progress-track-border);
  border-radius: var(--usk-native-progress-track-radius);
  box-shadow: var(--usk-native-progress-track-shadow);
  animation: usk-native-progress-indeterminate 1.2s linear infinite;
}

@keyframes usk-native-progress-indeterminate {
  to { background-position: -2rem 0; }
}

[data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
[data-ui][data-mode] :where(meter)::-webkit-meter-bar {
  background: var(--usk-native-progress-track-background);
  border: var(--usk-native-progress-track-border);
  border-radius: var(--usk-native-progress-track-radius);
  box-shadow: var(--usk-native-progress-track-shadow);
}

[data-ui][data-mode] :where(progress)::-webkit-progress-value,
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
  background: var(--usk-native-progress-value-background);
  border-radius: var(--usk-native-progress-value-radius);
  box-shadow: var(--usk-native-progress-value-shadow);
}

[data-ui][data-mode] :where(progress)::-moz-progress-bar,
[data-ui][data-mode] :where(meter)::-moz-meter-bar {
  background: var(--usk-native-progress-value-background);
  border-radius: var(--usk-native-progress-value-radius);
  box-shadow: var(--usk-native-progress-value-shadow);
}

[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }

[data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
  background: var(--usk-native-meter-suboptimum-background);
}

[data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
  background: var(--usk-native-meter-critical-background);
}

[data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
  color: var(--usk-native-text);
}

[data-ui][data-mode] :where(article, aside) {
  padding: var(--usk-native-panel-padding);
  color: var(--usk-native-text);
  background: var(--usk-native-card-bg);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius-lg);
  box-shadow: var(--usk-native-shadow);
}

[data-ui][data-mode] :where(dl) {
  margin: 0 0 1rem;
  color: var(--usk-native-text-muted);
}

[data-ui][data-mode] :where(dt) {
  color: var(--usk-native-text);
  font-weight: 900;
}

[data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
[data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
[data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
[data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
[data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
[data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
[data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
[data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
[data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
[data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
[data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
[data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
[data-ui][data-mode] :where(datalist) { display: none; }

[data-ui][data-mode] :where(summary, li)::marker {
  color: var(--usk-native-indicator);
}

[data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
  opacity: var(--usk-native-indicator-opacity);
  filter: var(--usk-native-indicator-filter);
  accent-color: var(--usk-native-indicator);
}

[data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
  accent-color: var(--usk-native-indicator);
}

[data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
[data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
  opacity: .72;
}

[data-ui][data-mode] :where(select)::picker-icon {
  color: var(--usk-native-indicator);
  opacity: var(--usk-native-indicator-opacity);
  filter: var(--usk-native-indicator-filter);
}

[data-ui][data-mode] :where(:focus-visible) {
  outline: 3px solid var(--usk-native-focus);
  outline-offset: 3px;
  box-shadow: var(--usk-native-focus-ring);
}

[data-ui][data-mode] :where(:target) {
  scroll-margin-top: 6rem;
  outline: 3px solid var(--usk-native-focus);
  outline-offset: .35rem;
}

[data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
[data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
[data-ui][data-mode] :where([hidden]) { display: none !important; }
[data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
[data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
[data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
[data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }

@supports (color: color-mix(in srgb, black, white)) {
  [data-ui][data-mode] {
    --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
  }

  [data-ui][data-mode] :where(code, kbd, samp) {
    border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
  }

  [data-ui][data-mode] :where(mark) {
    background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
  }

  [data-ui][data-mode] :where(fieldset) {
    background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
  }

  [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
    background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
  }

  [data-ui][data-mode] :where(th) {
    background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
  [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
    transition-duration: 1ms !important;
  }

  [data-ui][data-mode] :where(progress:not([value])) {
    animation: none;
  }
}

[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
  box-shadow: none;
  filter: none;
}

@media (forced-colors: active) {
  @supports (forced-color-adjust: auto) {
    [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
      forced-color-adjust: auto;
    }
  }

  [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
    border-color: Mark;
  }
}
}


/* styles/components.css */
/* =========================================================
   UI Style Kit CSS - Shared Component Foundations

   Structural-neutral overflow rules live here so visual-only
   entrypoints remain safe inside consumer-owned layouts.
========================================================= */

@layer ui-style-kit.components {
[data-ui][data-mode] :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  li,
  dt,
  dd,
  figcaption,
  blockquote,
  label,
  legend,
  summary,
  strong,
  small,
  em,
  code,
  kbd,
  samp,
  pre,
  th,
  td
) {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

[data-ui][data-mode] :where(
  [class~="saas-surface"],
  [class~="saas-surface-sm"],
  [class~="saas-surface-lg"],
  [class~="saas-card"],
  [class~="saas-panel"],
  [class~="saas-toolbar"],
  [class~="saas-well"],
  [class~="saas-inset"],
  [class~="saas-field"],
  [class~="saas-alert"],
  [class~="saas-table-wrap"],
  [class~="saas-nav"],
  [class~="bento-surface"],
  [class~="bento-surface-sm"],
  [class~="bento-surface-lg"],
  [class~="bento-card"],
  [class~="bento-panel"],
  [class~="bento-toolbar"],
  [class~="bento-well"],
  [class~="bento-inset"],
  [class~="bento-field"],
  [class~="bento-alert"],
  [class~="bento-table-wrap"],
  [class~="bento-nav"],
  [class~="max-surface"],
  [class~="max-surface-sm"],
  [class~="max-surface-lg"],
  [class~="max-card"],
  [class~="max-panel"],
  [class~="max-toolbar"],
  [class~="max-well"],
  [class~="max-inset"],
  [class~="max-field"],
  [class~="max-alert"],
  [class~="max-table-wrap"],
  [class~="max-nav"],
  [class~="bau-surface"],
  [class~="bau-surface-sm"],
  [class~="bau-surface-lg"],
  [class~="bau-card"],
  [class~="bau-panel"],
  [class~="bau-toolbar"],
  [class~="bau-well"],
  [class~="bau-inset"],
  [class~="bau-field"],
  [class~="bau-alert"],
  [class~="bau-table-wrap"],
  [class~="bau-nav"],
  [class~="tactile-surface"],
  [class~="tactile-surface-sm"],
  [class~="tactile-surface-lg"],
  [class~="tactile-card"],
  [class~="tactile-panel"],
  [class~="tactile-toolbar"],
  [class~="tactile-well"],
  [class~="tactile-inset"],
  [class~="tactile-field"],
  [class~="tactile-alert"],
  [class~="tactile-table-wrap"],
  [class~="tactile-nav"],
  [class~="neo-surface"],
  [class~="neo-surface-sm"],
  [class~="neo-surface-lg"],
  [class~="neo-card"],
  [class~="neo-panel"],
  [class~="neo-toolbar"],
  [class~="neo-well"],
  [class~="neo-inset"],
  [class~="neo-field"],
  [class~="neo-alert"],
  [class~="neo-table-wrap"],
  [class~="neo-nav"],
  [class~="retro-surface"],
  [class~="retro-surface-sm"],
  [class~="retro-surface-lg"],
  [class~="retro-card"],
  [class~="retro-panel"],
  [class~="retro-toolbar"],
  [class~="retro-well"],
  [class~="retro-inset"],
  [class~="retro-field"],
  [class~="retro-alert"],
  [class~="retro-table-wrap"],
  [class~="retro-nav"],
  [class~="brutal-surface"],
  [class~="brutal-card"],
  [class~="brutal-panel"],
  [class~="brutal-toolbar"],
  [class~="brutal-well"],
  [class~="brutal-inset"],
  [class~="brutal-field"],
  [class~="brutal-alert"],
  [class~="brutal-table-wrap"],
  [class~="brutal-nav"],
  [class~="cyber-card"],
  [class~="cyber-panel"],
  [class~="cyber-toolbar"],
  [class~="cyber-well"],
  [class~="cyber-inset"],
  [class~="cyber-field"],
  [class~="cyber-alert"],
  [class~="cyber-table-wrap"],
  [class~="cyber-nav"],
  [class~="y2k-card"],
  [class~="y2k-panel"],
  [class~="y2k-toolbar"],
  [class~="y2k-well"],
  [class~="y2k-inset"],
  [class~="y2k-field"],
  [class~="y2k-alert"],
  [class~="y2k-table-wrap"],
  [class~="y2k-nav"],
  [class~="rg-card"],
  [class~="rg-panel"],
  [class~="rg-toolbar"],
  [class~="rg-well"],
  [class~="rg-inset"],
  [class~="rg-field"],
  [class~="rg-alert"],
  [class~="rg-table-wrap"],
  [class~="rg-nav"]
), [data-ui]:where([data-ui="minimal-saas"])[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;
}

[data-ui][data-mode] :where(
  [class~="saas-button"],
  [class~="saas-icon-button"],
  [class~="saas-badge"],
  [class~="saas-nav-link"],
  [class~="bento-button"],
  [class~="bento-icon-button"],
  [class~="bento-badge"],
  [class~="bento-nav-link"],
  [class~="max-button"],
  [class~="max-icon-button"],
  [class~="max-badge"],
  [class~="max-nav-link"],
  [class~="bau-button"],
  [class~="bau-icon-button"],
  [class~="bau-badge"],
  [class~="bau-nav-link"],
  [class~="tactile-button"],
  [class~="tactile-icon-button"],
  [class~="tactile-badge"],
  [class~="tactile-nav-link"],
  [class~="neo-button"],
  [class~="neo-icon-button"],
  [class~="neo-badge"],
  [class~="neo-nav-link"],
  [class~="retro-button"],
  [class~="retro-icon-button"],
  [class~="retro-badge"],
  [class~="retro-nav-link"],
  [class~="brutal-button"],
  [class~="brutal-icon-button"],
  [class~="brutal-badge"],
  [class~="brutal-nav-link"],
  [class~="cyber-button"],
  [class~="cyber-icon-button"],
  [class~="cyber-badge"],
  [class~="cyber-nav-link"],
  [class~="y2k-button"],
  [class~="y2k-icon-button"],
  [class~="y2k-badge"],
  [class~="y2k-nav-link"],
  [class~="rg-button"],
  [class~="rg-icon-button"],
  [class~="rg-badge"],
  [class~="rg-nav-link"]
), [data-ui]:where([data-ui="minimal-saas"])[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;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

[data-ui][data-mode] :where(
  .saas-button,
  .saas-icon-button,
  .saas-button-pill,
  .bento-button,
  .bento-icon-button,
  .bento-button-pill,
  .max-button,
  .max-icon-button,
  .max-button-pill,
  .bau-button,
  .bau-icon-button,
  .bau-button-pill,
  .tactile-button,
  .tactile-icon-button,
  .tactile-button-pill,
  .neo-button,
  .neo-icon-button,
  .neo-button-pill,
  .retro-button,
  .retro-icon-button,
  .retro-button-pill,
  .brutal-button,
  .brutal-icon-button,
  .brutal-button-pill,
  .cyber-button,
  .cyber-icon-button,
  .cyber-button-pill,
  .y2k-button,
  .y2k-icon-button,
  .y2k-button-pill,
  .rg-button,
  .rg-icon-button,
  .rg-button-pill
), [data-ui]:where([data-ui="minimal-saas"])[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;
  justify-content: center;
  gap: .55rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  line-height: 1.15;
  vertical-align: middle;
}

[data-ui][data-mode] :where(
  .saas-button-pill,
  .bento-button-pill,
  .max-button-pill,
  .bau-button-pill,
  .tactile-button-pill,
  .neo-button-pill,
  .retro-button-pill,
  .brutal-button-pill,
  .cyber-button-pill,
  .y2k-button-pill,
  .rg-button-pill
) {
  min-block-size: 44px;
  padding-block: .65rem;
  padding-inline: max(1rem, 1em);
  border-style: solid;
  border-width: 1px;
  border-radius: 999px;
  font: inherit;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.saas-button-pill { color: var(--saas-on-primary); background: var(--saas-primary); border-color: var(--saas-primary); border-radius: var(--saas-radius-pill); }
.bento-button-pill { color: var(--bento-on-primary); background: var(--bento-primary); border-color: var(--bento-primary); border-radius: var(--bento-radius-pill); }
.max-button-pill { color: var(--max-on-primary); background: var(--max-primary); border-color: var(--max-primary); border-radius: var(--max-radius-pill); }
.bau-button-pill { color: var(--bau-on-primary); background: var(--bau-primary); border-color: var(--bau-primary); border-radius: var(--bau-radius-pill); }
.tactile-button-pill { color: var(--tactile-on-primary); background: var(--tactile-primary); border-color: var(--tactile-primary); border-radius: var(--tactile-radius-pill); }
.neo-button-pill { color: var(--neo-on-primary); background: var(--neo-primary); border-color: var(--neo-primary); border-radius: var(--neo-radius-pill); }
.retro-button-pill { color: var(--retro-on-primary); background: var(--retro-primary); border-color: var(--retro-primary); border-radius: var(--retro-radius-pill); }
.brutal-button-pill { color: var(--brutal-on-primary); background: var(--brutal-primary); border-color: var(--brutal-primary); border-radius: var(--brutal-radius-pill); }
.cyber-button-pill { color: var(--cyber-on-primary); background: var(--cyber-primary); border-color: var(--cyber-primary); border-radius: var(--cyber-radius-pill); }
.y2k-button-pill { color: var(--y2k-on-primary); background: var(--y2k-primary); border-color: var(--y2k-primary); border-radius: var(--y2k-radius-pill); }
.rg-button-pill { color: var(--rg-on-primary); background: var(--rg-primary); border-color: var(--rg-primary); border-radius: var(--rg-radius-pill); }

.saas-button-pill:hover { border-color: var(--saas-primary-hover); filter: brightness(1.04); }
.bento-button-pill:hover { border-color: var(--bento-primary-hover); filter: brightness(1.04); }
.max-button-pill:hover { border-color: var(--max-primary-hover); filter: brightness(1.04); }
.bau-button-pill:hover { border-color: var(--bau-primary-hover); filter: brightness(1.04); }
.tactile-button-pill:hover { border-color: var(--tactile-primary-hover); filter: brightness(1.04); }
.neo-button-pill:hover { border-color: var(--neo-primary-hover); filter: brightness(1.04); }
.retro-button-pill:hover { border-color: var(--retro-primary-hover); filter: brightness(1.04); }
.brutal-button-pill:hover { border-color: var(--brutal-primary-hover); filter: brightness(1.04); }
.cyber-button-pill:hover { border-color: var(--cyber-primary-hover); filter: brightness(1.04); }
.y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
.rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }

[data-ui][data-mode] :where(
  .saas-button-pill:active,
  .saas-button-pill[aria-pressed="true"],
  .bento-button-pill:active,
  .bento-button-pill[aria-pressed="true"],
  .max-button-pill:active,
  .max-button-pill[aria-pressed="true"],
  .bau-button-pill:active,
  .bau-button-pill[aria-pressed="true"],
  .tactile-button-pill:active,
  .tactile-button-pill[aria-pressed="true"],
  .neo-button-pill:active,
  .neo-button-pill[aria-pressed="true"],
  .retro-button-pill:active,
  .retro-button-pill[aria-pressed="true"],
  .brutal-button-pill:active,
  .brutal-button-pill[aria-pressed="true"],
  .cyber-button-pill:active,
  .cyber-button-pill[aria-pressed="true"],
  .y2k-button-pill:active,
  .y2k-button-pill[aria-pressed="true"],
  .rg-button-pill:active,
  .rg-button-pill[aria-pressed="true"]
) {
  transform: translateY(1px);
}

.saas-button-pill:focus-visible { outline: 3px solid var(--saas-focus); outline-offset: 3px; box-shadow: var(--saas-focus-ring); }
.bento-button-pill:focus-visible { outline: 3px solid var(--bento-focus); outline-offset: 3px; box-shadow: var(--bento-focus-ring); }
.max-button-pill:focus-visible { outline: 3px solid var(--max-focus); outline-offset: 3px; box-shadow: var(--max-focus-ring); }
.bau-button-pill:focus-visible { outline: 3px solid var(--bau-focus); outline-offset: 3px; box-shadow: var(--bau-focus-ring); }
.tactile-button-pill:focus-visible { outline: 3px solid var(--tactile-focus); outline-offset: 3px; box-shadow: var(--tactile-focus-ring); }
.neo-button-pill:focus-visible { outline: 3px solid var(--neo-focus); outline-offset: 3px; box-shadow: var(--neo-focus-ring); }
.retro-button-pill:focus-visible { outline: 3px solid var(--retro-focus); outline-offset: 3px; box-shadow: var(--retro-focus-ring); }
.brutal-button-pill:focus-visible { outline: 3px solid var(--brutal-focus); outline-offset: 3px; box-shadow: var(--brutal-focus-ring); }
.cyber-button-pill:focus-visible { outline: 3px solid var(--cyber-focus); outline-offset: 3px; box-shadow: var(--cyber-focus-ring); }
.y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
.rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }

[data-ui][data-mode] :where(
  .saas-button-pill:disabled,
  .saas-button-pill[aria-disabled="true"],
  .bento-button-pill:disabled,
  .bento-button-pill[aria-disabled="true"],
  .max-button-pill:disabled,
  .max-button-pill[aria-disabled="true"],
  .bau-button-pill:disabled,
  .bau-button-pill[aria-disabled="true"],
  .tactile-button-pill:disabled,
  .tactile-button-pill[aria-disabled="true"],
  .neo-button-pill:disabled,
  .neo-button-pill[aria-disabled="true"],
  .retro-button-pill:disabled,
  .retro-button-pill[aria-disabled="true"],
  .brutal-button-pill:disabled,
  .brutal-button-pill[aria-disabled="true"],
  .cyber-button-pill:disabled,
  .cyber-button-pill[aria-disabled="true"],
  .y2k-button-pill:disabled,
  .y2k-button-pill[aria-disabled="true"],
  .rg-button-pill:disabled,
  .rg-button-pill[aria-disabled="true"]
) {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

[data-ui][data-mode] :where(
  .saas-tooltip,
  .saas-tooltip-top,
  .saas-tooltip-right,
  .saas-tooltip-bottom,
  .saas-tooltip-left,
  .bento-tooltip,
  .bento-tooltip-top,
  .bento-tooltip-right,
  .bento-tooltip-bottom,
  .bento-tooltip-left,
  .max-tooltip,
  .max-tooltip-top,
  .max-tooltip-right,
  .max-tooltip-bottom,
  .max-tooltip-left,
  .bau-tooltip,
  .bau-tooltip-top,
  .bau-tooltip-right,
  .bau-tooltip-bottom,
  .bau-tooltip-left,
  .tactile-tooltip,
  .tactile-tooltip-top,
  .tactile-tooltip-right,
  .tactile-tooltip-bottom,
  .tactile-tooltip-left,
  .neo-tooltip,
  .neo-tooltip-top,
  .neo-tooltip-right,
  .neo-tooltip-bottom,
  .neo-tooltip-left,
  .retro-tooltip,
  .retro-tooltip-top,
  .retro-tooltip-right,
  .retro-tooltip-bottom,
  .retro-tooltip-left,
  .brutal-tooltip,
  .brutal-tooltip-top,
  .brutal-tooltip-right,
  .brutal-tooltip-bottom,
  .brutal-tooltip-left,
  .cyber-tooltip,
  .cyber-tooltip-top,
  .cyber-tooltip-right,
  .cyber-tooltip-bottom,
  .cyber-tooltip-left,
  .y2k-tooltip,
  .y2k-tooltip-top,
  .y2k-tooltip-right,
  .y2k-tooltip-bottom,
  .y2k-tooltip-left,
  .rg-tooltip,
  .rg-tooltip-top,
  .rg-tooltip-right,
  .rg-tooltip-bottom,
  .rg-tooltip-left
) {
  max-inline-size: min(18rem, calc(100vw - 2rem));
  text-align: start;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
[data-ui][data-mode]:where([data-ui-tooltip-anchor]),
[data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
  position: relative;
}

[data-ui][data-mode] :where(
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
  [data-ui-tooltip-anchor] > .saas-tooltip-left,
  [data-ui-tooltip-anchor] > .bento-tooltip-top,
  [data-ui-tooltip-anchor] > .bento-tooltip-right,
  [data-ui-tooltip-anchor] > .bento-tooltip-bottom,
  [data-ui-tooltip-anchor] > .bento-tooltip-left,
  [data-ui-tooltip-anchor] > .max-tooltip-top,
  [data-ui-tooltip-anchor] > .max-tooltip-right,
  [data-ui-tooltip-anchor] > .max-tooltip-bottom,
  [data-ui-tooltip-anchor] > .max-tooltip-left,
  [data-ui-tooltip-anchor] > .bau-tooltip-top,
  [data-ui-tooltip-anchor] > .bau-tooltip-right,
  [data-ui-tooltip-anchor] > .bau-tooltip-bottom,
  [data-ui-tooltip-anchor] > .bau-tooltip-left,
  [data-ui-tooltip-anchor] > .tactile-tooltip-top,
  [data-ui-tooltip-anchor] > .tactile-tooltip-right,
  [data-ui-tooltip-anchor] > .tactile-tooltip-bottom,
  [data-ui-tooltip-anchor] > .tactile-tooltip-left,
  [data-ui-tooltip-anchor] > .neo-tooltip-top,
  [data-ui-tooltip-anchor] > .neo-tooltip-right,
  [data-ui-tooltip-anchor] > .neo-tooltip-bottom,
  [data-ui-tooltip-anchor] > .neo-tooltip-left,
  [data-ui-tooltip-anchor] > .retro-tooltip-top,
  [data-ui-tooltip-anchor] > .retro-tooltip-right,
  [data-ui-tooltip-anchor] > .retro-tooltip-bottom,
  [data-ui-tooltip-anchor] > .retro-tooltip-left,
  [data-ui-tooltip-anchor] > .brutal-tooltip-top,
  [data-ui-tooltip-anchor] > .brutal-tooltip-right,
  [data-ui-tooltip-anchor] > .brutal-tooltip-bottom,
  [data-ui-tooltip-anchor] > .brutal-tooltip-left,
  [data-ui-tooltip-anchor] > .cyber-tooltip-top,
  [data-ui-tooltip-anchor] > .cyber-tooltip-right,
  [data-ui-tooltip-anchor] > .cyber-tooltip-bottom,
  [data-ui-tooltip-anchor] > .cyber-tooltip-left,
  [data-ui-tooltip-anchor] > .y2k-tooltip-top,
  [data-ui-tooltip-anchor] > .y2k-tooltip-right,
  [data-ui-tooltip-anchor] > .y2k-tooltip-bottom,
  [data-ui-tooltip-anchor] > .y2k-tooltip-left,
  [data-ui-tooltip-anchor] > .rg-tooltip-top,
  [data-ui-tooltip-anchor] > .rg-tooltip-right,
  [data-ui-tooltip-anchor] > .rg-tooltip-bottom,
  [data-ui-tooltip-anchor] > .rg-tooltip-left
) {
  position: absolute;
  z-index: 20;
}

[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }

.saas-pill { border-radius: var(--saas-radius-pill); }
.bento-pill { border-radius: var(--bento-radius-pill); }
.max-pill { border-radius: var(--max-radius-pill); }
.bau-pill { border-radius: var(--bau-radius-pill); }
.tactile-pill { border-radius: var(--tactile-radius-pill); }
.neo-pill { border-radius: var(--neo-radius-pill); }
.retro-pill { border-radius: var(--retro-radius-pill); }
.brutal-pill { border-radius: var(--brutal-radius-pill); }
.cyber-pill { border-radius: var(--cyber-radius-pill); }
.y2k-pill { border-radius: var(--y2k-radius-pill); }
.rg-pill { border-radius: var(--rg-radius-pill); }
.saas-rounded { border-radius: var(--saas-radius-md); }
.bento-rounded { border-radius: var(--bento-radius-md); }
.max-rounded { border-radius: var(--max-radius-md); }
.bau-rounded { border-radius: var(--bau-radius-md); }
.tactile-rounded { border-radius: var(--tactile-radius-md); }
.neo-rounded { border-radius: var(--neo-radius-md); }
.retro-rounded { border-radius: var(--retro-radius-md); }
.brutal-rounded { border-radius: var(--brutal-radius-md); }
.cyber-rounded { border-radius: var(--cyber-radius-md); }
.y2k-rounded { border-radius: var(--y2k-radius-md); }
.rg-rounded { border-radius: var(--rg-radius-md); }
.saas-rounded-lg { border-radius: var(--saas-radius-lg); }
.bento-rounded-lg { border-radius: var(--bento-radius-lg); }
.max-rounded-lg { border-radius: var(--max-radius-lg); }
.bau-rounded-lg { border-radius: var(--bau-radius-lg); }
.tactile-rounded-lg { border-radius: var(--tactile-radius-lg); }
.neo-rounded-lg { border-radius: var(--neo-radius-lg); }
.retro-rounded-lg { border-radius: var(--retro-radius-lg); }
.brutal-rounded-lg { border-radius: var(--brutal-radius-lg); }
.cyber-rounded-lg { border-radius: var(--cyber-radius-lg); }
.y2k-rounded-lg { border-radius: var(--y2k-radius-lg); }
.rg-rounded-lg { border-radius: var(--rg-radius-lg); }
.saas-rounded-xl { border-radius: var(--saas-radius-xl); }
.bento-rounded-xl { border-radius: var(--bento-radius-xl); }
.max-rounded-xl { border-radius: var(--max-radius-xl); }
.bau-rounded-xl { border-radius: var(--bau-radius-xl); }
.tactile-rounded-xl { border-radius: var(--tactile-radius-xl); }
.neo-rounded-xl { border-radius: var(--neo-radius-xl); }
.retro-rounded-xl { border-radius: var(--retro-radius-xl); }
.brutal-rounded-xl { border-radius: var(--brutal-radius-xl); }
.cyber-rounded-xl { border-radius: var(--cyber-radius-xl); }
.y2k-rounded-xl { border-radius: var(--y2k-radius-xl); }
.rg-rounded-xl { border-radius: var(--rg-radius-xl); }

.saas-surface, .saas-surface-sm, .saas-surface-lg { color: var(--saas-text); background: var(--saas-card-bg); border: 1px solid var(--saas-border); }
.bento-surface, .bento-surface-sm, .bento-surface-lg { color: var(--bento-text); background: var(--bento-card-bg); border: 1px solid var(--bento-border); }
.max-surface, .max-surface-sm, .max-surface-lg { color: var(--max-text); background: var(--max-card-bg); border: 1px solid var(--max-border); }
.bau-surface, .bau-surface-sm, .bau-surface-lg { color: var(--bau-text); background: var(--bau-card-bg); border: 1px solid var(--bau-border); }
.tactile-surface, .tactile-surface-sm, .tactile-surface-lg { color: var(--tactile-text); background: var(--tactile-card-bg); border: 1px solid var(--tactile-border); }
.neo-surface, .neo-surface-sm, .neo-surface-lg { color: var(--neo-text); background: var(--neo-card-bg); border: 1px solid var(--neo-border); }
.retro-surface, .retro-surface-sm, .retro-surface-lg { color: var(--retro-text); background: var(--retro-card-bg); border: 1px solid var(--retro-border); }
.brutal-surface, .brutal-surface-sm, .brutal-surface-lg { color: var(--brutal-text); background: var(--brutal-card-bg); border: 3px solid var(--brutal-border); }
.cyber-surface, .cyber-surface-sm, .cyber-surface-lg { color: var(--cyber-text); background: var(--cyber-card-bg); border: 1px solid var(--cyber-border); }
.y2k-surface, .y2k-surface-sm, .y2k-surface-lg { color: var(--y2k-text); background: var(--y2k-card-bg); border: 1px solid var(--y2k-border); }
.rg-surface, .rg-surface-sm, .rg-surface-lg { color: var(--rg-text); background: var(--rg-card-bg); border: 1px solid var(--rg-border); }

.saas-bg-primary, .bento-bg-primary, .max-bg-primary, .bau-bg-primary, .tactile-bg-primary, .neo-bg-primary, .retro-bg-primary, .brutal-bg-primary, .cyber-bg-primary, .y2k-bg-primary, .rg-bg-primary { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
.saas-bg-secondary, .bento-bg-secondary, .max-bg-secondary, .bau-bg-secondary, .tactile-bg-secondary, .neo-bg-secondary, .retro-bg-secondary, .brutal-bg-secondary, .cyber-bg-secondary, .y2k-bg-secondary, .rg-bg-secondary { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
.saas-border, .bento-border, .max-border, .bau-border, .tactile-border, .neo-border, .retro-border, .brutal-border, .cyber-border, .y2k-border, .rg-border { border: var(--usk-native-border-width) solid var(--usk-native-border); }
.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, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
  color: var(--usk-primary-ink, 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, :where([data-ui="minimal-saas"]) .ui-check, :where([data-ui="minimal-saas"]) .ui-radio, :where([data-ui="minimal-saas"]) .ui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--usk-native-field-gap);
  min-block-size: 24px;
  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, :where([data-ui="minimal-saas"]) .ui-check-control, :where([data-ui="minimal-saas"]) .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, :where([data-ui="minimal-saas"]) .ui-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  padding: .18rem;
  background: var(--usk-native-track);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  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, :where([data-ui="minimal-saas"]) .ui-switch-thumb {
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--usk-native-thumb);
  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
  border-radius: 999px;
  transition: transform 160ms ease;
}

.saas-switch:has(input:checked) .saas-switch-track,
.bento-switch:has(input:checked) .bento-switch-track,
.max-switch:has(input:checked) .max-switch-track,
.bau-switch:has(input:checked) .bau-switch-track,
.tactile-switch:has(input:checked) .tactile-switch-track,
.neo-switch:has(input:checked) .neo-switch-track,
.retro-switch:has(input:checked) .retro-switch-track,
.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, :where([data-ui="minimal-saas"]) .ui-switch:has(input:checked) .ui-switch-track {
  background: var(--usk-native-track-fill);
}

.saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.saas-skip-link, .bento-skip-link, .max-skip-link, .bau-skip-link, .tactile-skip-link, .neo-skip-link, .retro-skip-link, .brutal-skip-link, .cyber-skip-link, .y2k-skip-link, .rg-skip-link {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 1000;
  padding: .75rem 1rem;
  color: var(--usk-native-on-primary);
  background: var(--usk-native-primary);
  border-radius: var(--usk-native-radius);
  transform: translateY(calc(-100% - 1rem));
}

.saas-skip-link:focus-visible, .bento-skip-link:focus-visible, .max-skip-link:focus-visible, .bau-skip-link:focus-visible, .tactile-skip-link:focus-visible, .neo-skip-link:focus-visible, .retro-skip-link:focus-visible, .brutal-skip-link:focus-visible, .cyber-skip-link:focus-visible, .y2k-skip-link:focus-visible, .rg-skip-link:focus-visible {
  transform: translateY(0);
}
}

/**
 * Normalizes the split-line trust seal hierarchy across every visual preset.
 * Both lines inherit their seal's paired foreground instead of native page-text paint.
 * The root attributes intentionally raise specificity within the preset layer
 * so later style-specific defaults cannot collapse the number and caption.
 */
@layer ui-style-kit.presets {
[data-ui][data-mode] :where(
  .saas-badge-seal,
  .bento-badge-seal,
  .max-badge-seal,
  .bau-badge-seal,
  .tactile-badge-seal,
  .neo-badge-seal,
  .retro-badge-seal,
  .brutal-badge-seal,
  .cyber-badge-seal,
  .y2k-badge-seal,
  .rg-badge-seal,
  .luxe-badge-seal,
  .organic-badge-seal,
  .utility-badge-seal,
  .blueprint-badge-seal,
  .deco-badge-seal,
  .clay-badge-seal,
  .terminal-badge-seal,
  .paper-badge-seal,
  .noir-badge-seal
) > strong {
  color: inherit;
  font-size: 1.5rem;
  line-height: .9;
}

[data-ui][data-mode] :where(
  .saas-badge-seal,
  .bento-badge-seal,
  .max-badge-seal,
  .bau-badge-seal,
  .tactile-badge-seal,
  .neo-badge-seal,
  .retro-badge-seal,
  .brutal-badge-seal,
  .cyber-badge-seal,
  .y2k-badge-seal,
  .rg-badge-seal,
  .luxe-badge-seal,
  .organic-badge-seal,
  .utility-badge-seal,
  .blueprint-badge-seal,
  .deco-badge-seal,
  .clay-badge-seal,
  .terminal-badge-seal,
  .paper-badge-seal,
  .noir-badge-seal
) > small {
  color: inherit;
  font-size: .8125rem;
  line-height: 1;
}
}

/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
@layer ui-style-kit.components {
[data-ui][data-mode] :where(
  .luxe-surface,
  .luxe-surface-sm,
  .luxe-surface-lg,
  .luxe-card,
  .luxe-card-service,
  .luxe-card-feature,
  .luxe-panel,
  .luxe-toolbar,
  .luxe-well,
  .luxe-inset,
  .luxe-field,
  .luxe-alert,
  .luxe-table-wrap,
  .luxe-nav,
  .luxe-feature-strip,
  .luxe-feature-item,
  .luxe-callout-bar,
  .luxe-media-scrim,
  .organic-surface,
  .organic-surface-sm,
  .organic-surface-lg,
  .organic-card,
  .organic-card-service,
  .organic-card-feature,
  .organic-panel,
  .organic-toolbar,
  .organic-well,
  .organic-inset,
  .organic-field,
  .organic-alert,
  .organic-table-wrap,
  .organic-nav,
  .organic-feature-strip,
  .organic-feature-item,
  .organic-callout-bar,
  .organic-media-scrim,
  .utility-surface,
  .utility-surface-sm,
  .utility-surface-lg,
  .utility-card,
  .utility-card-service,
  .utility-card-feature,
  .utility-panel,
  .utility-toolbar,
  .utility-well,
  .utility-inset,
  .utility-field,
  .utility-alert,
  .utility-table-wrap,
  .utility-nav,
  .utility-feature-strip,
  .utility-feature-item,
  .utility-callout-bar,
  .utility-media-scrim,
  .blueprint-surface,
  .blueprint-surface-sm,
  .blueprint-surface-lg,
  .blueprint-card,
  .blueprint-card-service,
  .blueprint-card-feature,
  .blueprint-panel,
  .blueprint-toolbar,
  .blueprint-well,
  .blueprint-inset,
  .blueprint-field,
  .blueprint-alert,
  .blueprint-table-wrap,
  .blueprint-nav,
  .blueprint-feature-strip,
  .blueprint-feature-item,
  .blueprint-callout-bar,
  .blueprint-media-scrim,
  .deco-surface,
  .deco-surface-sm,
  .deco-surface-lg,
  .deco-card,
  .deco-card-service,
  .deco-card-feature,
  .deco-panel,
  .deco-toolbar,
  .deco-well,
  .deco-inset,
  .deco-field,
  .deco-alert,
  .deco-table-wrap,
  .deco-nav,
  .deco-feature-strip,
  .deco-feature-item,
  .deco-callout-bar,
  .deco-media-scrim,
  .clay-surface,
  .clay-surface-sm,
  .clay-surface-lg,
  .clay-card,
  .clay-card-service,
  .clay-card-feature,
  .clay-panel,
  .clay-toolbar,
  .clay-well,
  .clay-inset,
  .clay-field,
  .clay-alert,
  .clay-table-wrap,
  .clay-nav,
  .clay-feature-strip,
  .clay-feature-item,
  .clay-callout-bar,
  .clay-media-scrim,
  .terminal-surface,
  .terminal-surface-sm,
  .terminal-surface-lg,
  .terminal-card,
  .terminal-card-service,
  .terminal-card-feature,
  .terminal-panel,
  .terminal-toolbar,
  .terminal-well,
  .terminal-inset,
  .terminal-field,
  .terminal-alert,
  .terminal-table-wrap,
  .terminal-nav,
  .terminal-feature-strip,
  .terminal-feature-item,
  .terminal-callout-bar,
  .terminal-media-scrim,
  .paper-surface,
  .paper-surface-sm,
  .paper-surface-lg,
  .paper-card,
  .paper-card-service,
  .paper-card-feature,
  .paper-panel,
  .paper-toolbar,
  .paper-well,
  .paper-inset,
  .paper-field,
  .paper-alert,
  .paper-table-wrap,
  .paper-nav,
  .paper-feature-strip,
  .paper-feature-item,
  .paper-callout-bar,
  .paper-media-scrim,
  .noir-surface,
  .noir-surface-sm,
  .noir-surface-lg,
  .noir-card,
  .noir-card-service,
  .noir-card-feature,
  .noir-panel,
  .noir-toolbar,
  .noir-well,
  .noir-inset,
  .noir-field,
  .noir-alert,
  .noir-table-wrap,
  .noir-nav,
  .noir-feature-strip,
  .noir-feature-item,
  .noir-callout-bar,
  .noir-media-scrim
), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

[data-ui][data-mode] :where(
  .luxe-button,
  .luxe-icon-button,
  .luxe-button-cut,
  .luxe-button-outline-heavy,
  .luxe-badge,
  .luxe-badge-seal,
  .luxe-nav-link,
  .luxe-icon-medallion,
  .organic-button,
  .organic-icon-button,
  .organic-button-cut,
  .organic-button-outline-heavy,
  .organic-badge,
  .organic-badge-seal,
  .organic-nav-link,
  .organic-icon-medallion,
  .utility-button,
  .utility-icon-button,
  .utility-button-cut,
  .utility-button-outline-heavy,
  .utility-badge,
  .utility-badge-seal,
  .utility-nav-link,
  .utility-icon-medallion,
  .blueprint-button,
  .blueprint-icon-button,
  .blueprint-button-cut,
  .blueprint-button-outline-heavy,
  .blueprint-badge,
  .blueprint-badge-seal,
  .blueprint-nav-link,
  .blueprint-icon-medallion,
  .deco-button,
  .deco-icon-button,
  .deco-button-cut,
  .deco-button-outline-heavy,
  .deco-badge,
  .deco-badge-seal,
  .deco-nav-link,
  .deco-icon-medallion,
  .clay-button,
  .clay-icon-button,
  .clay-button-cut,
  .clay-button-outline-heavy,
  .clay-badge,
  .clay-badge-seal,
  .clay-nav-link,
  .clay-icon-medallion,
  .terminal-button,
  .terminal-icon-button,
  .terminal-button-cut,
  .terminal-button-outline-heavy,
  .terminal-badge,
  .terminal-badge-seal,
  .terminal-nav-link,
  .terminal-icon-medallion,
  .paper-button,
  .paper-icon-button,
  .paper-button-cut,
  .paper-button-outline-heavy,
  .paper-badge,
  .paper-badge-seal,
  .paper-nav-link,
  .paper-icon-medallion,
  .noir-button,
  .noir-icon-button,
  .noir-button-cut,
  .noir-button-outline-heavy,
  .noir-badge,
  .noir-badge-seal,
  .noir-nav-link,
  .noir-icon-medallion
), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

[data-ui][data-mode] :where(
  .luxe-button,
  .luxe-icon-button,
  .luxe-button-pill,
  .organic-button,
  .organic-icon-button,
  .organic-button-pill,
  .utility-button,
  .utility-icon-button,
  .utility-button-pill,
  .blueprint-button,
  .blueprint-icon-button,
  .blueprint-button-pill,
  .deco-button,
  .deco-icon-button,
  .deco-button-pill,
  .clay-button,
  .clay-icon-button,
  .clay-button-pill,
  .terminal-button,
  .terminal-icon-button,
  .terminal-button-pill,
  .paper-button,
  .paper-icon-button,
  .paper-button-pill,
  .noir-button,
  .noir-icon-button,
  .noir-button-pill
), [data-ui]:where([data-ui="minimal-saas"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  line-height: 1.15;
  vertical-align: middle;
}

[data-ui][data-mode] :where(
  .luxe-button-pill,
  .organic-button-pill,
  .utility-button-pill,
  .blueprint-button-pill,
  .deco-button-pill,
  .clay-button-pill,
  .terminal-button-pill,
  .paper-button-pill,
  .noir-button-pill
) {
  min-block-size: 44px;
  padding-block: .65rem;
  padding-inline: max(1rem, 1em);
  border-style: solid;
  border-width: 1px;
  border-radius: 999px;
  font: inherit;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.luxe-button-pill { color: var(--luxe-on-primary); background: var(--luxe-primary); border-color: var(--luxe-primary); border-radius: var(--luxe-radius-pill); }
.luxe-button-pill:hover { border-color: var(--luxe-primary-hover); filter: brightness(1.04); }
.luxe-button-pill:focus-visible { outline: 3px solid var(--luxe-focus); outline-offset: 3px; box-shadow: var(--luxe-focus-ring); }
.luxe-pill { border-radius: var(--luxe-radius-pill); }
.luxe-rounded { border-radius: var(--luxe-radius-md); }
.luxe-rounded-lg { border-radius: var(--luxe-radius-lg); }
.luxe-rounded-xl { border-radius: var(--luxe-radius-xl); }
.luxe-surface, .luxe-surface-sm, .luxe-surface-lg { color: var(--luxe-text); background: var(--luxe-card-bg); border: 1px solid var(--luxe-border); }

.organic-button-pill { color: var(--organic-on-primary); background: var(--organic-primary); border-color: var(--organic-primary); border-radius: var(--organic-radius-pill); }
.organic-button-pill:hover { border-color: var(--organic-primary-hover); filter: brightness(1.04); }
.organic-button-pill:focus-visible { outline: 3px solid var(--organic-focus); outline-offset: 3px; box-shadow: var(--organic-focus-ring); }
.organic-pill { border-radius: var(--organic-radius-pill); }
.organic-rounded { border-radius: var(--organic-radius-md); }
.organic-rounded-lg { border-radius: var(--organic-radius-lg); }
.organic-rounded-xl { border-radius: var(--organic-radius-xl); }
.organic-surface, .organic-surface-sm, .organic-surface-lg { color: var(--organic-text); background: var(--organic-card-bg); border: 1px solid var(--organic-border); }

.utility-button-pill { color: var(--utility-on-primary); background: var(--utility-primary); border-color: var(--utility-primary); border-radius: var(--utility-radius-pill); }
.utility-button-pill:hover { border-color: var(--utility-primary-hover); filter: brightness(1.04); }
.utility-button-pill:focus-visible { outline: 3px solid var(--utility-focus); outline-offset: 3px; box-shadow: var(--utility-focus-ring); }
.utility-pill { border-radius: var(--utility-radius-pill); }
.utility-rounded { border-radius: var(--utility-radius-md); }
.utility-rounded-lg { border-radius: var(--utility-radius-lg); }
.utility-rounded-xl { border-radius: var(--utility-radius-xl); }
.utility-surface, .utility-surface-sm, .utility-surface-lg { color: var(--utility-text); background: var(--utility-card-bg); border: 1px solid var(--utility-border); }

.blueprint-button-pill { color: var(--blueprint-on-primary); background: var(--blueprint-primary); border-color: var(--blueprint-primary); border-radius: var(--blueprint-radius-pill); }
.blueprint-button-pill:hover { border-color: var(--blueprint-primary-hover); filter: brightness(1.04); }
.blueprint-button-pill:focus-visible { outline: 3px solid var(--blueprint-focus); outline-offset: 3px; box-shadow: var(--blueprint-focus-ring); }
.blueprint-pill { border-radius: var(--blueprint-radius-pill); }
.blueprint-rounded { border-radius: var(--blueprint-radius-md); }
.blueprint-rounded-lg { border-radius: var(--blueprint-radius-lg); }
.blueprint-rounded-xl { border-radius: var(--blueprint-radius-xl); }
.blueprint-surface, .blueprint-surface-sm, .blueprint-surface-lg { color: var(--blueprint-text); background: var(--blueprint-card-bg); border: 1px solid var(--blueprint-border); }

.deco-button-pill { color: var(--deco-on-primary); background: var(--deco-primary); border-color: var(--deco-primary); border-radius: var(--deco-radius-pill); }
.deco-button-pill:hover { border-color: var(--deco-primary-hover); filter: brightness(1.04); }
.deco-button-pill:focus-visible { outline: 3px solid var(--deco-focus); outline-offset: 3px; box-shadow: var(--deco-focus-ring); }
.deco-pill { border-radius: var(--deco-radius-pill); }
.deco-rounded { border-radius: var(--deco-radius-md); }
.deco-rounded-lg { border-radius: var(--deco-radius-lg); }
.deco-rounded-xl { border-radius: var(--deco-radius-xl); }
.deco-surface, .deco-surface-sm, .deco-surface-lg { color: var(--deco-text); background: var(--deco-card-bg); border: 1px solid var(--deco-border); }

.clay-button-pill { color: var(--clay-on-primary); background: var(--clay-primary); border-color: var(--clay-primary); border-radius: var(--clay-radius-pill); }
.clay-button-pill:hover { border-color: var(--clay-primary-hover); filter: brightness(1.04); }
.clay-button-pill:focus-visible { outline: 3px solid var(--clay-focus); outline-offset: 3px; box-shadow: var(--clay-focus-ring); }
.clay-pill { border-radius: var(--clay-radius-pill); }
.clay-rounded { border-radius: var(--clay-radius-md); }
.clay-rounded-lg { border-radius: var(--clay-radius-lg); }
.clay-rounded-xl { border-radius: var(--clay-radius-xl); }
.clay-surface, .clay-surface-sm, .clay-surface-lg { color: var(--clay-text); background: var(--clay-card-bg); border: 1px solid var(--clay-border); }

.terminal-button-pill { color: var(--terminal-on-primary); background: var(--terminal-primary); border-color: var(--terminal-primary); border-radius: var(--terminal-radius-pill); }
.terminal-button-pill:hover { border-color: var(--terminal-primary-hover); filter: brightness(1.04); }
.terminal-button-pill:focus-visible { outline: 3px solid var(--terminal-focus); outline-offset: 3px; box-shadow: var(--terminal-focus-ring); }
.terminal-pill { border-radius: var(--terminal-radius-pill); }
.terminal-rounded { border-radius: var(--terminal-radius-md); }
.terminal-rounded-lg { border-radius: var(--terminal-radius-lg); }
.terminal-rounded-xl { border-radius: var(--terminal-radius-xl); }
.terminal-surface, .terminal-surface-sm, .terminal-surface-lg { color: var(--terminal-text); background: var(--terminal-card-bg); border: 1px solid var(--terminal-border); }

.paper-button-pill { color: var(--paper-on-primary); background: var(--paper-primary); border-color: var(--paper-primary); border-radius: var(--paper-radius-pill); }
.paper-button-pill:hover { border-color: var(--paper-primary-hover); filter: brightness(1.04); }
.paper-button-pill:focus-visible { outline: 3px solid var(--paper-focus); outline-offset: 3px; box-shadow: var(--paper-focus-ring); }
.paper-pill { border-radius: var(--paper-radius-pill); }
.paper-rounded { border-radius: var(--paper-radius-md); }
.paper-rounded-lg { border-radius: var(--paper-radius-lg); }
.paper-rounded-xl { border-radius: var(--paper-radius-xl); }
.paper-surface, .paper-surface-sm, .paper-surface-lg { color: var(--paper-text); background: var(--paper-card-bg); border: 1px solid var(--paper-border); }

.noir-button-pill { color: var(--noir-on-primary); background: var(--noir-primary); border-color: var(--noir-primary); border-radius: var(--noir-radius-pill); }
.noir-button-pill:hover { border-color: var(--noir-primary-hover); filter: brightness(1.04); }
.noir-button-pill:focus-visible { outline: 3px solid var(--noir-focus); outline-offset: 3px; box-shadow: var(--noir-focus-ring); }
.noir-pill { border-radius: var(--noir-radius-pill); }
.noir-rounded { border-radius: var(--noir-radius-md); }
.noir-rounded-lg { border-radius: var(--noir-radius-lg); }
.noir-rounded-xl { border-radius: var(--noir-radius-xl); }
.noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }

[data-ui][data-mode] :where(
  .luxe-button-pill:active,
  .luxe-button-pill[aria-pressed="true"],
  .organic-button-pill:active,
  .organic-button-pill[aria-pressed="true"],
  .utility-button-pill:active,
  .utility-button-pill[aria-pressed="true"],
  .blueprint-button-pill:active,
  .blueprint-button-pill[aria-pressed="true"],
  .deco-button-pill:active,
  .deco-button-pill[aria-pressed="true"],
  .clay-button-pill:active,
  .clay-button-pill[aria-pressed="true"],
  .terminal-button-pill:active,
  .terminal-button-pill[aria-pressed="true"],
  .paper-button-pill:active,
  .paper-button-pill[aria-pressed="true"],
  .noir-button-pill:active,
  .noir-button-pill[aria-pressed="true"]
) { transform: translateY(1px); }

[data-ui][data-mode] :where(
  .luxe-button-pill:disabled,
  .luxe-button-pill[aria-disabled="true"],
  .organic-button-pill:disabled,
  .organic-button-pill[aria-disabled="true"],
  .utility-button-pill:disabled,
  .utility-button-pill[aria-disabled="true"],
  .blueprint-button-pill:disabled,
  .blueprint-button-pill[aria-disabled="true"],
  .deco-button-pill:disabled,
  .deco-button-pill[aria-disabled="true"],
  .clay-button-pill:disabled,
  .clay-button-pill[aria-disabled="true"],
  .terminal-button-pill:disabled,
  .terminal-button-pill[aria-disabled="true"],
  .paper-button-pill:disabled,
  .paper-button-pill[aria-disabled="true"],
  .noir-button-pill:disabled,
  .noir-button-pill[aria-disabled="true"]
) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }

[data-ui][data-mode] :where(
  .luxe-tooltip,
  .luxe-tooltip-top,
  .luxe-tooltip-right,
  .luxe-tooltip-bottom,
  .luxe-tooltip-left,
  .organic-tooltip,
  .organic-tooltip-top,
  .organic-tooltip-right,
  .organic-tooltip-bottom,
  .organic-tooltip-left,
  .utility-tooltip,
  .utility-tooltip-top,
  .utility-tooltip-right,
  .utility-tooltip-bottom,
  .utility-tooltip-left,
  .blueprint-tooltip,
  .blueprint-tooltip-top,
  .blueprint-tooltip-right,
  .blueprint-tooltip-bottom,
  .blueprint-tooltip-left,
  .deco-tooltip,
  .deco-tooltip-top,
  .deco-tooltip-right,
  .deco-tooltip-bottom,
  .deco-tooltip-left,
  .clay-tooltip,
  .clay-tooltip-top,
  .clay-tooltip-right,
  .clay-tooltip-bottom,
  .clay-tooltip-left,
  .terminal-tooltip,
  .terminal-tooltip-top,
  .terminal-tooltip-right,
  .terminal-tooltip-bottom,
  .terminal-tooltip-left,
  .paper-tooltip,
  .paper-tooltip-top,
  .paper-tooltip-right,
  .paper-tooltip-bottom,
  .paper-tooltip-left,
  .noir-tooltip,
  .noir-tooltip-top,
  .noir-tooltip-right,
  .noir-tooltip-bottom,
  .noir-tooltip-left
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }

[data-ui][data-mode] :where(
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
  [data-ui-tooltip-anchor] > .luxe-tooltip-left,
  [data-ui-tooltip-anchor] > .organic-tooltip-top,
  [data-ui-tooltip-anchor] > .organic-tooltip-right,
  [data-ui-tooltip-anchor] > .organic-tooltip-bottom,
  [data-ui-tooltip-anchor] > .organic-tooltip-left,
  [data-ui-tooltip-anchor] > .utility-tooltip-top,
  [data-ui-tooltip-anchor] > .utility-tooltip-right,
  [data-ui-tooltip-anchor] > .utility-tooltip-bottom,
  [data-ui-tooltip-anchor] > .utility-tooltip-left,
  [data-ui-tooltip-anchor] > .blueprint-tooltip-top,
  [data-ui-tooltip-anchor] > .blueprint-tooltip-right,
  [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom,
  [data-ui-tooltip-anchor] > .blueprint-tooltip-left,
  [data-ui-tooltip-anchor] > .deco-tooltip-top,
  [data-ui-tooltip-anchor] > .deco-tooltip-right,
  [data-ui-tooltip-anchor] > .deco-tooltip-bottom,
  [data-ui-tooltip-anchor] > .deco-tooltip-left,
  [data-ui-tooltip-anchor] > .clay-tooltip-top,
  [data-ui-tooltip-anchor] > .clay-tooltip-right,
  [data-ui-tooltip-anchor] > .clay-tooltip-bottom,
  [data-ui-tooltip-anchor] > .clay-tooltip-left,
  [data-ui-tooltip-anchor] > .terminal-tooltip-top,
  [data-ui-tooltip-anchor] > .terminal-tooltip-right,
  [data-ui-tooltip-anchor] > .terminal-tooltip-bottom,
  [data-ui-tooltip-anchor] > .terminal-tooltip-left,
  [data-ui-tooltip-anchor] > .paper-tooltip-top,
  [data-ui-tooltip-anchor] > .paper-tooltip-right,
  [data-ui-tooltip-anchor] > .paper-tooltip-bottom,
  [data-ui-tooltip-anchor] > .paper-tooltip-left,
  [data-ui-tooltip-anchor] > .noir-tooltip-top,
  [data-ui-tooltip-anchor] > .noir-tooltip-right,
  [data-ui-tooltip-anchor] > .noir-tooltip-bottom,
  [data-ui-tooltip-anchor] > .noir-tooltip-left
) { position: absolute; z-index: 20; }

[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }

:where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
:where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
:where(.luxe-border, .organic-border, .utility-border, .blueprint-border, .deco-border, .clay-border, .terminal-border, .paper-border, .noir-border) { border: var(--usk-native-border-width) solid var(--usk-native-border); }
:where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
:where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }

:where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="minimal-saas"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-primary-ink, var(--usk-native-primary)); background: transparent; border-color: var(--usk-native-border); }

:where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="minimal-saas"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
  display: inline-flex;
  align-items: center;
  gap: var(--usk-native-field-gap);
  min-block-size: 24px;
  color: var(--usk-native-text);
}

:where(.luxe-check-control, .luxe-radio-control, .organic-check-control, .organic-radio-control, .utility-check-control, .utility-radio-control, .blueprint-check-control, .blueprint-radio-control, .deco-check-control, .deco-radio-control, .clay-check-control, .clay-radio-control, .terminal-check-control, .terminal-radio-control, .paper-check-control, .paper-radio-control, .noir-check-control, .noir-radio-control), :where([data-ui="minimal-saas"]) :where(.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control) {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--usk-native-primary);
}

:where(.luxe-switch-track, .organic-switch-track, .utility-switch-track, .blueprint-switch-track, .deco-switch-track, .clay-switch-track, .terminal-switch-track, .paper-switch-track, .noir-switch-track), :where([data-ui="minimal-saas"]) :where(.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track) {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  padding: .18rem;
  background: var(--usk-native-track);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: 999px;
}

:where(.luxe-switch-thumb, .organic-switch-thumb, .utility-switch-thumb, .blueprint-switch-thumb, .deco-switch-thumb, .clay-switch-thumb, .terminal-switch-thumb, .paper-switch-thumb, .noir-switch-thumb), :where([data-ui="minimal-saas"]) :where(.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb) {
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--usk-native-thumb);
  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
  border-radius: 999px;
  transition: transform 160ms ease;
}

:where(.luxe-switch:has(input:checked) .luxe-switch-track, .organic-switch:has(input:checked) .organic-switch-track, .utility-switch:has(input:checked) .utility-switch-track, .blueprint-switch:has(input:checked) .blueprint-switch-track, .deco-switch:has(input:checked) .deco-switch-track, .clay-switch:has(input:checked) .clay-switch-track, .terminal-switch:has(input:checked) .terminal-switch-track, .paper-switch:has(input:checked) .paper-switch-track, .noir-switch:has(input:checked) .noir-switch-track), :where([data-ui="minimal-saas"]) :where(.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track) { background: var(--usk-native-track-fill); }

:where(.luxe-sr-only, .luxe-visually-hidden, .organic-sr-only, .organic-visually-hidden, .utility-sr-only, .utility-visually-hidden, .blueprint-sr-only, .blueprint-visually-hidden, .deco-sr-only, .deco-visually-hidden, .clay-sr-only, .clay-visually-hidden, .terminal-sr-only, .terminal-visually-hidden, .paper-sr-only, .paper-visually-hidden, .noir-sr-only, .noir-visually-hidden) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(.luxe-skip-link, .organic-skip-link, .utility-skip-link, .blueprint-skip-link, .deco-skip-link, .clay-skip-link, .terminal-skip-link, .paper-skip-link, .noir-skip-link) {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 1000;
  padding: .75rem 1rem;
  color: var(--usk-native-on-primary);
  background: var(--usk-native-primary);
  border-radius: var(--usk-native-radius);
  transform: translateY(calc(-100% - 1rem));
}

:where(.luxe-skip-link:focus-visible, .organic-skip-link:focus-visible, .utility-skip-link:focus-visible, .blueprint-skip-link:focus-visible, .deco-skip-link:focus-visible, .clay-skip-link:focus-visible, .terminal-skip-link:focus-visible, .paper-skip-link:focus-visible, .noir-skip-link:focus-visible) { transform: translateY(0); }
}
/* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */


/* styles/minimal-saas.css (visual paint) */
@layer ui-style-kit.presets {
  :root {
    --saas-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --saas-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
    --saas-font-body: var(--saas-font-sans);
    --saas-font-heading: var(--saas-font-display);
    --saas-font-control: var(--saas-font-display);
    --saas-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --saas-radius-xs: .1875rem;
    --saas-radius-sm: .25rem;
    --saas-radius-md: .375rem;
    --saas-radius-lg: .5rem;
    --saas-radius-xl: .75rem;
    --saas-radius-pill: 999px;
    --saas-space-1: .25rem;
    --saas-space-2: .5rem;
    --saas-space-3: .75rem;
    --saas-space-4: 1rem;
    --saas-space-5: 1.25rem;
    --saas-space-6: 1.5rem;
    --saas-space-8: 2rem;
    --saas-transition-fast: .15s ease;
    --saas-transition-base: .24s ease;
  }

  [data-ui="minimal-saas"][data-mode="light"] {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    --saas-fallback-bg-rgb: 248 249 252;
    --saas-fallback-surface-rgb: 255 255 255;
    --saas-fallback-surface-strong-rgb: 255 255 255;
    --saas-fallback-surface-soft-rgb: 243 245 250;
    --saas-fallback-text-rgb: 19 26 53;
    --saas-fallback-text-muted-rgb: 97 105 131;
    --saas-fallback-border-rgb: 220 225 236;
    --saas-fallback-primary-rgb: 85 78 232;
    --saas-fallback-primary-hover-rgb: 103 88 244;
    --saas-fallback-primary-text-rgb: 255 255 255;
    --saas-fallback-secondary-rgb: 49 110 219;
    --saas-fallback-secondary-hover-rgb: 43 95 190;
    --saas-fallback-secondary-text-rgb: 255 255 255;
    --saas-fallback-accent-rgb: 103 88 244;
    --saas-fallback-accent-text-rgb: 255 255 255;
    --saas-fallback-success-rgb: 36 155 112;
    --saas-fallback-success-text-rgb: 19 26 53;
    --saas-fallback-warning-rgb: 215 146 31;
    --saas-fallback-warning-text-rgb: 19 26 53;
    --saas-fallback-danger-rgb: 214 30 70;
    --saas-fallback-danger-text-rgb: 255 255 255;
    --saas-fallback-link-rgb: 85 78 232;
    --saas-fallback-focus-rgb: 85 78 232;
    --saas-panel-alpha: .98;
    --saas-panel-soft-alpha: .74;
    --saas-border-alpha: .44;
    --saas-shadow-alpha: .08;
    --saas-focus-alpha: .3;
    --saas-reference-shadow: 0 .5rem 1.5rem #282f530b;
  }

  [data-ui="minimal-saas"][data-mode="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --saas-fallback-bg-rgb: 7 17 31;
    --saas-fallback-surface-rgb: 13 25 42;
    --saas-fallback-surface-strong-rgb: 27 36 80;
    --saas-fallback-surface-soft-rgb: 17 31 51;
    --saas-fallback-text-rgb: 241 243 251;
    --saas-fallback-text-muted-rgb: 180 187 205;
    --saas-fallback-border-rgb: 43 58 80;
    --saas-fallback-primary-rgb: 112 104 255;
    --saas-fallback-primary-hover-rgb: 135 128 255;
    --saas-fallback-primary-text-rgb: 7 17 31;
    --saas-fallback-secondary-rgb: 85 145 255;
    --saas-fallback-secondary-hover-rgb: 112 166 255;
    --saas-fallback-secondary-text-rgb: 7 17 31;
    --saas-fallback-accent-rgb: 87 73 239;
    --saas-fallback-accent-text-rgb: 255 255 255;
    --saas-fallback-success-rgb: 67 190 139;
    --saas-fallback-success-text-rgb: 7 17 31;
    --saas-fallback-warning-rgb: 239 173 49;
    --saas-fallback-warning-text-rgb: 7 17 31;
    --saas-fallback-danger-rgb: 255 61 104;
    --saas-fallback-danger-text-rgb: 7 17 31;
    --saas-fallback-link-rgb: 135 128 255;
    --saas-fallback-focus-rgb: 112 104 255;
    --saas-panel-alpha: .92;
    --saas-panel-soft-alpha: .64;
    --saas-border-alpha: .52;
    --saas-shadow-alpha: .34;
    --saas-focus-alpha: .42;
    --saas-reference-shadow: 0 .75rem 2.125rem #00000029;
  }

  [data-ui="minimal-saas"][data-mode="contrast"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --saas-fallback-bg-rgb: 0 0 0;
    --saas-fallback-surface-rgb: 3 8 22;
    --saas-fallback-surface-strong-rgb: 8 18 42;
    --saas-fallback-surface-soft-rgb: 0 0 0;
    --saas-fallback-text-rgb: 255 255 255;
    --saas-fallback-text-muted-rgb: 238 244 255;
    --saas-fallback-border-rgb: 255 255 255;
    --saas-fallback-primary-rgb: 111 140 255;
    --saas-fallback-primary-hover-rgb: 255 255 255;
    --saas-fallback-primary-text-rgb: 0 0 0;
    --saas-fallback-secondary-rgb: 0 217 255;
    --saas-fallback-secondary-hover-rgb: 255 255 255;
    --saas-fallback-secondary-text-rgb: 0 0 0;
    --saas-fallback-accent-rgb: 184 196 255;
    --saas-fallback-accent-text-rgb: 0 0 0;
    --saas-fallback-success-rgb: 0 255 144;
    --saas-fallback-success-text-rgb: 0 0 0;
    --saas-fallback-warning-rgb: 255 225 0;
    --saas-fallback-warning-text-rgb: 0 0 0;
    --saas-fallback-danger-rgb: 255 63 95;
    --saas-fallback-danger-text-rgb: 0 0 0;
    --saas-fallback-link-rgb: 159 178 255;
    --saas-fallback-focus-rgb: 255 255 255;
    --saas-panel-alpha: 1;
    --saas-panel-soft-alpha: .92;
    --saas-border-alpha: 1;
    --saas-shadow-alpha: .5;
    --saas-focus-alpha: .72;
    --saas-reference-shadow: none;
  }

  [data-ui="minimal-saas"][data-theme][data-mode] {
    --saas-bg-rgb: var(--usk-bg-rgb);
    --saas-surface-rgb: var(--usk-surface-rgb);
    --saas-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --saas-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --saas-text-rgb: var(--usk-text-rgb);
    --saas-text-muted-rgb: var(--usk-text-muted-rgb);
    --saas-border-rgb: var(--usk-border-rgb);
    --saas-primary-rgb: var(--usk-primary-rgb);
    --saas-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --saas-primary-text-rgb: var(--usk-primary-text-rgb);
    --saas-secondary-rgb: var(--usk-secondary-rgb);
    --saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --saas-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --saas-accent-rgb: var(--usk-accent-rgb);
    --saas-accent-text-rgb: var(--usk-accent-text-rgb);
    --saas-success-rgb: var(--usk-success-rgb);
    --saas-success-text-rgb: var(--usk-success-text-rgb);
    --saas-warning-rgb: var(--usk-warning-rgb);
    --saas-warning-text-rgb: var(--usk-warning-text-rgb);
    --saas-danger-rgb: var(--usk-danger-rgb);
    --saas-danger-text-rgb: var(--usk-danger-text-rgb);
    --saas-link-rgb: var(--usk-link-rgb);
    --saas-focus-rgb: var(--usk-focus-rgb);
  }

  [data-ui="minimal-saas"][data-mode] {
    --usk-native-bg: var(--saas-bg);
    --saas-bg-rgb: var(--usk-bg-rgb, var(--saas-fallback-bg-rgb));
    --saas-surface-rgb: var(--usk-surface-rgb, var(--saas-fallback-surface-rgb));
    --saas-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--saas-fallback-surface-strong-rgb));
    --saas-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--saas-fallback-surface-soft-rgb));
    --saas-text-rgb: var(--usk-text-rgb, var(--saas-fallback-text-rgb));
    --saas-text-muted-rgb: var(--usk-text-muted-rgb, var(--saas-fallback-text-muted-rgb));
    --saas-border-rgb: var(--usk-border-rgb, var(--saas-fallback-border-rgb));
    --saas-primary-rgb: var(--usk-primary-rgb, var(--saas-fallback-primary-rgb));
    --saas-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--saas-fallback-primary-hover-rgb));
    --saas-primary-text-rgb: var(--usk-primary-text-rgb, var(--saas-fallback-primary-text-rgb));
    --saas-secondary-rgb: var(--usk-secondary-rgb, var(--saas-fallback-secondary-rgb));
    --saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--saas-fallback-secondary-hover-rgb));
    --saas-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--saas-fallback-secondary-text-rgb));
    --saas-accent-rgb: var(--usk-accent-rgb, var(--saas-fallback-accent-rgb));
    --saas-accent-text-rgb: var(--usk-accent-text-rgb, var(--saas-fallback-accent-text-rgb));
    --saas-success-rgb: var(--usk-success-rgb, var(--saas-fallback-success-rgb));
    --saas-success-text-rgb: var(--usk-success-text-rgb, var(--saas-fallback-success-text-rgb));
    --saas-warning-rgb: var(--usk-warning-rgb, var(--saas-fallback-warning-rgb));
    --saas-warning-text-rgb: var(--usk-warning-text-rgb, var(--saas-fallback-warning-text-rgb));
    --saas-danger-rgb: var(--usk-danger-rgb, var(--saas-fallback-danger-rgb));
    --saas-danger-text-rgb: var(--usk-danger-text-rgb, var(--saas-fallback-danger-text-rgb));
    --saas-link-rgb: var(--usk-link-rgb, var(--saas-fallback-link-rgb));
    --saas-focus-rgb: var(--usk-focus-rgb, var(--saas-fallback-focus-rgb));
    --usk-native-surface: var(--saas-surface);
    --usk-native-surface-strong: var(--saas-surface-strong);
    --usk-native-surface-soft: var(--saas-surface-soft);
    --usk-native-card-bg: var(--saas-card-bg);
    --usk-native-control-bg: var(--saas-control-bg);
    --usk-native-text: var(--saas-text);
    --usk-native-text-muted: var(--saas-text-muted);
    --usk-native-border: var(--saas-border);
    --usk-native-primary: var(--saas-primary);
    --usk-native-primary-hover: var(--saas-primary-hover);
    --usk-native-on-primary: var(--saas-on-primary);
    --usk-native-focus: var(--saas-focus);
    --usk-native-success: var(--saas-success);
    --usk-native-warning: var(--saas-warning);
    --usk-native-danger: var(--saas-danger);
    --usk-native-link: var(--saas-link);
    --usk-native-font-body: var(--saas-font-body);
    --usk-native-font-heading: var(--saas-font-heading);
    --usk-native-font-control: var(--saas-font-control);
    --usk-native-font-mono: var(--saas-font-mono);
    --usk-native-radius-sm: var(--saas-radius-sm);
    --usk-native-radius: var(--saas-radius-md);
    --usk-native-radius-lg: var(--saas-radius-lg);
    --usk-native-shadow: var(--saas-shadow-sm, none);
    --usk-native-shadow-md: var(--saas-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--saas-focus-ring, 0 0 0 3px rgb(var(--saas-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--saas-space-4);
    --usk-native-control-min-block-size: 2.375rem;
    --usk-native-control-padding-block: .5rem;
    --usk-native-control-padding-inline: .75rem;
    --usk-native-subcontrol-padding-block: .38rem;
    --usk-native-subcontrol-padding-inline: .6rem;
    --usk-native-choice-size: 1rem;
    --usk-native-choice-background: var(--saas-control-bg);
    --usk-native-choice-border: 1px solid var(--saas-border);
    --usk-native-checkbox-radius: .25rem;
    --usk-native-radio-radius: 50%;
    --usk-native-choice-shadow: none;
    --usk-native-choice-checked-background: var(--saas-primary);
    --usk-native-choice-mark-color: var(--saas-on-primary);
    --usk-native-select-indicator-image: linear-gradient(27deg, transparent 50%, var(--saas-primary) 50%), linear-gradient(153deg, var(--saas-primary) 50%, transparent 50%);
    --usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
    --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .72rem) 50%;
    --usk-native-select-padding-inline-end: 2.25rem;
    --usk-native-range-track-size: .32rem;
    --usk-native-range-track-background: var(--saas-surface-soft);
    --usk-native-range-track-border: 0 solid transparent;
    --usk-native-range-track-radius: 999px;
    --usk-native-range-track-shadow: none;
    --usk-native-range-progress-background: var(--saas-primary);
    --usk-native-range-thumb-size: .95rem;
    --usk-native-range-thumb-background: var(--saas-primary);
    --usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
    --usk-native-range-thumb-radius: 50%;
    --usk-native-range-thumb-shadow: 0 .2rem .5rem rgb(var(--saas-text-rgb) / .12);
    --usk-native-progress-size: .35rem;
    --usk-native-progress-track-background: var(--saas-surface-soft);
    --usk-native-progress-track-border: 0 solid transparent;
    --usk-native-progress-track-radius: 999px;
    --usk-native-progress-track-shadow: none;
    --usk-native-progress-value-background: var(--saas-primary);
    --usk-native-progress-value-radius: inherit;
    --usk-native-progress-value-shadow: none;
    --usk-native-meter-optimum-background: var(--saas-success);
    --usk-native-meter-suboptimum-background: var(--saas-warning);
    --usk-native-meter-critical-background: var(--saas-danger);
    --usk-native-file-button-background: var(--saas-primary);
    --usk-native-file-button-border: 1px solid var(--saas-border);
    --usk-native-file-button-radius: .2rem;
    --usk-native-file-button-shadow: none;
    --usk-native-color-swatch-border: 1px solid var(--saas-border);
    --usk-native-color-swatch-radius: .2rem;
    --usk-native-indicator-opacity: .72;
    --usk-native-indicator-filter: none;
    --usk-native-scrollbar-size: .65rem;
    --usk-native-scrollbar-track: var(--saas-surface-soft);
    --usk-native-scrollbar-thumb: var(--saas-primary);
    --usk-native-scrollbar-radius: 2px;
    --saas-bg: rgb(var(--saas-bg-rgb));
    --saas-surface: rgb(var(--saas-surface-rgb) / var(--saas-panel-alpha));
    --saas-surface-strong: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
    --saas-surface-soft: rgb(var(--saas-surface-soft-rgb) / var(--saas-panel-soft-alpha));
    --saas-text: rgb(var(--saas-text-rgb));
    --saas-text-muted: rgb(var(--saas-text-muted-rgb));
    --saas-fg: var(--saas-text);
    --saas-surface-fg: var(--saas-text);
    --saas-muted: var(--saas-text-muted);
    --saas-border: rgb(var(--saas-border-rgb) / max(var(--saas-border-alpha), var(--usk-border-min-alpha)));
    --saas-control-fg: var(--saas-text);
    --saas-primary: rgb(var(--saas-primary-rgb));
    --saas-primary-hover: rgb(var(--saas-primary-hover-rgb));
    --saas-brand-2: rgb(var(--saas-primary-hover-rgb));
    --saas-primary-text: rgb(var(--saas-primary-text-rgb));
    --saas-secondary: rgb(var(--saas-secondary-rgb));
    --saas-secondary-hover: rgb(var(--saas-secondary-hover-rgb));
    --saas-secondary-text: rgb(var(--saas-secondary-text-rgb));
    --saas-on-primary: var(--saas-primary-text);
    --saas-on-secondary: var(--saas-secondary-text);
    --saas-on-accent: rgb(var(--saas-accent-text-rgb));
    --saas-on-success: rgb(var(--saas-success-text-rgb));
    --saas-on-warning: rgb(var(--saas-warning-text-rgb));
    --saas-on-danger: rgb(var(--saas-danger-text-rgb));
    --saas-accent: rgb(var(--saas-accent-rgb));
    --saas-success: rgb(var(--saas-success-rgb));
    --saas-warning: rgb(var(--saas-warning-rgb));
    --saas-danger: rgb(var(--saas-danger-rgb));
    --saas-link: rgb(var(--saas-link-rgb));
    --saas-focus: rgb(var(--saas-focus-rgb));
    --saas-focus-ring: 0 0 0 3px rgb(var(--saas-focus-rgb) / var(--saas-focus-alpha));
    --saas-shadow-sm: 0 1px 2px rgb(var(--saas-text-rgb) / calc(var(--saas-shadow-alpha) * .65));
    --saas-shadow-md: var(--saas-reference-shadow);
    --saas-theme-bg-size: auto;
    --saas-theme-bg: var(--saas-bg);
    --saas-card-bg: var(--saas-surface);
    --saas-control-bg: var(--saas-surface);
    --saas-hover-bg: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
    --saas-spinner-track: rgb(var(--saas-border-rgb) / max(.28, calc(var(--saas-border-alpha) * .7)));
    --saas-spinner-stroke: var(--saas-primary);
    --saas-spinner-accent: var(--saas-accent);
  }

  @supports (color: color-mix(in srgb,black,white)) {
    [data-ui="minimal-saas"][data-mode] {
      --saas-border: color-mix(in srgb, rgb(var(--saas-border-rgb) / max(var(--saas-border-alpha), var(--usk-border-min-alpha))), var(--saas-text) var(--usk-border-text-mix));
    }
  }

  [data-ui="minimal-saas"] {
    background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.03),transparent 18rem),var(--saas-bg);
    color: var(--saas-text);
    font-family: var(--saas-font-body);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }

  [data-ui="minimal-saas"] *, [data-ui="minimal-saas"] :before, [data-ui="minimal-saas"] :after {
    box-sizing: border-box;
  }

  [data-ui="minimal-saas"][data-mode] {
    background: var(--saas-theme-bg);
    background-size: var(--saas-theme-bg-size);
  }

  .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);
  }

  .saas-title {
    color: var(--saas-text);
    letter-spacing: -.02em;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
  }

  .saas-heading {
    color: var(--saas-text);
    letter-spacing: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .saas-kicker {
    color: var(--usk-primary-ink, var(--saas-primary));
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0;
    font-size: .78rem;
    font-weight: 750;
  }

  .saas-subtitle, .saas-copy {
    color: var(--saas-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .saas-text-muted {
    color: var(--saas-text-muted);
  }

  .saas-divider {
    background: var(--saas-border);
    border: 0;
    width: 100%;
    height: 1px;
  }

  .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: var(--saas-card-bg);
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    box-shadow: var(--saas-shadow-md);
    transition: transform var(--saas-transition-base),box-shadow var(--saas-transition-base),border-color var(--saas-transition-base),background var(--saas-transition-base);
    position: relative;
  }

  .saas-toolbar, :where([data-ui="minimal-saas"]) .ui-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--saas-space-4);
    padding: var(--saas-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .saas-surface-sm {
    border-radius: var(--saas-radius-md);
    box-shadow: var(--saas-shadow-sm);
  }

  .saas-surface-lg {
    border-radius: var(--saas-radius-lg);
    box-shadow: var(--saas-shadow-md);
  }

  .saas-well, .saas-inset {
    background: var(--saas-surface-soft);
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-md);
    padding: var(--saas-space-4);
    box-shadow: none;
  }

  .saas-hover-lift:hover {
    border-color: rgb(var(--saas-primary-rgb)/.42);
    box-shadow: var(--saas-shadow-md);
    transform: none;
  }

  .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;
    gap: var(--saas-space-2);
    background: var(--saas-control-bg);
    min-height: 2.125rem;
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-md);
    box-shadow: var(--saas-shadow-sm);
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--saas-transition-fast),background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast),transform var(--saas-transition-fast);
    padding: .45rem .75rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .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: rgb(var(--saas-primary-rgb)/.48);
    background: var(--saas-surface-soft);
    transform: none;
  }

  .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 {
    box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb)/.12);
    transform: translateY(1px);
  }

  .saas-button-primary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]):hover {
    background: linear-gradient(135deg,var(--saas-brand-2),var(--saas-primary));
    border-color: var(--saas-primary-hover);
  }

  .saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
    background: rgb(var(--saas-surface-strong-rgb)/var(--saas-panel-alpha));
    color: var(--usk-primary-ink, var(--saas-primary));
    border-color: rgb(var(--saas-primary-rgb)/.32);
    box-shadow: none;
  }

  .saas-button-secondary:hover, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]):hover {
    background: rgb(var(--saas-primary-rgb)/.06);
    border-color: rgb(var(--saas-primary-rgb)/.52);
  }

  .saas-button-ghost, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
    color: var(--usk-primary-ink, var(--saas-primary));
    box-shadow: none;
    background: none;
    border-color: #0000;
  }

  .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
    border-radius: var(--saas-radius-md);
    width: 2.375rem;
    padding: 0;
  }

  .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, :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-warning):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="warning"])):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, :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, :where([data-ui="minimal-saas"]) .ui-field {
    gap: var(--saas-space-2);
    flex-direction: column;
    display: flex;
  }

  .saas-label, :where([data-ui="minimal-saas"]) .ui-label {
    color: var(--saas-text);
    font-size: .875rem;
    font-weight: 700;
  }

  .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-control-bg);
    width: 100%;
    min-height: 2rem;
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-md);
    font: inherit;
    transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
    outline: none;
    padding: .38rem .65rem;
  }

  .saas-textarea, :where([data-ui="minimal-saas"]) .ui-textarea {
    resize: vertical;
    min-height: 7rem;
  }

  .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, :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)/.42);
  }

  .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);
  }

  [data-ui="minimal-saas"][data-mode] :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--saas-focus);
    outline-offset: 2px;
  }

  .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, :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);
    cursor: pointer;
    display: inline-flex;
  }

  .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, :where([data-ui="minimal-saas"]) .ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio-control {
    background: var(--saas-control-bg);
    border: 1px solid var(--saas-border);
    width: 1rem;
    height: 1rem;
    transition: background var(--saas-transition-fast),border-color var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .saas-check-control, :where([data-ui="minimal-saas"]) .ui-check-control {
    border-radius: var(--saas-radius-xs);
  }

  .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, :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: 0 0 0 .16rem rgb(var(--saas-primary-rgb)/.18);
  }

  .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: .78rem;
    font-weight: 900;
    line-height: 1;
  }

  .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%;
    width: .48rem;
    height: .48rem;
  }

  .saas-switch, :where([data-ui="minimal-saas"]) .ui-switch {
    align-items: center;
    gap: var(--saas-space-3);
    color: var(--saas-text);
    cursor: pointer;
    display: inline-flex;
  }

  .saas-switch input, :where([data-ui="minimal-saas"]) .ui-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .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);
    width: 2.6rem;
    height: 1.3rem;
    transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
    position: relative;
  }

  .saas-switch-thumb, :where([data-ui="minimal-saas"]) .ui-switch-thumb {
    background: var(--saas-surface-strong);
    border: 1px solid var(--saas-border);
    width: .9rem;
    height: .9rem;
    box-shadow: 0 1px 2px rgb(var(--saas-text-rgb)/.12);
    transition: left var(--saas-transition-fast),background var(--saas-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .14rem;
    left: .14rem;
  }

  .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, :where([data-ui="minimal-saas"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
    background: var(--saas-on-primary);
    left: calc(100% - 1.04rem);
  }

  .saas-check input:focus-visible + .saas-check-control, .saas-radio input:focus-visible + .saas-radio-control, .saas-switch input:focus-visible + .saas-switch-track, :where([data-ui="minimal-saas"]) .ui-check input:focus-visible+.ui-check-control, :where([data-ui="minimal-saas"]) .ui-radio input:focus-visible+.ui-radio-control, :where([data-ui="minimal-saas"]) .ui-switch input:focus-visible+.ui-switch-track {
    outline: 2px solid var(--saas-focus);
    outline-offset: 2px;
  }

  .saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
    align-items: center;
    gap: var(--saas-space-1);
    background: var(--saas-surface-soft);
    min-height: 1.4rem;
    color: var(--saas-text);
    border-radius: var(--saas-radius-sm);
    border: 1px solid #0000;
    padding: .25rem .5rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
  }

  .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, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="secondary"]) {
    background: rgb(var(--saas-primary-rgb)/.1);
    color: var(--usk-primary-ink, var(--saas-primary));
    border-color: #0000;
  }

  .saas-badge-success, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="success"]) {
    background: rgb(var(--saas-success-rgb)/.14);
    color: var(--saas-text);
    border-color: rgb(var(--saas-success-rgb)/.38);
  }

  .saas-badge-warning, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="warning"]) {
    background: rgb(var(--saas-warning-rgb)/.14);
    color: var(--saas-text);
    border-color: rgb(var(--saas-warning-rgb)/.38);
  }

  .saas-badge-danger, :where([data-ui="minimal-saas"]) .ui-badge:where([data-ui-variant="danger"]) {
    background: rgb(var(--saas-danger-rgb)/.14);
    color: var(--saas-text);
    border-color: rgb(var(--saas-danger-rgb)/.38);
  }

  .saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
    align-items: center;
    gap: var(--saas-space-1);
    border: 0;
    border-bottom: 1px solid var(--saas-border);
    box-shadow: none;
    background: none;
    border-radius: 0;
    flex-wrap: wrap;
    padding: 0;
    display: flex;
  }

  .saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
    min-height: 2.125rem;
    color: var(--saas-text-muted);
    border-radius: var(--saas-radius-md);
    transition: color var(--saas-transition-fast),background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .4rem .7rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
  }

  .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, :where([data-ui="minimal-saas"]) .ui-nav-link[aria-current="page"], :where([data-ui="minimal-saas"]) .ui-nav-link.is-active {
    color: var(--saas-text);
    box-shadow: inset 0-2px 0 var(--saas-primary);
    background: none;
  }

  .saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: var(--saas-text);
    max-inline-size: 16rem;
    color: var(--saas-bg);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-md);
    align-items: center;
    gap: .45rem;
    padding: .55rem .75rem;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.35;
    display: inline-flex;
    box-shadow: 0 .75rem 1.6rem #0f172a3d;
  }

  .saas-tooltip-arrow {
    opacity: .9;
    background: currentColor;
    border-radius: .12rem;
    flex: none;
    block-size: .55rem;
    inline-size: .55rem;
    transform: rotate(45deg);
  }

  .saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
    background: var(--saas-surface-soft);
    border-radius: var(--saas-radius-pill);
    border: 0 solid #0000;
    width: 100%;
    height: .3rem;
    overflow: hidden;
  }

  .saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
    height: 100%;
    width: var(--saas-progress-value, 50%);
    background: var(--saas-primary);
    border-radius: inherit;
  }

  .saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
    gap: var(--saas-space-2);
    padding: var(--saas-space-3);
    background: rgb(var(--saas-primary-rgb)/.065);
    color: var(--saas-text);
    border: 1px solid rgb(var(--saas-primary-rgb)/.28);
    border-radius: var(--saas-radius-lg);
    box-shadow: none;
    display: grid;
  }

  .saas-alert-title, :where([data-ui="minimal-saas"]) .ui-alert-title {
    color: var(--saas-text);
    margin: 0;
    font-weight: 900;
  }

  .saas-alert-body, :where([data-ui="minimal-saas"]) .ui-alert-body {
    color: var(--saas-text);
    margin: 0;
    line-height: 1.55;
  }

  .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-table-wrap {
    overflow: auto;
  }

  .saas-table, :where([data-ui="minimal-saas"]) .ui-table {
    border-collapse: collapse;
    width: 100%;
  }

  .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: .68rem .75rem;
  }

  .saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
    color: var(--saas-text);
    text-transform: none;
    letter-spacing: 0;
    background: rgb(var(--saas-surface-soft-rgb)/.52);
    font-size: .78rem;
    font-weight: 700;
  }

  .saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
    color: var(--saas-text-muted);
  }

  .saas-table tr:hover td, :where([data-ui="minimal-saas"]) .ui-table tr:hover td {
    background: rgb(var(--saas-primary-rgb)/.045);
  }

  .saas-text-primary {
    color: var(--usk-primary-ink, var(--saas-primary));
  }

  .saas-text-secondary {
    color: var(--saas-secondary);
  }

  .saas-text-accent {
    color: var(--usk-accent-ink, var(--saas-accent));
  }

  .saas-text-success {
    color: var(--saas-success);
  }

  .saas-text-warning {
    color: var(--saas-warning);
  }

  .saas-text-danger {
    color: var(--saas-danger);
  }

  .saas-bg-primary {
    background: var(--saas-primary);
    color: var(--saas-on-primary);
  }

  .saas-bg-secondary {
    background: var(--saas-secondary);
    color: var(--saas-on-secondary);
  }

  .saas-border {
    border: 1px solid var(--saas-border);
  }

  .saas-rounded {
    border-radius: var(--saas-radius-md);
  }

  .saas-rounded-lg {
    border-radius: var(--saas-radius-lg);
  }

  .saas-rounded-xl {
    border-radius: var(--saas-radius-xl);
  }

  .saas-pill {
    border-radius: var(--saas-radius-pill);
  }

  .saas-sr-only, .saas-visually-hidden {
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
  }

  .saas-skip-link {
    z-index: 9999;
    background: var(--saas-primary);
    color: var(--saas-on-primary);
    border-radius: var(--saas-radius-md);
    padding: .75rem 1rem;
    font-weight: 900;
    position: absolute;
    top: 1rem;
    left: 1rem;
    transform: translateY(-150%);
  }

  .saas-skip-link:focus {
    transform: translateY(0);
  }

  .saas-metric {
    padding: var(--saas-space-5);
    background: var(--saas-surface);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    gap: .25rem;
    display: grid;
  }

  .saas-metric-value {
    color: var(--saas-text);
    letter-spacing: -.04em;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 850;
    line-height: 1;
  }

  .saas-metric-label {
    color: var(--saas-text-muted);
    font-size: .9rem;
    font-weight: 700;
  }

  .saas-empty-state {
    place-items: center;
    gap: var(--saas-space-3);
    min-height: 14rem;
    padding: var(--saas-space-6);
    text-align: center;
    background: var(--saas-surface-soft);
    border: 1px dashed var(--saas-border);
    border-radius: var(--saas-radius-lg);
    display: grid;
  }

  .saas-spinner, .saas-loading-spinner, [data-ui="minimal-saas"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .25rem solid var(--saas-spinner-track);
    border-block-start-color: var(--saas-spinner-stroke);
    border-inline-end-color: var(--saas-spinner-accent);
    vertical-align: -.2em;
    border-radius: 50%;
    block-size: 2rem;
    inline-size: 2rem;
    animation: .75s linear infinite saas-spin;
    display: inline-block;
  }

  .saas-spinner-sm {
    border-width: .16rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .saas-spinner-lg {
    border-width: .32rem;
    block-size: 3rem;
    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"]), :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, :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;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite saas-spin;
    display: inline-block;
  }

  @keyframes saas-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .saas-card-media {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid rgb(var(--saas-border-rgb)/.72);
    border-radius: var(--saas-radius-lg);
    inline-size: 100%;
    display: block;
  }

  .saas-card-service {
    gap: var(--saas-space-3);
    text-align: center;
    align-content: start;
    display: grid;
    position: relative;
    overflow: visible;
  }

  .saas-card-service > .saas-icon-medallion {
    z-index: 2;
    justify-self: center;
    margin-block-start: -2.15rem;
    position: relative;
  }

  .saas-card-service > .saas-card-media + .saas-icon-medallion {
    margin-block-start: -2.15rem;
  }

  .saas-card-feature {
    gap: var(--saas-space-4);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    display: grid;
  }

  .saas-card-accent-edge {
    border-inline-start: .35rem solid var(--saas-primary);
  }

  .saas-icon-medallion {
    background: var(--saas-primary);
    block-size: 3.75rem;
    inline-size: 3.75rem;
    color: var(--saas-on-primary);
    border: 2px solid rgb(var(--saas-border-rgb)/.82);
    border-radius: 50%;
    flex: none;
    place-items: center;
    padding: .7rem;
    line-height: 1;
    display: inline-grid;
  }

  .saas-icon-medallion > :where(svg, img) {
    object-fit: contain;
    block-size: 100%;
    inline-size: 100%;
  }

  .saas-button.saas-button-cut, .saas-button-cut, :where([data-ui="minimal-saas"]) .ui-button.saas-button-cut {
    clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
    border-radius: 0;
  }

  .saas-button.saas-button-cut:focus-visible, .saas-button-cut:focus-visible, :where([data-ui="minimal-saas"]) .ui-button.saas-button-cut:focus-visible {
    outline-offset: -3px;
  }

  .saas-button.saas-button-outline-heavy, .saas-button-outline-heavy, :where([data-ui="minimal-saas"]) .ui-button.saas-button-outline-heavy {
    color: var(--usk-primary-ink, var(--saas-primary));
    border-style: solid;
    border-width: 2px;
    border-color: var(--saas-primary);
    box-shadow: none;
    background: none;
  }

  .saas-button.saas-button-outline-heavy:hover, .saas-button-outline-heavy:hover, :where([data-ui="minimal-saas"]) .ui-button.saas-button-outline-heavy:hover {
    background: var(--saas-primary);
    color: var(--saas-on-primary);
    border-color: var(--saas-primary-hover);
  }

  .saas-badge-seal {
    aspect-ratio: 1;
    background: var(--saas-surface-strong);
    inline-size: 5rem;
    min-inline-size: 5rem;
    color: var(--saas-text);
    border: 2px solid var(--saas-primary);
    text-align: center;
    font-family: var(--saas-font-heading);
    letter-spacing: .04em;
    border-radius: 50%;
    align-content: center;
    place-items: center;
    padding: .65rem;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.05;
    display: inline-grid;
  }

  .saas-feature-strip {
    background: var(--saas-card-bg);
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    display: grid;
  }

  .saas-feature-item {
    align-items: center;
    gap: var(--saas-space-3);
    min-inline-size: 0;
    padding: var(--saas-space-4);
    border-inline-end: 1px solid rgb(var(--saas-border-rgb)/.62);
    grid-template-columns: auto minmax(0, 1fr);
    display: grid;
  }

  .saas-feature-item:last-child {
    border-inline-end: 0;
  }

  .saas-feature-item > :where(p, small) {
    color: var(--saas-text-muted);
    margin: 0;
  }

  .saas-callout-bar {
    align-items: center;
    gap: var(--saas-space-4);
    padding: var(--saas-space-4) var(--saas-space-5);
    background: var(--saas-card-bg);
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    grid-template-columns: auto minmax(0, 1fr) auto;
    display: grid;
  }

  .saas-callout-bar > :where(p, div) {
    min-inline-size: 0;
  }

  .saas-callout-bar > :where(.saas-button, a, button):last-child, :where([data-ui="minimal-saas"]) .saas-callout-bar>:where(.ui-button,a,button):last-child {
    justify-self: end;
  }

  .saas-eyebrow {
    color: var(--usk-primary-ink, var(--saas-primary));
    font-family: var(--saas-font-heading);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.2;
  }

  .saas-media-scrim {
    isolation: isolate;
    background: var(--saas-surface-soft);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    min-block-size: 12rem;
    position: relative;
    overflow: hidden;
  }

  .saas-media-scrim > :where(img, picture, video) {
    block-size: 100%;
    inline-size: 100%;
    min-block-size: inherit;
    object-fit: cover;
    display: block;
  }

  .saas-media-scrim > :where(figcaption, [data-media-caption]) {
    z-index: 1;
    color: #fff;
    background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
    padding: clamp(1rem, 4vw, 2rem);
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
  }

  .saas-media-scrim > :where(figcaption, [data-media-caption]) * {
    color: inherit;
  }

  @media (max-width: 42rem) {
    .saas-callout-bar {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .saas-callout-bar > :where(.saas-button, a, button):last-child, :where([data-ui="minimal-saas"]) .saas-callout-bar>:where(.ui-button,a,button):last-child {
      justify-self: stretch;
    }

    .saas-feature-item {
      border-inline-end: 0;
      border-block-end: 1px solid rgb(var(--saas-border-rgb)/.62);
    }

    .saas-feature-item:last-child {
      border-block-end: 0;
    }
  }

  .saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
    box-shadow: var(--saas-shadow-md);
  }

  .saas-card-accent-edge {
    border-inline-start-width: .16rem;
  }

  .saas-icon-medallion {
    background: var(--saas-surface-soft);
    color: var(--usk-primary-ink, var(--saas-primary));
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    box-shadow: var(--saas-shadow-sm);
  }

  .saas-button.saas-button-cut, .saas-button-cut, :where([data-ui="minimal-saas"]) .ui-button.saas-button-cut {
    min-height: 2.75rem;
    clip-path: polygon(0 0, calc(100% - .25rem) 0, 100% .25rem, 100% 100%, 0 100%);
    justify-content: center;
    justify-self: start;
    min-inline-size: 6rem;
    max-inline-size: 100%;
  }

  .saas-button.saas-button-outline-heavy, .saas-button-outline-heavy, :where([data-ui="minimal-saas"]) .ui-button.saas-button-outline-heavy {
    clip-path: polygon(0 0, calc(100% - .2rem) 0, 100% .2rem, 100% 100%, 0 100%);
    box-shadow: var(--saas-shadow-sm);
    border-width: 1px;
    border-radius: 0;
  }

  .saas-card-service, .saas-media-scrim, .saas-feature-strip, .saas-callout-bar, .saas-metric {
    border: 1px solid var(--saas-border);
    box-shadow: var(--saas-shadow-md);
  }

  [data-ui="minimal-saas"][data-mode] :where(fieldset, article, aside) {
    background: var(--saas-surface);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    box-shadow: none;
  }

  [data-ui="minimal-saas"][data-mode] :where(legend) {
    font-weight: 750;
  }

  [data-ui="minimal-saas"][data-mode] :where(label) {
    font-weight: 700;
  }

  [data-ui="minimal-saas"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
    min-block-size: var(--usk-native-control-min-block-size);
    background: var(--saas-control-bg);
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-md);
    box-shadow: var(--saas-shadow-sm);
    font-family: var(--saas-font-control);
    padding: .5rem .78rem;
    font-weight: 700;
  }

  [data-ui="minimal-saas"][data-mode] :where(dialog) {
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    box-shadow: 0 .75rem 2rem rgb(var(--saas-text-rgb)/.14);
  }

  .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 {
    border: .14em solid rgb(var(--saas-primary-text-rgb)/.38);
    box-shadow: none;
    clip-path: circle(50%);
    background: none;
    border-block-start-color: currentColor;
    border-radius: 50%;
    animation: .7s linear infinite saas-spin;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-ui="minimal-saas"] *, [data-ui="minimal-saas"] :before, [data-ui="minimal-saas"] :after {
      scroll-behavior: auto !important;
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  @media (prefers-contrast: more) {
    [data-ui="minimal-saas"] {
      --saas-border-alpha: 1;
      --saas-focus-alpha: .75;
    }
  }

  @media (forced-colors: active) {
    @supports (forced-color-adjust: auto) {
      [data-ui="minimal-saas"] * {
        forced-color-adjust: auto;
      }
    }

    [data-ui="minimal-saas"] :where(:focus-visible) {
      outline: 3px solid canvastext;
    }
  }

  @media print {
    [data-ui="minimal-saas"] {
      color: #000 !important;
      background: #fff !important;
    }

    [data-ui="minimal-saas"] * {
      box-shadow: none !important;
      text-shadow: none !important;
    }

    [data-ui="minimal-saas"] a {
      text-decoration: underline;
      color: #000 !important;
    }
  }

  .saas-input[aria-invalid="true"], .saas-textarea[aria-invalid="true"], .saas-select[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-input[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-textarea[aria-invalid="true"], :where([data-ui="minimal-saas"]) .ui-select[aria-invalid="true"] {
    border-color: var(--saas-danger);
    box-shadow: 0 0 0 2px rgb(var(--saas-danger-rgb)/.18);
  }

  .saas-input[readonly], .saas-textarea[readonly], :where([data-ui="minimal-saas"]) .ui-input[readonly], :where([data-ui="minimal-saas"]) .ui-textarea[readonly] {
    filter: saturate(.72);
    opacity: .78;
    border-style: dashed;
  }

  [data-ui="minimal-saas"][data-mode] {
    --usk-native-control-min-block-size: 2rem;
    --usk-native-control-padding-block: .38rem;
    --usk-native-control-padding-inline: .65rem;
    --usk-native-radius-sm: .1875rem;
    --usk-native-radius: .375rem;
    --usk-native-radius-lg: .5rem;
    --usk-native-shadow: 0 1px 2px rgb(var(--saas-text-rgb) / .06);
    --usk-native-shadow-md: 0 2px 6px rgb(var(--saas-text-rgb) / .08);
    --usk-native-focus-ring: 0 0 0 2px rgb(var(--saas-focus-rgb) / .3);
    --usk-native-subcontrol-padding-block: .32rem;
    --usk-native-subcontrol-padding-inline: .52rem;
    --usk-native-choice-size: .95rem;
    --usk-native-choice-background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
    --usk-native-choice-border: 1px solid rgb(var(--saas-border-rgb) / .9);
    --usk-native-checkbox-radius: .1875rem;
    --usk-native-choice-shadow: none;
    --usk-native-select-indicator-size: .31rem .31rem, .31rem .31rem;
    --usk-native-select-indicator-position: calc(100% - .92rem) 50%, calc(100% - .68rem) 50%;
    --usk-native-select-padding-inline-end: 2.1rem;
    --usk-native-range-track-size: .28rem;
    --usk-native-range-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
    --usk-native-range-track-border: 1px solid rgb(var(--saas-border-rgb) / .55);
    --usk-native-range-track-shadow: none;
    --usk-native-range-thumb-size: .9rem;
    --usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
    --usk-native-range-thumb-shadow: 0 1px 3px rgb(var(--saas-text-rgb) / .14);
    --usk-native-progress-size: .28rem;
    --usk-native-progress-track-background: rgb(var(--saas-surface-soft-rgb) / .82);
    --usk-native-progress-track-border: 1px solid rgb(var(--saas-border-rgb) / .5);
    --usk-native-progress-track-shadow: none;
    --usk-native-progress-value-shadow: none;
    --usk-native-scrollbar-size: .55rem;
    --usk-native-scrollbar-track: rgb(var(--saas-surface-soft-rgb) / .72);
    --usk-native-scrollbar-thumb: rgb(var(--saas-primary-rgb) / .72);
    --usk-native-scrollbar-radius: .125rem;
  }

  [data-ui="minimal-saas"][data-mode] :where(select:not([multiple])) {
    appearance: none;
  }

  [data-ui="minimal-saas"][data-mode] :where(select:not([multiple]))::picker-icon {
    display: none;
  }

  .saas-title {
    letter-spacing: -.02em;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
  }

  .saas-label, :where([data-ui="minimal-saas"]) .ui-label {
    font-size: .8125rem;
    font-weight: 650;
  }

  .saas-button, .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
    background: var(--saas-control-bg);
    min-height: 2.125rem;
    box-shadow: none;
    border-radius: .375rem;
    padding: .45rem .75rem;
    font-weight: 650;
  }

  .saas-icon-button, :where([data-ui="minimal-saas"]) .ui-icon-button {
    padding: 0;
  }

  .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 {
    min-height: 2rem;
    box-shadow: none;
    border-radius: .375rem;
    padding: .38rem .65rem;
  }

  .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: var(--saas-surface);
    border: 1px solid var(--saas-border);
    box-shadow: var(--saas-shadow-md);
    border-radius: .5rem;
  }

  .saas-card, .saas-panel, :where([data-ui="minimal-saas"]) .ui-card {
    padding: 1rem;
  }

  .saas-well, .saas-inset {
    background: rgb(var(--saas-surface-soft-rgb)/.72);
    border: 1px solid var(--saas-border);
    box-shadow: none;
    border-radius: .375rem;
    padding: .75rem;
  }

  .saas-badge, :where([data-ui="minimal-saas"]) .ui-badge {
    border-radius: .25rem;
    min-height: 1.35rem;
    padding: .18rem .45rem;
  }

  .saas-alert, :where([data-ui="minimal-saas"]) .ui-alert {
    background: var(--saas-surface);
    border: 1px solid var(--saas-border);
    border-inline-start: 1px solid var(--saas-primary);
    box-shadow: none;
    border-radius: .375rem;
  }

  .saas-progress, :where([data-ui="minimal-saas"]) .ui-progress {
    background: rgb(var(--saas-surface-soft-rgb)/.82);
    height: .3rem;
  }

  .saas-progress-bar, :where([data-ui="minimal-saas"]) .ui-progress-bar {
    background: var(--saas-primary);
    box-shadow: none;
  }

  .saas-table-wrap, :where([data-ui="minimal-saas"]) .ui-table-wrap {
    background: var(--saas-surface);
    box-shadow: none;
    border-radius: .5rem;
  }

  .saas-table th, :where([data-ui="minimal-saas"]) .ui-table th {
    background: rgb(var(--saas-surface-soft-rgb)/.58);
    padding: .6rem .7rem;
    font-weight: 650;
  }

  .saas-table td, :where([data-ui="minimal-saas"]) .ui-table td {
    padding: .6rem .7rem;
  }

  .saas-nav, :where([data-ui="minimal-saas"]) .ui-nav {
    border: 0;
    border-bottom: 1px solid var(--saas-border);
    box-shadow: none;
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .saas-nav-link, :where([data-ui="minimal-saas"]) .ui-nav-link {
    border-radius: .25rem;
    min-height: 2.125rem;
    padding: .4rem .62rem;
  }

  .saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    box-shadow: 0 2px 6px rgb(var(--saas-text-rgb)/.12);
    border-radius: .25rem;
  }

  .saas-card-service, .saas-card-feature, .saas-feature-strip, .saas-callout-bar {
    background: var(--saas-surface);
    box-shadow: none;
    border-radius: .5rem;
    padding: 1rem;
  }

  .saas-feature-item {
    padding: .75rem;
  }

  [data-ui="minimal-saas"][data-mode] :where(dialog) {
    background: var(--saas-surface);
    box-shadow: 0 .5rem 1.25rem rgb(var(--saas-text-rgb)/.12);
    border-radius: .5rem;
  }

  .saas-alert-success, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="success"]) {
    background: rgb(var(--saas-success-rgb)/.12);
    border-color: rgb(var(--saas-success-rgb)/.58);
  }

  .saas-alert-warning, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="warning"]) {
    background: rgb(var(--saas-warning-rgb)/.12);
    border-color: rgb(var(--saas-warning-rgb)/.58);
  }

  .saas-alert-danger, :where([data-ui="minimal-saas"]) .ui-alert:where([data-ui-variant="danger"]) {
    background: rgb(var(--saas-danger-rgb)/.12);
    border-color: rgb(var(--saas-danger-rgb)/.58);
  }

  .saas-button-primary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="primary"]) {
    background: linear-gradient(135deg,var(--saas-primary),var(--saas-brand-2));
    color: var(--saas-on-primary);
    border-color: var(--saas-primary);
  }

  .saas-button-secondary, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="secondary"]) {
    background: var(--saas-surface);
    color: var(--usk-primary-ink, var(--saas-primary));
    border-color: var(--saas-primary);
  }

  .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, :where([data-ui="minimal-saas"]) .ui-button:where([data-ui-variant="ghost"]) {
    color: var(--usk-primary-ink, var(--saas-primary));
    background: none;
    border-color: #0000;
  }

  @media (pointer: coarse) {
    [data-ui="minimal-saas"] :where(.saas-button, .saas-icon-button, .saas-input, .saas-select, .saas-nav-link), :where([data-ui="minimal-saas"]) :where(.ui-button,.ui-icon-button,.ui-input,.ui-select,.ui-nav-link) {
      min-block-size: 2.75rem;
    }
  }

  .saas-card-service > .saas-icon-medallion, .saas-feature-item > .saas-icon-medallion {
    font-size: 1.5rem;
    line-height: 1;
  }

  .saas-callout-bar > .saas-icon-medallion {
    min-block-size: 4.5rem;
    min-inline-size: 4.5rem;
    padding-block: .55rem .85rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
  }

  .saas-badge-seal > strong {
    font-size: 1.125rem;
    line-height: .9;
  }

  .saas-badge-seal > small {
    font-size: .78rem;
    line-height: 1;
  }

  [data-ui="minimal-saas"][data-mode] .saas-button.saas-button-warning, :where([data-ui="minimal-saas"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
    background: var(--saas-warning);
    color: var(--saas-on-warning);
    border-color: var(--saas-warning);
    text-shadow: none;
  }
}

[data-ui="minimal-saas"][data-mode] .saas-title {
  letter-spacing: max(.03em, .5px);
  margin-block: max(.75rem, 12px);
}

[data-ui="minimal-saas"][data-mode] .saas-feature-item > .saas-icon-medallion {
  font-size: 1.5rem;
  line-height: 1;
}

[data-ui="minimal-saas"][data-mode] .saas-callout-bar > .saas-icon-medallion {
  min-block-size: 4.5rem;
  min-inline-size: 4.5rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}