/*!
 * UI Style Kit CSS v2.1.0
 * 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 {
/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
: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: 148 104 31;
  --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: 138 100 31;
  --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: 113 103 84;
  --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: 73 125 23;
  --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: 73 125 23;
  --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;
}
}


/* 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-theme][data-mode] {
  --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: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
  --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-shadow: none;
  --usk-native-shadow-md: var(--usk-native-shadow);
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
}

[data-ui][data-theme][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;
  text-wrap: balance;
}

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

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

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

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

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

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

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

[data-ui][data-theme][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-theme][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 color-mix(in srgb, var(--usk-native-border) 62%, transparent);
  border-radius: var(--usk-native-radius-sm);
  font-family: var(--usk-native-font-mono);
  font-size: .92em;
}

[data-ui][data-theme][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-theme][data-mode] :where(pre code) {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}

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

[data-ui][data-theme][data-mode] :where(mark) {
  padding-inline: .15em;
  color: var(--usk-native-text);
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
  border-radius: .2em;
}

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

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

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

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

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

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

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

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

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

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

[data-ui][data-theme][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-theme][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-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), 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-theme][data-mode] :where(input, textarea, select, button) {
  color-scheme: inherit;
  accent-color: var(--usk-native-primary);
}

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

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

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

[data-ui][data-theme][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);
  padding: .7rem 1rem;
  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;
}

[data-ui][data-theme][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-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  accent-color: var(--usk-native-primary);
}

[data-ui][data-theme][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-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
  block-size: .45rem;
  background: var(--usk-native-track);
  border-radius: 999px;
}

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

[data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin-block-start: -.38rem;
  background: var(--usk-native-thumb);
  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
  border-radius: 999px;
  box-shadow: var(--usk-native-shadow);
}

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

[data-ui][data-theme][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-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
  padding: 0;
}

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

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

[data-ui][data-theme][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-theme][data-mode] :where(input[type="file"])::file-selector-button,
[data-ui][data-theme][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-primary);
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
  border-radius: var(--usk-native-radius-sm);
  font-weight: 800;
  cursor: pointer;
}

[data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
[data-ui][data-theme][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-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
[data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
  box-shadow: var(--usk-native-focus-ring);
}

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

[data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
[data-ui][data-theme][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-theme][data-mode] :where(input:read-only, textarea:read-only) {
  background: var(--usk-native-surface-soft);
}

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

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

[data-ui][data-theme][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-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
  accent-color: var(--usk-native-warning);
}

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

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

[data-ui][data-theme][data-mode] :where(table) {
  width: 100%;
  margin: 1rem 0;
  overflow: hidden;
  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-theme][data-mode] :where(caption) {
  caption-side: bottom;
  padding: .75rem;
  color: var(--usk-native-text-muted);
  font-size: .9rem;
}

[data-ui][data-theme][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-theme][data-mode] :where(th) {
  color: var(--usk-native-text);
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
}

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

[data-ui][data-theme][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-theme][data-mode] :where(summary) {
  color: var(--usk-native-text);
  font-weight: 900;
  cursor: pointer;
}

[data-ui][data-theme][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-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }

[data-ui][data-theme][data-mode] :where(progress, meter) {
  width: 100%;
  min-height: .9rem;
  accent-color: var(--usk-native-primary);
}

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

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

[data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
[data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
  background: var(--usk-native-track-fill);
  border-radius: 999px;
}

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

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

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

[data-ui][data-theme][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-theme][data-mode] :where(dl) {
  margin: 0 0 1rem;
  color: var(--usk-native-text-muted);
}

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

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

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

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

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

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

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

[data-ui][data-theme][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-theme][data-mode] :where(:target) {
  scroll-margin-top: 6rem;
  outline: 3px solid var(--usk-native-focus);
  outline-offset: .35rem;
}

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

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

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

  [data-ui][data-theme][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-theme][data-mode] :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  li,
  dt,
  dd,
  figcaption,
  blockquote,
  label,
  legend,
  summary,
  code,
  kbd,
  samp,
  pre,
  th,
  td
) {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

[data-ui][data-theme][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"]
) {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

[data-ui][data-theme][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"]
) {
  max-inline-size: 100%;
  min-inline-size: 0;
  white-space: normal;
}

[data-ui][data-theme][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
) {
  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-theme][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: anywhere;
  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-theme][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-theme][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-theme][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: anywhere;
}

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

[data-ui][data-theme][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-theme][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-theme][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-theme][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-theme][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 {
  color: var(--usk-native-primary);
  background: transparent;
  border-color: var(--usk-native-border);
}

.saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch {
  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 {
  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 {
  position: relative;
  display: inline-flex;
  align-items: center;
  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 {
  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 {
  background: var(--usk-native-track-fill);
}

.saas-switch:has(input:checked) .saas-switch-thumb,
.bento-switch:has(input:checked) .bento-switch-thumb,
.max-switch:has(input:checked) .max-switch-thumb,
.bau-switch:has(input:checked) .bau-switch-thumb,
.tactile-switch:has(input:checked) .tactile-switch-thumb,
.neo-switch:has(input:checked) .neo-switch-thumb,
.retro-switch:has(input:checked) .retro-switch-thumb,
.brutal-switch:has(input:checked) .brutal-switch-thumb,
.cyber-switch:has(input:checked) .cyber-switch-thumb,
.y2k-switch:has(input:checked) .y2k-switch-thumb,
.rg-switch:has(input:checked) .rg-switch-thumb {
  transform: translateX(1.25rem);
}

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


/* 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: .25rem;
    --saas-radius-sm: .5rem;
    --saas-radius-md: .75rem;
    --saas-radius-lg: 1.125rem;
    --saas-radius-xl: calc(1.125rem + .5rem);
    --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"] {
    color-scheme: light;
    --saas-panel-alpha: .98;
    --saas-panel-soft-alpha: .78;
    --saas-border-alpha: .58;
    --saas-shadow-alpha: .12;
    --saas-focus-alpha: .34;
  }

  [data-ui="minimal-saas"][data-mode="dark"] {
    color-scheme: dark;
    --saas-panel-alpha: .92;
    --saas-panel-soft-alpha: .64;
    --saas-border-alpha: .52;
    --saas-shadow-alpha: .34;
    --saas-focus-alpha: .42;
  }

  [data-ui="minimal-saas"][data-mode="contrast"] {
    color-scheme: dark;
    --saas-panel-alpha: 1;
    --saas-panel-soft-alpha: .92;
    --saas-border-alpha: 1;
    --saas-shadow-alpha: .5;
    --saas-focus-alpha: .72;
  }

  [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-success-rgb: var(--usk-success-rgb);
    --saas-warning-rgb: var(--usk-warning-rgb);
    --saas-danger-rgb: var(--usk-danger-rgb);
    --saas-link-rgb: var(--usk-link-rgb);
    --saas-accent-text-rgb: var(--usk-accent-text-rgb);
    --saas-success-text-rgb: var(--usk-success-text-rgb);
    --saas-warning-text-rgb: var(--usk-warning-text-rgb);
    --saas-danger-text-rgb: var(--usk-danger-text-rgb);
    --saas-focus-rgb: var(--usk-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-5);
    --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) / var(--saas-border-alpha));
    --saas-control-fg: var(--saas-text);
    --saas-primary: rgb(var(--saas-primary-rgb));
    --saas-primary-hover: 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-theme-bg-size: auto;
    --saas-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--saas-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--saas-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--saas-secondary-rgb) / .1), transparent 34rem), var(--saas-bg);
    --saas-card-bg: linear-gradient(135deg, rgb(var(--saas-primary-rgb) / .1), rgb(var(--saas-accent-rgb) / .055) 42%, rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)) 100%), var(--saas-surface);
    --saas-control-bg: linear-gradient(180deg, rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)), rgb(var(--saas-surface-soft-rgb) / var(--saas-panel-soft-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);
  }

  [data-ui="minimal-saas"] {
    background: linear-gradient(180deg,rgb(var(--saas-primary-rgb)/.04),transparent 22rem),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-theme][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 {
    font-family: var(--saas-font-heading);
  }

  .saas-title {
    color: var(--saas-text);
    letter-spacing: -.045em;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.02;
  }

  .saas-heading {
    color: var(--saas-text);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .saas-kicker {
    color: var(--saas-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
  }

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

  .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 {
    background: linear-gradient(180deg,#ffffff0d,#fff0),var(--saas-surface);
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    box-shadow: 0 10px 30px rgb(15 23 42 / var(--saas-shadow-alpha));
    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-card, .saas-panel {
    padding: var(--saas-space-6);
  }

  .saas-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: 0 6px 18px rgb(0 0 0 / calc(var(--saas-shadow-alpha)*.72));
  }

  .saas-surface-lg {
    border-radius: var(--saas-radius-xl);
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--saas-shadow-alpha) + .08));
  }

  .saas-well, .saas-inset {
    background: var(--saas-surface-soft);
    color: var(--saas-text);
    border: 1px solid rgb(var(--saas-border-rgb)/calc(var(--saas-border-alpha)*.7));
    border-radius: var(--saas-radius-md);
    padding: var(--saas-space-5);
    box-shadow: inset 0 1px 3px #00000014;
  }

  .saas-hover-lift:hover {
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--saas-shadow-alpha) + .12));
    transform: translateY(-2px);
  }

  .saas-button, .saas-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--saas-space-2);
    background: var(--saas-surface);
    min-height: 2.75rem;
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / var(--saas-shadow-alpha));
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-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: .75rem 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .saas-button:hover, .saas-icon-button:hover {
    border-color: var(--saas-primary);
    transform: translateY(-1px);
  }

  .saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 10px #0000002e;
  }

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

  .saas-button-primary:hover {
    background: var(--saas-primary-hover);
    border-color: var(--saas-primary-hover);
  }

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

  .saas-button-secondary:hover {
    background: var(--saas-secondary-hover);
    border-color: var(--saas-secondary-hover);
  }

  .saas-button-danger {
    background: var(--saas-danger);
    color: var(--saas-on-danger);
    border-color: var(--saas-danger);
  }

  .saas-button-ghost {
    color: var(--saas-text);
    box-shadow: none;
    background: none;
  }

  .saas-icon-button {
    border-radius: var(--saas-radius-pill);
    width: 2.75rem;
    padding: 0;
  }

  .saas-button:disabled, .saas-icon-button:disabled, .saas-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .saas-card, .saas-panel {
    background: var(--saas-card-bg);
  }

  .saas-toolbar, .saas-table-wrap, .saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-ghost), .saas-icon-button {
    background: var(--saas-control-bg);
  }

  .saas-button, .saas-icon-button, .saas-badge, .saas-nav-link {
    font-family: var(--saas-font-control);
  }

  .saas-field {
    gap: var(--saas-space-2);
    flex-direction: column;
    display: flex;
  }

  .saas-label {
    color: var(--saas-text);
    font-size: .925rem;
    font-weight: 800;
  }

  .saas-input, .saas-textarea, .saas-select {
    background: var(--saas-surface-soft);
    width: 100%;
    min-height: 2.875rem;
    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: .75rem 1rem;
  }

  .saas-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .saas-input::placeholder, .saas-textarea::placeholder {
    color: var(--saas-text-muted);
    opacity: .82;
  }

  .saas-input:hover, .saas-textarea:hover, .saas-select:hover {
    border-color: rgb(var(--saas-primary-rgb)/.58);
  }

  .saas-input:focus, .saas-textarea:focus, .saas-select:focus {
    border-color: var(--saas-focus);
    box-shadow: var(--saas-focus-ring);
  }

  .saas-help-text {
    color: var(--saas-text-muted);
    font-size: .875rem;
    line-height: 1.45;
  }

  .saas-check, .saas-radio {
    align-items: center;
    gap: var(--saas-space-2);
    color: var(--saas-text);
    cursor: pointer;
    display: inline-flex;
  }

  .saas-check input, .saas-radio input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .saas-check-control, .saas-radio-control {
    background: var(--saas-surface-soft);
    border: 1px solid var(--saas-border);
    width: 1.35rem;
    height: 1.35rem;
    transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .saas-check-control {
    border-radius: var(--saas-radius-xs);
  }

  .saas-radio-control {
    border-radius: 50%;
  }

  .saas-check input:checked + .saas-check-control, .saas-radio input:checked + .saas-radio-control {
    background: var(--saas-primary);
    border-color: var(--saas-primary);
    box-shadow: var(--saas-focus-ring);
  }

  .saas-check input:checked + .saas-check-control:after {
    content: "✓";
    color: var(--saas-on-primary);
    font-size: .9rem;
    font-weight: 900;
  }

  .saas-radio input:checked + .saas-radio-control:after {
    content: "";
    background: var(--saas-on-primary);
    border-radius: 50%;
    width: .55rem;
    height: .55rem;
  }

  .saas-switch {
    align-items: center;
    gap: var(--saas-space-3);
    color: var(--saas-text);
    cursor: pointer;
    display: inline-flex;
  }

  .saas-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .saas-switch-track {
    background: var(--saas-surface-soft);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-pill);
    width: 3.5rem;
    height: 1.9rem;
    transition: background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
    position: relative;
  }

  .saas-switch-thumb {
    background: var(--saas-surface-strong);
    border: 1px solid var(--saas-border);
    width: 1.34rem;
    height: 1.34rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--saas-shadow-alpha));
    transition: left var(--saas-transition-fast),background var(--saas-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .22rem;
    left: .22rem;
  }

  .saas-switch input:checked + .saas-switch-track {
    background: var(--saas-primary);
    border-color: var(--saas-primary);
  }

  .saas-switch input:checked + .saas-switch-track .saas-switch-thumb {
    background: var(--saas-on-primary);
    left: calc(100% - 1.56rem);
  }

  .saas-badge {
    align-items: center;
    gap: var(--saas-space-1);
    background: var(--saas-surface-soft);
    min-height: 1.75rem;
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-pill);
    padding: .35rem .7rem;
    font-size: .8125rem;
    font-weight: 850;
    line-height: 1;
    display: inline-flex;
  }

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

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

  .saas-badge-success {
    background: var(--saas-success);
    color: var(--saas-on-success);
    border-color: var(--saas-success);
  }

  .saas-badge-warning {
    background: var(--saas-warning);
    color: var(--saas-on-warning);
    border-color: var(--saas-warning);
  }

  .saas-badge-danger {
    background: var(--saas-danger);
    color: var(--saas-on-danger);
    border-color: var(--saas-danger);
  }

  .saas-nav {
    align-items: center;
    gap: var(--saas-space-2);
    padding: var(--saas-space-2);
    background: var(--saas-surface);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-xl);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--saas-shadow-alpha));
    flex-wrap: wrap;
    display: flex;
  }

  .saas-nav-link {
    min-height: 2.5rem;
    color: var(--saas-text-muted);
    border-radius: var(--saas-radius-pill);
    transition: color var(--saas-transition-fast),background var(--saas-transition-fast),box-shadow var(--saas-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
  }

  .saas-nav-link:hover {
    color: var(--saas-text);
    background: var(--saas-surface-soft);
  }

  .saas-nav-link[aria-current="page"], .saas-nav-link.is-active {
    color: var(--saas-on-primary);
    background: var(--saas-primary);
  }

  .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 {
    background: var(--saas-surface-soft);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
  }

  .saas-progress-bar {
    height: 100%;
    width: var(--saas-progress-value, 50%);
    background: linear-gradient(90deg,var(--saas-primary),var(--saas-accent));
    border-radius: inherit;
  }

  .saas-alert {
    gap: var(--saas-space-2);
    padding: var(--saas-space-4);
    background: var(--saas-surface);
    color: var(--saas-text);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-lg);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--saas-shadow-alpha));
    display: grid;
  }

  .saas-alert-success {
    border-left-color: var(--saas-success);
  }

  .saas-alert-warning {
    border-left-color: var(--saas-warning);
  }

  .saas-alert-danger {
    border-left-color: var(--saas-danger);
  }

  .saas-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .saas-alert-body {
    color: var(--saas-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .saas-table-wrap {
    overflow: auto;
  }

  .saas-table {
    border-collapse: collapse;
    width: 100%;
  }

  .saas-table th, .saas-table td {
    text-align: left;
    border-bottom: 1px solid var(--saas-border);
    padding: .95rem 1rem;
  }

  .saas-table th {
    color: var(--saas-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgb(var(--saas-primary-rgb)/.08);
    font-size: .82rem;
    font-weight: 900;
  }

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

  .saas-table tr:hover td {
    background: rgb(var(--saas-primary-rgb)/.045);
  }

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

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

  .saas-text-accent {
    color: 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"]) {
    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 {
    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);
    }
  }

  @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) {
    [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;
    }
  }
}


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

  [data-ui="bento"][data-mode="light"] {
    color-scheme: light;
    --bento-panel-alpha: .98;
    --bento-panel-soft-alpha: .78;
    --bento-border-alpha: .58;
    --bento-shadow-alpha: .12;
    --bento-focus-alpha: .34;
  }

  [data-ui="bento"][data-mode="dark"] {
    color-scheme: dark;
    --bento-panel-alpha: .92;
    --bento-panel-soft-alpha: .64;
    --bento-border-alpha: .52;
    --bento-shadow-alpha: .34;
    --bento-focus-alpha: .42;
  }

  [data-ui="bento"][data-mode="contrast"] {
    color-scheme: dark;
    --bento-panel-alpha: 1;
    --bento-panel-soft-alpha: .92;
    --bento-border-alpha: 1;
    --bento-shadow-alpha: .5;
    --bento-focus-alpha: .72;
  }

  [data-ui="bento"][data-theme][data-mode] {
    --bento-bg-rgb: var(--usk-bg-rgb);
    --bento-surface-rgb: var(--usk-surface-rgb);
    --bento-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --bento-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --bento-text-rgb: var(--usk-text-rgb);
    --bento-text-muted-rgb: var(--usk-text-muted-rgb);
    --bento-border-rgb: var(--usk-border-rgb);
    --bento-primary-rgb: var(--usk-primary-rgb);
    --bento-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --bento-primary-text-rgb: var(--usk-primary-text-rgb);
    --bento-secondary-rgb: var(--usk-secondary-rgb);
    --bento-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --bento-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --bento-accent-rgb: var(--usk-accent-rgb);
    --bento-success-rgb: var(--usk-success-rgb);
    --bento-warning-rgb: var(--usk-warning-rgb);
    --bento-danger-rgb: var(--usk-danger-rgb);
    --bento-link-rgb: var(--usk-link-rgb);
    --bento-accent-text-rgb: var(--usk-accent-text-rgb);
    --bento-success-text-rgb: var(--usk-success-text-rgb);
    --bento-warning-text-rgb: var(--usk-warning-text-rgb);
    --bento-danger-text-rgb: var(--usk-danger-text-rgb);
    --bento-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--bento-surface);
    --usk-native-surface-strong: var(--bento-surface-strong);
    --usk-native-surface-soft: var(--bento-surface-soft);
    --usk-native-card-bg: var(--bento-card-bg);
    --usk-native-control-bg: var(--bento-control-bg);
    --usk-native-text: var(--bento-text);
    --usk-native-text-muted: var(--bento-text-muted);
    --usk-native-border: var(--bento-border);
    --usk-native-primary: var(--bento-primary);
    --usk-native-primary-hover: var(--bento-primary-hover);
    --usk-native-on-primary: var(--bento-on-primary);
    --usk-native-focus: var(--bento-focus);
    --usk-native-success: var(--bento-success);
    --usk-native-warning: var(--bento-warning);
    --usk-native-danger: var(--bento-danger);
    --usk-native-link: var(--bento-link);
    --usk-native-font-body: var(--bento-font-body);
    --usk-native-font-heading: var(--bento-font-heading);
    --usk-native-font-control: var(--bento-font-control);
    --usk-native-font-mono: var(--bento-font-mono);
    --usk-native-radius-sm: var(--bento-radius-sm);
    --usk-native-radius: var(--bento-radius-md);
    --usk-native-radius-lg: var(--bento-radius-lg);
    --usk-native-shadow: var(--bento-shadow-sm, none);
    --usk-native-shadow-md: var(--bento-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--bento-focus-ring, 0 0 0 3px rgb(var(--bento-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--bento-space-5);
    --bento-bg: rgb(var(--bento-bg-rgb));
    --bento-surface: rgb(var(--bento-surface-rgb) / var(--bento-panel-alpha));
    --bento-surface-strong: rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha));
    --bento-surface-soft: rgb(var(--bento-surface-soft-rgb) / var(--bento-panel-soft-alpha));
    --bento-text: rgb(var(--bento-text-rgb));
    --bento-text-muted: rgb(var(--bento-text-muted-rgb));
    --bento-fg: var(--bento-text);
    --bento-surface-fg: var(--bento-text);
    --bento-muted: var(--bento-text-muted);
    --bento-border: rgb(var(--bento-border-rgb) / var(--bento-border-alpha));
    --bento-control-fg: var(--bento-text);
    --bento-primary: rgb(var(--bento-primary-rgb));
    --bento-primary-hover: rgb(var(--bento-primary-hover-rgb));
    --bento-primary-text: rgb(var(--bento-primary-text-rgb));
    --bento-secondary: rgb(var(--bento-secondary-rgb));
    --bento-secondary-hover: rgb(var(--bento-secondary-hover-rgb));
    --bento-secondary-text: rgb(var(--bento-secondary-text-rgb));
    --bento-on-primary: var(--bento-primary-text);
    --bento-on-secondary: var(--bento-secondary-text);
    --bento-on-accent: rgb(var(--bento-accent-text-rgb));
    --bento-on-success: rgb(var(--bento-success-text-rgb));
    --bento-on-warning: rgb(var(--bento-warning-text-rgb));
    --bento-on-danger: rgb(var(--bento-danger-text-rgb));
    --bento-accent: rgb(var(--bento-accent-rgb));
    --bento-success: rgb(var(--bento-success-rgb));
    --bento-warning: rgb(var(--bento-warning-rgb));
    --bento-danger: rgb(var(--bento-danger-rgb));
    --bento-link: rgb(var(--bento-link-rgb));
    --bento-focus: rgb(var(--bento-focus-rgb));
    --bento-focus-ring: 0 0 0 3px rgb(var(--bento-focus-rgb) / var(--bento-focus-alpha));
    --bento-theme-bg-size: auto;
    --bento-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--bento-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--bento-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--bento-secondary-rgb) / .1), transparent 34rem), var(--bento-bg);
    --bento-card-bg: linear-gradient(135deg, rgb(var(--bento-primary-rgb) / .1), rgb(var(--bento-accent-rgb) / .055) 42%, rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha)) 100%), var(--bento-surface);
    --bento-control-bg: linear-gradient(180deg, rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha)), rgb(var(--bento-surface-soft-rgb) / var(--bento-panel-soft-alpha)));
    --bento-spinner-track: rgb(var(--bento-border-rgb) / max(.28, calc(var(--bento-border-alpha) * .7)));
    --bento-spinner-stroke: var(--bento-primary);
    --bento-spinner-accent: var(--bento-accent);
  }

  [data-ui="bento"] {
    background: radial-gradient(circle at 20% 5%,rgb(var(--bento-accent-rgb)/.18),transparent 26rem),radial-gradient(circle at 85% 0%,rgb(var(--bento-secondary-rgb)/.12),transparent 24rem),var(--bento-bg);
    color: var(--bento-text);
    font-family: var(--bento-font-body);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }

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

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

  .bento-title, .bento-heading, .bento-kicker, .bento-button, .bento-badge, .bento-nav-link {
    font-family: var(--bento-font-heading);
  }

  .bento-title {
    color: var(--bento-text);
    letter-spacing: -.055em;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.02;
  }

  .bento-heading {
    color: var(--bento-text);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .bento-kicker {
    color: var(--bento-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
  }

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

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

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

  .bento-surface, .bento-card, .bento-panel, .bento-toolbar, .bento-table-wrap {
    background: linear-gradient(135deg,rgb(var(--bento-primary-rgb)/.08),transparent 36%),linear-gradient(180deg,#ffffff14,#fff0),var(--bento-surface);
    color: var(--bento-text);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-lg);
    box-shadow: 0 16px 40px rgb(0 0 0 / var(--bento-shadow-alpha));
    transition: transform var(--bento-transition-base),box-shadow var(--bento-transition-base),border-color var(--bento-transition-base),background var(--bento-transition-base);
    position: relative;
  }

  .bento-card, .bento-panel {
    padding: var(--bento-space-6);
  }

  .bento-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--bento-space-4);
    padding: var(--bento-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .bento-surface-sm {
    border-radius: var(--bento-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--bento-shadow-alpha)*.72));
  }

  .bento-surface-lg {
    border-radius: var(--bento-radius-xl);
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bento-shadow-alpha) + .08));
  }

  .bento-well, .bento-inset {
    background: var(--bento-surface-soft);
    color: var(--bento-text);
    border: 1px solid rgb(var(--bento-border-rgb)/calc(var(--bento-border-alpha)*.7));
    border-radius: var(--bento-radius-md);
    padding: var(--bento-space-5);
    box-shadow: inset 0 1px 3px #00000014;
  }

  .bento-hover-lift:hover {
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bento-shadow-alpha) + .12));
    transform: translateY(-3px) scale(1.005);
  }

  .bento-button, .bento-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--bento-space-2);
    background: var(--bento-surface);
    min-height: 2.75rem;
    color: var(--bento-text);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / var(--bento-shadow-alpha));
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: color var(--bento-transition-fast),background var(--bento-transition-fast),border-color var(--bento-transition-fast),box-shadow var(--bento-transition-fast),transform var(--bento-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .bento-button:hover, .bento-icon-button:hover {
    border-color: var(--bento-primary);
    transform: translateY(-1px);
  }

  .bento-button:active, .bento-icon-button:active, .bento-button[aria-pressed="true"], .bento-icon-button[aria-pressed="true"], .bento-button.is-active, .bento-icon-button.is-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 10px #0000002e;
  }

  .bento-button-primary {
    background: var(--bento-primary);
    color: var(--bento-on-primary);
    border-color: var(--bento-primary);
  }

  .bento-button-primary:hover {
    background: var(--bento-primary-hover);
    border-color: var(--bento-primary-hover);
  }

  .bento-button-secondary {
    background: var(--bento-secondary);
    color: var(--bento-on-secondary);
    border-color: var(--bento-secondary);
  }

  .bento-button-secondary:hover {
    background: var(--bento-secondary-hover);
    border-color: var(--bento-secondary-hover);
  }

  .bento-button-danger {
    background: var(--bento-danger);
    color: var(--bento-on-danger);
    border-color: var(--bento-danger);
  }

  .bento-button-ghost {
    color: var(--bento-text);
    box-shadow: none;
    background: none;
  }

  .bento-icon-button {
    border-radius: var(--bento-radius-pill);
    width: 2.75rem;
    padding: 0;
  }

  .bento-button:disabled, .bento-icon-button:disabled, .bento-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .bento-card, .bento-panel {
    background: var(--bento-card-bg);
  }

  .bento-toolbar, .bento-table-wrap, .bento-button:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-ghost), .bento-icon-button {
    background: var(--bento-control-bg);
  }

  .bento-button, .bento-icon-button, .bento-badge, .bento-nav-link {
    font-family: var(--bento-font-control);
  }

  .bento-field {
    gap: var(--bento-space-2);
    flex-direction: column;
    display: flex;
  }

  .bento-label {
    color: var(--bento-text);
    font-size: .925rem;
    font-weight: 800;
  }

  .bento-input, .bento-textarea, .bento-select {
    background: var(--bento-surface-soft);
    width: 100%;
    min-height: 2.875rem;
    color: var(--bento-text);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-md);
    font: inherit;
    transition: background var(--bento-transition-fast),border-color var(--bento-transition-fast),box-shadow var(--bento-transition-fast);
    outline: none;
    padding: .75rem 1rem;
  }

  .bento-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .bento-input::placeholder, .bento-textarea::placeholder {
    color: var(--bento-text-muted);
    opacity: .82;
  }

  .bento-input:hover, .bento-textarea:hover, .bento-select:hover {
    border-color: rgb(var(--bento-primary-rgb)/.58);
  }

  .bento-input:focus, .bento-textarea:focus, .bento-select:focus {
    border-color: var(--bento-focus);
    box-shadow: var(--bento-focus-ring);
  }

  .bento-help-text {
    color: var(--bento-text-muted);
    font-size: .875rem;
    line-height: 1.45;
  }

  .bento-check, .bento-radio {
    align-items: center;
    gap: var(--bento-space-2);
    color: var(--bento-text);
    cursor: pointer;
    display: inline-flex;
  }

  .bento-check input, .bento-radio input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .bento-check-control, .bento-radio-control {
    background: var(--bento-surface-soft);
    border: 1px solid var(--bento-border);
    width: 1.35rem;
    height: 1.35rem;
    transition: background var(--bento-transition-fast),box-shadow var(--bento-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .bento-check-control {
    border-radius: var(--bento-radius-xs);
  }

  .bento-radio-control {
    border-radius: 50%;
  }

  .bento-check input:checked + .bento-check-control, .bento-radio input:checked + .bento-radio-control {
    background: var(--bento-primary);
    border-color: var(--bento-primary);
    box-shadow: var(--bento-focus-ring);
  }

  .bento-check input:checked + .bento-check-control:after {
    content: "✓";
    color: var(--bento-on-primary);
    font-size: .9rem;
    font-weight: 900;
  }

  .bento-radio input:checked + .bento-radio-control:after {
    content: "";
    background: var(--bento-on-primary);
    border-radius: 50%;
    width: .55rem;
    height: .55rem;
  }

  .bento-switch {
    align-items: center;
    gap: var(--bento-space-3);
    color: var(--bento-text);
    cursor: pointer;
    display: inline-flex;
  }

  .bento-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .bento-switch-track {
    background: var(--bento-surface-soft);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-pill);
    width: 3.5rem;
    height: 1.9rem;
    transition: background var(--bento-transition-fast),box-shadow var(--bento-transition-fast);
    position: relative;
  }

  .bento-switch-thumb {
    background: var(--bento-surface-strong);
    border: 1px solid var(--bento-border);
    width: 1.34rem;
    height: 1.34rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--bento-shadow-alpha));
    transition: left var(--bento-transition-fast),background var(--bento-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .22rem;
    left: .22rem;
  }

  .bento-switch input:checked + .bento-switch-track {
    background: var(--bento-primary);
    border-color: var(--bento-primary);
  }

  .bento-switch input:checked + .bento-switch-track .bento-switch-thumb {
    background: var(--bento-on-primary);
    left: calc(100% - 1.56rem);
  }

  .bento-badge {
    align-items: center;
    gap: var(--bento-space-1);
    background: var(--bento-surface-soft);
    min-height: 1.75rem;
    color: var(--bento-text);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-pill);
    padding: .35rem .7rem;
    font-size: .8125rem;
    font-weight: 850;
    line-height: 1;
    display: inline-flex;
  }

  .bento-badge-primary {
    background: var(--bento-primary);
    color: var(--bento-on-primary);
    border-color: var(--bento-primary);
  }

  .bento-badge-secondary {
    background: var(--bento-secondary);
    color: var(--bento-on-secondary);
    border-color: var(--bento-secondary);
  }

  .bento-badge-success {
    background: var(--bento-success);
    color: var(--bento-on-success);
    border-color: var(--bento-success);
  }

  .bento-badge-warning {
    background: var(--bento-warning);
    color: var(--bento-on-warning);
    border-color: var(--bento-warning);
  }

  .bento-badge-danger {
    background: var(--bento-danger);
    color: var(--bento-on-danger);
    border-color: var(--bento-danger);
  }

  .bento-nav {
    align-items: center;
    gap: var(--bento-space-2);
    padding: var(--bento-space-2);
    background: var(--bento-surface);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-xl);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--bento-shadow-alpha));
    flex-wrap: wrap;
    display: flex;
  }

  .bento-nav-link {
    min-height: 2.5rem;
    color: var(--bento-text-muted);
    border-radius: var(--bento-radius-pill);
    transition: color var(--bento-transition-fast),background var(--bento-transition-fast),box-shadow var(--bento-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
  }

  .bento-nav-link:hover {
    color: var(--bento-text);
    background: var(--bento-surface-soft);
  }

  .bento-nav-link[aria-current="page"], .bento-nav-link.is-active {
    color: var(--bento-on-primary);
    background: var(--bento-primary);
  }

  .bento-tooltip, [data-ui="bento"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: linear-gradient(135deg,rgb(var(--bento-primary-rgb)/.18),transparent 52%),var(--bento-surface-strong);
    max-inline-size: 16rem;
    color: var(--bento-text);
    border: 1px solid rgb(var(--bento-border-rgb)/.7);
    border-radius: var(--bento-radius-sm);
    box-shadow: 0 .65rem 1.35rem rgb(0 0 0 / var(--bento-shadow-alpha));
    align-items: center;
    gap: .45rem;
    padding: .6rem .8rem;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.35;
    display: inline-flex;
  }

  .bento-tooltip-arrow {
    background: var(--bento-primary);
    border-radius: var(--bento-radius-xs);
    flex: none;
    block-size: .6rem;
    inline-size: .6rem;
    transform: rotate(45deg);
  }

  .bento-progress {
    background: var(--bento-surface-soft);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
  }

  .bento-progress-bar {
    height: 100%;
    width: var(--bento-progress-value, 50%);
    background: linear-gradient(90deg,var(--bento-primary),var(--bento-accent));
    border-radius: inherit;
  }

  .bento-alert {
    gap: var(--bento-space-2);
    padding: var(--bento-space-4);
    background: var(--bento-surface);
    color: var(--bento-text);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-lg);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--bento-shadow-alpha));
    display: grid;
  }

  .bento-alert-success {
    border-left-color: var(--bento-success);
  }

  .bento-alert-warning {
    border-left-color: var(--bento-warning);
  }

  .bento-alert-danger {
    border-left-color: var(--bento-danger);
  }

  .bento-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .bento-alert-body {
    color: var(--bento-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .bento-table-wrap {
    overflow: auto;
  }

  .bento-table {
    border-collapse: collapse;
    width: 100%;
  }

  .bento-table th, .bento-table td {
    text-align: left;
    border-bottom: 1px solid var(--bento-border);
    padding: .95rem 1rem;
  }

  .bento-table th {
    color: var(--bento-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgb(var(--bento-primary-rgb)/.08);
    font-size: .82rem;
    font-weight: 900;
  }

  .bento-table td {
    color: var(--bento-text-muted);
  }

  .bento-table tr:hover td {
    background: rgb(var(--bento-primary-rgb)/.045);
  }

  .bento-text-primary {
    color: var(--bento-primary);
  }

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

  .bento-text-accent {
    color: var(--bento-accent);
  }

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

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

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

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

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

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

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

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

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

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

  .bento-sr-only, .bento-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;
  }

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

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

  .bento-grid-feature {
    gap: var(--bento-space-5);
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(8rem, auto);
    display: grid;
  }

  .bento-tile {
    min-height: 12rem;
    padding: var(--bento-space-6);
    background: linear-gradient(135deg,rgb(var(--bento-primary-rgb)/.1),transparent 48%),var(--bento-surface);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius-xl);
    box-shadow: 0 16px 40px rgb(0 0 0 / var(--bento-shadow-alpha));
  }

  .bento-tile-lg {
    grid-area: span 2 / span 4;
  }

  .bento-tile-md {
    grid-column: span 3;
  }

  .bento-tile-sm {
    grid-column: span 2;
  }

  .bento-stat {
    gap: .25rem;
    display: grid;
  }

  .bento-stat-value {
    color: var(--bento-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 950;
    line-height: 1;
  }

  .bento-stat-label {
    color: var(--bento-text-muted);
    font-weight: 750;
  }

  @media (width <= 760px) {
    .bento-grid-feature {
      grid-template-columns: 1fr;
    }

    .bento-tile-lg, .bento-tile-md, .bento-tile-sm {
      grid-area: auto;
    }
  }

  .bento-spinner, .bento-loading-spinner, [data-ui="bento"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .18rem solid rgb(var(--bento-border-rgb)/.44);
    border-block-start-color: var(--bento-spinner-stroke);
    border-inline-end-color: var(--bento-spinner-accent);
    border-radius: var(--bento-radius-md);
    background: conic-gradient(from 0deg,var(--bento-spinner-stroke),var(--bento-spinner-accent),transparent 58%,var(--bento-spinner-track));
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: inset 0 0 0 .28rem var(--bento-surface),0 .5rem 1.15rem rgb(0 0 0 / var(--bento-shadow-alpha));
    vertical-align: -.2em;
    animation: .9s steps(4, end) infinite bento-spin;
    display: inline-block;
  }

  .bento-spinner-sm {
    border-width: .12rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .bento-spinner-lg {
    border-width: .24rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .bento-button[aria-busy="true"], .bento-icon-button[aria-busy="true"], [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .bento-button[aria-busy="true"]:after, .bento-icon-button[aria-busy="true"]:after, [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--bento-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite bento-spin;
    display: inline-block;
  }

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

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

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

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

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

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

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

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


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

  [data-ui="maximalist"][data-mode="light"] {
    color-scheme: light;
    --max-panel-alpha: .98;
    --max-panel-soft-alpha: .78;
    --max-border-alpha: .58;
    --max-shadow-alpha: .12;
    --max-focus-alpha: .34;
  }

  [data-ui="maximalist"][data-mode="dark"] {
    color-scheme: dark;
    --max-panel-alpha: .92;
    --max-panel-soft-alpha: .64;
    --max-border-alpha: .52;
    --max-shadow-alpha: .34;
    --max-focus-alpha: .42;
  }

  [data-ui="maximalist"][data-mode="contrast"] {
    color-scheme: dark;
    --max-panel-alpha: 1;
    --max-panel-soft-alpha: .92;
    --max-border-alpha: 1;
    --max-shadow-alpha: .5;
    --max-focus-alpha: .72;
  }

  [data-ui="maximalist"][data-theme][data-mode] {
    --max-bg-rgb: var(--usk-bg-rgb);
    --max-surface-rgb: var(--usk-surface-rgb);
    --max-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --max-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --max-text-rgb: var(--usk-text-rgb);
    --max-text-muted-rgb: var(--usk-text-muted-rgb);
    --max-border-rgb: var(--usk-border-rgb);
    --max-primary-rgb: var(--usk-primary-rgb);
    --max-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --max-primary-text-rgb: var(--usk-primary-text-rgb);
    --max-secondary-rgb: var(--usk-secondary-rgb);
    --max-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --max-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --max-accent-rgb: var(--usk-accent-rgb);
    --max-success-rgb: var(--usk-success-rgb);
    --max-warning-rgb: var(--usk-warning-rgb);
    --max-danger-rgb: var(--usk-danger-rgb);
    --max-link-rgb: var(--usk-link-rgb);
    --max-accent-text-rgb: var(--usk-accent-text-rgb);
    --max-success-text-rgb: var(--usk-success-text-rgb);
    --max-warning-text-rgb: var(--usk-warning-text-rgb);
    --max-danger-text-rgb: var(--usk-danger-text-rgb);
    --max-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--max-surface);
    --usk-native-surface-strong: var(--max-surface-strong);
    --usk-native-surface-soft: var(--max-surface-soft);
    --usk-native-card-bg: var(--max-card-bg);
    --usk-native-control-bg: var(--max-control-bg);
    --usk-native-text: var(--max-text);
    --usk-native-text-muted: var(--max-text-muted);
    --usk-native-border: var(--max-border);
    --usk-native-primary: var(--max-primary);
    --usk-native-primary-hover: var(--max-primary-hover);
    --usk-native-on-primary: var(--max-on-primary);
    --usk-native-focus: var(--max-focus);
    --usk-native-success: var(--max-success);
    --usk-native-warning: var(--max-warning);
    --usk-native-danger: var(--max-danger);
    --usk-native-link: var(--max-link);
    --usk-native-font-body: var(--max-font-body);
    --usk-native-font-heading: var(--max-font-heading);
    --usk-native-font-control: var(--max-font-control);
    --usk-native-font-mono: var(--max-font-mono);
    --usk-native-radius-sm: var(--max-radius-sm);
    --usk-native-radius: var(--max-radius-md);
    --usk-native-radius-lg: var(--max-radius-lg);
    --usk-native-shadow: var(--max-shadow-sm, none);
    --usk-native-shadow-md: var(--max-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--max-focus-ring, 0 0 0 3px rgb(var(--max-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--max-space-5);
    --max-bg: rgb(var(--max-bg-rgb));
    --max-surface: rgb(var(--max-surface-rgb) / var(--max-panel-alpha));
    --max-surface-strong: rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha));
    --max-surface-soft: rgb(var(--max-surface-soft-rgb) / var(--max-panel-soft-alpha));
    --max-text: rgb(var(--max-text-rgb));
    --max-text-muted: rgb(var(--max-text-muted-rgb));
    --max-fg: var(--max-text);
    --max-surface-fg: var(--max-text);
    --max-muted: var(--max-text-muted);
    --max-border: rgb(var(--max-border-rgb) / var(--max-border-alpha));
    --max-control-fg: var(--max-text);
    --max-primary: rgb(var(--max-primary-rgb));
    --max-primary-hover: rgb(var(--max-primary-hover-rgb));
    --max-primary-text: rgb(var(--max-primary-text-rgb));
    --max-secondary: rgb(var(--max-secondary-rgb));
    --max-secondary-hover: rgb(var(--max-secondary-hover-rgb));
    --max-secondary-text: rgb(var(--max-secondary-text-rgb));
    --max-on-primary: var(--max-primary-text);
    --max-on-secondary: var(--max-secondary-text);
    --max-on-accent: rgb(var(--max-accent-text-rgb));
    --max-on-success: rgb(var(--max-success-text-rgb));
    --max-on-warning: rgb(var(--max-warning-text-rgb));
    --max-on-danger: rgb(var(--max-danger-text-rgb));
    --max-accent: rgb(var(--max-accent-rgb));
    --max-success: rgb(var(--max-success-rgb));
    --max-warning: rgb(var(--max-warning-rgb));
    --max-danger: rgb(var(--max-danger-rgb));
    --max-link: rgb(var(--max-link-rgb));
    --max-focus: rgb(var(--max-focus-rgb));
    --max-focus-ring: 0 0 0 3px rgb(var(--max-focus-rgb) / var(--max-focus-alpha));
    --max-theme-bg-size: auto;
    --max-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--max-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--max-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--max-secondary-rgb) / .1), transparent 34rem), var(--max-bg);
    --max-card-bg: linear-gradient(135deg, rgb(var(--max-primary-rgb) / .1), rgb(var(--max-accent-rgb) / .055) 42%, rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha)) 100%), var(--max-surface);
    --max-control-bg: linear-gradient(180deg, rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha)), rgb(var(--max-surface-soft-rgb) / var(--max-panel-soft-alpha)));
    --max-spinner-track: rgb(var(--max-border-rgb) / max(.28, calc(var(--max-border-alpha) * .7)));
    --max-spinner-stroke: var(--max-primary);
    --max-spinner-accent: var(--max-accent);
  }

  [data-ui="maximalist"] {
    background: radial-gradient(circle at 10% 10%,rgb(var(--max-primary-rgb)/.18),transparent 20rem),radial-gradient(circle at 90% 0%,rgb(var(--max-secondary-rgb)/.2),transparent 22rem),var(--max-bg);
    color: var(--max-text);
    font-family: var(--max-font-body);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }

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

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

  .max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link {
    font-family: var(--max-font-heading);
  }

  .max-title {
    color: var(--max-text);
    letter-spacing: -.04em;
    text-wrap: balance;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.02;
  }

  .max-heading {
    color: var(--max-text);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .max-kicker {
    color: var(--max-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
  }

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

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

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

  .max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap {
    background: linear-gradient(135deg,rgb(var(--max-accent-rgb)/.18),transparent 42%),var(--max-surface);
    color: var(--max-text);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-lg);
    box-shadow: 8px 8px 0 rgb(var(--max-border-rgb)/.86);
    transition: transform var(--max-transition-base),box-shadow var(--max-transition-base),border-color var(--max-transition-base),background var(--max-transition-base);
    position: relative;
  }

  .max-card, .max-panel {
    padding: var(--max-space-6);
  }

  .max-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--max-space-4);
    padding: var(--max-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .max-surface-sm {
    border-radius: var(--max-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--max-shadow-alpha)*.72));
  }

  .max-surface-lg {
    border-radius: var(--max-radius-xl);
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--max-shadow-alpha) + .08));
  }

  .max-well, .max-inset {
    background: var(--max-surface-soft);
    color: var(--max-text);
    border: 3px solid rgb(var(--max-border-rgb)/calc(var(--max-border-alpha)*.7));
    border-radius: var(--max-radius-md);
    padding: var(--max-space-5);
    box-shadow: inset 0 1px 3px #00000014;
  }

  .max-hover-lift:hover {
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--max-shadow-alpha) + .12));
    transform: translate(-2px, -2px);
  }

  .max-button, .max-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--max-space-2);
    background: var(--max-surface);
    min-height: 2.75rem;
    color: var(--max-text);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / var(--max-shadow-alpha));
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: color var(--max-transition-fast),background var(--max-transition-fast),border-color var(--max-transition-fast),box-shadow var(--max-transition-fast),transform var(--max-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .max-button:hover, .max-icon-button:hover {
    border-color: var(--max-primary);
    transform: translateY(-1px);
  }

  .max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 10px #0000002e;
  }

  .max-button-primary {
    background: var(--max-primary);
    color: var(--max-on-primary);
    border-color: var(--max-primary);
  }

  .max-button-primary:hover {
    background: var(--max-primary-hover);
    border-color: var(--max-primary-hover);
  }

  .max-button-secondary {
    background: var(--max-secondary);
    color: var(--max-on-secondary);
    border-color: var(--max-secondary);
  }

  .max-button-secondary:hover {
    background: var(--max-secondary-hover);
    border-color: var(--max-secondary-hover);
  }

  .max-button-danger {
    background: var(--max-danger);
    color: var(--max-on-danger);
    border-color: var(--max-danger);
  }

  .max-button-ghost {
    color: var(--max-text);
    box-shadow: none;
    background: none;
  }

  .max-icon-button {
    border-radius: var(--max-radius-pill);
    width: 2.75rem;
    padding: 0;
  }

  .max-button:disabled, .max-icon-button:disabled, .max-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .max-card, .max-panel {
    background: var(--max-card-bg);
  }

  .max-toolbar, .max-table-wrap, .max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-ghost), .max-icon-button {
    background: var(--max-control-bg);
  }

  .max-button, .max-icon-button, .max-badge, .max-nav-link {
    font-family: var(--max-font-control);
  }

  .max-field {
    gap: var(--max-space-2);
    flex-direction: column;
    display: flex;
  }

  .max-label {
    color: var(--max-text);
    font-size: .925rem;
    font-weight: 800;
  }

  .max-input, .max-textarea, .max-select {
    background: var(--max-surface-soft);
    width: 100%;
    min-height: 2.875rem;
    color: var(--max-text);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-md);
    font: inherit;
    transition: background var(--max-transition-fast),border-color var(--max-transition-fast),box-shadow var(--max-transition-fast);
    outline: none;
    padding: .75rem 1rem;
  }

  .max-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .max-input::placeholder, .max-textarea::placeholder {
    color: var(--max-text-muted);
    opacity: .82;
  }

  .max-input:hover, .max-textarea:hover, .max-select:hover {
    border-color: rgb(var(--max-primary-rgb)/.58);
  }

  .max-input:focus, .max-textarea:focus, .max-select:focus {
    border-color: var(--max-focus);
    box-shadow: var(--max-focus-ring);
  }

  .max-help-text {
    color: var(--max-text-muted);
    font-size: .875rem;
    line-height: 1.45;
  }

  .max-check, .max-radio {
    align-items: center;
    gap: var(--max-space-2);
    color: var(--max-text);
    cursor: pointer;
    display: inline-flex;
  }

  .max-check input, .max-radio input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .max-check-control, .max-radio-control {
    background: var(--max-surface-soft);
    border: 3px solid var(--max-border);
    width: 1.35rem;
    height: 1.35rem;
    transition: background var(--max-transition-fast),box-shadow var(--max-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .max-check-control {
    border-radius: var(--max-radius-xs);
  }

  .max-radio-control {
    border-radius: 50%;
  }

  .max-check input:checked + .max-check-control, .max-radio input:checked + .max-radio-control {
    background: var(--max-primary);
    border-color: var(--max-primary);
    box-shadow: var(--max-focus-ring);
  }

  .max-check input:checked + .max-check-control:after {
    content: "✓";
    color: var(--max-on-primary);
    font-size: .9rem;
    font-weight: 900;
  }

  .max-radio input:checked + .max-radio-control:after {
    content: "";
    background: var(--max-on-primary);
    border-radius: 50%;
    width: .55rem;
    height: .55rem;
  }

  .max-switch {
    align-items: center;
    gap: var(--max-space-3);
    color: var(--max-text);
    cursor: pointer;
    display: inline-flex;
  }

  .max-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .max-switch-track {
    background: var(--max-surface-soft);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-pill);
    width: 3.5rem;
    height: 1.9rem;
    transition: background var(--max-transition-fast),box-shadow var(--max-transition-fast);
    position: relative;
  }

  .max-switch-thumb {
    background: var(--max-surface-strong);
    border: 3px solid var(--max-border);
    width: 1.34rem;
    height: 1.34rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--max-shadow-alpha));
    transition: left var(--max-transition-fast),background var(--max-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .22rem;
    left: .22rem;
  }

  .max-switch input:checked + .max-switch-track {
    background: var(--max-primary);
    border-color: var(--max-primary);
  }

  .max-switch input:checked + .max-switch-track .max-switch-thumb {
    background: var(--max-on-primary);
    left: calc(100% - 1.56rem);
  }

  .max-badge {
    align-items: center;
    gap: var(--max-space-1);
    background: var(--max-surface-soft);
    min-height: 1.75rem;
    color: var(--max-text);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-pill);
    padding: .35rem .7rem;
    font-size: .8125rem;
    font-weight: 850;
    line-height: 1;
    display: inline-flex;
  }

  .max-badge-primary {
    background: var(--max-primary);
    color: var(--max-on-primary);
    border-color: var(--max-primary);
  }

  .max-badge-secondary {
    background: var(--max-secondary);
    color: var(--max-on-secondary);
    border-color: var(--max-secondary);
  }

  .max-badge-success {
    background: var(--max-success);
    color: var(--max-on-success);
    border-color: var(--max-success);
  }

  .max-badge-warning {
    background: var(--max-warning);
    color: var(--max-on-warning);
    border-color: var(--max-warning);
  }

  .max-badge-danger {
    background: var(--max-danger);
    color: var(--max-on-danger);
    border-color: var(--max-danger);
  }

  .max-nav {
    align-items: center;
    gap: var(--max-space-2);
    padding: var(--max-space-2);
    background: var(--max-surface);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-xl);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--max-shadow-alpha));
    flex-wrap: wrap;
    display: flex;
  }

  .max-nav-link {
    min-height: 2.5rem;
    color: var(--max-text-muted);
    border-radius: var(--max-radius-pill);
    transition: color var(--max-transition-fast),background var(--max-transition-fast),box-shadow var(--max-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
  }

  .max-nav-link:hover {
    color: var(--max-text);
    background: var(--max-surface-soft);
  }

  .max-nav-link[aria-current="page"], .max-nav-link.is-active {
    color: var(--max-on-primary);
    background: var(--max-primary);
  }

  .max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: linear-gradient(135deg,var(--max-primary),var(--max-accent));
    max-inline-size: 16rem;
    color: var(--max-on-primary);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-pill);
    box-shadow: .32rem .32rem 0 rgb(var(--max-secondary-rgb)/.68);
    text-transform: uppercase;
    letter-spacing: .04em;
    align-items: center;
    gap: .45rem;
    padding: .6rem .85rem;
    font-size: .82rem;
    font-weight: 950;
    line-height: 1.25;
    display: inline-flex;
  }

  .max-tooltip-arrow {
    background: var(--max-warning);
    border: 2px solid var(--max-border);
    flex: none;
    block-size: .62rem;
    inline-size: .62rem;
    transform: rotate(45deg);
  }

  .max-progress {
    background: var(--max-surface-soft);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
  }

  .max-progress-bar {
    height: 100%;
    width: var(--max-progress-value, 50%);
    background: linear-gradient(90deg,var(--max-primary),var(--max-accent));
    border-radius: inherit;
  }

  .max-alert {
    gap: var(--max-space-2);
    padding: var(--max-space-4);
    background: var(--max-surface);
    color: var(--max-text);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-lg);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--max-shadow-alpha));
    display: grid;
  }

  .max-alert-success {
    border-left-color: var(--max-success);
  }

  .max-alert-warning {
    border-left-color: var(--max-warning);
  }

  .max-alert-danger {
    border-left-color: var(--max-danger);
  }

  .max-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .max-alert-body {
    color: var(--max-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .max-table-wrap {
    overflow: auto;
  }

  .max-table {
    border-collapse: collapse;
    width: 100%;
  }

  .max-table th, .max-table td {
    text-align: left;
    border-bottom: 3px solid var(--max-border);
    padding: .95rem 1rem;
  }

  .max-table th {
    color: var(--max-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgb(var(--max-primary-rgb)/.08);
    font-size: .82rem;
    font-weight: 900;
  }

  .max-table td {
    color: var(--max-text-muted);
  }

  .max-table tr:hover td {
    background: rgb(var(--max-primary-rgb)/.045);
  }

  .max-text-primary {
    color: var(--max-primary);
  }

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

  .max-text-accent {
    color: var(--max-accent);
  }

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

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

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

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

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

  .max-border {
    border: 3px solid var(--max-border);
  }

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

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

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

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

  .max-sr-only, .max-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;
  }

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

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

  .max-sticker {
    background: var(--max-accent);
    color: var(--max-on-accent);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-pill);
    box-shadow: 5px 5px 0 rgb(var(--max-border-rgb)/.8);
    align-items: center;
    padding: .45rem .8rem;
    font-weight: 950;
    display: inline-flex;
    transform: rotate(-2deg);
  }

  .max-callout {
    padding: var(--max-space-6);
    background: linear-gradient(135deg,var(--max-primary),var(--max-accent));
    color: var(--max-on-primary);
    border: 3px solid var(--max-border);
    border-radius: var(--max-radius-xl);
    box-shadow: 10px 10px 0 rgb(var(--max-border-rgb)/.85);
  }

  .max-wiggle:hover {
    animation: .42s both max-wiggle;
  }

  @keyframes max-wiggle {
    0%, 100% {
      transform: rotate(0);
    }

    25% {
      transform: rotate(-1.5deg);
    }

    75% {
      transform: rotate(1.5deg);
    }
  }

  .max-spinner, .max-loading-spinner, [data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .18rem solid rgb(var(--max-border-rgb)/.5);
    border-block-start-color: var(--max-spinner-stroke);
    border-inline-end-color: var(--max-spinner-accent);
    background: radial-gradient(circle at 30% 26%,rgb(var(--max-accent-rgb)/.72),transparent 24%),conic-gradient(var(--max-spinner-stroke),var(--max-spinner-accent),var(--max-secondary),var(--max-spinner-track));
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb)/.55),-.18rem -.18rem 0 rgb(var(--max-primary-rgb)/.35);
    vertical-align: -.2em;
    border-radius: 44% 56% 52% 48%;
    animation: .85s ease-in-out infinite max-spin;
    display: inline-block;
  }

  .max-spinner-sm {
    border-width: .12rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .max-spinner-lg {
    border-width: .24rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .max-button[aria-busy="true"], .max-icon-button[aria-busy="true"], [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--max-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite max-spin;
    display: inline-block;
  }

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

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

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

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

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

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

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

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


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

  [data-ui="bauhaus"][data-mode="light"] {
    color-scheme: light;
    --bau-panel-alpha: .98;
    --bau-panel-soft-alpha: .78;
    --bau-border-alpha: .58;
    --bau-shadow-alpha: .12;
    --bau-focus-alpha: .34;
  }

  [data-ui="bauhaus"][data-mode="dark"] {
    color-scheme: dark;
    --bau-panel-alpha: .92;
    --bau-panel-soft-alpha: .64;
    --bau-border-alpha: .52;
    --bau-shadow-alpha: .34;
    --bau-focus-alpha: .42;
  }

  [data-ui="bauhaus"][data-mode="contrast"] {
    color-scheme: dark;
    --bau-panel-alpha: 1;
    --bau-panel-soft-alpha: .92;
    --bau-border-alpha: 1;
    --bau-shadow-alpha: .5;
    --bau-focus-alpha: .72;
  }

  [data-ui="bauhaus"][data-theme][data-mode] {
    --bau-bg-rgb: var(--usk-bg-rgb);
    --bau-surface-rgb: var(--usk-surface-rgb);
    --bau-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --bau-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --bau-text-rgb: var(--usk-text-rgb);
    --bau-text-muted-rgb: var(--usk-text-muted-rgb);
    --bau-border-rgb: var(--usk-border-rgb);
    --bau-primary-rgb: var(--usk-primary-rgb);
    --bau-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --bau-primary-text-rgb: var(--usk-primary-text-rgb);
    --bau-secondary-rgb: var(--usk-secondary-rgb);
    --bau-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --bau-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --bau-accent-rgb: var(--usk-accent-rgb);
    --bau-success-rgb: var(--usk-success-rgb);
    --bau-warning-rgb: var(--usk-warning-rgb);
    --bau-danger-rgb: var(--usk-danger-rgb);
    --bau-link-rgb: var(--usk-link-rgb);
    --bau-accent-text-rgb: var(--usk-accent-text-rgb);
    --bau-success-text-rgb: var(--usk-success-text-rgb);
    --bau-warning-text-rgb: var(--usk-warning-text-rgb);
    --bau-danger-text-rgb: var(--usk-danger-text-rgb);
    --bau-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--bau-surface);
    --usk-native-surface-strong: var(--bau-surface-strong);
    --usk-native-surface-soft: var(--bau-surface-soft);
    --usk-native-card-bg: var(--bau-card-bg);
    --usk-native-control-bg: var(--bau-control-bg);
    --usk-native-text: var(--bau-text);
    --usk-native-text-muted: var(--bau-text-muted);
    --usk-native-border: var(--bau-border);
    --usk-native-primary: var(--bau-primary);
    --usk-native-primary-hover: var(--bau-primary-hover);
    --usk-native-on-primary: var(--bau-on-primary);
    --usk-native-focus: var(--bau-focus);
    --usk-native-success: var(--bau-success);
    --usk-native-warning: var(--bau-warning);
    --usk-native-danger: var(--bau-danger);
    --usk-native-link: var(--bau-link);
    --usk-native-font-body: var(--bau-font-body);
    --usk-native-font-heading: var(--bau-font-heading);
    --usk-native-font-control: var(--bau-font-control);
    --usk-native-font-mono: var(--bau-font-mono);
    --usk-native-radius-sm: var(--bau-radius-sm);
    --usk-native-radius: var(--bau-radius-md);
    --usk-native-radius-lg: var(--bau-radius-lg);
    --usk-native-shadow: var(--bau-shadow-sm, none);
    --usk-native-shadow-md: var(--bau-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--bau-focus-ring, 0 0 0 3px rgb(var(--bau-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--bau-space-5);
    --bau-bg: rgb(var(--bau-bg-rgb));
    --bau-surface: rgb(var(--bau-surface-rgb) / var(--bau-panel-alpha));
    --bau-surface-strong: rgb(var(--bau-surface-strong-rgb) / var(--bau-panel-alpha));
    --bau-surface-soft: rgb(var(--bau-surface-soft-rgb) / var(--bau-panel-soft-alpha));
    --bau-text: rgb(var(--bau-text-rgb));
    --bau-text-muted: rgb(var(--bau-text-muted-rgb));
    --bau-fg: var(--bau-text);
    --bau-surface-fg: var(--bau-text);
    --bau-muted: var(--bau-text-muted);
    --bau-border: rgb(var(--bau-border-rgb) / var(--bau-border-alpha));
    --bau-control-fg: var(--bau-text);
    --bau-primary: rgb(var(--bau-primary-rgb));
    --bau-primary-hover: rgb(var(--bau-primary-hover-rgb));
    --bau-primary-text: rgb(var(--bau-primary-text-rgb));
    --bau-secondary: rgb(var(--bau-secondary-rgb));
    --bau-secondary-hover: rgb(var(--bau-secondary-hover-rgb));
    --bau-secondary-text: rgb(var(--bau-secondary-text-rgb));
    --bau-on-primary: var(--bau-primary-text);
    --bau-on-secondary: var(--bau-secondary-text);
    --bau-on-accent: rgb(var(--bau-accent-text-rgb));
    --bau-on-success: rgb(var(--bau-success-text-rgb));
    --bau-on-warning: rgb(var(--bau-warning-text-rgb));
    --bau-on-danger: rgb(var(--bau-danger-text-rgb));
    --bau-accent: rgb(var(--bau-accent-rgb));
    --bau-success: rgb(var(--bau-success-rgb));
    --bau-warning: rgb(var(--bau-warning-rgb));
    --bau-danger: rgb(var(--bau-danger-rgb));
    --bau-link: rgb(var(--bau-link-rgb));
    --bau-focus: rgb(var(--bau-focus-rgb));
    --bau-focus-ring: 0 0 0 3px rgb(var(--bau-focus-rgb) / var(--bau-focus-alpha));
    --bau-theme-bg-size: auto, auto, 48px 48px, 48px 48px, auto;
    --bau-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--bau-primary-rgb) / .13), transparent 30rem), radial-gradient(circle at 100% 0%, rgb(var(--bau-accent-rgb) / .1), transparent 28rem), linear-gradient(90deg, rgb(var(--bau-border-rgb) / .1) 1px, transparent 1px), linear-gradient(rgb(var(--bau-border-rgb) / .1) 1px, transparent 1px), var(--bau-bg);
    --bau-card-bg: linear-gradient(135deg, rgb(var(--bau-primary-rgb) / .1), rgb(var(--bau-accent-rgb) / .055) 42%, rgb(var(--bau-surface-strong-rgb) / var(--bau-panel-alpha)) 100%), var(--bau-surface);
    --bau-control-bg: linear-gradient(180deg, rgb(var(--bau-surface-strong-rgb) / var(--bau-panel-alpha)), rgb(var(--bau-surface-soft-rgb) / var(--bau-panel-soft-alpha)));
    --bau-spinner-track: rgb(var(--bau-border-rgb) / max(.28, calc(var(--bau-border-alpha) * .7)));
    --bau-spinner-stroke: var(--bau-primary);
    --bau-spinner-accent: var(--bau-accent);
  }

  [data-ui="bauhaus"] {
    background: linear-gradient(90deg,rgb(var(--bau-border-rgb)/.08) 1px,transparent 1px),linear-gradient(rgb(var(--bau-border-rgb)/.08) 1px,transparent 1px),var(--bau-bg);
    color: var(--bau-text);
    font-family: var(--bau-font-body);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-size: 48px 48px;
    line-height: 1.5;
  }

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

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

  .bau-title, .bau-heading, .bau-kicker, .bau-button, .bau-badge, .bau-nav-link {
    font-family: var(--bau-font-heading);
  }

  .bau-title {
    color: var(--bau-text);
    letter-spacing: -.06em;
    text-transform: uppercase;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.02;
  }

  .bau-heading {
    color: var(--bau-text);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .bau-kicker {
    color: var(--bau-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
  }

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

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

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

  .bau-surface, .bau-card, .bau-panel, .bau-toolbar, .bau-table-wrap {
    background: linear-gradient(90deg,rgb(var(--bau-primary-rgb)/.1)0 .5rem,transparent .5rem),var(--bau-surface);
    color: var(--bau-text);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-lg);
    box-shadow: 6px 6px 0 rgb(var(--bau-primary-rgb)/.55);
    transition: transform var(--bau-transition-base),box-shadow var(--bau-transition-base),border-color var(--bau-transition-base),background var(--bau-transition-base);
    position: relative;
  }

  .bau-card, .bau-panel {
    padding: var(--bau-space-6);
  }

  .bau-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--bau-space-4);
    padding: var(--bau-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .bau-surface-sm {
    border-radius: var(--bau-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--bau-shadow-alpha)*.72));
  }

  .bau-surface-lg {
    border-radius: var(--bau-radius-xl);
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bau-shadow-alpha) + .08));
  }

  .bau-well, .bau-inset {
    background: var(--bau-surface-soft);
    color: var(--bau-text);
    border: 2px solid rgb(var(--bau-border-rgb)/calc(var(--bau-border-alpha)*.7));
    border-radius: var(--bau-radius-md);
    padding: var(--bau-space-5);
    box-shadow: inset 0 1px 3px #00000014;
  }

  .bau-hover-lift:hover {
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bau-shadow-alpha) + .12));
    transform: translate(-3px, -3px);
  }

  .bau-button, .bau-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--bau-space-2);
    background: var(--bau-surface);
    min-height: 2.75rem;
    color: var(--bau-text);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / var(--bau-shadow-alpha));
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: color var(--bau-transition-fast),background var(--bau-transition-fast),border-color var(--bau-transition-fast),box-shadow var(--bau-transition-fast),transform var(--bau-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .bau-button:hover, .bau-icon-button:hover {
    border-color: var(--bau-primary);
    transform: translateY(-1px);
  }

  .bau-button:active, .bau-icon-button:active, .bau-button[aria-pressed="true"], .bau-icon-button[aria-pressed="true"], .bau-button.is-active, .bau-icon-button.is-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 10px #0000002e;
  }

  .bau-button-primary {
    background: var(--bau-primary);
    color: var(--bau-on-primary);
    border-color: var(--bau-primary);
  }

  .bau-button-primary:hover {
    background: var(--bau-primary-hover);
    border-color: var(--bau-primary-hover);
  }

  .bau-button-secondary {
    background: var(--bau-secondary);
    color: var(--bau-on-secondary);
    border-color: var(--bau-secondary);
  }

  .bau-button-secondary:hover {
    background: var(--bau-secondary-hover);
    border-color: var(--bau-secondary-hover);
  }

  .bau-button-danger {
    background: var(--bau-danger);
    color: var(--bau-on-danger);
    border-color: var(--bau-danger);
  }

  .bau-button-ghost {
    color: var(--bau-text);
    box-shadow: none;
    background: none;
  }

  .bau-icon-button {
    border-radius: var(--bau-radius-pill);
    width: 2.75rem;
    padding: 0;
  }

  .bau-button:disabled, .bau-icon-button:disabled, .bau-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .bau-card, .bau-panel {
    background: var(--bau-card-bg);
  }

  .bau-toolbar, .bau-table-wrap, .bau-button:not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-ghost), .bau-icon-button {
    background: var(--bau-control-bg);
  }

  .bau-button, .bau-icon-button, .bau-badge, .bau-nav-link {
    font-family: var(--bau-font-control);
  }

  .bau-field {
    gap: var(--bau-space-2);
    flex-direction: column;
    display: flex;
  }

  .bau-label {
    color: var(--bau-text);
    font-size: .925rem;
    font-weight: 800;
  }

  .bau-input, .bau-textarea, .bau-select {
    background: var(--bau-surface-soft);
    width: 100%;
    min-height: 2.875rem;
    color: var(--bau-text);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-md);
    font: inherit;
    transition: background var(--bau-transition-fast),border-color var(--bau-transition-fast),box-shadow var(--bau-transition-fast);
    outline: none;
    padding: .75rem 1rem;
  }

  .bau-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .bau-input::placeholder, .bau-textarea::placeholder {
    color: var(--bau-text-muted);
    opacity: .82;
  }

  .bau-input:hover, .bau-textarea:hover, .bau-select:hover {
    border-color: rgb(var(--bau-primary-rgb)/.58);
  }

  .bau-input:focus, .bau-textarea:focus, .bau-select:focus {
    border-color: var(--bau-focus);
    box-shadow: var(--bau-focus-ring);
  }

  .bau-help-text {
    color: var(--bau-text-muted);
    font-size: .875rem;
    line-height: 1.45;
  }

  .bau-check, .bau-radio {
    align-items: center;
    gap: var(--bau-space-2);
    color: var(--bau-text);
    cursor: pointer;
    display: inline-flex;
  }

  .bau-check input, .bau-radio input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .bau-check-control, .bau-radio-control {
    background: var(--bau-surface-soft);
    border: 2px solid var(--bau-border);
    width: 1.35rem;
    height: 1.35rem;
    transition: background var(--bau-transition-fast),box-shadow var(--bau-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .bau-check-control {
    border-radius: var(--bau-radius-xs);
  }

  .bau-radio-control {
    border-radius: 50%;
  }

  .bau-check input:checked + .bau-check-control, .bau-radio input:checked + .bau-radio-control {
    background: var(--bau-primary);
    border-color: var(--bau-primary);
    box-shadow: var(--bau-focus-ring);
  }

  .bau-check input:checked + .bau-check-control:after {
    content: "✓";
    color: var(--bau-on-primary);
    font-size: .9rem;
    font-weight: 900;
  }

  .bau-radio input:checked + .bau-radio-control:after {
    content: "";
    background: var(--bau-on-primary);
    border-radius: 50%;
    width: .55rem;
    height: .55rem;
  }

  .bau-switch {
    align-items: center;
    gap: var(--bau-space-3);
    color: var(--bau-text);
    cursor: pointer;
    display: inline-flex;
  }

  .bau-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .bau-switch-track {
    background: var(--bau-surface-soft);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-pill);
    width: 3.5rem;
    height: 1.9rem;
    transition: background var(--bau-transition-fast),box-shadow var(--bau-transition-fast);
    position: relative;
  }

  .bau-switch-thumb {
    background: var(--bau-surface-strong);
    border: 2px solid var(--bau-border);
    width: 1.34rem;
    height: 1.34rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--bau-shadow-alpha));
    transition: left var(--bau-transition-fast),background var(--bau-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .22rem;
    left: .22rem;
  }

  .bau-switch input:checked + .bau-switch-track {
    background: var(--bau-primary);
    border-color: var(--bau-primary);
  }

  .bau-switch input:checked + .bau-switch-track .bau-switch-thumb {
    background: var(--bau-on-primary);
    left: calc(100% - 1.56rem);
  }

  .bau-badge {
    align-items: center;
    gap: var(--bau-space-1);
    background: var(--bau-surface-soft);
    min-height: 1.75rem;
    color: var(--bau-text);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-pill);
    padding: .35rem .7rem;
    font-size: .8125rem;
    font-weight: 850;
    line-height: 1;
    display: inline-flex;
  }

  .bau-badge-primary {
    background: var(--bau-primary);
    color: var(--bau-on-primary);
    border-color: var(--bau-primary);
  }

  .bau-badge-secondary {
    background: var(--bau-secondary);
    color: var(--bau-on-secondary);
    border-color: var(--bau-secondary);
  }

  .bau-badge-success {
    background: var(--bau-success);
    color: var(--bau-on-success);
    border-color: var(--bau-success);
  }

  .bau-badge-warning {
    background: var(--bau-warning);
    color: var(--bau-on-warning);
    border-color: var(--bau-warning);
  }

  .bau-badge-danger {
    background: var(--bau-danger);
    color: var(--bau-on-danger);
    border-color: var(--bau-danger);
  }

  .bau-nav {
    align-items: center;
    gap: var(--bau-space-2);
    padding: var(--bau-space-2);
    background: var(--bau-surface);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-xl);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--bau-shadow-alpha));
    flex-wrap: wrap;
    display: flex;
  }

  .bau-nav-link {
    min-height: 2.5rem;
    color: var(--bau-text-muted);
    border-radius: var(--bau-radius-pill);
    transition: color var(--bau-transition-fast),background var(--bau-transition-fast),box-shadow var(--bau-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
  }

  .bau-nav-link:hover {
    color: var(--bau-text);
    background: var(--bau-surface-soft);
  }

  .bau-nav-link[aria-current="page"], .bau-nav-link.is-active {
    color: var(--bau-on-primary);
    background: var(--bau-primary);
  }

  .bau-tooltip, [data-ui="bauhaus"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: linear-gradient(90deg,var(--bau-primary)0 .45rem,var(--bau-surface-strong) .45rem);
    max-inline-size: 16rem;
    color: var(--bau-text);
    border: 2px double var(--bau-border);
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 0;
    align-items: center;
    gap: .45rem;
    padding: .58rem .78rem;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.25;
    display: inline-flex;
  }

  .bau-tooltip-arrow {
    background: var(--bau-accent);
    flex: none;
    block-size: .6rem;
    inline-size: .6rem;
    transform: rotate(45deg);
  }

  .bau-progress {
    background: var(--bau-surface-soft);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
  }

  .bau-progress-bar {
    height: 100%;
    width: var(--bau-progress-value, 50%);
    background: linear-gradient(90deg,var(--bau-primary),var(--bau-accent));
    border-radius: inherit;
  }

  .bau-alert {
    gap: var(--bau-space-2);
    padding: var(--bau-space-4);
    background: var(--bau-surface);
    color: var(--bau-text);
    border: 2px solid var(--bau-border);
    border-radius: var(--bau-radius-lg);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--bau-shadow-alpha));
    display: grid;
  }

  .bau-alert-success {
    border-left-color: var(--bau-success);
  }

  .bau-alert-warning {
    border-left-color: var(--bau-warning);
  }

  .bau-alert-danger {
    border-left-color: var(--bau-danger);
  }

  .bau-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .bau-alert-body {
    color: var(--bau-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .bau-table-wrap {
    overflow: auto;
  }

  .bau-table {
    border-collapse: collapse;
    width: 100%;
  }

  .bau-table th, .bau-table td {
    text-align: left;
    border-bottom: 2px solid var(--bau-border);
    padding: .95rem 1rem;
  }

  .bau-table th {
    color: var(--bau-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgb(var(--bau-primary-rgb)/.08);
    font-size: .82rem;
    font-weight: 900;
  }

  .bau-table td {
    color: var(--bau-text-muted);
  }

  .bau-table tr:hover td {
    background: rgb(var(--bau-primary-rgb)/.045);
  }

  .bau-text-primary {
    color: var(--bau-primary);
  }

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

  .bau-text-accent {
    color: var(--bau-accent);
  }

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

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

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

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

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

  .bau-border {
    border: 2px solid var(--bau-border);
  }

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

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

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

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

  .bau-sr-only, .bau-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;
  }

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

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

  .bau-composition {
    position: relative;
    overflow: hidden;
  }

  .bau-composition:after {
    content: "";
    background: var(--bau-primary);
    opacity: .22;
    border-radius: 50%;
    block-size: 7rem;
    inline-size: 7rem;
    position: absolute;
    top: -2rem;
    right: -2rem;
  }

  .bau-block {
    background: var(--bau-primary);
    min-block-size: 4rem;
    min-inline-size: 4rem;
    color: var(--bau-on-primary);
    border: 2px solid var(--bau-border);
    justify-content: center;
    align-items: center;
    font-weight: 950;
    display: inline-flex;
  }

  .bau-rail {
    border-left: .75rem solid var(--bau-primary);
    padding-left: var(--bau-space-4);
  }

  .bau-spinner, .bau-loading-spinner, [data-ui="bauhaus"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .2rem double var(--bau-border);
    border-block-start-color: var(--bau-spinner-stroke);
    border-inline-end-color: var(--bau-spinner-accent);
    border-radius: var(--bau-radius-xs);
    background: conic-gradient(var(--bau-primary)0 25%,var(--bau-surface)0 50%,var(--bau-accent)0 75%,var(--bau-surface-soft)0);
    vertical-align: -.2em;
    block-size: 2rem;
    inline-size: 2rem;
    animation: .8s steps(4, end) infinite bau-spin;
    display: inline-block;
  }

  .bau-spinner-sm {
    border-width: .12rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .bau-spinner-lg {
    border-width: .28rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .bau-button[aria-busy="true"], .bau-icon-button[aria-busy="true"], [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .bau-button[aria-busy="true"]:after, .bau-icon-button[aria-busy="true"]:after, [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--bau-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite bau-spin;
    display: inline-block;
  }

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

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

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

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

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

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

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

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


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

  [data-ui="tactile"][data-mode="light"] {
    color-scheme: light;
    --tactile-panel-alpha: .98;
    --tactile-panel-soft-alpha: .78;
    --tactile-border-alpha: .58;
    --tactile-shadow-alpha: .12;
    --tactile-focus-alpha: .34;
  }

  [data-ui="tactile"][data-mode="dark"] {
    color-scheme: dark;
    --tactile-panel-alpha: .92;
    --tactile-panel-soft-alpha: .64;
    --tactile-border-alpha: .52;
    --tactile-shadow-alpha: .34;
    --tactile-focus-alpha: .42;
  }

  [data-ui="tactile"][data-mode="contrast"] {
    color-scheme: dark;
    --tactile-panel-alpha: 1;
    --tactile-panel-soft-alpha: .92;
    --tactile-border-alpha: 1;
    --tactile-shadow-alpha: .5;
    --tactile-focus-alpha: .72;
  }

  [data-ui="tactile"][data-theme][data-mode] {
    --tactile-bg-rgb: var(--usk-bg-rgb);
    --tactile-surface-rgb: var(--usk-surface-rgb);
    --tactile-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --tactile-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --tactile-text-rgb: var(--usk-text-rgb);
    --tactile-text-muted-rgb: var(--usk-text-muted-rgb);
    --tactile-border-rgb: var(--usk-border-rgb);
    --tactile-primary-rgb: var(--usk-primary-rgb);
    --tactile-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --tactile-primary-text-rgb: var(--usk-primary-text-rgb);
    --tactile-secondary-rgb: var(--usk-secondary-rgb);
    --tactile-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --tactile-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --tactile-accent-rgb: var(--usk-accent-rgb);
    --tactile-success-rgb: var(--usk-success-rgb);
    --tactile-warning-rgb: var(--usk-warning-rgb);
    --tactile-danger-rgb: var(--usk-danger-rgb);
    --tactile-link-rgb: var(--usk-link-rgb);
    --tactile-accent-text-rgb: var(--usk-accent-text-rgb);
    --tactile-success-text-rgb: var(--usk-success-text-rgb);
    --tactile-warning-text-rgb: var(--usk-warning-text-rgb);
    --tactile-danger-text-rgb: var(--usk-danger-text-rgb);
    --tactile-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--tactile-surface);
    --usk-native-surface-strong: var(--tactile-surface-strong);
    --usk-native-surface-soft: var(--tactile-surface-soft);
    --usk-native-card-bg: var(--tactile-card-bg);
    --usk-native-control-bg: var(--tactile-control-bg);
    --usk-native-text: var(--tactile-text);
    --usk-native-text-muted: var(--tactile-text-muted);
    --usk-native-border: var(--tactile-border);
    --usk-native-primary: var(--tactile-primary);
    --usk-native-primary-hover: var(--tactile-primary-hover);
    --usk-native-on-primary: var(--tactile-on-primary);
    --usk-native-focus: var(--tactile-focus);
    --usk-native-success: var(--tactile-success);
    --usk-native-warning: var(--tactile-warning);
    --usk-native-danger: var(--tactile-danger);
    --usk-native-link: var(--tactile-link);
    --usk-native-font-body: var(--tactile-font-body);
    --usk-native-font-heading: var(--tactile-font-heading);
    --usk-native-font-control: var(--tactile-font-control);
    --usk-native-font-mono: var(--tactile-font-mono);
    --usk-native-radius-sm: var(--tactile-radius-sm);
    --usk-native-radius: var(--tactile-radius-md);
    --usk-native-radius-lg: var(--tactile-radius-lg);
    --usk-native-shadow: var(--tactile-shadow-sm, none);
    --usk-native-shadow-md: var(--tactile-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--tactile-focus-ring, 0 0 0 3px rgb(var(--tactile-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--tactile-space-5);
    --tactile-bg: rgb(var(--tactile-bg-rgb));
    --tactile-surface: rgb(var(--tactile-surface-rgb) / var(--tactile-panel-alpha));
    --tactile-surface-strong: rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha));
    --tactile-surface-soft: rgb(var(--tactile-surface-soft-rgb) / var(--tactile-panel-soft-alpha));
    --tactile-text: rgb(var(--tactile-text-rgb));
    --tactile-text-muted: rgb(var(--tactile-text-muted-rgb));
    --tactile-fg: var(--tactile-text);
    --tactile-surface-fg: var(--tactile-text);
    --tactile-muted: var(--tactile-text-muted);
    --tactile-border: rgb(var(--tactile-border-rgb) / var(--tactile-border-alpha));
    --tactile-control-fg: var(--tactile-text);
    --tactile-primary: rgb(var(--tactile-primary-rgb));
    --tactile-primary-hover: rgb(var(--tactile-primary-hover-rgb));
    --tactile-primary-text: rgb(var(--tactile-primary-text-rgb));
    --tactile-secondary: rgb(var(--tactile-secondary-rgb));
    --tactile-secondary-hover: rgb(var(--tactile-secondary-hover-rgb));
    --tactile-secondary-text: rgb(var(--tactile-secondary-text-rgb));
    --tactile-on-primary: var(--tactile-primary-text);
    --tactile-on-secondary: var(--tactile-secondary-text);
    --tactile-on-accent: rgb(var(--tactile-accent-text-rgb));
    --tactile-on-success: rgb(var(--tactile-success-text-rgb));
    --tactile-on-warning: rgb(var(--tactile-warning-text-rgb));
    --tactile-on-danger: rgb(var(--tactile-danger-text-rgb));
    --tactile-accent: rgb(var(--tactile-accent-rgb));
    --tactile-success: rgb(var(--tactile-success-rgb));
    --tactile-warning: rgb(var(--tactile-warning-rgb));
    --tactile-danger: rgb(var(--tactile-danger-rgb));
    --tactile-link: rgb(var(--tactile-link-rgb));
    --tactile-focus: rgb(var(--tactile-focus-rgb));
    --tactile-focus-ring: 0 0 0 3px rgb(var(--tactile-focus-rgb) / var(--tactile-focus-alpha));
    --tactile-theme-bg-size: auto;
    --tactile-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--tactile-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--tactile-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--tactile-secondary-rgb) / .1), transparent 34rem), var(--tactile-bg);
    --tactile-card-bg: linear-gradient(135deg, rgb(var(--tactile-primary-rgb) / .1), rgb(var(--tactile-accent-rgb) / .055) 42%, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha)) 100%), var(--tactile-surface);
    --tactile-control-bg: linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha)), rgb(var(--tactile-surface-soft-rgb) / var(--tactile-panel-soft-alpha)));
    --tactile-spinner-track: rgb(var(--tactile-border-rgb) / max(.28, calc(var(--tactile-border-alpha) * .7)));
    --tactile-spinner-stroke: var(--tactile-primary);
    --tactile-spinner-accent: var(--tactile-accent);
  }

  [data-ui="tactile"] {
    background: radial-gradient(circle at 50% -10%,#ffffff14,transparent 30rem),var(--tactile-bg);
    color: var(--tactile-text);
    font-family: var(--tactile-font-body);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }

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

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

  .tactile-title, .tactile-heading, .tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link {
    font-family: var(--tactile-font-heading);
  }

  .tactile-title {
    color: var(--tactile-text);
    letter-spacing: -.045em;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.02;
  }

  .tactile-heading {
    color: var(--tactile-text);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .tactile-kicker {
    color: var(--tactile-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
  }

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

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

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

  .tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap {
    background: linear-gradient(180deg,#ffffff2e,#ffffff08),linear-gradient(135deg,rgb(var(--tactile-primary-rgb)/.07),transparent 46%),var(--tactile-surface);
    color: var(--tactile-text);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-lg);
    box-shadow: 0 18px 36px rgb(0 0 0 / var(--tactile-shadow-alpha)),inset 0 1px 0 #ffffff40;
    transition: transform var(--tactile-transition-base),box-shadow var(--tactile-transition-base),border-color var(--tactile-transition-base),background var(--tactile-transition-base);
    position: relative;
  }

  .tactile-card, .tactile-panel {
    padding: var(--tactile-space-6);
  }

  .tactile-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--tactile-space-4);
    padding: var(--tactile-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .tactile-surface-sm {
    border-radius: var(--tactile-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--tactile-shadow-alpha)*.72));
  }

  .tactile-surface-lg {
    border-radius: var(--tactile-radius-xl);
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) + .08));
  }

  .tactile-well, .tactile-inset {
    background: var(--tactile-surface-soft);
    color: var(--tactile-text);
    border: 1px solid rgb(var(--tactile-border-rgb)/calc(var(--tactile-border-alpha)*.7));
    border-radius: var(--tactile-radius-md);
    padding: var(--tactile-space-5);
    box-shadow: inset 0 1px 3px #00000014;
  }

  .tactile-hover-lift:hover {
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) + .12));
    transform: translateY(-2px);
  }

  .tactile-button, .tactile-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--tactile-space-2);
    background: var(--tactile-surface);
    min-height: 2.75rem;
    color: var(--tactile-text);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / var(--tactile-shadow-alpha));
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: color var(--tactile-transition-fast),background var(--tactile-transition-fast),border-color var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast),transform var(--tactile-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .tactile-button:hover, .tactile-icon-button:hover {
    border-color: var(--tactile-primary);
    transform: translateY(-1px);
  }

  .tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 10px #0000002e;
  }

  .tactile-button-primary {
    background: var(--tactile-primary);
    color: var(--tactile-on-primary);
    border-color: var(--tactile-primary);
  }

  .tactile-button-primary:hover {
    background: var(--tactile-primary-hover);
    border-color: var(--tactile-primary-hover);
  }

  .tactile-button-secondary {
    background: var(--tactile-secondary);
    color: var(--tactile-on-secondary);
    border-color: var(--tactile-secondary);
  }

  .tactile-button-secondary:hover {
    background: var(--tactile-secondary-hover);
    border-color: var(--tactile-secondary-hover);
  }

  .tactile-button-danger {
    background: var(--tactile-danger);
    color: var(--tactile-on-danger);
    border-color: var(--tactile-danger);
  }

  .tactile-button-ghost {
    color: var(--tactile-text);
    box-shadow: none;
    background: none;
  }

  .tactile-icon-button {
    border-radius: var(--tactile-radius-pill);
    width: 2.75rem;
    padding: 0;
  }

  .tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .tactile-card, .tactile-panel {
    background: var(--tactile-card-bg);
  }

  .tactile-toolbar, .tactile-table-wrap, .tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-ghost), .tactile-icon-button {
    background: var(--tactile-control-bg);
  }

  .tactile-button, .tactile-icon-button, .tactile-badge, .tactile-nav-link {
    font-family: var(--tactile-font-control);
  }

  .tactile-field {
    gap: var(--tactile-space-2);
    flex-direction: column;
    display: flex;
  }

  .tactile-label {
    color: var(--tactile-text);
    font-size: .925rem;
    font-weight: 800;
  }

  .tactile-input, .tactile-textarea, .tactile-select {
    background: var(--tactile-surface-soft);
    width: 100%;
    min-height: 2.875rem;
    color: var(--tactile-text);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-md);
    font: inherit;
    transition: background var(--tactile-transition-fast),border-color var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
    outline: none;
    padding: .75rem 1rem;
  }

  .tactile-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .tactile-input::placeholder, .tactile-textarea::placeholder {
    color: var(--tactile-text-muted);
    opacity: .82;
  }

  .tactile-input:hover, .tactile-textarea:hover, .tactile-select:hover {
    border-color: rgb(var(--tactile-primary-rgb)/.58);
  }

  .tactile-input:focus, .tactile-textarea:focus, .tactile-select:focus {
    border-color: var(--tactile-focus);
    box-shadow: var(--tactile-focus-ring);
  }

  .tactile-help-text {
    color: var(--tactile-text-muted);
    font-size: .875rem;
    line-height: 1.45;
  }

  .tactile-check, .tactile-radio {
    align-items: center;
    gap: var(--tactile-space-2);
    color: var(--tactile-text);
    cursor: pointer;
    display: inline-flex;
  }

  .tactile-check input, .tactile-radio input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .tactile-check-control, .tactile-radio-control {
    background: var(--tactile-surface-soft);
    border: 1px solid var(--tactile-border);
    width: 1.35rem;
    height: 1.35rem;
    transition: background var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .tactile-check-control {
    border-radius: var(--tactile-radius-xs);
  }

  .tactile-radio-control {
    border-radius: 50%;
  }

  .tactile-check input:checked + .tactile-check-control, .tactile-radio input:checked + .tactile-radio-control {
    background: var(--tactile-primary);
    border-color: var(--tactile-primary);
    box-shadow: var(--tactile-focus-ring);
  }

  .tactile-check input:checked + .tactile-check-control:after {
    content: "✓";
    color: var(--tactile-on-primary);
    font-size: .9rem;
    font-weight: 900;
  }

  .tactile-radio input:checked + .tactile-radio-control:after {
    content: "";
    background: var(--tactile-on-primary);
    border-radius: 50%;
    width: .55rem;
    height: .55rem;
  }

  .tactile-switch {
    align-items: center;
    gap: var(--tactile-space-3);
    color: var(--tactile-text);
    cursor: pointer;
    display: inline-flex;
  }

  .tactile-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .tactile-switch-track {
    background: var(--tactile-surface-soft);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-pill);
    width: 3.5rem;
    height: 1.9rem;
    transition: background var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
    position: relative;
  }

  .tactile-switch-thumb {
    background: var(--tactile-surface-strong);
    border: 1px solid var(--tactile-border);
    width: 1.34rem;
    height: 1.34rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--tactile-shadow-alpha));
    transition: left var(--tactile-transition-fast),background var(--tactile-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .22rem;
    left: .22rem;
  }

  .tactile-switch input:checked + .tactile-switch-track {
    background: var(--tactile-primary);
    border-color: var(--tactile-primary);
  }

  .tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb {
    background: var(--tactile-on-primary);
    left: calc(100% - 1.56rem);
  }

  .tactile-badge {
    align-items: center;
    gap: var(--tactile-space-1);
    background: var(--tactile-surface-soft);
    min-height: 1.75rem;
    color: var(--tactile-text);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-pill);
    padding: .35rem .7rem;
    font-size: .8125rem;
    font-weight: 850;
    line-height: 1;
    display: inline-flex;
  }

  .tactile-badge-primary {
    background: var(--tactile-primary);
    color: var(--tactile-on-primary);
    border-color: var(--tactile-primary);
  }

  .tactile-badge-secondary {
    background: var(--tactile-secondary);
    color: var(--tactile-on-secondary);
    border-color: var(--tactile-secondary);
  }

  .tactile-badge-success {
    background: var(--tactile-success);
    color: var(--tactile-on-success);
    border-color: var(--tactile-success);
  }

  .tactile-badge-warning {
    background: var(--tactile-warning);
    color: var(--tactile-on-warning);
    border-color: var(--tactile-warning);
  }

  .tactile-badge-danger {
    background: var(--tactile-danger);
    color: var(--tactile-on-danger);
    border-color: var(--tactile-danger);
  }

  .tactile-nav {
    align-items: center;
    gap: var(--tactile-space-2);
    padding: var(--tactile-space-2);
    background: var(--tactile-surface);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-xl);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--tactile-shadow-alpha));
    flex-wrap: wrap;
    display: flex;
  }

  .tactile-nav-link {
    min-height: 2.5rem;
    color: var(--tactile-text-muted);
    border-radius: var(--tactile-radius-pill);
    transition: color var(--tactile-transition-fast),background var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
  }

  .tactile-nav-link:hover {
    color: var(--tactile-text);
    background: var(--tactile-surface-soft);
  }

  .tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active {
    color: var(--tactile-on-primary);
    background: var(--tactile-primary);
  }

  .tactile-tooltip, [data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: linear-gradient(180deg,#ffffff2e,#00000014),var(--tactile-surface-strong);
    max-inline-size: 16rem;
    color: var(--tactile-text);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-lg);
    box-shadow: inset 0 1px 0 #ffffff52,0 .7rem 1.4rem rgb(0 0 0 / var(--tactile-shadow-alpha));
    align-items: center;
    gap: .45rem;
    padding: .6rem .82rem;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.35;
    display: inline-flex;
  }

  .tactile-tooltip-arrow {
    background: var(--tactile-surface-strong);
    border: 1px solid var(--tactile-border);
    border-radius: .18rem;
    flex: none;
    block-size: .6rem;
    inline-size: .6rem;
    transform: rotate(45deg);
  }

  .tactile-progress {
    background: var(--tactile-surface-soft);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
  }

  .tactile-progress-bar {
    height: 100%;
    width: var(--tactile-progress-value, 50%);
    background: linear-gradient(90deg,var(--tactile-primary),var(--tactile-accent));
    border-radius: inherit;
  }

  .tactile-alert {
    gap: var(--tactile-space-2);
    padding: var(--tactile-space-4);
    background: var(--tactile-surface);
    color: var(--tactile-text);
    border: 1px solid var(--tactile-border);
    border-radius: var(--tactile-radius-lg);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--tactile-shadow-alpha));
    display: grid;
  }

  .tactile-alert-success {
    border-left-color: var(--tactile-success);
  }

  .tactile-alert-warning {
    border-left-color: var(--tactile-warning);
  }

  .tactile-alert-danger {
    border-left-color: var(--tactile-danger);
  }

  .tactile-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .tactile-alert-body {
    color: var(--tactile-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .tactile-table-wrap {
    overflow: auto;
  }

  .tactile-table {
    border-collapse: collapse;
    width: 100%;
  }

  .tactile-table th, .tactile-table td {
    text-align: left;
    border-bottom: 1px solid var(--tactile-border);
    padding: .95rem 1rem;
  }

  .tactile-table th {
    color: var(--tactile-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgb(var(--tactile-primary-rgb)/.08);
    font-size: .82rem;
    font-weight: 900;
  }

  .tactile-table td {
    color: var(--tactile-text-muted);
  }

  .tactile-table tr:hover td {
    background: rgb(var(--tactile-primary-rgb)/.045);
  }

  .tactile-text-primary {
    color: var(--tactile-primary);
  }

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

  .tactile-text-accent {
    color: var(--tactile-accent);
  }

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

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

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

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

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

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

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

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

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

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

  .tactile-sr-only, .tactile-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;
  }

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

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

  .tactile-bevel {
    background: linear-gradient(180deg,#ffffff38,#00000014),var(--tactile-surface);
    box-shadow: inset 0 1px 0 #ffffff52,inset 0-1px 0 #0000002e,0 16px 34px rgb(0 0 0 / var(--tactile-shadow-alpha));
  }

  .tactile-pressed {
    background: var(--tactile-surface-soft);
    transform: translateY(1px);
    box-shadow: inset 0 4px 14px #00000038, inset 0 -1px #ffffff1f;
  }

  .tactile-knob {
    background: radial-gradient(circle at 35% 30%,#ffffff59,transparent 28%),var(--tactile-surface-strong);
    border: 1px solid var(--tactile-border);
    block-size: 3.25rem;
    inline-size: 3.25rem;
    box-shadow: inset 0 1px 0 #ffffff4d,0 12px 24px rgb(0 0 0 / var(--tactile-shadow-alpha));
    border-radius: 50%;
  }

  .tactile-spinner, .tactile-loading-spinner, [data-ui="tactile"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .18rem solid rgb(var(--tactile-border-rgb)/.55);
    border-block-start-color: var(--tactile-spinner-stroke);
    border-inline-end-color: var(--tactile-spinner-accent);
    background: linear-gradient(145deg,rgb(var(--tactile-surface-strong-rgb)/.96),rgb(var(--tactile-surface-soft-rgb)/.72));
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: inset .16rem .16rem .32rem #0000002e,inset -.16rem -.16rem .32rem #ffffff42,0 .25rem .75rem rgb(0 0 0 / var(--tactile-shadow-alpha));
    vertical-align: -.2em;
    border-radius: 50%;
    animation: .85s cubic-bezier(.2, .8, .2, 1) infinite tactile-spin;
    display: inline-block;
  }

  .tactile-spinner-sm {
    border-width: .12rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .tactile-spinner-lg {
    border-width: .24rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .tactile-button[aria-busy="true"], .tactile-icon-button[aria-busy="true"], [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .tactile-button[aria-busy="true"]:after, .tactile-icon-button[aria-busy="true"]:after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--tactile-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite tactile-spin;
    display: inline-block;
  }

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

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

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

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

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

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

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

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


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

  [data-ui="neumorphism"][data-mode="light"] {
    color-scheme: light;
    --neo-panel-alpha: .98;
    --neo-panel-soft-alpha: .78;
    --neo-border-alpha: .58;
    --neo-shadow-alpha: .12;
    --neo-focus-alpha: .34;
  }

  [data-ui="neumorphism"][data-mode="dark"] {
    color-scheme: dark;
    --neo-panel-alpha: .92;
    --neo-panel-soft-alpha: .64;
    --neo-border-alpha: .52;
    --neo-shadow-alpha: .34;
    --neo-focus-alpha: .42;
  }

  [data-ui="neumorphism"][data-mode="contrast"] {
    color-scheme: dark;
    --neo-panel-alpha: 1;
    --neo-panel-soft-alpha: .92;
    --neo-border-alpha: 1;
    --neo-shadow-alpha: .5;
    --neo-focus-alpha: .72;
  }

  [data-ui="neumorphism"][data-theme][data-mode] {
    --neo-bg-rgb: var(--usk-bg-rgb);
    --neo-surface-rgb: var(--usk-surface-rgb);
    --neo-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --neo-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --neo-text-rgb: var(--usk-text-rgb);
    --neo-text-muted-rgb: var(--usk-text-muted-rgb);
    --neo-border-rgb: var(--usk-border-rgb);
    --neo-primary-rgb: var(--usk-primary-rgb);
    --neo-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --neo-primary-text-rgb: var(--usk-primary-text-rgb);
    --neo-secondary-rgb: var(--usk-secondary-rgb);
    --neo-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --neo-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --neo-accent-rgb: var(--usk-accent-rgb);
    --neo-success-rgb: var(--usk-success-rgb);
    --neo-warning-rgb: var(--usk-warning-rgb);
    --neo-danger-rgb: var(--usk-danger-rgb);
    --neo-link-rgb: var(--usk-link-rgb);
    --neo-accent-text-rgb: var(--usk-accent-text-rgb);
    --neo-success-text-rgb: var(--usk-success-text-rgb);
    --neo-warning-text-rgb: var(--usk-warning-text-rgb);
    --neo-danger-text-rgb: var(--usk-danger-text-rgb);
    --neo-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--neo-surface);
    --usk-native-surface-strong: var(--neo-surface-strong);
    --usk-native-surface-soft: var(--neo-surface-soft);
    --usk-native-card-bg: var(--neo-card-bg);
    --usk-native-control-bg: var(--neo-control-bg);
    --usk-native-text: var(--neo-text);
    --usk-native-text-muted: var(--neo-text-muted);
    --usk-native-border: var(--neo-border);
    --usk-native-primary: var(--neo-primary);
    --usk-native-primary-hover: var(--neo-primary-hover);
    --usk-native-on-primary: var(--neo-on-primary);
    --usk-native-focus: var(--neo-focus);
    --usk-native-success: var(--neo-success);
    --usk-native-warning: var(--neo-warning);
    --usk-native-danger: var(--neo-danger);
    --usk-native-link: var(--neo-link);
    --usk-native-font-body: var(--neo-font-body);
    --usk-native-font-heading: var(--neo-font-heading);
    --usk-native-font-control: var(--neo-font-control);
    --usk-native-font-mono: var(--neo-font-mono);
    --usk-native-radius-sm: var(--neo-radius-sm);
    --usk-native-radius: var(--neo-radius-md);
    --usk-native-radius-lg: var(--neo-radius-lg);
    --usk-native-shadow: var(--neo-shadow-sm);
    --usk-native-shadow-md: var(--neo-shadow-md);
    --usk-native-focus-ring: var(--neo-focus-ring, 0 0 0 3px rgb(var(--neo-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--neo-space-5);
    --neo-bg: rgb(var(--neo-bg-rgb));
    --neo-surface: rgb(var(--neo-surface-rgb) / var(--neo-panel-alpha));
    --neo-surface-strong: rgb(var(--neo-surface-strong-rgb) / var(--neo-panel-alpha));
    --neo-surface-soft: rgb(var(--neo-surface-soft-rgb) / var(--neo-panel-soft-alpha));
    --neo-text: rgb(var(--neo-text-rgb));
    --neo-text-muted: rgb(var(--neo-text-muted-rgb));
    --neo-fg: var(--neo-text);
    --neo-surface-fg: var(--neo-text);
    --neo-muted: var(--neo-text-muted);
    --neo-border: rgb(var(--neo-border-rgb) / var(--neo-border-alpha));
    --neo-control-fg: var(--neo-text);
    --neo-primary: rgb(var(--neo-primary-rgb));
    --neo-primary-hover: rgb(var(--neo-primary-hover-rgb));
    --neo-primary-text: rgb(var(--neo-primary-text-rgb));
    --neo-secondary: rgb(var(--neo-secondary-rgb));
    --neo-secondary-hover: rgb(var(--neo-secondary-hover-rgb));
    --neo-secondary-text: rgb(var(--neo-secondary-text-rgb));
    --neo-on-primary: var(--neo-primary-text);
    --neo-on-secondary: var(--neo-secondary-text);
    --neo-on-accent: rgb(var(--neo-accent-text-rgb));
    --neo-on-success: rgb(var(--neo-success-text-rgb));
    --neo-on-warning: rgb(var(--neo-warning-text-rgb));
    --neo-on-danger: rgb(var(--neo-danger-text-rgb));
    --neo-accent: rgb(var(--neo-accent-rgb));
    --neo-success: rgb(var(--neo-success-rgb));
    --neo-warning: rgb(var(--neo-warning-rgb));
    --neo-danger: rgb(var(--neo-danger-rgb));
    --neo-link: rgb(var(--neo-link-rgb));
    --neo-focus: rgb(var(--neo-focus-rgb));
    --neo-focus-ring: 0 0 0 3px rgb(var(--neo-focus-rgb) / var(--neo-focus-alpha));
    --neo-theme-bg-size: auto;
    --neo-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--neo-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--neo-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--neo-secondary-rgb) / .1), transparent 34rem), var(--neo-bg);
    --neo-card-bg: linear-gradient(135deg, rgb(var(--neo-primary-rgb) / .1), rgb(var(--neo-accent-rgb) / .055) 42%, rgb(var(--neo-surface-strong-rgb) / var(--neo-panel-alpha)) 100%), var(--neo-surface);
    --neo-control-bg: linear-gradient(180deg, rgb(var(--neo-surface-strong-rgb) / var(--neo-panel-alpha)), rgb(var(--neo-surface-soft-rgb) / var(--neo-panel-soft-alpha)));
    --neo-spinner-track: rgb(var(--neo-border-rgb) / max(.28, calc(var(--neo-border-alpha) * .7)));
    --neo-spinner-stroke: var(--neo-primary);
    --neo-spinner-accent: var(--neo-accent);
  }

  [data-ui="neumorphism"] {
    background: radial-gradient(circle at 50% -10%,#ffffff14,transparent 30rem),var(--neo-bg);
    color: var(--neo-text);
    font-family: var(--neo-font-body);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }

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

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

  .neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link {
    font-family: var(--neo-font-heading);
  }

  .neo-title {
    color: var(--neo-text);
    letter-spacing: -.045em;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.02;
  }

  .neo-heading {
    color: var(--neo-text);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .neo-kicker {
    color: var(--neo-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
  }

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

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

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

  .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
    background: linear-gradient(180deg,#ffffff2e,#ffffff08),linear-gradient(135deg,rgb(var(--neo-primary-rgb)/.07),transparent 46%),var(--neo-surface);
    color: var(--neo-text);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-lg);
    box-shadow: 10px 10px 22px var(--neo-nm-dark),-10px -10px 22px var(--neo-nm-light);
    transition: transform var(--neo-transition-base),box-shadow var(--neo-transition-base),border-color var(--neo-transition-base),background var(--neo-transition-base);
    position: relative;
  }

  .neo-card, .neo-panel {
    padding: var(--neo-space-6);
  }

  .neo-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--neo-space-4);
    padding: var(--neo-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .neo-surface-sm {
    border-radius: var(--neo-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--neo-shadow-alpha)*.72));
  }

  .neo-surface-lg {
    border-radius: var(--neo-radius-xl);
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--neo-shadow-alpha) + .08));
  }

  .neo-well, .neo-inset {
    background: var(--neo-surface-soft);
    color: var(--neo-text);
    border: 1px solid rgb(var(--neo-border-rgb)/calc(var(--neo-border-alpha)*.7));
    border-radius: var(--neo-radius-md);
    padding: var(--neo-space-5);
    box-shadow: inset 0 1px 3px #00000014;
  }

  .neo-hover-lift:hover {
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--neo-shadow-alpha) + .12));
    transform: translateY(-2px);
  }

  .neo-button, .neo-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--neo-space-2);
    background: var(--neo-surface);
    min-height: 2.75rem;
    color: var(--neo-text);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / var(--neo-shadow-alpha));
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: color var(--neo-transition-fast),background var(--neo-transition-fast),border-color var(--neo-transition-fast),box-shadow var(--neo-transition-fast),transform var(--neo-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .neo-button:hover, .neo-icon-button:hover {
    border-color: var(--neo-primary);
    transform: translateY(-1px);
  }

  .neo-button:active, .neo-icon-button:active, .neo-button[aria-pressed="true"], .neo-icon-button[aria-pressed="true"], .neo-button.is-active, .neo-icon-button.is-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 10px #0000002e;
  }

  .neo-button-primary {
    background: var(--neo-primary);
    color: var(--neo-on-primary);
    border-color: var(--neo-primary);
  }

  .neo-button-primary:hover {
    background: var(--neo-primary-hover);
    border-color: var(--neo-primary-hover);
  }

  .neo-button-secondary {
    background: var(--neo-secondary);
    color: var(--neo-on-secondary);
    border-color: var(--neo-secondary);
  }

  .neo-button-secondary:hover {
    background: var(--neo-secondary-hover);
    border-color: var(--neo-secondary-hover);
  }

  .neo-button-danger {
    background: var(--neo-danger);
    color: var(--neo-on-danger);
    border-color: var(--neo-danger);
  }

  .neo-button-ghost {
    color: var(--neo-text);
    box-shadow: none;
    background: none;
  }

  .neo-icon-button {
    border-radius: var(--neo-radius-pill);
    width: 2.75rem;
    padding: 0;
  }

  .neo-button:disabled, .neo-icon-button:disabled, .neo-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .neo-card, .neo-panel {
    background: var(--neo-card-bg);
  }

  .neo-toolbar, .neo-table-wrap, .neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-ghost), .neo-icon-button {
    background: var(--neo-control-bg);
  }

  .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link {
    font-family: var(--neo-font-control);
  }

  .neo-field {
    gap: var(--neo-space-2);
    flex-direction: column;
    display: flex;
  }

  .neo-label {
    color: var(--neo-text);
    font-size: .925rem;
    font-weight: 800;
  }

  .neo-input, .neo-textarea, .neo-select {
    background: var(--neo-surface-soft);
    width: 100%;
    min-height: 2.875rem;
    color: var(--neo-text);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-md);
    font: inherit;
    transition: background var(--neo-transition-fast),border-color var(--neo-transition-fast),box-shadow var(--neo-transition-fast);
    outline: none;
    padding: .75rem 1rem;
  }

  .neo-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .neo-input::placeholder, .neo-textarea::placeholder {
    color: var(--neo-text-muted);
    opacity: .82;
  }

  .neo-input:hover, .neo-textarea:hover, .neo-select:hover {
    border-color: rgb(var(--neo-primary-rgb)/.58);
  }

  .neo-input:focus, .neo-textarea:focus, .neo-select:focus {
    border-color: var(--neo-focus);
    box-shadow: var(--neo-focus-ring);
  }

  .neo-help-text {
    color: var(--neo-text-muted);
    font-size: .875rem;
    line-height: 1.45;
  }

  .neo-check, .neo-radio {
    align-items: center;
    gap: var(--neo-space-2);
    color: var(--neo-text);
    cursor: pointer;
    display: inline-flex;
  }

  .neo-check input, .neo-radio input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .neo-check-control, .neo-radio-control {
    background: var(--neo-surface-soft);
    border: 1px solid var(--neo-border);
    width: 1.35rem;
    height: 1.35rem;
    transition: background var(--neo-transition-fast),box-shadow var(--neo-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .neo-check-control {
    border-radius: var(--neo-radius-xs);
  }

  .neo-radio-control {
    border-radius: 50%;
  }

  .neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
    box-shadow: var(--neo-focus-ring);
  }

  .neo-check input:checked + .neo-check-control:after {
    content: "✓";
    color: var(--neo-on-primary);
    font-size: .9rem;
    font-weight: 900;
  }

  .neo-radio input:checked + .neo-radio-control:after {
    content: "";
    background: var(--neo-on-primary);
    border-radius: 50%;
    width: .55rem;
    height: .55rem;
  }

  .neo-switch {
    align-items: center;
    gap: var(--neo-space-3);
    color: var(--neo-text);
    cursor: pointer;
    display: inline-flex;
  }

  .neo-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .neo-switch-track {
    background: var(--neo-surface-soft);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-pill);
    width: 3.5rem;
    height: 1.9rem;
    transition: background var(--neo-transition-fast),box-shadow var(--neo-transition-fast);
    position: relative;
  }

  .neo-switch-thumb {
    background: var(--neo-surface-strong);
    border: 1px solid var(--neo-border);
    width: 1.34rem;
    height: 1.34rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--neo-shadow-alpha));
    transition: left var(--neo-transition-fast),background var(--neo-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .22rem;
    left: .22rem;
  }

  .neo-switch input:checked + .neo-switch-track {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
  }

  .neo-switch input:checked + .neo-switch-track .neo-switch-thumb {
    background: var(--neo-on-primary);
    left: calc(100% - 1.56rem);
  }

  .neo-badge {
    align-items: center;
    gap: var(--neo-space-1);
    background: var(--neo-surface-soft);
    min-height: 1.75rem;
    color: var(--neo-text);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-pill);
    padding: .35rem .7rem;
    font-size: .8125rem;
    font-weight: 850;
    line-height: 1;
    display: inline-flex;
  }

  .neo-badge-primary {
    background: var(--neo-primary);
    color: var(--neo-on-primary);
    border-color: var(--neo-primary);
  }

  .neo-badge-secondary {
    background: var(--neo-secondary);
    color: var(--neo-on-secondary);
    border-color: var(--neo-secondary);
  }

  .neo-badge-success {
    background: var(--neo-success);
    color: var(--neo-on-success);
    border-color: var(--neo-success);
  }

  .neo-badge-warning {
    background: var(--neo-warning);
    color: var(--neo-on-warning);
    border-color: var(--neo-warning);
  }

  .neo-badge-danger {
    background: var(--neo-danger);
    color: var(--neo-on-danger);
    border-color: var(--neo-danger);
  }

  .neo-nav {
    align-items: center;
    gap: var(--neo-space-2);
    padding: var(--neo-space-2);
    background: var(--neo-surface);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-xl);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--neo-shadow-alpha));
    flex-wrap: wrap;
    display: flex;
  }

  .neo-nav-link {
    min-height: 2.5rem;
    color: var(--neo-text-muted);
    border-radius: var(--neo-radius-pill);
    transition: color var(--neo-transition-fast),background var(--neo-transition-fast),box-shadow var(--neo-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
  }

  .neo-nav-link:hover {
    color: var(--neo-text);
    background: var(--neo-surface-soft);
  }

  .neo-nav-link[aria-current="page"], .neo-nav-link.is-active {
    color: var(--neo-on-primary);
    background: var(--neo-primary);
  }

  .neo-tooltip, [data-ui="neumorphism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: var(--neo-surface);
    max-inline-size: 16rem;
    color: var(--neo-text);
    border-radius: var(--neo-radius-pill);
    border: 1px solid #0000;
    align-items: center;
    gap: .45rem;
    padding: .62rem .86rem;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.35;
    display: inline-flex;
    box-shadow: -.35rem -.35rem .8rem #ffffff47, .35rem .35rem .8rem #0000002e;
  }

  .neo-tooltip-arrow {
    background: var(--neo-surface);
    border-radius: 50%;
    flex: none;
    block-size: .58rem;
    inline-size: .58rem;
    box-shadow: inset .12rem .12rem .24rem #0000001f;
  }

  .neo-progress {
    background: var(--neo-surface-soft);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
  }

  .neo-progress-bar {
    height: 100%;
    width: var(--neo-progress-value, 50%);
    background: linear-gradient(90deg,var(--neo-primary),var(--neo-accent));
    border-radius: inherit;
  }

  .neo-alert {
    gap: var(--neo-space-2);
    padding: var(--neo-space-4);
    background: var(--neo-surface);
    color: var(--neo-text);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius-lg);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--neo-shadow-alpha));
    display: grid;
  }

  .neo-alert-success {
    border-left-color: var(--neo-success);
  }

  .neo-alert-warning {
    border-left-color: var(--neo-warning);
  }

  .neo-alert-danger {
    border-left-color: var(--neo-danger);
  }

  .neo-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .neo-alert-body {
    color: var(--neo-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .neo-table-wrap {
    overflow: auto;
  }

  .neo-table {
    border-collapse: collapse;
    width: 100%;
  }

  .neo-table th, .neo-table td {
    text-align: left;
    border-bottom: 1px solid var(--neo-border);
    padding: .95rem 1rem;
  }

  .neo-table th {
    color: var(--neo-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgb(var(--neo-primary-rgb)/.08);
    font-size: .82rem;
    font-weight: 900;
  }

  .neo-table td {
    color: var(--neo-text-muted);
  }

  .neo-table tr:hover td {
    background: rgb(var(--neo-primary-rgb)/.045);
  }

  .neo-text-primary {
    color: var(--neo-primary);
  }

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

  .neo-text-accent {
    color: var(--neo-accent);
  }

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

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

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

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

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

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

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

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

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

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

  .neo-sr-only, .neo-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;
  }

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

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

  [data-ui="neumorphism"][data-mode="light"] {
    --neo-nm-light: #fffffff0;
    --neo-nm-dark: #94a2b285;
  }

  [data-ui="neumorphism"][data-mode="dark"] {
    --neo-nm-light: #2e3746bd;
    --neo-nm-dark: #00000080;
  }

  [data-ui="neumorphism"][data-mode="contrast"] {
    --neo-nm-light: #404040;
    --neo-nm-dark: #000;
  }

  [data-ui="neumorphism"] {
    background: var(--neo-bg);
  }

  .neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
    border-color: rgb(var(--neo-border-rgb)/.14);
    box-shadow: 10px 10px 22px var(--neo-nm-dark),-10px -10px 22px var(--neo-nm-light);
  }

  .neo-surface-lg, .neo-hover-lift:hover {
    box-shadow: 16px 16px 32px var(--neo-nm-dark),-16px -16px 32px var(--neo-nm-light);
  }

  .neo-well, .neo-inset, .neo-input, .neo-textarea, .neo-select, .neo-progress {
    box-shadow: inset 5px 5px 11px var(--neo-nm-dark),inset -5px -5px 11px var(--neo-nm-light);
  }

  .neo-button, .neo-icon-button, .neo-badge, .neo-nav {
    box-shadow: 5px 5px 11px var(--neo-nm-dark),-5px -5px 11px var(--neo-nm-light);
  }

  .neo-button:active, .neo-icon-button:active, .neo-button.is-active, .neo-icon-button.is-active, .neo-nav-link.is-active {
    box-shadow: inset 4px 4px 9px var(--neo-nm-dark),inset -4px -4px 9px var(--neo-nm-light);
  }

  .neo-spinner, .neo-loading-spinner, [data-ui="neumorphism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .2rem solid #0000;
    border-block-start-color: var(--neo-spinner-stroke);
    border-inline-end-color: var(--neo-spinner-accent);
    background: conic-gradient(from 45deg,var(--neo-spinner-stroke),transparent 34%,var(--neo-spinner-accent),var(--neo-spinner-track));
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: -.35rem -.35rem .8rem #ffffff52,.35rem .35rem .8rem #0000002e,inset 0 0 0 .38rem var(--neo-surface);
    vertical-align: -.2em;
    border-radius: 50%;
    animation: 1s linear infinite neo-spin;
    display: inline-block;
  }

  .neo-spinner-sm {
    border-width: .12rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .neo-spinner-lg {
    border-width: .28rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .neo-button[aria-busy="true"], .neo-icon-button[aria-busy="true"], [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--neo-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite neo-spin;
    display: inline-block;
  }

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

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

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

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

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

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

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

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


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

  [data-ui="retrofuturism"][data-mode="light"] {
    color-scheme: light;
    --retro-panel-alpha: .98;
    --retro-panel-soft-alpha: .78;
    --retro-border-alpha: .58;
    --retro-shadow-alpha: .12;
    --retro-focus-alpha: .34;
  }

  [data-ui="retrofuturism"][data-mode="dark"] {
    color-scheme: dark;
    --retro-panel-alpha: .92;
    --retro-panel-soft-alpha: .64;
    --retro-border-alpha: .52;
    --retro-shadow-alpha: .34;
    --retro-focus-alpha: .42;
  }

  [data-ui="retrofuturism"][data-mode="contrast"] {
    color-scheme: dark;
    --retro-panel-alpha: 1;
    --retro-panel-soft-alpha: .92;
    --retro-border-alpha: 1;
    --retro-shadow-alpha: .5;
    --retro-focus-alpha: .72;
  }

  [data-ui="retrofuturism"][data-theme][data-mode] {
    --retro-bg-rgb: var(--usk-bg-rgb);
    --retro-surface-rgb: var(--usk-surface-rgb);
    --retro-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --retro-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --retro-text-rgb: var(--usk-text-rgb);
    --retro-text-muted-rgb: var(--usk-text-muted-rgb);
    --retro-border-rgb: var(--usk-border-rgb);
    --retro-primary-rgb: var(--usk-primary-rgb);
    --retro-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --retro-primary-text-rgb: var(--usk-primary-text-rgb);
    --retro-secondary-rgb: var(--usk-secondary-rgb);
    --retro-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --retro-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --retro-accent-rgb: var(--usk-accent-rgb);
    --retro-success-rgb: var(--usk-success-rgb);
    --retro-warning-rgb: var(--usk-warning-rgb);
    --retro-danger-rgb: var(--usk-danger-rgb);
    --retro-link-rgb: var(--usk-link-rgb);
    --retro-accent-text-rgb: var(--usk-accent-text-rgb);
    --retro-success-text-rgb: var(--usk-success-text-rgb);
    --retro-warning-text-rgb: var(--usk-warning-text-rgb);
    --retro-danger-text-rgb: var(--usk-danger-text-rgb);
    --retro-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--retro-surface);
    --usk-native-surface-strong: var(--retro-surface-strong);
    --usk-native-surface-soft: var(--retro-surface-soft);
    --usk-native-card-bg: var(--retro-card-bg);
    --usk-native-control-bg: var(--retro-control-bg);
    --usk-native-text: var(--retro-text);
    --usk-native-text-muted: var(--retro-text-muted);
    --usk-native-border: var(--retro-border);
    --usk-native-primary: var(--retro-primary);
    --usk-native-primary-hover: var(--retro-primary-hover);
    --usk-native-on-primary: var(--retro-on-primary);
    --usk-native-focus: var(--retro-focus);
    --usk-native-success: var(--retro-success);
    --usk-native-warning: var(--retro-warning);
    --usk-native-danger: var(--retro-danger);
    --usk-native-link: var(--retro-link);
    --usk-native-font-body: var(--retro-font-body);
    --usk-native-font-heading: var(--retro-font-heading);
    --usk-native-font-control: var(--retro-font-control);
    --usk-native-font-mono: var(--retro-font-mono);
    --usk-native-radius-sm: var(--retro-radius-sm);
    --usk-native-radius: var(--retro-radius-md);
    --usk-native-radius-lg: var(--retro-radius-lg);
    --usk-native-shadow: 0 10px 30px rgb(0 0 0 / calc(var(--retro-shadow-alpha) * .72));
    --usk-native-shadow-md: var(--retro-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--retro-focus-ring, 0 0 0 3px rgb(var(--retro-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--retro-space-5);
    --retro-bg: rgb(var(--retro-bg-rgb));
    --retro-surface: rgb(var(--retro-surface-rgb) / var(--retro-panel-alpha));
    --retro-surface-strong: rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha));
    --retro-surface-soft: rgb(var(--retro-surface-soft-rgb) / var(--retro-panel-soft-alpha));
    --retro-text: rgb(var(--retro-text-rgb));
    --retro-text-muted: rgb(var(--retro-text-muted-rgb));
    --retro-fg: var(--retro-text);
    --retro-surface-fg: var(--retro-text);
    --retro-muted: var(--retro-text-muted);
    --retro-border: rgb(var(--retro-border-rgb) / var(--retro-border-alpha));
    --retro-control-fg: var(--retro-text);
    --retro-primary: rgb(var(--retro-primary-rgb));
    --retro-primary-hover: rgb(var(--retro-primary-hover-rgb));
    --retro-primary-text: rgb(var(--retro-primary-text-rgb));
    --retro-secondary: rgb(var(--retro-secondary-rgb));
    --retro-secondary-hover: rgb(var(--retro-secondary-hover-rgb));
    --retro-secondary-text: rgb(var(--retro-secondary-text-rgb));
    --retro-on-primary: var(--retro-primary-text);
    --retro-on-secondary: var(--retro-secondary-text);
    --retro-on-accent: rgb(var(--retro-accent-text-rgb));
    --retro-on-success: rgb(var(--retro-success-text-rgb));
    --retro-on-warning: rgb(var(--retro-warning-text-rgb));
    --retro-on-danger: rgb(var(--retro-danger-text-rgb));
    --retro-accent: rgb(var(--retro-accent-rgb));
    --retro-success: rgb(var(--retro-success-rgb));
    --retro-warning: rgb(var(--retro-warning-rgb));
    --retro-danger: rgb(var(--retro-danger-rgb));
    --retro-link: rgb(var(--retro-link-rgb));
    --retro-focus: rgb(var(--retro-focus-rgb));
    --retro-focus-ring: 0 0 0 3px rgb(var(--retro-focus-rgb) / var(--retro-focus-alpha));
    --retro-theme-bg-size: auto;
    --retro-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--retro-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--retro-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--retro-secondary-rgb) / .1), transparent 34rem), var(--retro-bg);
    --retro-card-bg: linear-gradient(135deg, rgb(var(--retro-primary-rgb) / .1), rgb(var(--retro-accent-rgb) / .055) 42%, rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha)) 100%), var(--retro-surface);
    --retro-control-bg: linear-gradient(180deg, rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha)), rgb(var(--retro-surface-soft-rgb) / var(--retro-panel-soft-alpha)));
    --retro-spinner-track: rgb(var(--retro-border-rgb) / max(.28, calc(var(--retro-border-alpha) * .7)));
    --retro-spinner-stroke: var(--retro-primary);
    --retro-spinner-accent: var(--retro-accent);
  }

  [data-ui="retrofuturism"] {
    background: radial-gradient(circle at 20% 5%,rgb(var(--retro-accent-rgb)/.18),transparent 26rem),radial-gradient(circle at 85% 0%,rgb(var(--retro-secondary-rgb)/.12),transparent 24rem),var(--retro-bg);
    color: var(--retro-text);
    font-family: var(--retro-font-body);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }

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

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

  .retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link {
    font-family: var(--retro-font-heading);
  }

  .retro-title {
    color: var(--retro-text);
    letter-spacing: -.055em;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.02;
  }

  .retro-heading {
    color: var(--retro-text);
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.15;
  }

  .retro-kicker {
    color: var(--retro-primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
  }

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

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

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

  .retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap {
    background: linear-gradient(135deg,rgb(var(--retro-primary-rgb)/.08),transparent 36%),linear-gradient(180deg,#ffffff14,#fff0),var(--retro-surface);
    color: var(--retro-text);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-lg);
    box-shadow: 0 12px 34px rgb(0 0 0 / var(--retro-shadow-alpha)),0 0 24px rgb(var(--retro-primary-rgb)/.16);
    transition: transform var(--retro-transition-base),box-shadow var(--retro-transition-base),border-color var(--retro-transition-base),background var(--retro-transition-base);
    position: relative;
  }

  .retro-card, .retro-panel {
    padding: var(--retro-space-6);
  }

  .retro-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--retro-space-4);
    padding: var(--retro-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .retro-surface-sm {
    border-radius: var(--retro-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--retro-shadow-alpha)*.72));
  }

  .retro-surface-lg {
    border-radius: var(--retro-radius-xl);
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--retro-shadow-alpha) + .08));
  }

  .retro-well, .retro-inset {
    background: var(--retro-surface-soft);
    color: var(--retro-text);
    border: 1px solid rgb(var(--retro-border-rgb)/calc(var(--retro-border-alpha)*.7));
    border-radius: var(--retro-radius-md);
    padding: var(--retro-space-5);
    box-shadow: inset 0 1px 3px #00000014;
  }

  .retro-hover-lift:hover {
    box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--retro-shadow-alpha) + .12));
    transform: translateY(-3px) scale(1.005);
  }

  .retro-button, .retro-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--retro-space-2);
    background: var(--retro-surface);
    min-height: 2.75rem;
    color: var(--retro-text);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-md);
    box-shadow: 0 6px 18px rgb(0 0 0 / var(--retro-shadow-alpha));
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: color var(--retro-transition-fast),background var(--retro-transition-fast),border-color var(--retro-transition-fast),box-shadow var(--retro-transition-fast),transform var(--retro-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .retro-button:hover, .retro-icon-button:hover {
    border-color: var(--retro-primary);
    transform: translateY(-1px);
  }

  .retro-button:active, .retro-icon-button:active, .retro-button[aria-pressed="true"], .retro-icon-button[aria-pressed="true"], .retro-button.is-active, .retro-icon-button.is-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 10px #0000002e;
  }

  .retro-button-primary {
    background: var(--retro-primary);
    color: var(--retro-on-primary);
    border-color: var(--retro-primary);
  }

  .retro-button-primary:hover {
    background: var(--retro-primary-hover);
    border-color: var(--retro-primary-hover);
  }

  .retro-button-secondary {
    background: var(--retro-secondary);
    color: var(--retro-on-secondary);
    border-color: var(--retro-secondary);
  }

  .retro-button-secondary:hover {
    background: var(--retro-secondary-hover);
    border-color: var(--retro-secondary-hover);
  }

  .retro-button-danger {
    background: var(--retro-danger);
    color: var(--retro-on-danger);
    border-color: var(--retro-danger);
  }

  .retro-button-ghost {
    color: var(--retro-text);
    box-shadow: none;
    background: none;
  }

  .retro-icon-button {
    border-radius: var(--retro-radius-pill);
    width: 2.75rem;
    padding: 0;
  }

  .retro-button:disabled, .retro-icon-button:disabled, .retro-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .retro-card, .retro-panel {
    background: var(--retro-card-bg);
  }

  .retro-toolbar, .retro-table-wrap, .retro-button:not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-ghost), .retro-icon-button {
    background: var(--retro-control-bg);
  }

  .retro-button, .retro-icon-button, .retro-badge, .retro-nav-link {
    font-family: var(--retro-font-control);
  }

  .retro-field {
    gap: var(--retro-space-2);
    flex-direction: column;
    display: flex;
  }

  .retro-label {
    color: var(--retro-text);
    font-size: .925rem;
    font-weight: 800;
  }

  .retro-input, .retro-textarea, .retro-select {
    background: var(--retro-surface-soft);
    width: 100%;
    min-height: 2.875rem;
    color: var(--retro-text);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-md);
    font: inherit;
    transition: background var(--retro-transition-fast),border-color var(--retro-transition-fast),box-shadow var(--retro-transition-fast);
    outline: none;
    padding: .75rem 1rem;
  }

  .retro-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .retro-input::placeholder, .retro-textarea::placeholder {
    color: var(--retro-text-muted);
    opacity: .82;
  }

  .retro-input:hover, .retro-textarea:hover, .retro-select:hover {
    border-color: rgb(var(--retro-primary-rgb)/.58);
  }

  .retro-input:focus, .retro-textarea:focus, .retro-select:focus {
    border-color: var(--retro-focus);
    box-shadow: var(--retro-focus-ring);
  }

  .retro-help-text {
    color: var(--retro-text-muted);
    font-size: .875rem;
    line-height: 1.45;
  }

  .retro-check, .retro-radio {
    align-items: center;
    gap: var(--retro-space-2);
    color: var(--retro-text);
    cursor: pointer;
    display: inline-flex;
  }

  .retro-check input, .retro-radio input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .retro-check-control, .retro-radio-control {
    background: var(--retro-surface-soft);
    border: 1px solid var(--retro-border);
    width: 1.35rem;
    height: 1.35rem;
    transition: background var(--retro-transition-fast),box-shadow var(--retro-transition-fast);
    place-items: center;
    display: inline-grid;
  }

  .retro-check-control {
    border-radius: var(--retro-radius-xs);
  }

  .retro-radio-control {
    border-radius: 50%;
  }

  .retro-check input:checked + .retro-check-control, .retro-radio input:checked + .retro-radio-control {
    background: var(--retro-primary);
    border-color: var(--retro-primary);
    box-shadow: var(--retro-focus-ring);
  }

  .retro-check input:checked + .retro-check-control:after {
    content: "✓";
    color: var(--retro-on-primary);
    font-size: .9rem;
    font-weight: 900;
  }

  .retro-radio input:checked + .retro-radio-control:after {
    content: "";
    background: var(--retro-on-primary);
    border-radius: 50%;
    width: .55rem;
    height: .55rem;
  }

  .retro-switch {
    align-items: center;
    gap: var(--retro-space-3);
    color: var(--retro-text);
    cursor: pointer;
    display: inline-flex;
  }

  .retro-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .retro-switch-track {
    background: var(--retro-surface-soft);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-pill);
    width: 3.5rem;
    height: 1.9rem;
    transition: background var(--retro-transition-fast),box-shadow var(--retro-transition-fast);
    position: relative;
  }

  .retro-switch-thumb {
    background: var(--retro-surface-strong);
    border: 1px solid var(--retro-border);
    width: 1.34rem;
    height: 1.34rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / var(--retro-shadow-alpha));
    transition: left var(--retro-transition-fast),background var(--retro-transition-fast);
    border-radius: 50%;
    position: absolute;
    top: .22rem;
    left: .22rem;
  }

  .retro-switch input:checked + .retro-switch-track {
    background: var(--retro-primary);
    border-color: var(--retro-primary);
  }

  .retro-switch input:checked + .retro-switch-track .retro-switch-thumb {
    background: var(--retro-on-primary);
    left: calc(100% - 1.56rem);
  }

  .retro-badge {
    align-items: center;
    gap: var(--retro-space-1);
    background: var(--retro-surface-soft);
    min-height: 1.75rem;
    color: var(--retro-text);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-pill);
    padding: .35rem .7rem;
    font-size: .8125rem;
    font-weight: 850;
    line-height: 1;
    display: inline-flex;
  }

  .retro-badge-primary {
    background: var(--retro-primary);
    color: var(--retro-on-primary);
    border-color: var(--retro-primary);
  }

  .retro-badge-secondary {
    background: var(--retro-secondary);
    color: var(--retro-on-secondary);
    border-color: var(--retro-secondary);
  }

  .retro-badge-success {
    background: var(--retro-success);
    color: var(--retro-on-success);
    border-color: var(--retro-success);
  }

  .retro-badge-warning {
    background: var(--retro-warning);
    color: var(--retro-on-warning);
    border-color: var(--retro-warning);
  }

  .retro-badge-danger {
    background: var(--retro-danger);
    color: var(--retro-on-danger);
    border-color: var(--retro-danger);
  }

  .retro-nav {
    align-items: center;
    gap: var(--retro-space-2);
    padding: var(--retro-space-2);
    background: var(--retro-surface);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-xl);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--retro-shadow-alpha));
    flex-wrap: wrap;
    display: flex;
  }

  .retro-nav-link {
    min-height: 2.5rem;
    color: var(--retro-text-muted);
    border-radius: var(--retro-radius-pill);
    transition: color var(--retro-transition-fast),background var(--retro-transition-fast),box-shadow var(--retro-transition-fast);
    justify-content: center;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
  }

  .retro-nav-link:hover {
    color: var(--retro-text);
    background: var(--retro-surface-soft);
  }

  .retro-nav-link[aria-current="page"], .retro-nav-link.is-active {
    color: var(--retro-on-primary);
    background: var(--retro-primary);
  }

  .retro-tooltip, [data-ui="retrofuturism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: radial-gradient(circle at 20% 20%,rgb(var(--retro-accent-rgb)/.18),transparent 35%),var(--retro-surface-strong);
    max-inline-size: 16rem;
    color: var(--retro-text);
    border: 1px solid rgb(var(--retro-primary-rgb)/.62);
    border-radius: var(--retro-radius-pill);
    box-shadow: 0 0 1.2rem rgb(var(--retro-accent-rgb)/var(--retro-glow-alpha));
    text-transform: uppercase;
    letter-spacing: .06em;
    align-items: center;
    gap: .45rem;
    padding: .6rem .82rem;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.25;
    display: inline-flex;
  }

  .retro-tooltip-arrow {
    background: var(--retro-accent);
    block-size: .58rem;
    inline-size: .58rem;
    box-shadow: 0 0 .8rem rgb(var(--retro-accent-rgb)/var(--retro-glow-alpha));
    border-radius: 50%;
    flex: none;
  }

  .retro-progress {
    background: var(--retro-surface-soft);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
  }

  .retro-progress-bar {
    height: 100%;
    width: var(--retro-progress-value, 50%);
    background: linear-gradient(90deg,var(--retro-primary),var(--retro-accent));
    border-radius: inherit;
  }

  .retro-alert {
    gap: var(--retro-space-2);
    padding: var(--retro-space-4);
    background: var(--retro-surface);
    color: var(--retro-text);
    border: 1px solid var(--retro-border);
    border-radius: var(--retro-radius-lg);
    box-shadow: 0 10px 30px rgb(0 0 0 / var(--retro-shadow-alpha));
    display: grid;
  }

  .retro-alert-success {
    border-left-color: var(--retro-success);
  }

  .retro-alert-warning {
    border-left-color: var(--retro-warning);
  }

  .retro-alert-danger {
    border-left-color: var(--retro-danger);
  }

  .retro-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .retro-alert-body {
    color: var(--retro-text-muted);
    margin: 0;
    line-height: 1.55;
  }

  .retro-table-wrap {
    overflow: auto;
  }

  .retro-table {
    border-collapse: collapse;
    width: 100%;
  }

  .retro-table th, .retro-table td {
    text-align: left;
    border-bottom: 1px solid var(--retro-border);
    padding: .95rem 1rem;
  }

  .retro-table th {
    color: var(--retro-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgb(var(--retro-primary-rgb)/.08);
    font-size: .82rem;
    font-weight: 900;
  }

  .retro-table td {
    color: var(--retro-text-muted);
  }

  .retro-table tr:hover td {
    background: rgb(var(--retro-primary-rgb)/.045);
  }

  .retro-text-primary {
    color: var(--retro-primary);
  }

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

  .retro-text-accent {
    color: var(--retro-accent);
  }

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

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

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

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

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

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

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

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

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

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

  .retro-sr-only, .retro-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;
  }

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

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

  [data-ui="retrofuturism"][data-theme][data-mode] {
    --retro-scanline-alpha: .055;
    --retro-grid-alpha: .12;
    --retro-glow-alpha: .34;
  }

  [data-ui="retrofuturism"] {
    background: radial-gradient(circle at 50% -10%,rgb(var(--retro-accent-rgb)/.16),transparent 34rem),radial-gradient(circle at 85% 12%,rgb(var(--retro-secondary-rgb)/.12),transparent 28rem),linear-gradient(180deg,#ffffff06,#00000014),var(--retro-bg);
  }

  .retro-title, .retro-heading {
    text-transform: uppercase;
    letter-spacing: .07em;
    text-shadow: 0 0 12px rgb(var(--retro-primary-rgb)/.24),0 0 26px rgb(var(--retro-accent-rgb)/.16);
  }

  .retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap {
    background: linear-gradient(180deg,#ffffff1a,#ffffff05),linear-gradient(135deg,rgb(var(--retro-primary-rgb)/.08),transparent 46%),var(--retro-surface);
    box-shadow: 0 18px 48px rgb(0 0 0 / var(--retro-shadow-alpha)),0 0 0 1px rgb(var(--retro-border-rgb)/.2),0 0 26px rgb(var(--retro-primary-rgb)/.14);
  }

  .retro-button-primary, .retro-badge-primary, .retro-nav-link.is-active {
    box-shadow: 0 0 0 1px rgb(var(--retro-primary-rgb)/.34),0 0 22px rgb(var(--retro-primary-rgb)/.22);
  }

  .retro-spinner, .retro-loading-spinner, [data-ui="retrofuturism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .12rem solid var(--retro-border);
    border-block-start-color: var(--retro-spinner-stroke);
    border-inline-end-color: var(--retro-spinner-accent);
    background: radial-gradient(circle at center,var(--retro-accent)0 .16rem,transparent .18rem),conic-gradient(from -45deg,var(--retro-spinner-stroke),transparent 42%,var(--retro-spinner-accent),var(--retro-spinner-track));
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: 0 0 0 .2rem rgb(var(--retro-primary-rgb)/.16),0 0 1.35rem rgb(var(--retro-accent-rgb)/var(--retro-glow-alpha));
    vertical-align: -.2em;
    border-radius: 50%;
    animation: 1.05s linear infinite retro-spin;
    display: inline-block;
  }

  .retro-spinner-sm {
    border-width: .08rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .retro-spinner-lg {
    border-width: .18rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .retro-button[aria-busy="true"], .retro-icon-button[aria-busy="true"], [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .retro-button[aria-busy="true"]:after, .retro-icon-button[aria-busy="true"]:after, [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--retro-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite retro-spin;
    display: inline-block;
  }

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

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

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

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

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

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

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

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


/* styles/brutalism.css (visual paint) */
@layer ui-style-kit.presets {
  :root {
    --brutal-radius-xs: .25rem;
    --brutal-radius-sm: .5rem;
    --brutal-radius-md: .75rem;
    --brutal-radius-lg: 1rem;
    --brutal-radius-xl: 1.5rem;
    --brutal-radius-pill: 999px;
    --brutal-space-1: .25rem;
    --brutal-space-2: .5rem;
    --brutal-space-3: .75rem;
    --brutal-space-4: 1rem;
    --brutal-space-5: 1.25rem;
    --brutal-space-6: 1.5rem;
    --brutal-space-8: 2rem;
    --brutal-transition-fast: .14s ease;
    --brutal-transition-base: .22s ease;
    --brutal-transition-slow: .36s ease;
    --brutal-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --brutal-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--brutal-font-sans);
    --brutal-font-body: var(--brutal-font-sans);
    --brutal-font-heading: var(--brutal-font-display);
    --brutal-font-control: var(--brutal-font-display);
    --brutal-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }

  [data-ui="brutalism"][data-mode="light"] {
    color-scheme: light;
    --brutal-panel-alpha: .92;
    --brutal-panel-strong-alpha: .98;
    --brutal-panel-soft-alpha: .74;
    --brutal-border-alpha: .7;
    --brutal-glow-alpha: .24;
    --brutal-shadow-alpha: .18;
    --brutal-grid-alpha: .075;
  }

  [data-ui="brutalism"][data-mode="dark"] {
    color-scheme: dark;
    --brutal-panel-alpha: .82;
    --brutal-panel-strong-alpha: .94;
    --brutal-panel-soft-alpha: .58;
    --brutal-border-alpha: .64;
    --brutal-glow-alpha: .42;
    --brutal-shadow-alpha: .42;
    --brutal-grid-alpha: .12;
  }

  [data-ui="brutalism"][data-mode="contrast"] {
    color-scheme: dark;
    --brutal-panel-alpha: 1;
    --brutal-panel-strong-alpha: 1;
    --brutal-panel-soft-alpha: .92;
    --brutal-border-alpha: 1;
    --brutal-glow-alpha: .68;
    --brutal-shadow-alpha: .56;
    --brutal-grid-alpha: .18;
  }

  [data-ui="brutalism"][data-theme][data-mode] {
    --brutal-bg-rgb: var(--usk-bg-rgb);
    --brutal-surface-rgb: var(--usk-surface-rgb);
    --brutal-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --brutal-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --brutal-text-rgb: var(--usk-text-rgb);
    --brutal-text-muted-rgb: var(--usk-text-muted-rgb);
    --brutal-border-rgb: var(--usk-border-rgb);
    --brutal-primary-rgb: var(--usk-primary-rgb);
    --brutal-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --brutal-primary-text-rgb: var(--usk-primary-text-rgb);
    --brutal-secondary-rgb: var(--usk-secondary-rgb);
    --brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --brutal-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --brutal-accent-rgb: var(--usk-accent-rgb);
    --brutal-success-rgb: var(--usk-success-rgb);
    --brutal-warning-rgb: var(--usk-warning-rgb);
    --brutal-danger-rgb: var(--usk-danger-rgb);
    --brutal-link-rgb: var(--usk-link-rgb);
    --brutal-accent-text-rgb: var(--usk-accent-text-rgb);
    --brutal-success-text-rgb: var(--usk-success-text-rgb);
    --brutal-warning-text-rgb: var(--usk-warning-text-rgb);
    --brutal-danger-text-rgb: var(--usk-danger-text-rgb);
    --brutal-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--brutal-surface);
    --usk-native-surface-strong: var(--brutal-surface-strong);
    --usk-native-surface-soft: var(--brutal-surface-soft);
    --usk-native-card-bg: var(--brutal-card-bg);
    --usk-native-control-bg: var(--brutal-control-bg);
    --usk-native-text: var(--brutal-text);
    --usk-native-text-muted: var(--brutal-text-muted);
    --usk-native-border: var(--brutal-border);
    --usk-native-primary: var(--brutal-primary);
    --usk-native-primary-hover: var(--brutal-primary-hover);
    --usk-native-on-primary: var(--brutal-on-primary);
    --usk-native-focus: var(--brutal-focus);
    --usk-native-success: var(--brutal-success);
    --usk-native-warning: var(--brutal-warning);
    --usk-native-danger: var(--brutal-danger);
    --usk-native-link: var(--brutal-link);
    --usk-native-font-body: var(--brutal-font-body);
    --usk-native-font-heading: var(--brutal-font-heading);
    --usk-native-font-control: var(--brutal-font-control);
    --usk-native-font-mono: var(--brutal-font-mono);
    --usk-native-radius-sm: var(--brutal-radius-xs);
    --usk-native-radius: var(--brutal-radius-sm);
    --usk-native-radius-lg: var(--brutal-radius-lg);
    --usk-native-shadow: 6px 6px 0 var(--brutal-primary);
    --usk-native-shadow-md: var(--brutal-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--brutal-focus-ring, 0 0 0 3px rgb(var(--brutal-focus-rgb) / .28));
    --usk-native-border-width: 3px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--brutal-space-5);
    --brutal-bg: rgb(var(--brutal-bg-rgb));
    --brutal-surface: rgb(var(--brutal-surface-rgb) / var(--brutal-panel-alpha));
    --brutal-surface-strong: rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-strong-alpha));
    --brutal-surface-soft: rgb(var(--brutal-surface-soft-rgb) / var(--brutal-panel-soft-alpha));
    --brutal-text: rgb(var(--brutal-text-rgb));
    --brutal-text-muted: rgb(var(--brutal-text-muted-rgb));
    --brutal-fg: var(--brutal-text);
    --brutal-surface-fg: var(--brutal-text);
    --brutal-muted: var(--brutal-text-muted);
    --brutal-border: rgb(var(--brutal-border-rgb) / var(--brutal-border-alpha));
    --brutal-control-fg: var(--brutal-text);
    --brutal-primary: rgb(var(--brutal-primary-rgb));
    --brutal-primary-hover: rgb(var(--brutal-primary-hover-rgb));
    --brutal-primary-text: rgb(var(--brutal-primary-text-rgb));
    --brutal-secondary: rgb(var(--brutal-secondary-rgb));
    --brutal-secondary-hover: rgb(var(--brutal-secondary-hover-rgb));
    --brutal-secondary-text: rgb(var(--brutal-secondary-text-rgb));
    --brutal-on-primary: var(--brutal-primary-text);
    --brutal-on-secondary: var(--brutal-secondary-text);
    --brutal-on-accent: rgb(var(--brutal-accent-text-rgb));
    --brutal-on-success: rgb(var(--brutal-success-text-rgb));
    --brutal-on-warning: rgb(var(--brutal-warning-text-rgb));
    --brutal-on-danger: rgb(var(--brutal-danger-text-rgb));
    --brutal-accent: rgb(var(--brutal-accent-rgb));
    --brutal-success: rgb(var(--brutal-success-rgb));
    --brutal-warning: rgb(var(--brutal-warning-rgb));
    --brutal-danger: rgb(var(--brutal-danger-rgb));
    --brutal-link: rgb(var(--brutal-link-rgb));
    --brutal-focus: rgb(var(--brutal-focus-rgb));
    --brutal-glow-primary: rgb(var(--brutal-primary-rgb) / var(--brutal-glow-alpha));
    --brutal-glow-secondary: rgb(var(--brutal-secondary-rgb) / var(--brutal-glow-alpha));
    --brutal-glow-accent: rgb(var(--brutal-accent-rgb) / var(--brutal-glow-alpha));
    --brutal-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--brutal-shadow-alpha));
    --brutal-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--brutal-shadow-alpha) + .05));
    --brutal-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--brutal-shadow-alpha) + .12));
    --brutal-theme-bg-size: auto, auto, 32px 32px, 32px 32px, auto;
    --brutal-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--brutal-primary-rgb) / .14), transparent 28rem), radial-gradient(circle at 100% 0%, rgb(var(--brutal-accent-rgb) / .1), transparent 26rem), linear-gradient(90deg, rgb(var(--brutal-border-rgb) / var(--brutal-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--brutal-border-rgb) / var(--brutal-grid-alpha)) 1px, transparent 1px), var(--brutal-bg);
    --brutal-card-bg: linear-gradient(135deg, rgb(var(--brutal-primary-rgb) / .1), rgb(var(--brutal-accent-rgb) / .055) 42%, rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-alpha)) 100%), var(--brutal-surface);
    --brutal-control-bg: linear-gradient(180deg, rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-alpha)), rgb(var(--brutal-surface-soft-rgb) / var(--brutal-panel-soft-alpha)));
    --brutal-spinner-track: rgb(var(--brutal-border-rgb) / max(.28, calc(var(--brutal-border-alpha) * .7)));
    --brutal-spinner-stroke: var(--brutal-primary);
    --brutal-spinner-accent: var(--brutal-accent);
  }

  [data-ui="brutalism"] {
    background: linear-gradient(90deg,rgb(var(--brutal-border-rgb)/var(--brutal-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--brutal-border-rgb)/var(--brutal-grid-alpha)) 1px,transparent 1px),var(--brutal-bg);
    color: var(--brutal-text);
    font-family: var(--brutal-font-body);
    background-size: 32px 32px;
  }

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

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

  [data-ui="brutalism"] a {
    color: var(--brutal-link);
    text-underline-offset: .16em;
    font-weight: 800;
    text-decoration-thickness: .14em;
  }

  [data-ui="brutalism"] ::selection {
    background: var(--brutal-primary);
    color: var(--brutal-on-primary);
  }

  .brutal-spinner, .brutal-loading-spinner, [data-ui="brutalism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .28rem solid var(--brutal-border);
    border-block-start-color: var(--brutal-spinner-stroke);
    border-inline-end-color: var(--brutal-spinner-accent);
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: .25rem .25rem 0 var(--brutal-secondary);
    vertical-align: -.2em;
    border-radius: 0;
    animation: .65s steps(4, end) infinite brutal-spin;
    display: inline-block;
  }

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

  .brutal-spinner-lg {
    border-width: .36rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .brutal-button[aria-busy="true"], .brutal-icon-button[aria-busy="true"], [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .brutal-button[aria-busy="true"]:after, .brutal-icon-button[aria-busy="true"]:after, [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--brutal-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite brutal-spin;
    display: inline-block;
  }

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

  .brutal-title, .brutal-heading, .brutal-kicker, .brutal-button, .brutal-badge, .brutal-nav-link {
    font-family: var(--brutal-font-heading);
    text-transform: uppercase;
  }

  .brutal-title {
    letter-spacing: -.04em;
    color: var(--brutal-text);
    text-shadow: 4px 4px 0 var(--brutal-accent);
    margin: 0;
    font-size: clamp(2rem, 6vw, 4.25rem);
    line-height: .95;
  }

  .brutal-heading {
    letter-spacing: -.02em;
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 2rem);
    line-height: 1.05;
  }

  .brutal-kicker {
    color: var(--brutal-primary);
    letter-spacing: .12em;
    margin: 0;
    font-size: .85rem;
    font-weight: 900;
  }

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

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

  .brutal-card, .brutal-panel, .brutal-surface, .brutal-toolbar, .brutal-table-wrap {
    background: var(--brutal-surface-strong);
    color: var(--brutal-text);
    border: 3px solid var(--brutal-border);
    border-radius: var(--brutal-radius-sm);
    box-shadow: 10px 10px 0 var(--brutal-primary);
    transition: transform var(--brutal-transition-fast),box-shadow var(--brutal-transition-fast),background var(--brutal-transition-fast);
  }

  .brutal-card, .brutal-panel {
    padding: var(--brutal-space-6);
  }

  .brutal-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--brutal-space-4);
    padding: var(--brutal-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .brutal-inset, .brutal-well {
    background: var(--brutal-surface-soft);
    color: var(--brutal-text);
    border: 3px solid var(--brutal-border);
    border-radius: var(--brutal-radius-sm);
    box-shadow: inset 6px 6px #00000029;
  }

  .brutal-well {
    padding: var(--brutal-space-5);
  }

  .brutal-hover-lift:hover {
    box-shadow: 14px 14px 0 var(--brutal-primary-hover);
    transform: translate(-3px, -3px);
  }

  .brutal-pressed {
    box-shadow: 4px 4px 0 var(--brutal-primary);
    transform: translate(4px, 4px);
  }

  .brutal-button, .brutal-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--brutal-space-2);
    background: var(--brutal-surface-strong);
    min-height: 2.85rem;
    color: var(--brutal-text);
    border: 3px solid var(--brutal-border);
    border-radius: var(--brutal-radius-xs);
    box-shadow: 6px 6px 0 var(--brutal-secondary);
    font: inherit;
    font-family: var(--brutal-font-display);
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform var(--brutal-transition-fast),box-shadow var(--brutal-transition-fast),background var(--brutal-transition-fast),color var(--brutal-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .brutal-button:hover, .brutal-icon-button:hover {
    box-shadow: 8px 8px 0 var(--brutal-primary);
    transform: translate(-2px, -2px);
  }

  .brutal-button:active, .brutal-icon-button:active, .brutal-button.is-active, .brutal-button[aria-pressed="true"] {
    box-shadow: 2px 2px 0 var(--brutal-secondary);
    transform: translate(4px, 4px);
  }

  .brutal-button-primary {
    background: var(--brutal-primary);
    color: var(--brutal-on-primary);
  }

  .brutal-button-primary:hover {
    background: var(--brutal-primary-hover);
  }

  .brutal-button-secondary {
    background: var(--brutal-secondary);
    color: var(--brutal-on-secondary);
    box-shadow: 6px 6px 0 var(--brutal-primary);
  }

  .brutal-button-secondary:hover {
    background: var(--brutal-secondary-hover);
  }

  .brutal-button-danger {
    background: var(--brutal-danger);
    color: var(--brutal-on-danger);
  }

  .brutal-icon-button {
    width: 2.85rem;
    padding: 0;
  }

  .brutal-button:disabled, .brutal-icon-button:disabled, .brutal-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .brutal-card, .brutal-panel {
    background: var(--brutal-card-bg);
  }

  .brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button {
    background: var(--brutal-control-bg);
  }

  .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link {
    font-family: var(--brutal-font-control);
  }

  .brutal-field {
    gap: var(--brutal-space-2);
    flex-direction: column;
    display: flex;
  }

  .brutal-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 900;
  }

  .brutal-input, .brutal-textarea, .brutal-select {
    background: var(--brutal-surface-strong);
    width: 100%;
    min-height: 2.9rem;
    color: var(--brutal-text);
    border: 3px solid var(--brutal-border);
    border-radius: var(--brutal-radius-xs);
    font: inherit;
    outline: none;
    padding: .75rem 1rem;
    box-shadow: inset 4px 4px #0000001f;
  }

  .brutal-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .brutal-input:focus, .brutal-textarea:focus, .brutal-select:focus {
    border-color: var(--brutal-focus);
    box-shadow: 0 0 0 4px rgb(var(--brutal-focus-rgb)/.28),inset 4px 4px 0 #0000001f;
  }

  .brutal-help-text {
    color: var(--brutal-text-muted);
    font-size: .9rem;
  }

  .brutal-badge {
    background: var(--brutal-surface-strong);
    min-height: 1.8rem;
    color: var(--brutal-text);
    border: 3px solid var(--brutal-border);
    box-shadow: 4px 4px 0 var(--brutal-accent);
    align-items: center;
    padding: .35rem .75rem;
    font-size: .8rem;
    font-weight: 900;
    display: inline-flex;
  }

  .brutal-badge-primary {
    background: var(--brutal-primary);
    color: var(--brutal-on-primary);
  }

  .brutal-badge-secondary {
    background: var(--brutal-secondary);
    color: var(--brutal-on-secondary);
  }

  .brutal-badge-success {
    background: var(--brutal-success);
    color: var(--brutal-on-success);
  }

  .brutal-badge-warning {
    background: var(--brutal-warning);
    color: var(--brutal-on-warning);
  }

  .brutal-badge-danger {
    background: var(--brutal-danger);
    color: var(--brutal-on-danger);
  }

  .brutal-nav {
    gap: var(--brutal-space-2);
    padding: var(--brutal-space-2);
    background: var(--brutal-surface-strong);
    border: 3px solid var(--brutal-border);
    box-shadow: 8px 8px 0 var(--brutal-primary);
    flex-wrap: wrap;
    display: flex;
  }

  .brutal-nav-link {
    min-height: 2.5rem;
    color: var(--brutal-text);
    border: 3px solid #0000;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
  }

  .brutal-nav-link:hover {
    border-color: var(--brutal-border);
    background: var(--brutal-surface-soft);
  }

  .brutal-nav-link.is-active, .brutal-nav-link[aria-current="page"] {
    background: var(--brutal-primary);
    color: var(--brutal-on-primary);
    border-color: var(--brutal-border);
  }

  .brutal-tooltip, [data-ui="brutalism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: var(--brutal-warning);
    max-inline-size: 16rem;
    color: var(--brutal-on-warning);
    border: 3px solid var(--brutal-border);
    box-shadow: .28rem .28rem 0 var(--brutal-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 0;
    align-items: center;
    gap: .45rem;
    padding: .58rem .78rem;
    font-size: .82rem;
    font-weight: 950;
    line-height: 1.2;
    display: inline-flex;
  }

  .brutal-tooltip-arrow {
    background: var(--brutal-danger);
    border: 3px solid var(--brutal-border);
    flex: none;
    block-size: .6rem;
    inline-size: .6rem;
    transform: rotate(45deg);
  }

  .brutal-progress {
    background: var(--brutal-surface-soft);
    border: 3px solid var(--brutal-border);
    width: 100%;
    height: 1rem;
  }

  .brutal-progress-bar {
    height: 100%;
    width: var(--brutal-progress-value, 50%);
    background: var(--brutal-primary);
  }

  .brutal-alert {
    padding: var(--brutal-space-4);
    background: var(--brutal-surface-strong);
    border: 3px solid var(--brutal-border);
    box-shadow: 8px 8px 0 var(--brutal-accent);
  }

  .brutal-alert-success {
    box-shadow: 8px 8px 0 var(--brutal-success);
  }

  .brutal-alert-warning {
    box-shadow: 8px 8px 0 var(--brutal-warning);
  }

  .brutal-alert-danger {
    box-shadow: 8px 8px 0 var(--brutal-danger);
  }

  .brutal-alert-title {
    text-transform: uppercase;
    margin: 0;
    font-weight: 900;
  }

  .brutal-alert-body {
    color: var(--brutal-text-muted);
    margin: .5rem 0 0;
  }

  .brutal-table-wrap {
    box-shadow: 8px 8px 0 var(--brutal-primary);
    overflow: auto;
  }

  .brutal-table {
    border-collapse: collapse;
    width: 100%;
  }

  .brutal-table th, .brutal-table td {
    border: 2px solid var(--brutal-border);
    text-align: left;
    padding: .9rem 1rem;
  }

  .brutal-table th {
    background: var(--brutal-primary);
    color: var(--brutal-on-primary);
    text-transform: uppercase;
  }

  .brutal-text-primary {
    color: var(--brutal-primary);
  }

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

  .brutal-text-accent {
    color: var(--brutal-accent);
  }

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

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

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

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

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

  [data-ui="brutalism"] :focus-visible {
    outline: 4px solid var(--brutal-focus);
    outline-offset: 3px;
  }

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

  @media (prefers-contrast: more) {
    [data-ui="brutalism"] {
      --brutal-border-alpha: 1;
    }
  }

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

    [data-ui="brutalism"] :where(:focus-visible) {
      box-shadow: none;
      outline: 3px solid canvastext;
    }
  }

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

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

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


/* styles/cyberpunk.css (visual paint) */
@layer ui-style-kit.presets {
  :root {
    --cyber-radius-xs: .25rem;
    --cyber-radius-sm: .5rem;
    --cyber-radius-md: .75rem;
    --cyber-radius-lg: 1rem;
    --cyber-radius-xl: 1.5rem;
    --cyber-radius-pill: 999px;
    --cyber-space-1: .25rem;
    --cyber-space-2: .5rem;
    --cyber-space-3: .75rem;
    --cyber-space-4: 1rem;
    --cyber-space-5: 1.25rem;
    --cyber-space-6: 1.5rem;
    --cyber-space-8: 2rem;
    --cyber-transition-fast: .14s ease;
    --cyber-transition-base: .22s ease;
    --cyber-transition-slow: .36s ease;
    --cyber-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cyber-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--cyber-font-sans);
    --cyber-font-body: var(--cyber-font-sans);
    --cyber-font-heading: var(--cyber-font-display);
    --cyber-font-control: var(--cyber-font-display);
    --cyber-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }

  [data-ui="cyberpunk"][data-mode="light"] {
    color-scheme: light;
    --cyber-panel-alpha: .92;
    --cyber-panel-strong-alpha: .98;
    --cyber-panel-soft-alpha: .74;
    --cyber-border-alpha: .7;
    --cyber-glow-alpha: .24;
    --cyber-shadow-alpha: .18;
    --cyber-grid-alpha: .075;
  }

  [data-ui="cyberpunk"][data-mode="dark"] {
    color-scheme: dark;
    --cyber-panel-alpha: .82;
    --cyber-panel-strong-alpha: .94;
    --cyber-panel-soft-alpha: .58;
    --cyber-border-alpha: .64;
    --cyber-glow-alpha: .42;
    --cyber-shadow-alpha: .42;
    --cyber-grid-alpha: .12;
  }

  [data-ui="cyberpunk"][data-mode="contrast"] {
    color-scheme: dark;
    --cyber-panel-alpha: 1;
    --cyber-panel-strong-alpha: 1;
    --cyber-panel-soft-alpha: .92;
    --cyber-border-alpha: 1;
    --cyber-glow-alpha: .68;
    --cyber-shadow-alpha: .56;
    --cyber-grid-alpha: .18;
  }

  [data-ui="cyberpunk"][data-theme][data-mode] {
    --cyber-bg-rgb: var(--usk-bg-rgb);
    --cyber-surface-rgb: var(--usk-surface-rgb);
    --cyber-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --cyber-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --cyber-text-rgb: var(--usk-text-rgb);
    --cyber-text-muted-rgb: var(--usk-text-muted-rgb);
    --cyber-border-rgb: var(--usk-border-rgb);
    --cyber-primary-rgb: var(--usk-primary-rgb);
    --cyber-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --cyber-primary-text-rgb: var(--usk-primary-text-rgb);
    --cyber-secondary-rgb: var(--usk-secondary-rgb);
    --cyber-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --cyber-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --cyber-accent-rgb: var(--usk-accent-rgb);
    --cyber-success-rgb: var(--usk-success-rgb);
    --cyber-warning-rgb: var(--usk-warning-rgb);
    --cyber-danger-rgb: var(--usk-danger-rgb);
    --cyber-link-rgb: var(--usk-link-rgb);
    --cyber-accent-text-rgb: var(--usk-accent-text-rgb);
    --cyber-success-text-rgb: var(--usk-success-text-rgb);
    --cyber-warning-text-rgb: var(--usk-warning-text-rgb);
    --cyber-danger-text-rgb: var(--usk-danger-text-rgb);
    --cyber-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--cyber-surface);
    --usk-native-surface-strong: var(--cyber-surface-strong);
    --usk-native-surface-soft: var(--cyber-surface-soft);
    --usk-native-card-bg: var(--cyber-card-bg);
    --usk-native-control-bg: var(--cyber-control-bg);
    --usk-native-text: var(--cyber-text);
    --usk-native-text-muted: var(--cyber-text-muted);
    --usk-native-border: var(--cyber-border);
    --usk-native-primary: var(--cyber-primary);
    --usk-native-primary-hover: var(--cyber-primary-hover);
    --usk-native-on-primary: var(--cyber-on-primary);
    --usk-native-focus: var(--cyber-focus);
    --usk-native-success: var(--cyber-success);
    --usk-native-warning: var(--cyber-warning);
    --usk-native-danger: var(--cyber-danger);
    --usk-native-link: var(--cyber-link);
    --usk-native-font-body: var(--cyber-font-body);
    --usk-native-font-heading: var(--cyber-font-heading);
    --usk-native-font-control: var(--cyber-font-control);
    --usk-native-font-mono: var(--cyber-font-mono);
    --usk-native-radius-sm: var(--cyber-radius-sm);
    --usk-native-radius: var(--cyber-radius-md);
    --usk-native-radius-lg: var(--cyber-radius-lg);
    --usk-native-shadow: 0 0 18px rgb(var(--cyber-primary-rgb) / .16);
    --usk-native-shadow-md: var(--cyber-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: 0 0 0 2px rgb(var(--cyber-focus-rgb) / .24), 0 0 24px rgb(var(--cyber-focus-rgb) / .24);
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--cyber-space-5);
    --cyber-bg: rgb(var(--cyber-bg-rgb));
    --cyber-surface: rgb(var(--cyber-surface-rgb) / var(--cyber-panel-alpha));
    --cyber-surface-strong: rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-strong-alpha));
    --cyber-surface-soft: rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha));
    --cyber-text: rgb(var(--cyber-text-rgb));
    --cyber-text-muted: rgb(var(--cyber-text-muted-rgb));
    --cyber-fg: var(--cyber-text);
    --cyber-surface-fg: var(--cyber-text);
    --cyber-muted: var(--cyber-text-muted);
    --cyber-border: rgb(var(--cyber-border-rgb) / var(--cyber-border-alpha));
    --cyber-control-fg: var(--cyber-text);
    --cyber-primary: rgb(var(--cyber-primary-rgb));
    --cyber-primary-hover: rgb(var(--cyber-primary-hover-rgb));
    --cyber-primary-text: rgb(var(--cyber-primary-text-rgb));
    --cyber-secondary: rgb(var(--cyber-secondary-rgb));
    --cyber-secondary-hover: rgb(var(--cyber-secondary-hover-rgb));
    --cyber-secondary-text: rgb(var(--cyber-secondary-text-rgb));
    --cyber-on-primary: var(--cyber-primary-text);
    --cyber-on-secondary: var(--cyber-secondary-text);
    --cyber-on-accent: rgb(var(--cyber-accent-text-rgb));
    --cyber-on-success: rgb(var(--cyber-success-text-rgb));
    --cyber-on-warning: rgb(var(--cyber-warning-text-rgb));
    --cyber-on-danger: rgb(var(--cyber-danger-text-rgb));
    --cyber-accent: rgb(var(--cyber-accent-rgb));
    --cyber-success: rgb(var(--cyber-success-rgb));
    --cyber-warning: rgb(var(--cyber-warning-rgb));
    --cyber-danger: rgb(var(--cyber-danger-rgb));
    --cyber-link: rgb(var(--cyber-link-rgb));
    --cyber-focus: rgb(var(--cyber-focus-rgb));
    --cyber-glow-primary: rgb(var(--cyber-primary-rgb) / var(--cyber-glow-alpha));
    --cyber-glow-secondary: rgb(var(--cyber-secondary-rgb) / var(--cyber-glow-alpha));
    --cyber-glow-accent: rgb(var(--cyber-accent-rgb) / var(--cyber-glow-alpha));
    --cyber-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--cyber-shadow-alpha));
    --cyber-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + .05));
    --cyber-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + .12));
    --cyber-theme-bg-size: auto, auto, auto, 48px 48px, 48px 48px, auto;
    --cyber-theme-bg: radial-gradient(circle at 10% 10%, rgb(var(--cyber-primary-rgb) / .18), transparent 24rem), radial-gradient(circle at 90% 0%, rgb(var(--cyber-secondary-rgb) / .16), transparent 28rem), radial-gradient(circle at 50% 100%, rgb(var(--cyber-accent-rgb) / .1), transparent 34rem), linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--cyber-secondary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), var(--cyber-bg);
    --cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .1), rgb(var(--cyber-accent-rgb) / .055) 42%, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)) 100%), var(--cyber-surface);
    --cyber-control-bg: linear-gradient(180deg, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)), rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha)));
    --cyber-spinner-track: rgb(var(--cyber-border-rgb) / max(.28, calc(var(--cyber-border-alpha) * .7)));
    --cyber-spinner-stroke: var(--cyber-primary);
    --cyber-spinner-accent: var(--cyber-accent);
  }

  [data-ui="cyberpunk"] {
    background: radial-gradient(circle at 10% 10%,rgb(var(--cyber-primary-rgb)/.16),transparent 24rem),radial-gradient(circle at 90% 0%,rgb(var(--cyber-secondary-rgb)/.16),transparent 28rem),linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--cyber-secondary-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),var(--cyber-bg);
    color: var(--cyber-text);
    font-family: var(--cyber-font-body);
    background-size: auto, auto, 48px 48px, 48px 48px, auto;
  }

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

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

  [data-ui="cyberpunk"] a {
    color: var(--cyber-link);
    text-decoration-color: rgb(var(--cyber-primary-rgb)/.6);
    text-underline-offset: .18em;
  }

  [data-ui="cyberpunk"] ::selection {
    background: var(--cyber-primary);
    color: var(--cyber-on-primary);
  }

  .cyber-title, .cyber-heading, .cyber-kicker, .cyber-button, .cyber-badge, .cyber-nav-link {
    font-family: var(--cyber-font-heading);
    text-transform: uppercase;
  }

  .cyber-title {
    letter-spacing: .08em;
    color: var(--cyber-text);
    text-shadow: 0 0 10px var(--cyber-glow-primary),0 0 26px var(--cyber-glow-accent);
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
  }

  .cyber-heading {
    letter-spacing: .08em;
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 2rem);
  }

  .cyber-kicker {
    color: var(--cyber-primary);
    letter-spacing: .18em;
    margin: 0;
    font-size: .8rem;
    font-weight: 900;
  }

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

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

  .cyber-card, .cyber-panel, .cyber-console, .cyber-toolbar, .cyber-table-wrap {
    background: linear-gradient(135deg,#ffffff14,#ffffff05),var(--cyber-surface);
    color: var(--cyber-text);
    border: 1px solid var(--cyber-border);
    border-radius: var(--cyber-radius-md);
    box-shadow: var(--cyber-shadow-md),0 0 24px var(--cyber-glow-primary);
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
    transition: transform var(--cyber-transition-base),box-shadow var(--cyber-transition-base),border-color var(--cyber-transition-base);
    position: relative;
    overflow: hidden;
  }

  .cyber-card:before, .cyber-panel:before, .cyber-console:before, .cyber-toolbar:before {
    content: "";
    pointer-events: none;
    border-top: 2px solid rgb(var(--cyber-primary-rgb)/.5);
    background: linear-gradient(120deg,transparent 0 68%,rgb(var(--cyber-accent-rgb)/.09));
    position: absolute;
    inset: 0;
  }

  .cyber-card, .cyber-panel, .cyber-console {
    padding: var(--cyber-space-6);
  }

  .cyber-console {
    background: linear-gradient(180deg,rgb(var(--cyber-primary-rgb)/.08),transparent),var(--cyber-surface-strong);
  }

  .cyber-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--cyber-space-4);
    padding: var(--cyber-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .cyber-hover-lift:hover {
    border-color: var(--cyber-primary);
    box-shadow: var(--cyber-shadow-lg),0 0 34px var(--cyber-glow-primary),0 0 48px var(--cyber-glow-secondary);
    transform: translateY(-3px);
  }

  .cyber-inset, .cyber-well {
    background: linear-gradient(180deg,#0000001a,#ffffff05),var(--cyber-surface-soft);
    border: 1px solid rgb(var(--cyber-border-rgb)/.46);
    border-radius: var(--cyber-radius-md);
    box-shadow: inset 0 0 24px #0000002e;
  }

  .cyber-well {
    padding: var(--cyber-space-5);
  }

  .cyber-button, .cyber-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--cyber-space-2);
    background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.22),rgb(var(--cyber-accent-rgb)/.1)),var(--cyber-surface);
    min-height: 2.85rem;
    color: var(--cyber-text);
    border: 1px solid rgb(var(--cyber-primary-rgb)/.7);
    border-radius: var(--cyber-radius-xs);
    box-shadow: var(--cyber-shadow-sm),0 0 18px var(--cyber-glow-primary);
    font: inherit;
    font-family: var(--cyber-font-display);
    letter-spacing: .09em;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - .75rem) 0, 100% .75rem, 100% 100%, .75rem 100%, 0 calc(100% - .75rem));
    transition: transform var(--cyber-transition-fast),box-shadow var(--cyber-transition-fast),background var(--cyber-transition-fast);
    padding: .75rem 1.1rem;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
  }

  .cyber-button:hover, .cyber-icon-button:hover {
    box-shadow: var(--cyber-shadow-md),0 0 26px var(--cyber-glow-primary);
    transform: translateY(-1px);
  }

  .cyber-button:active, .cyber-icon-button:active, .cyber-button.is-active, .cyber-button[aria-pressed="true"] {
    box-shadow: inset 0 0 18px #00000038,0 0 18px var(--cyber-glow-primary);
    transform: translateY(1px);
  }

  .cyber-button-primary {
    background: linear-gradient(135deg,#ffffff24,transparent),var(--cyber-primary);
    color: var(--cyber-on-primary);
  }

  .cyber-button-primary:hover {
    background: var(--cyber-primary-hover);
  }

  .cyber-button-secondary {
    background: linear-gradient(135deg,#ffffff24,transparent),var(--cyber-secondary);
    color: var(--cyber-on-secondary);
    border-color: rgb(var(--cyber-secondary-rgb)/.7);
  }

  .cyber-button-secondary:hover {
    background: var(--cyber-secondary-hover);
  }

  .cyber-button-danger {
    background: var(--cyber-danger);
    color: var(--cyber-on-danger);
  }

  .cyber-icon-button {
    width: 2.85rem;
    padding: 0;
  }

  .cyber-field {
    gap: var(--cyber-space-2);
    flex-direction: column;
    display: flex;
  }

  .cyber-label {
    font-family: var(--cyber-font-heading);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .8rem;
    font-weight: 800;
  }

  .cyber-input, .cyber-textarea, .cyber-select {
    background: var(--cyber-surface-soft);
    width: 100%;
    min-height: 2.9rem;
    color: var(--cyber-text);
    border: 1px solid rgb(var(--cyber-border-rgb)/.58);
    border-radius: var(--cyber-radius-xs);
    font: inherit;
    outline: none;
    padding: .8rem 1rem;
    box-shadow: inset 0 0 18px #0003;
  }

  .cyber-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus {
    border-color: var(--cyber-focus);
    box-shadow: 0 0 0 2px rgb(var(--cyber-focus-rgb)/.24),0 0 24px rgb(var(--cyber-focus-rgb)/.24),inset 0 0 18px #0003;
  }

  .cyber-help-text {
    color: var(--cyber-text-muted);
    font-size: .9rem;
  }

  .cyber-badge {
    background: var(--cyber-surface);
    min-height: 1.8rem;
    color: var(--cyber-text);
    border: 1px solid rgb(var(--cyber-primary-rgb)/.7);
    box-shadow: 0 0 16px var(--cyber-glow-primary);
    letter-spacing: .1em;
    clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%);
    align-items: center;
    padding: .35rem .75rem;
    font-size: .78rem;
    font-weight: 900;
    display: inline-flex;
  }

  .cyber-badge-primary {
    background: var(--cyber-primary);
    color: var(--cyber-on-primary);
  }

  .cyber-badge-secondary {
    background: var(--cyber-secondary);
    color: var(--cyber-on-secondary);
  }

  .cyber-badge-success {
    background: var(--cyber-success);
    color: var(--cyber-on-success);
  }

  .cyber-badge-warning {
    background: var(--cyber-warning);
    color: var(--cyber-on-warning);
  }

  .cyber-badge-danger {
    background: var(--cyber-danger);
    color: var(--cyber-on-danger);
  }

  .cyber-nav {
    gap: var(--cyber-space-2);
    padding: var(--cyber-space-2);
    background: var(--cyber-surface);
    border: 1px solid var(--cyber-border);
    border-radius: var(--cyber-radius-md);
    box-shadow: var(--cyber-shadow-md),0 0 22px var(--cyber-glow-primary);
    flex-wrap: wrap;
    display: flex;
  }

  .cyber-nav-link {
    min-height: 2.5rem;
    color: var(--cyber-text-muted);
    border-radius: var(--cyber-radius-xs);
    letter-spacing: .08em;
    border: 1px solid #0000;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
  }

  .cyber-nav-link:hover {
    color: var(--cyber-text);
    border-color: rgb(var(--cyber-primary-rgb)/.48);
  }

  .cyber-nav-link.is-active, .cyber-nav-link[aria-current="page"] {
    background: var(--cyber-primary);
    color: var(--cyber-on-primary);
    border-color: var(--cyber-primary);
    box-shadow: 0 0 18px var(--cyber-glow-primary);
  }

  .cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.26),rgb(var(--cyber-accent-rgb)/.12)),var(--cyber-surface-strong);
    max-inline-size: 16rem;
    color: var(--cyber-text);
    border: 1px solid rgb(var(--cyber-primary-rgb)/.7);
    border-radius: var(--cyber-radius-xs);
    clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%);
    box-shadow: 0 0 1rem var(--cyber-glow-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
    align-items: center;
    gap: .45rem;
    padding: .58rem .82rem;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.25;
    display: inline-flex;
  }

  .cyber-tooltip-arrow {
    background: var(--cyber-accent);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    block-size: .58rem;
    inline-size: .58rem;
    box-shadow: 0 0 .8rem var(--cyber-glow-accent);
    flex: none;
  }

  .cyber-progress {
    background: var(--cyber-surface-soft);
    border: 1px solid var(--cyber-border);
    width: 100%;
    height: .9rem;
    box-shadow: inset 0 0 18px #0000002e;
  }

  .cyber-progress-bar {
    height: 100%;
    width: var(--cyber-progress-value, 50%);
    background: linear-gradient(90deg,var(--cyber-primary),var(--cyber-accent));
    box-shadow: 0 0 18px var(--cyber-glow-primary);
  }

  .cyber-alert {
    padding: var(--cyber-space-4);
    background: var(--cyber-surface);
    border: 1px solid var(--cyber-border);
    border-left: 4px solid var(--cyber-primary);
    box-shadow: var(--cyber-shadow-md),0 0 22px var(--cyber-glow-primary);
  }

  .cyber-alert-success {
    border-left-color: var(--cyber-success);
  }

  .cyber-alert-warning {
    border-left-color: var(--cyber-warning);
  }

  .cyber-alert-danger {
    border-left-color: var(--cyber-danger);
  }

  .cyber-alert-title {
    font-family: var(--cyber-font-heading);
    text-transform: uppercase;
    margin: 0;
  }

  .cyber-alert-body {
    color: var(--cyber-text-muted);
    margin: .5rem 0 0;
  }

  .cyber-table-wrap {
    overflow: auto;
  }

  .cyber-table {
    border-collapse: collapse;
    width: 100%;
  }

  .cyber-table th, .cyber-table td {
    border-bottom: 1px solid rgb(var(--cyber-border-rgb)/.38);
    text-align: left;
    padding: .9rem 1rem;
  }

  .cyber-table th {
    background: rgb(var(--cyber-primary-rgb)/.12);
    font-family: var(--cyber-font-heading);
    text-transform: uppercase;
    letter-spacing: .1em;
  }

  .cyber-table td {
    color: var(--cyber-text-muted);
  }

  .cyber-table tr:hover td {
    background: rgb(var(--cyber-primary-rgb)/.06);
  }

  .cyber-text-primary {
    color: var(--cyber-primary);
  }

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

  .cyber-text-accent {
    color: var(--cyber-accent);
  }

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

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

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

  [data-ui="cyberpunk"] :focus-visible {
    outline: 3px solid var(--cyber-focus);
    outline-offset: 3px;
  }

  .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-input:focus-visible, .cyber-nav-link:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--cyber-focus-rgb)/.28),0 0 28px rgb(var(--cyber-focus-rgb)/.28);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] :before, [data-ui="cyberpunk"] :after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
    }
  }

  .cyber-card, .cyber-panel {
    background: var(--cyber-card-bg);
  }

  .cyber-toolbar, .cyber-table-wrap, .cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-ghost), .cyber-icon-button {
    background: var(--cyber-control-bg);
  }

  .cyber-button, .cyber-icon-button, .cyber-badge, .cyber-nav-link {
    font-family: var(--cyber-font-control);
  }

  .cyber-spinner, .cyber-loading-spinner, [data-ui="cyberpunk"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .16rem solid rgb(var(--cyber-primary-rgb)/.72);
    border-block-start-color: var(--cyber-spinner-stroke);
    border-inline-end-color: var(--cyber-spinner-accent);
    border-radius: var(--cyber-radius-xs);
    clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
    background: conic-gradient(from 90deg,transparent 0 22%,var(--cyber-spinner-stroke)0 45%,transparent 0 58%,var(--cyber-spinner-accent)0 82%,transparent 0);
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: 0 0 1rem var(--cyber-glow-primary),inset 0 0 .65rem rgb(var(--cyber-accent-rgb)/.38);
    vertical-align: -.2em;
    animation: .72s linear infinite cyber-spin;
    display: inline-block;
  }

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

  .cyber-spinner-lg {
    border-width: .22rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .cyber-button[aria-busy="true"], .cyber-icon-button[aria-busy="true"], [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .cyber-button[aria-busy="true"]:after, .cyber-icon-button[aria-busy="true"]:after, [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--cyber-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite cyber-spin;
    display: inline-block;
  }

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

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

  @media (prefers-contrast: more) {
    [data-ui="cyberpunk"] {
      --cyber-border-alpha: 1;
    }
  }

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

    [data-ui="cyberpunk"] :where(:focus-visible) {
      box-shadow: none;
      outline: 3px solid canvastext;
    }
  }

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

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

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


/* styles/y2k.css (visual paint) */
@layer ui-style-kit.presets {
  :root {
    --y2k-radius-xs: .25rem;
    --y2k-radius-sm: .5rem;
    --y2k-radius-md: .75rem;
    --y2k-radius-lg: 1rem;
    --y2k-radius-xl: 1.5rem;
    --y2k-radius-pill: 999px;
    --y2k-space-1: .25rem;
    --y2k-space-2: .5rem;
    --y2k-space-3: .75rem;
    --y2k-space-4: 1rem;
    --y2k-space-5: 1.25rem;
    --y2k-space-6: 1.5rem;
    --y2k-space-8: 2rem;
    --y2k-transition-fast: .14s ease;
    --y2k-transition-base: .22s ease;
    --y2k-transition-slow: .36s ease;
    --y2k-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --y2k-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--y2k-font-sans);
    --y2k-font-body: var(--y2k-font-sans);
    --y2k-font-heading: var(--y2k-font-display);
    --y2k-font-control: var(--y2k-font-display);
    --y2k-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }

  [data-ui="y2k"][data-mode="light"] {
    color-scheme: light;
    --y2k-panel-alpha: .92;
    --y2k-panel-strong-alpha: .98;
    --y2k-panel-soft-alpha: .74;
    --y2k-border-alpha: .7;
    --y2k-glow-alpha: .24;
    --y2k-shadow-alpha: .18;
    --y2k-grid-alpha: .075;
  }

  [data-ui="y2k"][data-mode="dark"] {
    color-scheme: dark;
    --y2k-panel-alpha: .82;
    --y2k-panel-strong-alpha: .94;
    --y2k-panel-soft-alpha: .58;
    --y2k-border-alpha: .64;
    --y2k-glow-alpha: .42;
    --y2k-shadow-alpha: .42;
    --y2k-grid-alpha: .12;
  }

  [data-ui="y2k"][data-mode="contrast"] {
    color-scheme: dark;
    --y2k-panel-alpha: 1;
    --y2k-panel-strong-alpha: 1;
    --y2k-panel-soft-alpha: .92;
    --y2k-border-alpha: 1;
    --y2k-glow-alpha: .68;
    --y2k-shadow-alpha: .56;
    --y2k-grid-alpha: .18;
  }

  [data-ui="y2k"][data-theme][data-mode] {
    --y2k-bg-rgb: var(--usk-bg-rgb);
    --y2k-surface-rgb: var(--usk-surface-rgb);
    --y2k-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --y2k-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --y2k-text-rgb: var(--usk-text-rgb);
    --y2k-text-muted-rgb: var(--usk-text-muted-rgb);
    --y2k-border-rgb: var(--usk-border-rgb);
    --y2k-primary-rgb: var(--usk-primary-rgb);
    --y2k-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --y2k-primary-text-rgb: var(--usk-primary-text-rgb);
    --y2k-secondary-rgb: var(--usk-secondary-rgb);
    --y2k-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --y2k-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --y2k-accent-rgb: var(--usk-accent-rgb);
    --y2k-success-rgb: var(--usk-success-rgb);
    --y2k-warning-rgb: var(--usk-warning-rgb);
    --y2k-danger-rgb: var(--usk-danger-rgb);
    --y2k-link-rgb: var(--usk-link-rgb);
    --y2k-accent-text-rgb: var(--usk-accent-text-rgb);
    --y2k-success-text-rgb: var(--usk-success-text-rgb);
    --y2k-warning-text-rgb: var(--usk-warning-text-rgb);
    --y2k-danger-text-rgb: var(--usk-danger-text-rgb);
    --y2k-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--y2k-surface);
    --usk-native-surface-strong: var(--y2k-surface-strong);
    --usk-native-surface-soft: var(--y2k-surface-soft);
    --usk-native-card-bg: var(--y2k-card-bg);
    --usk-native-control-bg: var(--y2k-control-bg);
    --usk-native-text: var(--y2k-text);
    --usk-native-text-muted: var(--y2k-text-muted);
    --usk-native-border: var(--y2k-border);
    --usk-native-primary: var(--y2k-primary);
    --usk-native-primary-hover: var(--y2k-primary-hover);
    --usk-native-on-primary: var(--y2k-on-primary);
    --usk-native-focus: var(--y2k-focus);
    --usk-native-success: var(--y2k-success);
    --usk-native-warning: var(--y2k-warning);
    --usk-native-danger: var(--y2k-danger);
    --usk-native-link: var(--y2k-link);
    --usk-native-font-body: var(--y2k-font-body);
    --usk-native-font-heading: var(--y2k-font-heading);
    --usk-native-font-control: var(--y2k-font-control);
    --usk-native-font-mono: var(--y2k-font-mono);
    --usk-native-radius-sm: var(--y2k-radius-sm);
    --usk-native-radius: var(--y2k-radius-md);
    --usk-native-radius-lg: var(--y2k-radius-lg);
    --usk-native-shadow: var(--y2k-shadow-sm, none);
    --usk-native-shadow-md: var(--y2k-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--y2k-focus-ring, 0 0 0 3px rgb(var(--y2k-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--y2k-space-5);
    --y2k-bg: rgb(var(--y2k-bg-rgb));
    --y2k-surface: rgb(var(--y2k-surface-rgb) / var(--y2k-panel-alpha));
    --y2k-surface-strong: rgb(var(--y2k-surface-strong-rgb) / var(--y2k-panel-strong-alpha));
    --y2k-surface-soft: rgb(var(--y2k-surface-soft-rgb) / var(--y2k-panel-soft-alpha));
    --y2k-text: rgb(var(--y2k-text-rgb));
    --y2k-text-muted: rgb(var(--y2k-text-muted-rgb));
    --y2k-fg: var(--y2k-text);
    --y2k-surface-fg: var(--y2k-text);
    --y2k-muted: var(--y2k-text-muted);
    --y2k-border: rgb(var(--y2k-border-rgb) / var(--y2k-border-alpha));
    --y2k-control-fg: var(--y2k-text);
    --y2k-primary: rgb(var(--y2k-primary-rgb));
    --y2k-primary-hover: rgb(var(--y2k-primary-hover-rgb));
    --y2k-primary-text: rgb(var(--y2k-primary-text-rgb));
    --y2k-secondary: rgb(var(--y2k-secondary-rgb));
    --y2k-secondary-hover: rgb(var(--y2k-secondary-hover-rgb));
    --y2k-secondary-text: rgb(var(--y2k-secondary-text-rgb));
    --y2k-on-primary: var(--y2k-primary-text);
    --y2k-on-secondary: var(--y2k-secondary-text);
    --y2k-on-accent: rgb(var(--y2k-accent-text-rgb));
    --y2k-on-success: rgb(var(--y2k-success-text-rgb));
    --y2k-on-warning: rgb(var(--y2k-warning-text-rgb));
    --y2k-on-danger: rgb(var(--y2k-danger-text-rgb));
    --y2k-accent: rgb(var(--y2k-accent-rgb));
    --y2k-success: rgb(var(--y2k-success-rgb));
    --y2k-warning: rgb(var(--y2k-warning-rgb));
    --y2k-danger: rgb(var(--y2k-danger-rgb));
    --y2k-link: rgb(var(--y2k-link-rgb));
    --y2k-focus: rgb(var(--y2k-focus-rgb));
    --y2k-glow-primary: rgb(var(--y2k-primary-rgb) / var(--y2k-glow-alpha));
    --y2k-glow-secondary: rgb(var(--y2k-secondary-rgb) / var(--y2k-glow-alpha));
    --y2k-glow-accent: rgb(var(--y2k-accent-rgb) / var(--y2k-glow-alpha));
    --y2k-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--y2k-shadow-alpha));
    --y2k-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--y2k-shadow-alpha) + .05));
    --y2k-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--y2k-shadow-alpha) + .12));
    --y2k-theme-bg-size: auto;
    --y2k-theme-bg: radial-gradient(circle at 20% 10%, rgb(var(--y2k-accent-rgb) / .22), transparent 24rem), radial-gradient(circle at 90% 20%, rgb(var(--y2k-secondary-rgb) / .18), transparent 28rem), radial-gradient(circle at 10% 100%, rgb(var(--y2k-primary-rgb) / .1), transparent 30rem), linear-gradient(135deg, #ffffff1a, transparent 45%), var(--y2k-bg);
    --y2k-card-bg: linear-gradient(135deg, rgb(var(--y2k-primary-rgb) / .1), rgb(var(--y2k-accent-rgb) / .055) 42%, rgb(var(--y2k-surface-strong-rgb) / var(--y2k-panel-alpha)) 100%), var(--y2k-surface);
    --y2k-control-bg: linear-gradient(180deg, rgb(var(--y2k-surface-strong-rgb) / var(--y2k-panel-alpha)), rgb(var(--y2k-surface-soft-rgb) / var(--y2k-panel-soft-alpha)));
    --y2k-spinner-track: rgb(var(--y2k-border-rgb) / max(.28, calc(var(--y2k-border-alpha) * .7)));
    --y2k-spinner-stroke: var(--y2k-primary);
    --y2k-spinner-accent: var(--y2k-accent);
  }

  [data-ui="y2k"] {
    background: radial-gradient(circle at 20% 10%,rgb(var(--y2k-accent-rgb)/.22),transparent 24rem),radial-gradient(circle at 90% 20%,rgb(var(--y2k-secondary-rgb)/.18),transparent 28rem),linear-gradient(135deg,#ffffff1a,transparent 45%),var(--y2k-bg);
    color: var(--y2k-text);
    font-family: var(--y2k-font-body);
  }

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

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

  [data-ui="y2k"] a {
    color: var(--y2k-link);
    text-underline-offset: .18em;
    text-decoration-thickness: .11em;
  }

  [data-ui="y2k"] ::selection {
    background: var(--y2k-primary);
    color: var(--y2k-on-primary);
  }

  .y2k-title, .y2k-heading, .y2k-kicker, .y2k-button, .y2k-badge, .y2k-nav-link {
    font-family: var(--y2k-font-heading);
  }

  .y2k-title {
    letter-spacing: -.05em;
    color: var(--y2k-text);
    text-shadow: 2px 2px 0 rgb(var(--y2k-accent-rgb)/.56),0 0 24px var(--y2k-glow-accent);
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: .95;
  }

  .y2k-heading {
    letter-spacing: -.03em;
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 2rem);
  }

  .y2k-kicker {
    color: var(--y2k-primary);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0;
    font-size: .82rem;
    font-weight: 900;
  }

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

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

  .y2k-card, .y2k-panel, .y2k-bubble, .y2k-toolbar, .y2k-table-wrap {
    background: linear-gradient(145deg,#ffffff6b,#ffffff14),var(--y2k-surface);
    color: var(--y2k-text);
    border: 1px solid #ffffff61;
    border-bottom-color: rgb(var(--y2k-border-rgb)/.4);
    border-right-color: rgb(var(--y2k-border-rgb)/.35);
    border-radius: var(--y2k-radius-xl);
    box-shadow: var(--y2k-shadow-md),inset 0 1px 0 #ffffff6b,0 0 28px var(--y2k-glow-accent);
    transition: transform var(--y2k-transition-base),box-shadow var(--y2k-transition-base);
    position: relative;
    overflow: hidden;
  }

  .y2k-card:before, .y2k-panel:before, .y2k-bubble:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 20% 0%,#ffffff6b,transparent 22%),linear-gradient(120deg,transparent 0 55%,rgb(var(--y2k-accent-rgb)/.12));
    position: absolute;
    inset: 0;
  }

  .y2k-card, .y2k-panel, .y2k-bubble {
    padding: var(--y2k-space-6);
  }

  .y2k-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--y2k-space-4);
    padding: var(--y2k-space-4);
    border-radius: var(--y2k-radius-pill);
    flex-wrap: wrap;
    display: flex;
  }

  .y2k-hover-lift:hover {
    box-shadow: var(--y2k-shadow-lg),0 0 42px var(--y2k-glow-accent);
    transform: translateY(-3px) scale(1.005);
  }

  .y2k-inset, .y2k-well {
    background: linear-gradient(180deg,#00000014,#ffffff1f),var(--y2k-surface-soft);
    border: 1px solid rgb(var(--y2k-border-rgb)/.42);
    border-radius: var(--y2k-radius-lg);
    box-shadow: inset 0 8px 18px #0000001f;
  }

  .y2k-well {
    padding: var(--y2k-space-5);
  }

  .y2k-button, .y2k-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--y2k-space-2);
    background: linear-gradient(180deg,#ffffff6b,#ffffff14),var(--y2k-surface-strong);
    min-height: 2.85rem;
    color: var(--y2k-text);
    border-radius: var(--y2k-radius-pill);
    box-shadow: var(--y2k-shadow-sm),inset 0 1px 0 #ffffff80;
    font: inherit;
    font-family: var(--y2k-font-display);
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform var(--y2k-transition-fast),box-shadow var(--y2k-transition-fast),background var(--y2k-transition-fast);
    border: 1px solid #ffffff6b;
    padding: .75rem 1.15rem;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
  }

  .y2k-button:hover, .y2k-icon-button:hover {
    box-shadow: var(--y2k-shadow-md),0 0 26px var(--y2k-glow-accent);
    transform: translateY(-2px);
  }

  .y2k-button:active, .y2k-icon-button:active, .y2k-button.is-active, .y2k-button[aria-pressed="true"] {
    transform: translateY(1px) scale(.99);
    box-shadow: inset 0 8px 16px #00000024;
  }

  .y2k-button-primary {
    background: linear-gradient(180deg,#ffffff75,#ffffff14),var(--y2k-primary);
    color: var(--y2k-on-primary);
  }

  .y2k-button-primary:hover {
    background: linear-gradient(180deg,#ffffff80,#ffffff1a),var(--y2k-primary-hover);
  }

  .y2k-button-secondary {
    background: linear-gradient(180deg,#ffffff75,#ffffff14),var(--y2k-secondary);
    color: var(--y2k-on-secondary);
  }

  .y2k-button-secondary:hover {
    background: var(--y2k-secondary-hover);
  }

  .y2k-button-danger {
    background: var(--y2k-danger);
    color: var(--y2k-on-danger);
  }

  .y2k-icon-button {
    width: 2.85rem;
    padding: 0;
  }

  .y2k-field {
    gap: var(--y2k-space-2);
    flex-direction: column;
    display: flex;
  }

  .y2k-label {
    letter-spacing: .04em;
    font-weight: 900;
  }

  .y2k-input, .y2k-textarea, .y2k-select {
    background: linear-gradient(180deg,#ffffff38,#0000000d),var(--y2k-surface-soft);
    width: 100%;
    min-height: 2.9rem;
    color: var(--y2k-text);
    border-radius: var(--y2k-radius-lg);
    font: inherit;
    border: 1px solid #ffffff61;
    outline: none;
    padding: .8rem 1rem;
    box-shadow: inset 0 6px 14px #0000001f;
  }

  .y2k-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .y2k-input:focus, .y2k-textarea:focus, .y2k-select:focus {
    border-color: var(--y2k-focus);
    box-shadow: inset 0 6px 14px #0000001f,0 0 0 3px rgb(var(--y2k-focus-rgb)/.25),0 0 24px rgb(var(--y2k-focus-rgb)/.22);
  }

  .y2k-help-text {
    color: var(--y2k-text-muted);
    font-size: .9rem;
  }

  .y2k-badge {
    background: linear-gradient(180deg,#fff6,#ffffff14),var(--y2k-surface-strong);
    min-height: 1.8rem;
    color: var(--y2k-text);
    border-radius: var(--y2k-radius-pill);
    box-shadow: var(--y2k-shadow-sm);
    border: 1px solid #ffffff6b;
    align-items: center;
    padding: .35rem .8rem;
    font-size: .78rem;
    font-weight: 900;
    display: inline-flex;
  }

  .y2k-badge-primary {
    background: var(--y2k-primary);
    color: var(--y2k-on-primary);
  }

  .y2k-badge-secondary {
    background: var(--y2k-secondary);
    color: var(--y2k-on-secondary);
  }

  .y2k-badge-success {
    background: var(--y2k-success);
    color: var(--y2k-on-success);
  }

  .y2k-badge-warning {
    background: var(--y2k-warning);
    color: var(--y2k-on-warning);
  }

  .y2k-badge-danger {
    background: var(--y2k-danger);
    color: var(--y2k-on-danger);
  }

  .y2k-nav {
    gap: var(--y2k-space-2);
    padding: var(--y2k-space-2);
    background: linear-gradient(180deg,#ffffff61,#ffffff14),var(--y2k-surface);
    border-radius: var(--y2k-radius-pill);
    box-shadow: var(--y2k-shadow-md);
    border: 1px solid #ffffff6b;
    flex-wrap: wrap;
    display: flex;
  }

  .y2k-nav-link {
    min-height: 2.5rem;
    color: var(--y2k-text-muted);
    border-radius: var(--y2k-radius-pill);
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
  }

  .y2k-nav-link:hover {
    color: var(--y2k-text);
    background: #ffffff29;
  }

  .y2k-nav-link.is-active, .y2k-nav-link[aria-current="page"] {
    background: var(--y2k-primary);
    color: var(--y2k-on-primary);
    box-shadow: 0 0 20px var(--y2k-glow-primary);
  }

  .y2k-tooltip, [data-ui="y2k"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: radial-gradient(circle at 28% 18%,#ffffffc2,transparent 26%),linear-gradient(135deg,var(--y2k-primary),var(--y2k-secondary));
    max-inline-size: 16rem;
    color: var(--y2k-on-primary);
    border-radius: var(--y2k-radius-pill);
    box-shadow: var(--y2k-shadow-md),0 0 1.1rem var(--y2k-glow-primary);
    border: 1px solid #ffffff8a;
    align-items: center;
    gap: .45rem;
    padding: .62rem .9rem;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.3;
    display: inline-flex;
  }

  .y2k-tooltip-arrow {
    block-size: .62rem;
    inline-size: .62rem;
    box-shadow: inset -.12rem -.12rem .3rem rgb(var(--y2k-secondary-rgb)/.28);
    background: #ffffffb8;
    border-radius: 50%;
    flex: none;
  }

  .y2k-progress {
    background: var(--y2k-surface-soft);
    border-radius: var(--y2k-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
    box-shadow: inset 0 6px 14px #0000001f;
  }

  .y2k-progress-bar {
    height: 100%;
    width: var(--y2k-progress-value, 50%);
    background: linear-gradient(90deg,var(--y2k-primary),var(--y2k-accent),var(--y2k-secondary));
    border-radius: inherit;
  }

  .y2k-alert {
    padding: var(--y2k-space-4);
    background: var(--y2k-surface);
    border-radius: var(--y2k-radius-xl);
    box-shadow: var(--y2k-shadow-md);
    border: 1px solid #ffffff61;
  }

  .y2k-alert-title {
    margin: 0;
    font-weight: 900;
  }

  .y2k-alert-body {
    color: var(--y2k-text-muted);
    margin: .5rem 0 0;
  }

  .y2k-alert-success {
    box-shadow: var(--y2k-shadow-md),0 0 22px rgb(var(--y2k-success-rgb)/.2);
  }

  .y2k-alert-warning {
    box-shadow: var(--y2k-shadow-md),0 0 22px rgb(var(--y2k-warning-rgb)/.2);
  }

  .y2k-alert-danger {
    box-shadow: var(--y2k-shadow-md),0 0 22px rgb(var(--y2k-danger-rgb)/.2);
  }

  .y2k-table-wrap {
    overflow: auto;
  }

  .y2k-table {
    border-collapse: collapse;
    width: 100%;
  }

  .y2k-table th, .y2k-table td {
    border-bottom: 1px solid rgb(var(--y2k-border-rgb)/.34);
    text-align: left;
    padding: .9rem 1rem;
  }

  .y2k-table th {
    background: #ffffff29;
    font-weight: 900;
  }

  .y2k-table td {
    color: var(--y2k-text-muted);
  }

  .y2k-text-primary {
    color: var(--y2k-primary);
  }

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

  .y2k-text-accent {
    color: var(--y2k-accent);
  }

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

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

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

  [data-ui="y2k"] :focus-visible {
    outline: 3px solid var(--y2k-focus);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-ui="y2k"] *, [data-ui="y2k"] :before, [data-ui="y2k"] :after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
    }
  }

  .y2k-card, .y2k-panel {
    background: var(--y2k-card-bg);
  }

  .y2k-toolbar, .y2k-table-wrap, .y2k-button:not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-ghost), .y2k-icon-button {
    background: var(--y2k-control-bg);
  }

  .y2k-button, .y2k-icon-button, .y2k-badge, .y2k-nav-link {
    font-family: var(--y2k-font-control);
  }

  .y2k-spinner, .y2k-loading-spinner, [data-ui="y2k"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .14rem solid #ffffff6b;
    border-block-start-color: var(--y2k-spinner-stroke);
    border-inline-end-color: var(--y2k-spinner-accent);
    background: radial-gradient(circle at 32% 26%,#ffffffe6,transparent 18%),conic-gradient(var(--y2k-spinner-stroke),var(--y2k-spinner-accent),var(--y2k-spinner-track),var(--y2k-secondary));
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: 0 0 1.2rem var(--y2k-glow-primary),inset -.18rem -.18rem .45rem rgb(var(--y2k-secondary-rgb)/.28);
    vertical-align: -.2em;
    border-radius: 50%;
    animation: .88s linear infinite y2k-spin;
    display: inline-block;
  }

  .y2k-spinner-sm {
    border-width: .08rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .y2k-spinner-lg {
    border-width: .22rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .y2k-button[aria-busy="true"], .y2k-icon-button[aria-busy="true"], [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .y2k-button[aria-busy="true"]:after, .y2k-icon-button[aria-busy="true"]:after, [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--y2k-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite y2k-spin;
    display: inline-block;
  }

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

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

  @media (prefers-contrast: more) {
    [data-ui="y2k"] {
      --y2k-border-alpha: 1;
    }
  }

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

    [data-ui="y2k"] :where(:focus-visible) {
      box-shadow: none;
      outline: 3px solid canvastext;
    }
  }

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

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

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


/* styles/retro-glass.css (visual paint) */
@layer ui-style-kit.presets {
  :root {
    --rg-radius-xs: .25rem;
    --rg-radius-sm: .5rem;
    --rg-radius-md: .75rem;
    --rg-radius-lg: 1rem;
    --rg-radius-xl: 1.5rem;
    --rg-radius-pill: 999px;
    --rg-space-1: .25rem;
    --rg-space-2: .5rem;
    --rg-space-3: .75rem;
    --rg-space-4: 1rem;
    --rg-space-5: 1.25rem;
    --rg-space-6: 1.5rem;
    --rg-space-8: 2rem;
    --rg-transition-fast: .14s ease;
    --rg-transition-base: .22s ease;
    --rg-transition-slow: .36s ease;
    --rg-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rg-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--rg-font-sans);
    --rg-font-body: var(--rg-font-sans);
    --rg-font-heading: var(--rg-font-display);
    --rg-font-control: var(--rg-font-display);
    --rg-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }

  [data-ui="retro-glass"][data-mode="light"] {
    color-scheme: light;
    --rg-panel-alpha: .92;
    --rg-panel-strong-alpha: .98;
    --rg-panel-soft-alpha: .74;
    --rg-border-alpha: .7;
    --rg-glow-alpha: .24;
    --rg-shadow-alpha: .18;
    --rg-grid-alpha: .075;
  }

  [data-ui="retro-glass"][data-mode="dark"] {
    color-scheme: dark;
    --rg-panel-alpha: .82;
    --rg-panel-strong-alpha: .94;
    --rg-panel-soft-alpha: .58;
    --rg-border-alpha: .64;
    --rg-glow-alpha: .42;
    --rg-shadow-alpha: .42;
    --rg-grid-alpha: .12;
  }

  [data-ui="retro-glass"][data-mode="contrast"] {
    color-scheme: dark;
    --rg-panel-alpha: 1;
    --rg-panel-strong-alpha: 1;
    --rg-panel-soft-alpha: .92;
    --rg-border-alpha: 1;
    --rg-glow-alpha: .68;
    --rg-shadow-alpha: .56;
    --rg-grid-alpha: .18;
  }

  [data-ui="retro-glass"][data-theme][data-mode] {
    --rg-bg-rgb: var(--usk-bg-rgb);
    --rg-surface-rgb: var(--usk-surface-rgb);
    --rg-surface-strong-rgb: var(--usk-surface-strong-rgb);
    --rg-surface-soft-rgb: var(--usk-surface-soft-rgb);
    --rg-text-rgb: var(--usk-text-rgb);
    --rg-text-muted-rgb: var(--usk-text-muted-rgb);
    --rg-border-rgb: var(--usk-border-rgb);
    --rg-primary-rgb: var(--usk-primary-rgb);
    --rg-primary-hover-rgb: var(--usk-primary-hover-rgb);
    --rg-primary-text-rgb: var(--usk-primary-text-rgb);
    --rg-secondary-rgb: var(--usk-secondary-rgb);
    --rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
    --rg-secondary-text-rgb: var(--usk-secondary-text-rgb);
    --rg-accent-rgb: var(--usk-accent-rgb);
    --rg-success-rgb: var(--usk-success-rgb);
    --rg-warning-rgb: var(--usk-warning-rgb);
    --rg-danger-rgb: var(--usk-danger-rgb);
    --rg-link-rgb: var(--usk-link-rgb);
    --rg-accent-text-rgb: var(--usk-accent-text-rgb);
    --rg-success-text-rgb: var(--usk-success-text-rgb);
    --rg-warning-text-rgb: var(--usk-warning-text-rgb);
    --rg-danger-text-rgb: var(--usk-danger-text-rgb);
    --rg-focus-rgb: var(--usk-focus-rgb);
    --usk-native-surface: var(--rg-surface);
    --usk-native-surface-strong: var(--rg-surface-strong);
    --usk-native-surface-soft: var(--rg-surface-soft);
    --usk-native-card-bg: var(--rg-card-bg);
    --usk-native-control-bg: var(--rg-control-bg);
    --usk-native-text: var(--rg-text);
    --usk-native-text-muted: var(--rg-text-muted);
    --usk-native-border: var(--rg-border);
    --usk-native-primary: var(--rg-primary);
    --usk-native-primary-hover: var(--rg-primary-hover);
    --usk-native-on-primary: var(--rg-on-primary);
    --usk-native-focus: var(--rg-focus);
    --usk-native-success: var(--rg-success);
    --usk-native-warning: var(--rg-warning);
    --usk-native-danger: var(--rg-danger);
    --usk-native-link: var(--rg-link);
    --usk-native-font-body: var(--rg-font-body);
    --usk-native-font-heading: var(--rg-font-heading);
    --usk-native-font-control: var(--rg-font-control);
    --usk-native-font-mono: var(--rg-font-mono);
    --usk-native-radius-sm: var(--rg-radius-sm);
    --usk-native-radius: var(--rg-radius-md);
    --usk-native-radius-lg: var(--rg-radius-lg);
    --usk-native-shadow: 0 10px 30px rgb(0 0 0 / calc(var(--rg-shadow-alpha) * .72));
    --usk-native-shadow-md: var(--rg-shadow-md, var(--usk-native-shadow));
    --usk-native-focus-ring: var(--rg-focus-ring, 0 0 0 3px rgb(var(--rg-focus-rgb) / .28));
    --usk-native-border-width: 1px;
    --usk-native-field-gap: .5rem;
    --usk-native-panel-padding: var(--rg-space-5);
    --rg-bg: rgb(var(--rg-bg-rgb));
    --rg-surface: rgb(var(--rg-surface-rgb) / var(--rg-panel-alpha));
    --rg-surface-strong: rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-strong-alpha));
    --rg-surface-soft: rgb(var(--rg-surface-soft-rgb) / var(--rg-panel-soft-alpha));
    --rg-text: rgb(var(--rg-text-rgb));
    --rg-text-muted: rgb(var(--rg-text-muted-rgb));
    --rg-fg: var(--rg-text);
    --rg-surface-fg: var(--rg-text);
    --rg-muted: var(--rg-text-muted);
    --rg-border: rgb(var(--rg-border-rgb) / var(--rg-border-alpha));
    --rg-control-fg: var(--rg-text);
    --rg-primary: rgb(var(--rg-primary-rgb));
    --rg-primary-hover: rgb(var(--rg-primary-hover-rgb));
    --rg-primary-text: rgb(var(--rg-primary-text-rgb));
    --rg-secondary: rgb(var(--rg-secondary-rgb));
    --rg-secondary-hover: rgb(var(--rg-secondary-hover-rgb));
    --rg-secondary-text: rgb(var(--rg-secondary-text-rgb));
    --rg-on-primary: var(--rg-primary-text);
    --rg-on-secondary: var(--rg-secondary-text);
    --rg-on-accent: rgb(var(--rg-accent-text-rgb));
    --rg-on-success: rgb(var(--rg-success-text-rgb));
    --rg-on-warning: rgb(var(--rg-warning-text-rgb));
    --rg-on-danger: rgb(var(--rg-danger-text-rgb));
    --rg-accent: rgb(var(--rg-accent-rgb));
    --rg-success: rgb(var(--rg-success-rgb));
    --rg-warning: rgb(var(--rg-warning-rgb));
    --rg-danger: rgb(var(--rg-danger-rgb));
    --rg-link: rgb(var(--rg-link-rgb));
    --rg-focus: rgb(var(--rg-focus-rgb));
    --rg-glow-primary: rgb(var(--rg-primary-rgb) / var(--rg-glow-alpha));
    --rg-glow-secondary: rgb(var(--rg-secondary-rgb) / var(--rg-glow-alpha));
    --rg-glow-accent: rgb(var(--rg-accent-rgb) / var(--rg-glow-alpha));
    --rg-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--rg-shadow-alpha));
    --rg-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .05));
    --rg-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .12));
    --rg-theme-bg-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
    --rg-theme-bg: radial-gradient(circle at 15% 15%, rgb(var(--rg-primary-rgb) / .18), transparent 28rem), radial-gradient(circle at 85% 10%, rgb(var(--rg-secondary-rgb) / .16), transparent 26rem), radial-gradient(circle at 50% 110%, rgb(var(--rg-accent-rgb) / .14), transparent 34rem), linear-gradient(90deg, rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), var(--rg-bg);
    --rg-card-bg: linear-gradient(135deg, rgb(var(--rg-primary-rgb) / .1), rgb(var(--rg-accent-rgb) / .055) 42%, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)) 100%), var(--rg-surface);
    --rg-control-bg: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)), rgb(var(--rg-surface-soft-rgb) / var(--rg-panel-soft-alpha)));
    --rg-spinner-track: rgb(var(--rg-border-rgb) / max(.28, calc(var(--rg-border-alpha) * .7)));
    --rg-spinner-stroke: var(--rg-primary);
    --rg-spinner-accent: var(--rg-accent);
  }

  [data-ui="retro-glass"] {
    background: radial-gradient(circle at 15% 15%,rgb(var(--rg-primary-rgb)/.18),transparent 28rem),radial-gradient(circle at 85% 10%,rgb(var(--rg-secondary-rgb)/.16),transparent 26rem),radial-gradient(circle at 50% 110%,rgb(var(--rg-accent-rgb)/.14),transparent 34rem),linear-gradient(90deg,rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),var(--rg-bg);
    color: var(--rg-text);
    font-family: var(--rg-font-body);
    background-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
  }

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

  [data-ui="retro-glass"][data-theme][data-mode] {
    background: var(--rg-theme-bg);
    background-size: var(--rg-theme-bg-size);
  }

  [data-ui="retro-glass"] a {
    color: var(--rg-link);
    text-underline-offset: .18em;
  }

  [data-ui="retro-glass"] ::selection {
    background: var(--rg-primary);
    color: var(--rg-on-primary);
  }

  .rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link {
    font-family: var(--rg-font-heading);
    text-transform: uppercase;
  }

  .rg-title {
    letter-spacing: .06em;
    text-shadow: 0 0 14px var(--rg-glow-primary),0 0 34px var(--rg-glow-accent);
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.02;
  }

  .rg-heading {
    letter-spacing: .06em;
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 2rem);
  }

  .rg-kicker {
    color: var(--rg-primary);
    letter-spacing: .18em;
    margin: 0;
    font-size: .8rem;
    font-weight: 900;
  }

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

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

  .rg-card, .rg-panel, .rg-console, .rg-toolbar, .rg-table-wrap {
    background: linear-gradient(135deg,#ffffff2e,#ffffff0a),linear-gradient(135deg,rgb(var(--rg-primary-rgb)/.06),transparent 52%),var(--rg-surface);
    color: var(--rg-text);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-xl);
    box-shadow: var(--rg-shadow-md),0 0 28px var(--rg-glow-primary);
    backdrop-filter: blur(18px) saturate(150%);
    transition: transform var(--rg-transition-base),box-shadow var(--rg-transition-base),border-color var(--rg-transition-base);
    border-top-color: #ffffff47;
    border-left-color: #fff3;
    position: relative;
    overflow: hidden;
  }

  .rg-card:before, .rg-panel:before, .rg-console:before {
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg,#ffffff1a,transparent 30%),linear-gradient(90deg,transparent,rgb(var(--rg-accent-rgb)/.08),transparent);
    position: absolute;
    inset: 0;
  }

  .rg-card, .rg-panel, .rg-console {
    padding: var(--rg-space-6);
  }

  .rg-console {
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-lg),inset 0 0 28px rgb(var(--rg-primary-rgb)/.08),0 0 32px var(--rg-glow-primary);
  }

  .rg-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--rg-space-4);
    padding: var(--rg-space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .rg-hover-lift:hover {
    border-color: rgb(var(--rg-primary-rgb)/.68);
    box-shadow: var(--rg-shadow-lg),0 0 44px var(--rg-glow-primary),0 0 60px var(--rg-glow-secondary);
    transform: translateY(-3px);
  }

  .rg-inset, .rg-well {
    background: linear-gradient(180deg,#00000014,#ffffff0a),var(--rg-surface-soft);
    border: 1px solid rgb(var(--rg-border-rgb)/.36);
    border-radius: var(--rg-radius-lg);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 8px 22px #00000029;
  }

  .rg-well {
    padding: var(--rg-space-5);
  }

  .rg-button, .rg-icon-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--rg-space-2);
    background: linear-gradient(135deg,#ffffff3d,#ffffff0a),var(--rg-surface);
    min-height: 2.85rem;
    color: var(--rg-text);
    border: 1px solid rgb(var(--rg-border-rgb)/.56);
    border-radius: var(--rg-radius-md);
    box-shadow: var(--rg-shadow-sm);
    backdrop-filter: blur(14px) saturate(150%);
    font: inherit;
    font-family: var(--rg-font-display);
    letter-spacing: .08em;
    cursor: pointer;
    transition: transform var(--rg-transition-fast),box-shadow var(--rg-transition-fast),background var(--rg-transition-fast),border-color var(--rg-transition-fast);
    border-top-color: #ffffff52;
    padding: .75rem 1.1rem;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
  }

  .rg-button:hover, .rg-icon-button:hover {
    border-color: rgb(var(--rg-primary-rgb)/.68);
    box-shadow: var(--rg-shadow-md),0 0 24px var(--rg-glow-primary);
    transform: translateY(-2px);
  }

  .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"] {
    box-shadow: inset 0 8px 18px #0000002e,0 0 18px var(--rg-glow-primary);
    transform: translateY(1px);
  }

  .rg-button-primary {
    background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-primary);
    color: var(--rg-on-primary);
    border-color: rgb(var(--rg-primary-rgb)/.72);
  }

  .rg-button-primary:hover {
    background: var(--rg-primary-hover);
  }

  .rg-button-secondary {
    background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-secondary);
    color: var(--rg-on-secondary);
    border-color: rgb(var(--rg-secondary-rgb)/.72);
  }

  .rg-button-secondary:hover {
    background: var(--rg-secondary-hover);
  }

  .rg-button-danger {
    background: var(--rg-danger);
    color: var(--rg-on-danger);
  }

  .rg-icon-button {
    width: 2.85rem;
    padding: 0;
  }

  .rg-field {
    gap: var(--rg-space-2);
    flex-direction: column;
    display: flex;
  }

  .rg-label {
    font-family: var(--rg-font-heading);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    font-weight: 900;
  }

  .rg-input, .rg-textarea, .rg-select {
    background: linear-gradient(180deg,#ffffff0f,#00000014),var(--rg-surface-soft);
    width: 100%;
    min-height: 2.9rem;
    color: var(--rg-text);
    border: 1px solid rgb(var(--rg-border-rgb)/.44);
    border-radius: var(--rg-radius-md);
    font: inherit;
    backdrop-filter: blur(10px);
    outline: none;
    padding: .8rem 1rem;
    box-shadow: inset 0 8px 18px #00000024;
  }

  .rg-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .rg-input:focus, .rg-textarea:focus, .rg-select:focus {
    border-color: var(--rg-focus);
    box-shadow: inset 0 8px 18px #00000024,0 0 0 3px rgb(var(--rg-focus-rgb)/.24),0 0 26px rgb(var(--rg-focus-rgb)/.22);
  }

  .rg-help-text {
    color: var(--rg-text-muted);
    font-size: .9rem;
  }

  .rg-badge {
    background: linear-gradient(135deg,#fff3,#ffffff0a),var(--rg-surface);
    min-height: 1.8rem;
    color: var(--rg-text);
    border: 1px solid rgb(var(--rg-border-rgb)/.5);
    border-radius: var(--rg-radius-pill);
    box-shadow: var(--rg-shadow-sm);
    letter-spacing: .08em;
    backdrop-filter: blur(12px);
    align-items: center;
    padding: .35rem .75rem;
    font-size: .78rem;
    font-weight: 900;
    display: inline-flex;
  }

  .rg-badge-primary {
    background: var(--rg-primary);
    color: var(--rg-on-primary);
  }

  .rg-badge-secondary {
    background: var(--rg-secondary);
    color: var(--rg-on-secondary);
  }

  .rg-badge-success {
    background: var(--rg-success);
    color: var(--rg-on-success);
  }

  .rg-badge-warning {
    background: var(--rg-warning);
    color: var(--rg-on-warning);
  }

  .rg-badge-danger {
    background: var(--rg-danger);
    color: var(--rg-on-danger);
  }

  .rg-nav {
    gap: var(--rg-space-2);
    padding: var(--rg-space-2);
    background: linear-gradient(135deg,#ffffff2e,#ffffff0a),var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-xl);
    box-shadow: var(--rg-shadow-md),0 0 24px var(--rg-glow-primary);
    backdrop-filter: blur(18px) saturate(150%);
    flex-wrap: wrap;
    display: flex;
  }

  .rg-nav-link {
    min-height: 2.5rem;
    color: var(--rg-text-muted);
    border-radius: var(--rg-radius-pill);
    letter-spacing: .08em;
    border: 1px solid #0000;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
  }

  .rg-nav-link:hover {
    color: var(--rg-text);
    border-color: rgb(var(--rg-primary-rgb)/.36);
    background: #ffffff1a;
  }

  .rg-nav-link.is-active, .rg-nav-link[aria-current="page"] {
    background: var(--rg-primary);
    color: var(--rg-on-primary);
    box-shadow: 0 0 22px var(--rg-glow-primary);
  }

  .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
    background: linear-gradient(135deg,#ffffff47,#ffffff0f),var(--rg-surface);
    max-inline-size: 16rem;
    color: var(--rg-text);
    box-shadow: var(--rg-shadow-md),0 0 1.25rem var(--rg-glow-primary);
    backdrop-filter: blur(14px) saturate(145%);
    letter-spacing: .04em;
    border: 1px solid #ffffff57;
    border-radius: 38% 62% 48% 52% / 52% 42% 58% 48%;
    align-items: center;
    gap: .45rem;
    padding: .62rem .88rem;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.3;
    display: inline-flex;
  }

  .rg-tooltip-arrow {
    background: #ffffff61;
    border: 1px solid #ffffff4d;
    border-radius: 40% 60% 45% 55%;
    flex: none;
    block-size: .6rem;
    inline-size: .6rem;
    transform: rotate(45deg);
  }

  .rg-progress {
    background: var(--rg-surface-soft);
    border: 1px solid rgb(var(--rg-border-rgb)/.4);
    border-radius: var(--rg-radius-pill);
    width: 100%;
    height: .9rem;
    overflow: hidden;
    box-shadow: inset 0 8px 18px #00000024;
  }

  .rg-progress-bar {
    height: 100%;
    width: var(--rg-progress-value, 50%);
    background: linear-gradient(90deg,var(--rg-primary),var(--rg-accent),var(--rg-secondary));
    border-radius: inherit;
    box-shadow: 0 0 18px var(--rg-glow-primary);
  }

  .rg-alert {
    padding: var(--rg-space-4);
    background: var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-lg);
    box-shadow: var(--rg-shadow-md),0 0 22px var(--rg-glow-primary);
    backdrop-filter: blur(16px);
  }

  .rg-alert-title {
    font-family: var(--rg-font-heading);
    text-transform: uppercase;
    margin: 0;
  }

  .rg-alert-body {
    color: var(--rg-text-muted);
    margin: .5rem 0 0;
  }

  .rg-alert-success {
    border-left: 4px solid var(--rg-success);
  }

  .rg-alert-warning {
    border-left: 4px solid var(--rg-warning);
  }

  .rg-alert-danger {
    border-left: 4px solid var(--rg-danger);
  }

  .rg-table-wrap {
    overflow: auto;
  }

  .rg-table {
    border-collapse: collapse;
    width: 100%;
  }

  .rg-table th, .rg-table td {
    border-bottom: 1px solid rgb(var(--rg-border-rgb)/.34);
    text-align: left;
    padding: .9rem 1rem;
  }

  .rg-table th {
    background: rgb(var(--rg-primary-rgb)/.1);
    font-family: var(--rg-font-heading);
    text-transform: uppercase;
    letter-spacing: .1em;
  }

  .rg-table td {
    color: var(--rg-text-muted);
  }

  .rg-text-primary {
    color: var(--rg-primary);
  }

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

  .rg-text-accent {
    color: var(--rg-accent);
  }

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

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

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

  @supports not (backdrop-filter: blur(1px)) {
    [data-ui="retro-glass"] {
      --rg-panel-alpha: .96;
      --rg-panel-strong-alpha: 1;
      --rg-panel-soft-alpha: .9;
    }
  }

  [data-ui="retro-glass"] :focus-visible {
    outline: 3px solid var(--rg-focus);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
    }
  }

  .rg-card, .rg-panel {
    background: var(--rg-card-bg);
  }

  .rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-ghost), .rg-icon-button {
    background: var(--rg-control-bg);
  }

  .rg-button, .rg-icon-button, .rg-badge, .rg-nav-link {
    font-family: var(--rg-font-control);
  }

  .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
    border: .12rem solid #ffffff52;
    border-block-start-color: var(--rg-spinner-stroke);
    border-inline-end-color: var(--rg-spinner-accent);
    background: linear-gradient(135deg,#ffffff52,transparent 46%),conic-gradient(from 35deg,var(--rg-spinner-stroke),transparent 40%,var(--rg-spinner-accent),var(--rg-spinner-track));
    block-size: 2rem;
    inline-size: 2rem;
    box-shadow: 0 0 1.35rem var(--rg-glow-primary),inset 0 0 .85rem #ffffff2e;
    backdrop-filter: blur(.4rem);
    vertical-align: -.2em;
    border-radius: 38% 62% 48% 52%;
    animation: .95s linear infinite rg-spin;
    display: inline-block;
  }

  .rg-spinner-sm {
    border-width: .08rem;
    block-size: 1rem;
    inline-size: 1rem;
  }

  .rg-spinner-lg {
    border-width: .2rem;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .rg-button[aria-busy="true"], .rg-icon-button[aria-busy="true"], [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
    cursor: progress;
    gap: .55rem;
  }

  .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
    content: "";
    border: .16em solid rgb(var(--rg-primary-text-rgb)/.42);
    border-block-start-color: currentColor;
    border-radius: 50%;
    block-size: 1em;
    inline-size: 1em;
    animation: .75s linear infinite rg-spin;
    display: inline-block;
  }

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

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

  @media (prefers-contrast: more) {
    [data-ui="retro-glass"] {
      --rg-border-alpha: 1;
    }
  }

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

    [data-ui="retro-glass"] :where(:focus-visible) {
      box-shadow: none;
      outline: 3px solid canvastext;
    }
  }

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

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

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