ui-style-kit-css 2.2.0 → 2.4.0

package/styles/maximalist.css

@@ -1,6 +1,6 @@
 /* =========================================================
    UI Style Kit CSS — Maximalist / Playful Theme System
-   Includes 10 color schemes, light/dark/contrast modes,
+   Includes 20 color schemes, light/dark/contrast modes,
    component classes, native element coverage, and CSS-only
    accessibility presentation helpers.
 
@@ -17,17 +17,17 @@
 
 @layer ui-style-kit.maximalist {
 :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-sans: "Arial Narrow", "Roboto Condensed", "Bahnschrift Condensed", "Aptos Narrow", Arial, ui-sans-serif, system-ui, sans-serif;
+  --max-font-display: "Arial Narrow", "Roboto Condensed", "Bahnschrift Condensed", "Aptos Narrow", Arial, 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-xs: 0;
+  --max-radius-sm: 0;
+  --max-radius-md: 0;
+  --max-radius-lg: 0;
+  --max-radius-xl: 0;
   --max-radius-pill: 999px;
   --max-space-1: .25rem;
   --max-space-2: .5rem;
@@ -42,24 +42,93 @@
 
 [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;
+  --max-fallback-bg-rgb: 244 237 218;
+  --max-fallback-surface-rgb: 255 250 238;
+  --max-fallback-surface-strong-rgb: 255 250 240;
+  --max-fallback-surface-soft-rgb: 239 228 202;
+  --max-fallback-text-rgb: 9 9 11;
+  --max-fallback-text-muted-rgb: 86 80 74;
+  --max-fallback-border-rgb: 9 9 11;
+  --max-fallback-primary-rgb: 240 45 22;
+  --max-fallback-primary-hover-rgb: 240 45 22;
+  --max-fallback-primary-text-rgb: 9 9 11;
+  --max-fallback-secondary-rgb: 16 190 213;
+  --max-fallback-secondary-hover-rgb: 0 151 173;
+  --max-fallback-secondary-text-rgb: 9 9 11;
+  --max-fallback-accent-rgb: 94 22 216;
+  --max-fallback-accent-text-rgb: 255 250 240;
+  --max-fallback-success-rgb: 18 155 120;
+  --max-fallback-success-text-rgb: 9 9 11;
+  --max-fallback-warning-rgb: 255 210 10;
+  --max-fallback-warning-text-rgb: 9 9 11;
+  --max-fallback-danger-rgb: 238 23 99;
+  --max-fallback-danger-text-rgb: 9 9 11;
+  --max-fallback-link-rgb: 94 22 216;
+  --max-fallback-focus-rgb: 94 22 216;
+  --max-panel-alpha: 1;
+  --max-panel-soft-alpha: 1;
+  --max-border-alpha: 1;
+  --max-shadow-alpha: 1;
+  --max-focus-alpha: .68;
 }
 
 [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;
+  --max-fallback-bg-rgb: 10 11 13;
+  --max-fallback-surface-rgb: 14 15 18;
+  --max-fallback-surface-strong-rgb: 16 17 20;
+  --max-fallback-surface-soft-rgb: 29 27 34;
+  --max-fallback-text-rgb: 245 234 214;
+  --max-fallback-text-muted-rgb: 200 186 169;
+  --max-fallback-border-rgb: 241 227 204;
+  --max-fallback-primary-rgb: 255 53 31;
+  --max-fallback-primary-hover-rgb: 255 103 84;
+  --max-fallback-primary-text-rgb: 9 9 11;
+  --max-fallback-secondary-rgb: 24 212 232;
+  --max-fallback-secondary-hover-rgb: 81 228 241;
+  --max-fallback-secondary-text-rgb: 9 9 11;
+  --max-fallback-accent-rgb: 129 44 244;
+  --max-fallback-accent-text-rgb: 245 234 214;
+  --max-fallback-success-rgb: 25 184 139;
+  --max-fallback-success-text-rgb: 9 9 11;
+  --max-fallback-warning-rgb: 255 218 25;
+  --max-fallback-warning-text-rgb: 9 9 11;
+  --max-fallback-danger-rgb: 255 40 110;
+  --max-fallback-danger-text-rgb: 9 9 11;
+  --max-fallback-link-rgb: 24 212 232;
+  --max-fallback-focus-rgb: 255 218 25;
+  --max-panel-alpha: 1;
+  --max-panel-soft-alpha: 1;
+  --max-border-alpha: 1;
+  --max-shadow-alpha: 1;
+  --max-focus-alpha: .74;
 }
 
 [data-ui="maximalist"][data-mode="contrast"] {
   color-scheme: dark;
+  --max-fallback-bg-rgb: 0 0 0;
+  --max-fallback-surface-rgb: 5 11 0;
+  --max-fallback-surface-strong-rgb: 11 22 0;
+  --max-fallback-surface-soft-rgb: 0 0 0;
+  --max-fallback-text-rgb: 255 255 255;
+  --max-fallback-text-muted-rgb: 244 255 232;
+  --max-fallback-border-rgb: 255 255 255;
+  --max-fallback-primary-rgb: 170 255 0;
+  --max-fallback-primary-hover-rgb: 255 255 255;
+  --max-fallback-primary-text-rgb: 0 0 0;
+  --max-fallback-secondary-rgb: 0 240 255;
+  --max-fallback-secondary-hover-rgb: 255 255 255;
+  --max-fallback-secondary-text-rgb: 0 0 0;
+  --max-fallback-accent-rgb: 204 255 0;
+  --max-fallback-accent-text-rgb: 0 0 0;
+  --max-fallback-success-rgb: 0 255 117;
+  --max-fallback-success-text-rgb: 0 0 0;
+  --max-fallback-warning-rgb: 255 225 0;
+  --max-fallback-warning-text-rgb: 0 0 0;
+  --max-fallback-danger-rgb: 255 48 48;
+  --max-fallback-danger-text-rgb: 0 0 0;
+  --max-fallback-link-rgb: 170 255 0;
+  --max-fallback-focus-rgb: 255 255 255;
   --max-panel-alpha: 1;
   --max-panel-soft-alpha: .92;
   --max-border-alpha: 1;
@@ -67,8 +136,8 @@
   --max-focus-alpha: .72;
 }
 
+/** Preserves direct aliases for static extraction when a scheme is selected. */
 [data-ui="maximalist"][data-theme][data-mode] {
-  /* Shared scheme aliases preserve the existing prefixed token API. */
   --max-bg-rgb: var(--usk-bg-rgb);
   --max-surface-rgb: var(--usk-surface-rgb);
   --max-surface-strong-rgb: var(--usk-surface-strong-rgb);
@@ -83,15 +152,43 @@
   --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-rgb: var(--usk-success-rgb);
   --max-success-text-rgb: var(--usk-success-text-rgb);
+  --max-warning-rgb: var(--usk-warning-rgb);
   --max-warning-text-rgb: var(--usk-warning-text-rgb);
+  --max-danger-rgb: var(--usk-danger-rgb);
   --max-danger-text-rgb: var(--usk-danger-text-rgb);
+  --max-link-rgb: var(--usk-link-rgb);
   --max-focus-rgb: var(--usk-focus-rgb);
+}
+
+[data-ui="maximalist"][data-mode] {
+  --usk-native-bg: var(--max-bg);
+  /* Explicit schemes win; reference colors are used only when no scheme exists. */
+  --max-bg-rgb: var(--usk-bg-rgb, var(--max-fallback-bg-rgb));
+  --max-surface-rgb: var(--usk-surface-rgb, var(--max-fallback-surface-rgb));
+  --max-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--max-fallback-surface-strong-rgb));
+  --max-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--max-fallback-surface-soft-rgb));
+  --max-text-rgb: var(--usk-text-rgb, var(--max-fallback-text-rgb));
+  --max-text-muted-rgb: var(--usk-text-muted-rgb, var(--max-fallback-text-muted-rgb));
+  --max-border-rgb: var(--usk-border-rgb, var(--max-fallback-border-rgb));
+  --max-primary-rgb: var(--usk-primary-rgb, var(--max-fallback-primary-rgb));
+  --max-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--max-fallback-primary-hover-rgb));
+  --max-primary-text-rgb: var(--usk-primary-text-rgb, var(--max-fallback-primary-text-rgb));
+  --max-secondary-rgb: var(--usk-secondary-rgb, var(--max-fallback-secondary-rgb));
+  --max-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--max-fallback-secondary-hover-rgb));
+  --max-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--max-fallback-secondary-text-rgb));
+  --max-accent-rgb: var(--usk-accent-rgb, var(--max-fallback-accent-rgb));
+  --max-accent-text-rgb: var(--usk-accent-text-rgb, var(--max-fallback-accent-text-rgb));
+  --max-success-rgb: var(--usk-success-rgb, var(--max-fallback-success-rgb));
+  --max-success-text-rgb: var(--usk-success-text-rgb, var(--max-fallback-success-text-rgb));
+  --max-warning-rgb: var(--usk-warning-rgb, var(--max-fallback-warning-rgb));
+  --max-warning-text-rgb: var(--usk-warning-text-rgb, var(--max-fallback-warning-text-rgb));
+  --max-danger-rgb: var(--usk-danger-rgb, var(--max-fallback-danger-rgb));
+  --max-danger-text-rgb: var(--usk-danger-text-rgb, var(--max-fallback-danger-text-rgb));
+  --max-link-rgb: var(--usk-link-rgb, var(--max-fallback-link-rgb));
+  --max-focus-rgb: var(--usk-focus-rgb, var(--max-fallback-focus-rgb));
   /* Native fallback selectors inherit visual identity through shared tokens. */
   --usk-native-surface: var(--max-surface);
   --usk-native-surface-strong: var(--max-surface-strong);
@@ -119,9 +216,60 @@
   --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-border-width: 2px;
+  --usk-native-field-gap: .46rem;
   --usk-native-panel-padding: var(--max-space-5);
+  --usk-native-control-min-block-size: 3rem;
+  --usk-native-control-padding-block: .62rem;
+  --usk-native-control-padding-inline: .9rem;
+  --usk-native-subcontrol-padding-block: .52rem;
+  --usk-native-subcontrol-padding-inline: .72rem;
+  --usk-native-choice-size: 1.25rem;
+  --usk-native-choice-background: var(--max-paper-bg);
+  --usk-native-choice-border: 2px solid var(--max-ink);
+  --usk-native-checkbox-radius: .08rem;
+  --usk-native-radio-radius: 50%;
+  --usk-native-choice-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .72);
+  --usk-native-choice-checked-background: var(--max-primary);
+  --usk-native-choice-mark-color: var(--max-on-primary);
+  --usk-native-select-indicator-image: linear-gradient(33deg, transparent 50%, var(--max-primary) 50%), linear-gradient(147deg, var(--max-primary) 50%, transparent 50%);
+  --usk-native-select-indicator-size: 0.42000000000000004rem 0.42000000000000004rem, 0.42000000000000004rem 0.42000000000000004rem;
+  --usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - 0.84rem) 50%;
+  --usk-native-select-padding-inline-end: 2.55rem;
+  --usk-native-range-track-size: .72rem;
+  --usk-native-range-track-background: var(--max-paper-bg);
+  --usk-native-range-track-border: 2px solid var(--max-ink);
+  --usk-native-range-track-radius: 0;
+  --usk-native-range-track-shadow: .22rem .22rem 0 var(--max-ink);
+  --usk-native-range-progress-background: var(--max-warning);
+  --usk-native-range-thumb-size: 1.62rem;
+  --usk-native-range-thumb-background: var(--max-warning);
+  --usk-native-range-thumb-border: 3px solid var(--max-ink);
+  --usk-native-range-thumb-radius: 50%;
+  --usk-native-range-thumb-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .8);
+  --usk-native-progress-size: .95rem;
+  --usk-native-progress-track-background: var(--max-paper-bg);
+  --usk-native-progress-track-border: 2px solid var(--max-ink);
+  --usk-native-progress-track-radius: 0;
+  --usk-native-progress-track-shadow: .22rem .22rem 0 var(--max-ink);
+  --usk-native-progress-value-background: repeating-linear-gradient(90deg, rgb(var(--max-text-rgb) / .28) 0 .08rem, transparent .08rem 2rem), linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary));
+  --usk-native-progress-value-radius: 0;
+  --usk-native-progress-value-shadow: .12rem 0 0 rgb(var(--max-text-rgb) / .36);
+  --usk-native-meter-optimum-background: var(--max-success);
+  --usk-native-meter-suboptimum-background: var(--max-warning);
+  --usk-native-meter-critical-background: var(--max-danger);
+  --usk-native-file-button-background: var(--max-primary);
+  --usk-native-file-button-border: 2px solid var(--max-ink);
+  --usk-native-file-button-radius: .12rem;
+  --usk-native-file-button-shadow: .22rem .22rem 0 var(--max-ink);
+  --usk-native-color-swatch-border: 2px solid var(--max-ink);
+  --usk-native-color-swatch-radius: .12rem;
+  --usk-native-indicator-opacity: 0.82;
+  --usk-native-indicator-filter: none;
+  --usk-native-scrollbar-size: 1rem;
+  --usk-native-scrollbar-track: var(--max-surface-soft);
+  --usk-native-scrollbar-thumb: var(--max-primary);
+  --usk-native-scrollbar-radius: .12rem;
   --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));
@@ -131,7 +279,7 @@
   --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-border: rgb(var(--max-border-rgb) / max(var(--max-border-alpha), var(--usk-border-min-alpha)));
   --max-control-fg: var(--max-text);
   --max-primary: rgb(var(--max-primary-rgb));
   --max-primary-hover: rgb(var(--max-primary-hover-rgb));
@@ -152,15 +300,31 @@
   --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) / .10), transparent 34rem), var(--max-bg);
-  --max-card-bg: linear-gradient(135deg, rgb(var(--max-primary-rgb) / .10), 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-ink: rgb(var(--max-text-rgb));
+  --max-on-ink: rgb(var(--max-bg-rgb));
+  --max-paper-wash: rgb(var(--max-warning-rgb) / .08);
+  --max-paper-grain: radial-gradient(circle at 14% 18%, rgb(var(--max-text-rgb) / .055) 0 1px, transparent 1.4px), radial-gradient(circle at 72% 64%, rgb(var(--max-danger-rgb) / .07) 0 1px, transparent 1.5px);
+  --max-paper-bg: var(--max-surface-strong);
+  --max-poster-fill: var(--max-primary);
+  --max-label-bg: var(--max-primary);
+  --max-label-fg: var(--max-on-primary);
+  --max-pop-shadow: 5px 5px 0 var(--max-ink);
+  --max-sticker-shadow: 3px 3px 0 var(--max-ink);
+  --max-shadow-sm: 3px 3px 0 var(--max-ink);
+  --max-shadow-md: 5px 5px 0 var(--max-ink);
+  --max-theme-bg-size: 9rem 9rem, 13rem 13rem, auto;
+  --max-theme-bg: radial-gradient(circle at 16% 24%, rgb(var(--max-secondary-rgb) / .09) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 68%, rgb(var(--max-danger-rgb) / .08) 0 1px, transparent 1.6px), var(--max-bg);
+  --max-card-bg: var(--max-paper-grain), var(--max-surface);
+  --max-control-bg: var(--max-surface-strong);
   --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);
 }
 
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="maximalist"][data-mode] { --max-border: color-mix(in srgb, rgb(var(--max-border-rgb) / max(var(--max-border-alpha), var(--usk-border-min-alpha))), var(--max-text) var(--usk-border-text-mix)); }
+}
+
 
 
 
@@ -197,7 +361,7 @@
 
 [data-ui="maximalist"] {
   min-height: 100vh;
-  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);
+  background: repeating-linear-gradient(135deg, rgb(var(--max-primary-rgb) / .12) 0 1rem, transparent 1rem 2rem), 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);
   line-height: 1.5;
@@ -210,10 +374,10 @@
 [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); }
+[data-ui="maximalist"][data-mode] { background: var(--max-theme-bg); background-size: var(--max-theme-bg-size); }
 
 .max-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
-.max-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
+.max-container { width: min(100% - 2rem, 192rem); margin-inline: auto; }
 .max-section { display: grid; gap: var(--max-space-5); padding: clamp(1rem, 3vw, 2rem); }
 .max-stack { display: flex; flex-direction: column; gap: var(--max-space-4); }
 .max-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--max-space-3); }
@@ -224,13 +388,14 @@
    Typography
 ========================================================= */
 
-.max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link { font-family: var(--max-font-heading); }
-.max-title { margin: 0; color: var(--max-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
-.max-heading { margin: 0; color: var(--max-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
-.max-kicker { margin: 0; color: var(--max-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
-.max-subtitle, .max-copy { margin: 0; color: var(--max-text-muted); line-height: 1.65; }
+.max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link { font-family: var(--max-font-heading); text-transform: uppercase; }
+.max-title { margin: 0; color: var(--max-text); font-size: clamp(2.4rem, 7vw, 5.8rem); font-weight: 950; line-height: .86; letter-spacing: .015em; text-transform: uppercase; }
+@supports (text-wrap: balance) { .max-title { text-wrap: balance; } }
+.max-heading { margin: 0; color: var(--max-text); font-size: clamp(1.35rem, 3vw, 2.45rem); font-weight: 950; line-height: .95; letter-spacing: .02em; text-transform: uppercase; }
+.max-kicker { display: inline-flex; width: fit-content; margin: 0; padding: .18rem .6rem; background: var(--max-label-bg); color: var(--max-label-fg); border: 2px solid var(--max-ink); font-size: .8rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-1deg); }
+.max-subtitle, .max-copy { margin: 0; color: var(--max-text-muted); line-height: 1.5; }
 .max-text-muted { color: var(--max-text-muted); }
-.max-divider { width: 100%; height: 3px; border: 0; background: var(--max-border); }
+.max-divider { width: 100%; height: 3px; border: 0; background: var(--max-ink); box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .72); }
 
 /* =========================================================
    Surfaces
@@ -238,19 +403,19 @@
 
 .max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap {
   position: relative;
-  background: linear-gradient(135deg, rgb(var(--max-accent-rgb) / .18), transparent 42%), var(--max-surface);
+  background: var(--max-card-bg);
   color: var(--max-text);
-  border: 3px solid var(--max-border);
+  border: 3px solid var(--max-ink);
   border-radius: var(--max-radius-lg);
-  box-shadow: 8px 8px 0 rgb(var(--max-border-rgb) / .86);
+  box-shadow: var(--max-pop-shadow);
   transition: transform var(--max-transition-base), box-shadow var(--max-transition-base), border-color var(--max-transition-base), background var(--max-transition-base);
 }
 .max-card, .max-panel { padding: var(--max-space-6); }
 .max-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--max-space-4); padding: var(--max-space-4); }
-.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 rgb(0 0 0 / .08); }
-.max-hover-lift:hover { transform: translate(-2px, -2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--max-shadow-alpha) + .12)); }
+.max-surface-sm { border-radius: var(--max-radius-md); box-shadow: var(--max-shadow-sm); }
+.max-surface-lg { border-radius: var(--max-radius-xl); box-shadow: var(--max-shadow-md); }
+.max-well, .max-inset { background: var(--max-paper-bg); color: var(--max-text); border: 2px solid var(--max-ink); border-radius: var(--max-radius-md); padding: var(--max-space-5); box-shadow: .22rem .22rem 0 rgb(var(--max-primary-rgb) / .5); }
+.max-hover-lift:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: .55rem .55rem 0 var(--max-ink); }
 
 /* =========================================================
    Buttons
@@ -258,26 +423,27 @@
 
 .max-button, .max-icon-button {
   appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--max-space-2);
-  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--max-surface); 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; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
+  min-height: 2.75rem; padding: .72rem 1.08rem; background: var(--max-paper-bg); color: var(--max-text);
+  border: 3px solid var(--max-ink); border-radius: var(--max-radius-sm); box-shadow: .26rem .26rem 0 var(--max-ink);
+  font: inherit; font-weight: 950; line-height: .95; letter-spacing: .035em; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
+  text-transform: uppercase;
   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);
 }
-.max-button:hover, .max-icon-button:hover { transform: translateY(-1px); border-color: var(--max-primary); }
-.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 rgb(0 0 0 / .18); }
-.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:hover, .max-icon-button:hover { transform: translate(-2px, -2px); border-color: var(--max-ink); box-shadow: .4rem .4rem 0 rgb(var(--max-secondary-rgb) / .76); }
+.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: translate(.12rem, .12rem); box-shadow: .12rem .12rem 0 var(--max-ink); }
+.max-button-primary { background: var(--max-poster-fill); color: var(--max-on-primary); border-color: var(--max-ink); }
+.max-button-primary:hover { background: linear-gradient(110deg, var(--max-primary-hover), var(--max-danger), var(--max-accent)); border-color: var(--max-ink); }
 .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 { background: transparent; color: var(--max-text); box-shadow: none; }
-.max-icon-button { width: 2.75rem; padding: 0; border-radius: var(--max-radius-pill); }
+.max-button-danger { background: var(--max-danger); color: var(--max-on-danger); border-color: var(--max-ink); }
+.max-button-ghost { background: transparent; color: var(--max-text); box-shadow: none; border-style: dashed; }
+.max-icon-button { width: 2.75rem; padding: 0; border-radius: var(--max-radius-sm); }
 .max-button:disabled, .max-icon-button:disabled, .max-disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
 /* Theme-responsive component defaults */
 .max-card, .max-panel { background: var(--max-card-bg); }
 .max-toolbar, .max-table-wrap { background: var(--max-control-bg); }
-.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:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-warning):not(.max-button-ghost):not(.max-button-outline-heavy), .max-icon-button { background: var(--max-control-bg); }
 .max-button, .max-icon-button, .max-badge, .max-nav-link { font-family: var(--max-font-control); }
 
 
@@ -286,75 +452,75 @@
 ========================================================= */
 
 .max-field { display: flex; flex-direction: column; gap: var(--max-space-2); }
-.max-label { color: var(--max-text); font-size: .925rem; font-weight: 800; }
+.max-label { color: var(--max-text); font-size: .82rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
 .max-input, .max-textarea, .max-select {
-  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--max-surface-soft); color: var(--max-text);
-  border: 3px solid var(--max-border); border-radius: var(--max-radius-md); font: inherit; outline: none;
+  width: 100%; min-height: 2.75rem; padding: .68rem .9rem; background: var(--max-paper-bg); color: var(--max-text);
+  border: 2px solid var(--max-ink); border-radius: var(--max-radius-sm); box-shadow: .16rem .16rem 0 rgb(var(--max-secondary-rgb) / .45); font: inherit; outline: none;
   transition: background var(--max-transition-fast), border-color var(--max-transition-fast), box-shadow var(--max-transition-fast);
 }
-.max-textarea { min-height: 8rem; resize: vertical; }
+.max-textarea { min-height: 7rem; resize: vertical; }
 .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-input:hover, .max-textarea:hover, .max-select:hover { border-color: var(--max-primary); }
+.max-input:focus, .max-textarea:focus, .max-select:focus { border-color: var(--max-focus); box-shadow: .18rem .18rem 0 var(--max-ink), var(--max-focus-ring); }
 .max-help-text { color: var(--max-text-muted); font-size: .875rem; line-height: 1.45; }
 
 /* Checkbox / Radio */
 .max-check, .max-radio { display: inline-flex; align-items: center; gap: var(--max-space-2); color: var(--max-text); cursor: pointer; }
 .max-check input, .max-radio input { position: absolute; opacity: 0; pointer-events: none; }
-.max-check-control, .max-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--max-surface-soft); border: 3px solid var(--max-border); transition: background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
+.max-check-control, .max-radio-control { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; background: var(--max-paper-bg); border: 2px solid var(--max-ink); box-shadow: .12rem .12rem 0 rgb(var(--max-secondary-rgb) / .52); transition: background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
 .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, .max-radio input:checked + .max-radio-control { background: var(--max-primary); border-color: var(--max-ink); box-shadow: .12rem .12rem 0 var(--max-ink), 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: ""; width: .55rem; height: .55rem; background: var(--max-on-primary); border-radius: 50%; }
 
 /* Switch */
 .max-switch { display: inline-flex; align-items: center; gap: var(--max-space-3); color: var(--max-text); cursor: pointer; }
 .max-switch input { position: absolute; opacity: 0; pointer-events: none; }
-.max-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--max-surface-soft); border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); transition: background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
-.max-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--max-surface-strong); border: 3px solid var(--max-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--max-shadow-alpha)); transition: left var(--max-transition-fast), background var(--max-transition-fast); }
-.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 { left: calc(100% - 1.34rem - .22rem); background: var(--max-on-primary); }
+.max-switch-track { position: relative; width: 3.4rem; height: 1.7rem; background: linear-gradient(90deg, var(--max-success), var(--max-warning), var(--max-danger)); border: 2px solid var(--max-ink); border-radius: var(--max-radius-pill); box-shadow: .18rem .18rem 0 var(--max-ink); transition: background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
+.max-switch-thumb { position: absolute; top: .18rem; left: .18rem; width: 1.1rem; height: 1.1rem; background: var(--max-paper-bg); border: 2px solid var(--max-ink); border-radius: 50%; box-shadow: .08rem .08rem 0 rgb(var(--max-secondary-rgb) / .72); transition: left var(--max-transition-fast), background var(--max-transition-fast); }
+.max-switch input:checked + .max-switch-track { background: var(--max-primary); border-color: var(--max-ink); }
+.max-switch input:checked + .max-switch-track .max-switch-thumb { left: calc(100% - 1.1rem - .18rem); background: var(--max-on-primary); }
 
 /* =========================================================
    Badges / Nav / Progress / Alerts / Tables
 ========================================================= */
 
-.max-badge { display: inline-flex; align-items: center; gap: var(--max-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--max-surface-soft); color: var(--max-text); border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
-.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-badge { display: inline-flex; align-items: center; gap: var(--max-space-1); min-height: 1.7rem; padding: .35rem .78rem; background: var(--max-paper-bg); color: var(--max-text); border: 2px solid var(--max-ink); border-radius: var(--max-radius-xs); box-shadow: .14rem .14rem 0 rgb(var(--max-secondary-rgb) / .62); clip-path: polygon(.32rem 0, 100% 0, calc(100% - .32rem) 100%, 0 100%); font-size: .78rem; font-weight: 950; line-height: 1; letter-spacing: .055em; text-transform: uppercase; }
+.max-badge-primary { background: var(--max-primary); color: var(--max-on-primary); border-color: var(--max-ink); }
+.max-badge-secondary { background: var(--max-secondary); color: var(--max-on-secondary); border-color: var(--max-ink); }
+.max-badge-success { background: var(--max-success); color: var(--max-on-success); border-color: var(--max-ink); }
+.max-badge-warning { background: var(--max-warning); color: var(--max-on-warning); border-color: var(--max-ink); }
+.max-badge-danger { background: var(--max-danger); color: var(--max-on-danger); border-color: var(--max-ink); }
 
-.max-nav { display: flex; flex-wrap: wrap; 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)); }
-.max-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--max-text-muted); border-radius: var(--max-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--max-transition-fast), background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
+.max-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--max-space-2); padding: var(--max-space-2); background: var(--max-label-bg); border: 3px solid var(--max-ink); border-radius: var(--max-radius-lg); box-shadow: var(--max-pop-shadow); }
+.max-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.45rem; padding: .62rem 1rem; color: var(--max-label-fg); border-radius: var(--max-radius-sm); text-decoration: none; font-weight: 950; letter-spacing: .045em; text-transform: uppercase; transition: color var(--max-transition-fast), background var(--max-transition-fast), box-shadow var(--max-transition-fast), transform var(--max-transition-fast); }
 .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-nav-link[aria-current="page"], .max-nav-link.is-active { color: var(--max-on-primary); background: var(--max-primary); box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .75); transform: rotate(-1deg); }
 
 /* Tooltips use compact contrast surfaces that stay readable across theme modes. */
 .max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
   display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .6rem .85rem;
-  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-pill); box-shadow: .32rem .32rem 0 rgb(var(--max-secondary-rgb) / .68);
+  background: var(--max-label-bg); color: var(--max-label-fg);
+  border: 3px solid var(--max-ink); border-radius: var(--max-radius-sm); box-shadow: .32rem .32rem 0 rgb(var(--max-secondary-rgb) / .68);
   font-size: .82rem; font-weight: 950; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em;
 }
-.max-tooltip-arrow { inline-size: .62rem; block-size: .62rem; flex: 0 0 auto; background: var(--max-warning); border: 2px solid var(--max-border); transform: rotate(45deg); }
+.max-tooltip-arrow { inline-size: .62rem; block-size: .62rem; flex: 0 0 auto; background: var(--max-warning); border: 2px solid var(--max-ink); transform: rotate(45deg); }
 
-.max-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--max-surface-soft); border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); }
-.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-progress { width: 100%; height: 1.05rem; overflow: hidden; padding: .12rem; background: var(--max-paper-bg); border: 2px solid var(--max-ink); border-radius: var(--max-radius-sm); box-shadow: .2rem .2rem 0 var(--max-ink); }
+.max-progress-bar { height: 100%; width: var(--max-progress-value, 50%); background: repeating-linear-gradient(90deg, rgb(var(--max-text-rgb) / .24) 0 .08rem, transparent .08rem 2rem), linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary)); border-radius: var(--max-radius-xs); }
 
-.max-alert { display: grid; 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)); }
-.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 { display: grid; gap: var(--max-space-2); padding: var(--max-space-4); background: var(--max-paper-bg); color: var(--max-text); border: 3px solid var(--max-ink); border-radius: var(--max-radius-lg); box-shadow: var(--max-pop-shadow); }
+.max-alert-success { background: linear-gradient(90deg, rgb(var(--max-success-rgb) / .18), transparent 42%), var(--max-paper-bg); border-left: .7rem solid var(--max-success); }
+.max-alert-warning { background: linear-gradient(90deg, rgb(var(--max-warning-rgb) / .2), transparent 42%), var(--max-paper-bg); border-left: .7rem solid var(--max-warning); }
+.max-alert-danger { background: linear-gradient(90deg, rgb(var(--max-danger-rgb) / .2), transparent 42%), var(--max-paper-bg); border-left: .7rem solid var(--max-danger); }
+.max-alert-title { margin: 0; font-family: var(--max-font-heading); font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
 .max-alert-body { margin: 0; color: var(--max-text-muted); line-height: 1.55; }
 
 .max-table-wrap { overflow: auto; }
 .max-table { width: 100%; border-collapse: collapse; }
-.max-table th, .max-table td { padding: .95rem 1rem; text-align: left; border-bottom: 3px solid var(--max-border); }
-.max-table th { color: var(--max-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--max-primary-rgb) / .08); }
+.max-table th, .max-table td { padding: .85rem 1rem; text-align: left; border-bottom: 2px solid var(--max-ink); }
+.max-table th { color: var(--max-label-fg); font-family: var(--max-font-heading); font-size: .8rem; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; background: var(--max-label-bg); }
 .max-table td { color: var(--max-text-muted); }
 .max-table tr:hover td { background: rgb(var(--max-primary-rgb) / .045); }
 
@@ -364,14 +530,14 @@
 
 .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-border { border: 3px solid var(--max-ink); } .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 { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
 .max-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--max-primary); color: var(--max-on-primary); border-radius: var(--max-radius-md); font-weight: 900; }
 .max-skip-link:focus { transform: translateY(0); }
 
 /* Maximalist-specific expressive helpers */
-.max-sticker { display: inline-flex; align-items: center; padding: .45rem .8rem; 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); font-weight: 950; 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-sticker { display: inline-flex; align-items: center; padding: .42rem .85rem; background: var(--max-accent); color: var(--max-on-accent); border: 3px solid var(--max-ink); border-radius: var(--max-radius-xs); box-shadow: var(--max-sticker-shadow); clip-path: polygon(.42rem 0, 100% 0, calc(100% - .32rem) 100%, 0 100%); font-family: var(--max-font-heading); font-weight: 950; letter-spacing: .05em; text-transform: uppercase; transform: rotate(-2deg); }
+.max-callout { padding: var(--max-space-6); background: var(--max-poster-fill); color: var(--max-on-primary); border: 3px solid var(--max-ink); border-radius: var(--max-radius-lg); box-shadow: .5rem .5rem 0 var(--max-ink), .78rem .78rem 0 rgb(var(--max-secondary-rgb) / .72); clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); }
 .max-wiggle:hover { animation: max-wiggle 420ms ease both; }
 @keyframes max-wiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
 
@@ -405,6 +571,341 @@
 @keyframes max-spin { to { transform: rotate(360deg); } }
 
 
+
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+
+.max-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 2px solid var(--max-ink);
+  border-radius: var(--max-radius-sm);
+  box-shadow: .22rem .22rem 0 rgb(var(--max-primary-rgb) / .52);
+}
+
+.max-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--max-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.max-card-service > .max-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.max-card-service > .max-card-media + .max-icon-medallion { margin-block-start: -2.15rem; }
+
+.max-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--max-space-4);
+  align-items: start;
+}
+
+.max-card-accent-edge {
+  border-inline-start: .6rem solid var(--max-primary);
+}
+
+.max-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--max-primary);
+  color: var(--max-on-primary);
+  border: 3px solid var(--max-ink);
+  border-radius: var(--max-radius-sm);
+  box-shadow: .18rem .18rem 0 var(--max-ink), .34rem .34rem 0 rgb(var(--max-secondary-rgb) / .65);
+  line-height: 1;
+  transform: rotate(-4deg);
+}
+.max-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+
+.max-button.max-button-cut,
+.max-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.75rem 0, 100% 0, calc(100% - .75rem) 100%, 0 100%);
+}
+.max-button.max-button-cut:focus-visible,
+.max-button-cut:focus-visible { outline-offset: -3px; }
+
+.max-button.max-button-outline-heavy,
+.max-button-outline-heavy {
+  background: var(--max-label-bg);
+  color: var(--max-label-fg);
+  border-style: solid;
+  border-width: 3px;
+  border-color: var(--max-ink);
+  box-shadow: -.24rem .24rem 0 rgb(var(--max-primary-rgb) / .68);
+}
+.max-button.max-button-outline-heavy:hover,
+.max-button-outline-heavy:hover {
+  background: var(--max-primary);
+  color: var(--max-on-primary);
+  border-color: var(--max-primary-hover);
+}
+
+.max-badge-seal {
+  display: inline-grid;
+  place-items: center;
+  align-content: center;
+  inline-size: 5rem;
+  min-inline-size: 5rem;
+  aspect-ratio: 1;
+  padding: .65rem;
+  background: var(--max-warning);
+  color: var(--max-text);
+  border: 3px solid var(--max-ink);
+  border-radius: 50%;
+  box-shadow: .18rem .18rem 0 var(--max-ink), .38rem .38rem 0 rgb(var(--max-accent-rgb) / .65);
+  text-align: center;
+  font-family: var(--max-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+  transform: rotate(4deg);
+}
+
+.max-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  background: var(--max-card-bg);
+  color: var(--max-text);
+  border: 2px solid var(--max-ink);
+  border-radius: var(--max-radius-lg);
+  box-shadow: var(--max-pop-shadow);
+}
+
+.max-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--max-space-3);
+  min-inline-size: 0;
+  padding: var(--max-space-4);
+  border-inline-end: 2px solid var(--max-ink);
+}
+.max-feature-item:last-child { border-inline-end: 0; }
+.max-feature-item > :where(p, small) { margin: 0; color: var(--max-text-muted); }
+
+.max-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--max-space-4);
+  padding: var(--max-space-4) var(--max-space-5);
+  background: var(--max-card-bg);
+  color: var(--max-text);
+  border: 3px solid var(--max-ink);
+  border-radius: var(--max-radius-lg);
+  box-shadow: var(--max-pop-shadow);
+}
+.max-callout-bar > :where(p, div) { min-inline-size: 0; }
+.max-callout-bar > :where(.max-button, a, button):last-child { justify-self: end; }
+
+.max-eyebrow {
+  width: fit-content;
+  margin: 0;
+  padding: .16rem .58rem;
+  background: var(--max-label-bg);
+  color: var(--max-label-fg);
+  border: 2px solid var(--max-ink);
+  font-family: var(--max-font-heading);
+  font-size: .76rem;
+  font-weight: 950;
+  line-height: 1.2;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  transform: rotate(-1deg);
+}
+
+.max-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--max-surface-soft);
+  border: 3px solid var(--max-ink);
+  border-radius: var(--max-radius-lg);
+  box-shadow: var(--max-pop-shadow);
+}
+.max-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.max-media-scrim > :where(figcaption, [data-media-caption]) {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: clamp(1rem, 4vw, 2rem);
+  color: #fff;
+  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
+  font-family: var(--max-font-heading);
+  text-transform: uppercase;
+}
+.max-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+
+@media (max-width: 42rem) {
+  .max-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .max-callout-bar > :where(.max-button, a, button):last-child { justify-self: stretch; }
+  .max-feature-item { border-inline-end: 0; border-block-end: 2px solid var(--max-ink); }
+  .max-feature-item:last-child { border-block-end: 0; }
+}
+
+.max-card-service, .max-card-feature { border-width: 3px; box-shadow: var(--max-pop-shadow); }
+.max-button-cut { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
+.max-callout-bar { background: linear-gradient(120deg, rgb(var(--max-primary-rgb) / .2), rgb(var(--max-secondary-rgb) / .16)), var(--max-card-bg); }
+
+/* Filled and framed actions use opposing poster skews and a shared offset rhythm. */
+.max-button.max-button-cut, .max-button-cut {
+  min-block-size: 2.75rem;
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: end;
+  justify-content: center;
+  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
+  box-shadow: .22rem .22rem 0 var(--max-ink), .44rem .44rem 0 rgb(var(--max-secondary-rgb) / .72);
+}
+.max-button.max-button-outline-heavy, .max-button-outline-heavy {
+  border-width: 3px;
+  border-radius: 0;
+  clip-path: polygon(0 0, 91% 0, 100% 100%, 9% 100%);
+  box-shadow: -.28rem .28rem 0 rgb(var(--max-primary-rgb) / .68);
+}
+
+/* Marketing and native surfaces use hard paper panels with poster-like displacement. */
+.max-card-service, .max-media-scrim, .max-feature-strip, .max-callout-bar, .max-well {
+  background: linear-gradient(125deg, rgb(var(--max-primary-rgb) / .14), rgb(var(--max-secondary-rgb) / .12)), var(--max-card-bg);
+  border: 3px solid var(--max-ink);
+  border-radius: var(--max-radius-sm);
+  box-shadow: .3rem .3rem 0 var(--max-ink), .56rem .56rem 0 rgb(var(--max-secondary-rgb) / .62);
+}
+[data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  background: var(--max-poster-fill);
+  color: var(--max-on-primary);
+  border: 3px solid var(--max-ink);
+  border-radius: var(--max-radius-sm);
+  box-shadow: .26rem .26rem 0 var(--max-ink);
+  font-family: var(--max-font-control);
+  font-weight: 950;
+  letter-spacing: .035em;
+  text-transform: uppercase;
+}
+[data-ui="maximalist"][data-mode] :where(dialog) {
+  background: linear-gradient(135deg, rgb(var(--max-primary-rgb) / .1), rgb(var(--max-secondary-rgb) / .08)), var(--max-paper-bg);
+  border: 3px solid var(--max-ink);
+  border-radius: var(--max-radius-sm);
+  box-shadow: .36rem .36rem 0 var(--max-ink), .68rem .68rem 0 rgb(var(--max-secondary-rgb) / .58);
+}
+
+/* Busy indicators use an off-kilter layered blob instead of a neutral ring. */
+.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 {
+  border: .11em solid currentColor; border-radius: 44% 56% 52% 48%; background: conic-gradient(currentColor, transparent 38%, currentColor 62%, transparent); box-shadow: .1em .1em 0 rgb(var(--max-secondary-rgb) / .7); clip-path: none; animation: max-spin .82s ease-in-out infinite;
+}
+
+/**
+ * Reinforces the Maximalist preset as a displaced poster collage across every
+ * public component family while keeping all paint on semantic theme channels.
+ */
+[data-ui="maximalist"][data-mode] {
+  --usk-native-font-control: var(--max-font-heading);
+  --usk-native-control-min-block-size: 3rem;
+  --usk-native-control-padding-block: .74rem;
+  --usk-native-control-padding-inline: 1.05rem;
+  --usk-native-border-width: 3px;
+  --usk-native-radius-sm: .08rem;
+  --usk-native-radius: .14rem;
+  --usk-native-radius-lg: .22rem;
+  --usk-native-shadow: .24rem .24rem 0 var(--max-ink);
+  --usk-native-shadow-md: .34rem .34rem 0 var(--max-ink), .58rem .58rem 0 rgb(var(--max-secondary-rgb) / .58);
+  --usk-native-focus-ring: 0 0 0 3px var(--max-warning), .2rem .2rem 0 var(--max-ink);
+  --usk-native-subcontrol-padding-block: .57rem;
+  --usk-native-subcontrol-padding-inline: .79rem;
+  --usk-native-choice-size: 1.45rem;
+  --usk-native-choice-background: linear-gradient(135deg, var(--max-paper-bg), var(--max-surface-soft));
+  --usk-native-choice-border: 3px solid var(--max-ink);
+  --usk-native-checkbox-radius: .08rem;
+  --usk-native-radio-radius: 44% 56% 48% 52%;
+  --usk-native-choice-shadow: .16rem .16rem 0 rgb(var(--max-secondary-rgb) / .72);
+  --usk-native-choice-checked-background: linear-gradient(135deg, var(--max-primary), var(--max-accent));
+  --usk-native-choice-mark-color: var(--max-on-primary);
+  --usk-native-select-indicator-image: linear-gradient(35deg, transparent 43%, var(--max-ink) 44% 56%, transparent 57%), linear-gradient(145deg, transparent 43%, var(--max-ink) 44% 56%, transparent 57%);
+  --usk-native-select-indicator-size: .52rem .52rem, .52rem .52rem;
+  --usk-native-select-indicator-position: calc(100% - 1.32rem) 48%, calc(100% - .92rem) 52%;
+  --usk-native-select-padding-inline-end: 3.15rem;
+  --usk-native-range-track-size: .82rem;
+  --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--max-warning) 0 .9rem, var(--max-accent) .9rem 1.8rem, var(--max-primary) 1.8rem 2.7rem);
+  --usk-native-range-track-border: 3px solid var(--max-ink);
+  --usk-native-range-track-radius: 999px;
+  --usk-native-range-track-shadow: .2rem .2rem 0 var(--max-ink);
+  --usk-native-range-progress-background: linear-gradient(90deg, var(--max-success), var(--max-warning), var(--max-danger), var(--max-accent));
+  --usk-native-range-thumb-size: 1.78rem;
+  --usk-native-range-thumb-background: conic-gradient(var(--max-warning), var(--max-primary), var(--max-accent), var(--max-warning));
+  --usk-native-range-thumb-border: 3px solid var(--max-ink);
+  --usk-native-range-thumb-radius: 42% 58% 46% 54%;
+  --usk-native-range-thumb-shadow: .16rem .16rem 0 var(--max-ink), .28rem .28rem 0 rgb(var(--max-secondary-rgb) / .62);
+  --usk-native-progress-size: 1.1rem;
+  --usk-native-progress-track-background: repeating-linear-gradient(90deg, var(--max-paper-bg) 0 1.25rem, var(--max-surface-soft) 1.25rem 1.4rem);
+  --usk-native-progress-track-border: 3px solid var(--max-ink);
+  --usk-native-progress-track-radius: .14rem;
+  --usk-native-progress-track-shadow: .2rem .2rem 0 var(--max-ink);
+  --usk-native-progress-value-background: repeating-linear-gradient(90deg, rgb(var(--max-text-rgb) / .22) 0 .1rem, transparent .1rem 1.55rem), linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary));
+  --usk-native-progress-value-radius: .08rem;
+  --usk-native-progress-value-shadow: .14rem 0 0 rgb(var(--max-text-rgb) / .42);
+  --usk-native-scrollbar-size: 1.1rem;
+  --usk-native-scrollbar-track: linear-gradient(var(--max-surface-soft), var(--max-paper-bg));
+  --usk-native-scrollbar-thumb: linear-gradient(135deg, var(--max-primary), var(--max-accent));
+  --usk-native-scrollbar-radius: .12rem;
+}
+
+.max-title { margin-block: .75rem; font-weight: 950; letter-spacing: max(.028em, .5px); }
+.max-label { font-size: .73rem; font-weight: 900; }
+.max-button { min-height: 3rem; padding: .74rem 1.05rem; background: linear-gradient(115deg, var(--max-primary), var(--max-accent)); border-radius: .12rem; box-shadow: .24rem .24rem 0 var(--max-ink); font-weight: 950; }
+.max-input { min-height: 3.2rem; padding: .78rem .95rem; border-radius: .08rem; }
+.max-card { padding: 1.35rem; background: linear-gradient(128deg, rgb(var(--max-primary-rgb) / .13), rgb(var(--max-secondary-rgb) / .11)), var(--max-card-bg); border: 3px solid var(--max-ink); border-radius: .18rem; box-shadow: .3rem .3rem 0 var(--max-ink), .54rem .54rem 0 rgb(var(--max-secondary-rgb) / .58); }
+.max-well { background: repeating-linear-gradient(-8deg, rgb(var(--max-accent-rgb) / .09) 0 .3rem, transparent .3rem .75rem), var(--max-surface-soft); border: 3px solid var(--max-ink); box-shadow: -.22rem .22rem 0 rgb(var(--max-primary-rgb) / .62); }
+.max-badge { min-height: 1.7rem; padding: .22rem .62rem; border-radius: 999px; }
+.max-alert { background: linear-gradient(105deg, rgb(var(--max-warning-rgb) / .2), rgb(var(--max-primary-rgb) / .1)), var(--max-card-bg); border: 3px solid var(--max-ink); border-radius: .08rem; box-shadow: .24rem .24rem 0 var(--max-ink); }
+.max-progress { height: 1.1rem; background: repeating-linear-gradient(90deg, var(--max-paper-bg) 0 1.25rem, var(--max-surface-soft) 1.25rem 1.4rem); }
+.max-table-wrap { background: linear-gradient(132deg, rgb(var(--max-secondary-rgb) / .1), transparent), var(--max-card-bg); border-radius: .08rem; box-shadow: .28rem .28rem 0 var(--max-ink); }
+.max-table th { padding: .72rem .88rem; background: linear-gradient(100deg, var(--max-primary), var(--max-accent)); font-weight: 950; }
+.max-table td { padding: .74rem .86rem; }
+
+.max-nav, .max-panel, .max-toolbar, .max-tooltip,
+[data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]),
+.max-card-service, .max-feature-strip, .max-callout-bar {
+  border-width: 3px;
+  border-radius: .12rem;
+  box-shadow: .28rem .28rem 0 var(--max-ink);
+}
+.max-card-service:nth-of-type(odd), .max-feature-item:nth-of-type(odd) { transform: rotate(-.22deg); }
+.max-card-service:nth-of-type(even), .max-feature-item:nth-of-type(even) { transform: rotate(.22deg); }
+.max-callout-bar {
+  background:
+    linear-gradient(104deg, var(--max-warning) 0 18%, transparent 18% 21%, var(--max-primary) 21% 72%, var(--max-accent) 72%),
+    var(--max-card-bg);
+}
+.max-check-control, .max-radio-control, .max-switch-track { border-width: 3px; }
+.max-tooltip-arrow { transform: rotate(7deg); }
+.max-progress-bar { background: linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary)); }
+
 @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; }
 }
@@ -412,7 +913,7 @@
   [data-ui="maximalist"] { --max-border-alpha: 1; --max-focus-alpha: .75; }
 }
 @media (forced-colors: active) {
-  [data-ui="maximalist"] * { forced-color-adjust: auto; }
+  @supports (forced-color-adjust: auto) { [data-ui="maximalist"] * { forced-color-adjust: auto; } }
   [data-ui="maximalist"] :where(:focus-visible) { outline: 3px solid CanvasText; }
 }
 @media print {
@@ -421,3 +922,818 @@
   [data-ui="maximalist"] a { color: #000 !important; text-decoration: underline; }
 }
 }
+
+@layer ui-style-kit.maximalist {
+/* Keeps semantic field states above preset-specific material paint. */
+.max-input[aria-invalid="true"], .max-textarea[aria-invalid="true"], .max-select[aria-invalid="true"] { border-color: var(--max-danger); box-shadow: 3px 3px 0 rgb(var(--max-danger-rgb) / .38); }
+.max-input[readonly], .max-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+/* Restores semantic action paint after identity-specific geometry. */
+.max-button-primary { background: linear-gradient(112deg, var(--max-primary), var(--max-accent)); color: var(--max-on-primary); border-color: var(--max-ink); }
+.max-button-secondary { background: linear-gradient(112deg, var(--max-secondary), var(--max-warning)); color: var(--max-on-secondary); border-color: var(--max-ink); }
+.max-button-danger { background: linear-gradient(112deg, var(--max-danger), var(--max-primary)); color: var(--max-on-danger); border-color: var(--max-ink); }
+.max-button-ghost { background: transparent; color: var(--max-primary); border-color: transparent; }
+}
+
+@layer ui-style-kit.maximalist {
+/* Shared annotation fidelity: readable display rhythm and appropriately scaled text icons. */
+.max-feature-item > .max-icon-medallion { font-size: 1.5rem; line-height: 1; }
+.max-callout-bar > .max-icon-medallion { min-inline-size: 4.5rem; min-block-size: 4.5rem; font-size: 2rem; font-weight: 800; line-height: 1; }
+
+/* Compact display copy keeps the poster voice without sacrificing glyph separation. */
+.max-heading { line-height: 1.08; letter-spacing: max(.04em, .65px); }
+.max-button, .max-icon-button { line-height: 1.15; letter-spacing: max(.055em, .8px); }
+.max-badge { min-height: 1.9rem; font-size: .875rem; font-weight: 850; line-height: 1.15; letter-spacing: max(.06em, .75px); }
+.max-table th { font-size: 1rem; line-height: 1.15; letter-spacing: max(.065em, .8px); }
+[data-ui="maximalist"] :where(h1, h2, h3, h4, h5, h6):not([class]) {
+  color: var(--max-text);
+  line-height: 1.12;
+  letter-spacing: max(.03em, .5px);
+}
+
+/* Loading and choice controls use bold, centered geometry at compact sizes. */
+.max-spinner,
+.max-loading-spinner,
+[data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
+  position: relative;
+  border: .22rem solid var(--max-ink);
+  border-radius: 50%;
+  background: conic-gradient(
+    var(--max-primary) 0 18%,
+    transparent 18% 30%,
+    var(--max-accent) 30% 52%,
+    transparent 52% 64%,
+    var(--max-warning) 64% 86%,
+    transparent 86% 100%
+  );
+  box-shadow: .16rem .16rem 0 var(--max-ink), .34rem .34rem 0 rgb(var(--max-secondary-rgb) / .68);
+  animation-timing-function: linear;
+}
+.max-check input:checked + .max-check-control::after {
+  display: grid;
+  inline-size: 100%;
+  block-size: 100%;
+  place-items: center;
+  font-family: Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: 900;
+  line-height: 1rem;
+  -webkit-text-stroke: .035rem currentColor;
+  transform: translateY(-.025rem);
+}
+[data-ui="maximalist"][data-mode] {
+  --usk-native-select-indicator-position: calc(100% - 1.7rem) 48%, calc(100% - 1.25rem) 52%;
+  --usk-native-select-padding-inline-end: 3.5rem;
+}
+.max-select {
+  appearance: none;
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+
+/* Marketing contrast uses semantic foregrounds and explicit poster dividers. */
+.max-badge-seal { color: var(--max-on-warning); }
+.max-badge-seal * { color: inherit; }
+[data-ui="maximalist"][data-mode] .max-button.max-button-outline-heavy,
+[data-ui="maximalist"][data-mode] .max-button-outline-heavy {
+  background-color: var(--max-primary);
+  background-image: none;
+  color: var(--max-on-primary);
+  border-color: var(--max-ink);
+}
+.max-tooltip,
+[data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
+  border-color: var(--max-warning);
+}
+.max-tooltip-arrow {
+  border-color: var(--max-on-warning);
+  box-shadow: 0 0 0 1px var(--max-warning);
+}
+.max-callout-bar > div {
+  padding-inline-start: 1rem;
+  border-inline-start: .25rem solid var(--max-ink);
+}
+.max-media-scrim > :where(figcaption, [data-media-caption]) {
+  background: linear-gradient(to top, rgb(0 0 0 / .96), rgb(0 0 0 / .76) 64%, rgb(0 0 0 / .18));
+}
+.max-media-scrim > :where(figcaption, [data-media-caption]) strong {
+  display: block;
+  font-size: 1.05rem;
+  line-height: 1.2;
+  letter-spacing: max(.055em, .8px);
+  text-shadow: 0 2px 3px rgb(0 0 0 / .9);
+}
+}
+
+@layer ui-style-kit.maximalist {
+/**
+ * Retained pop-collage fidelity layer.
+ * Geometry remains constant across modes while semantic token channels repaint
+ * every component when an explicit library theme is present.
+ */
+[data-ui="maximalist"][data-mode] {
+  --max-paper-wash: rgb(var(--max-warning-rgb) / .08);
+  --max-paper-grain:
+    radial-gradient(circle at 14% 18%, rgb(var(--max-text-rgb) / .045) 0 1px, transparent 1.4px),
+    radial-gradient(circle at 72% 64%, rgb(var(--max-danger-rgb) / .055) 0 1px, transparent 1.5px);
+  --max-paper-bg: var(--max-surface-strong);
+  --max-poster-fill: var(--max-primary);
+  --max-label-bg: var(--max-primary);
+  --max-label-fg: var(--max-on-primary);
+  --max-pop-shadow: 5px 5px 0 var(--max-ink);
+  --max-sticker-shadow: 3px 3px 0 var(--max-ink);
+  --max-shadow-sm: 3px 3px 0 var(--max-ink);
+  --max-shadow-md: 5px 5px 0 var(--max-ink);
+  --max-theme-bg-size: 9rem 9rem, 13rem 13rem, auto;
+  --max-theme-bg:
+    radial-gradient(circle at 16% 24%, rgb(var(--max-secondary-rgb) / .09) 0 1px, transparent 1.5px),
+    radial-gradient(circle at 82% 68%, rgb(var(--max-danger-rgb) / .08) 0 1px, transparent 1.6px),
+    var(--max-bg);
+  --max-card-bg: var(--max-paper-grain), var(--max-surface);
+  --max-control-bg: var(--max-surface-strong);
+
+  --usk-native-radius-sm: 0;
+  --usk-native-radius: 0;
+  --usk-native-radius-lg: 0;
+  --usk-native-shadow: 3px 3px 0 var(--max-ink);
+  --usk-native-shadow-md: 5px 5px 0 var(--max-ink);
+  --usk-native-focus-ring: 0 0 0 3px var(--max-focus), 3px 3px 0 var(--max-ink);
+  --usk-native-border-width: 3px;
+  --usk-native-choice-background: var(--max-surface-strong);
+  --usk-native-choice-border: 3px solid var(--max-ink);
+  --usk-native-checkbox-radius: 0;
+  --usk-native-choice-shadow: 2px 2px 0 var(--max-ink);
+  --usk-native-choice-checked-background: var(--max-danger);
+  --usk-native-choice-mark-color: var(--max-on-danger);
+  --usk-native-range-track-background: var(--max-warning);
+  --usk-native-range-track-border: var(--usk-native-border-width) solid var(--max-ink);
+  --usk-native-range-track-radius: 0;
+  --usk-native-range-track-shadow: 3px 3px 0 var(--max-ink);
+  --usk-native-range-progress-background: var(--max-warning);
+  --usk-native-range-thumb-background: var(--max-accent);
+  --usk-native-range-thumb-border: 3px solid var(--max-ink);
+  --usk-native-range-thumb-radius: 50%;
+  --usk-native-range-thumb-shadow: 2px 2px 0 var(--max-ink);
+  --usk-native-progress-track-background: var(--max-surface-strong);
+  --usk-native-progress-track-border: 3px solid var(--max-ink);
+  --usk-native-progress-track-radius: 0;
+  --usk-native-progress-track-shadow: 3px 3px 0 var(--max-ink);
+  --usk-native-progress-value-background: var(--max-accent);
+  --usk-native-progress-value-radius: 0;
+  --usk-native-progress-value-shadow: none;
+  --usk-native-file-button-background: var(--max-secondary);
+  --usk-native-file-button-border: 3px solid var(--max-ink);
+  --usk-native-file-button-radius: 0;
+  --usk-native-file-button-shadow: 3px 3px 0 var(--max-ink);
+  --usk-native-color-swatch-border: 3px solid var(--max-ink);
+  --usk-native-color-swatch-radius: 0;
+  --usk-native-scrollbar-thumb: var(--max-primary);
+  --usk-native-scrollbar-radius: 0;
+}
+
+/** Explicit border-box metrics keep the thick native range track and thumb predictable. */
+[data-ui="maximalist"][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+}
+
+/** WebKit positions its thumb from the track's content edge, inside the upper border. */
+[data-ui="maximalist"][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
+  box-sizing: border-box;
+  margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2 - var(--usk-native-border-width));
+}
+
+/** Firefox centers its thumb natively; only the shared box geometry needs normalization. */
+[data-ui="maximalist"][data-mode] :where(input[type="range"])::-moz-range-track {
+  box-sizing: border-box;
+}
+
+[data-ui="maximalist"][data-mode] :where(input[type="range"])::-moz-range-thumb {
+  box-sizing: border-box;
+}
+
+.max-surface,
+.max-card,
+.max-panel,
+.max-toolbar,
+.max-table-wrap,
+.max-well,
+.max-inset,
+.max-alert,
+.max-tooltip,
+.max-progress,
+.max-nav,
+.max-card-service,
+.max-card-feature,
+.max-feature-strip,
+.max-callout-bar,
+.max-media-scrim,
+[data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]),
+[data-ui="maximalist"] :where(dialog, details) {
+  border-radius: 0;
+}
+
+.max-surface,
+.max-card,
+.max-panel,
+.max-toolbar,
+.max-table-wrap,
+.max-alert,
+.max-nav,
+.max-card-service,
+.max-card-feature,
+.max-feature-strip,
+.max-callout-bar,
+.max-media-scrim,
+[data-ui="maximalist"] dialog {
+  border: 3px solid var(--max-ink);
+  box-shadow: var(--max-pop-shadow);
+}
+
+.max-card,
+.max-panel,
+.max-surface,
+.max-table-wrap,
+.max-card-service,
+.max-card-feature,
+.max-feature-strip {
+  background: var(--max-card-bg);
+}
+
+.max-toolbar,
+.max-well,
+.max-inset {
+  background: var(--max-surface-strong);
+}
+
+.max-button,
+.max-icon-button,
+[data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  min-block-size: 3rem;
+  background-color: var(--max-surface-strong);
+  background-image: none;
+  color: var(--max-text);
+  border: 3px solid var(--max-ink);
+  border-radius: 0;
+  box-shadow: 4px 4px 0 var(--max-ink);
+  font-family: var(--max-font-control);
+  font-weight: 900;
+  line-height: 1.15;
+  letter-spacing: .055em;
+  text-transform: uppercase;
+}
+
+.max-button-primary {
+  background-color: var(--max-primary);
+  background-image: none;
+  color: var(--max-on-primary);
+}
+
+.max-button-secondary {
+  background-color: var(--max-secondary);
+  background-image: none;
+  color: var(--max-on-secondary);
+}
+
+.max-button-danger {
+  background-color: var(--max-danger);
+  background-image: none;
+  color: var(--max-on-danger);
+}
+
+.max-button-ghost {
+  background-color: transparent;
+  color: var(--max-link);
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.max-button:hover,
+.max-icon-button:hover,
+[data-ui="maximalist"] .max-button.is-hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0 var(--max-ink);
+}
+
+[data-ui="maximalist"] .max-button.is-focus {
+  outline: 3px solid var(--max-focus);
+  outline-offset: 3px;
+  box-shadow: 4px 4px 0 var(--max-ink);
+}
+
+.max-button:active,
+.max-icon-button:active,
+.max-button[aria-pressed="true"],
+.max-icon-button[aria-pressed="true"] {
+  transform: translate(3px, 3px);
+  box-shadow: 1px 1px 0 var(--max-ink);
+}
+
+.max-input,
+.max-textarea,
+.max-select {
+  min-block-size: 3rem;
+  background-color: var(--max-surface-strong);
+  background-image: none;
+  color: var(--max-text);
+  border: 3px solid var(--max-ink);
+  border-radius: 0;
+  box-shadow: 3px 3px 0 var(--max-ink);
+}
+
+.max-input:hover,
+.max-textarea:hover,
+.max-select:hover {
+  border-color: var(--max-secondary);
+}
+
+.max-input:focus,
+.max-textarea:focus,
+.max-select:focus {
+  border-color: var(--max-focus);
+  box-shadow: var(--max-focus-ring);
+}
+
+.max-check-control,
+.max-radio-control,
+.max-switch-track {
+  background: var(--max-surface-strong);
+  border: 3px solid var(--max-ink);
+  box-shadow: 2px 2px 0 var(--max-ink);
+}
+
+.max-check-control,
+.max-switch-track {
+  border-radius: 0;
+}
+
+.max-check input:checked + .max-check-control {
+  background: var(--max-danger);
+  color: var(--max-on-danger);
+}
+
+.max-radio input:checked + .max-radio-control,
+.max-switch input:checked + .max-switch-track {
+  background: var(--max-secondary);
+}
+
+.max-badge {
+  min-block-size: 1.75rem;
+  background: var(--max-surface-strong);
+  color: var(--max-text);
+  border: 2px solid var(--max-ink);
+  border-radius: 0;
+  box-shadow: 3px 3px 0 var(--max-ink);
+  clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%);
+}
+
+.max-badge-primary { background: var(--max-primary); color: var(--max-on-primary); }
+.max-badge-secondary { background: var(--max-secondary); color: var(--max-on-secondary); }
+.max-badge-success { background: var(--max-success); color: var(--max-on-success); }
+.max-badge-warning { background: var(--max-warning); color: var(--max-on-warning); }
+.max-badge-danger { background: var(--max-danger); color: var(--max-on-danger); }
+
+.max-kicker {
+  background: var(--max-primary);
+  color: var(--max-on-primary);
+  border-radius: 0;
+  box-shadow: 3px 3px 0 var(--max-ink);
+}
+
+.max-panel:nth-of-type(3n + 2) > .max-heading .max-kicker { background: var(--max-accent); color: var(--max-on-accent); transform: rotate(1deg); }
+.max-panel:nth-of-type(3n) > .max-heading .max-kicker { background: var(--max-warning); color: var(--max-on-warning); transform: rotate(-1.5deg); }
+
+.max-progress {
+  block-size: 1rem;
+  padding: 0;
+  background: var(--max-surface-strong);
+  border: 3px solid var(--max-ink);
+  border-radius: 0;
+  box-shadow: 3px 3px 0 var(--max-ink);
+}
+
+.max-progress-bar {
+  background: var(--max-accent);
+  border-radius: 0;
+}
+
+.max-alert {
+  background: var(--max-secondary);
+  color: var(--max-on-secondary);
+  border-inline-start-width: 3px;
+}
+
+.max-alert .max-alert-body { color: inherit; }
+.max-alert-success { background: var(--max-success); color: var(--max-on-success); }
+.max-alert-warning { background: var(--max-warning); color: var(--max-on-warning); }
+.max-alert-danger { background: var(--max-danger); color: var(--max-on-danger); }
+
+.max-tooltip,
+[data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
+  background: var(--max-ink);
+  color: var(--max-on-ink);
+  border: 3px solid var(--max-warning);
+  box-shadow: 4px 4px 0 var(--max-ink);
+}
+
+.max-tooltip-arrow { background: var(--max-warning); border-color: var(--max-on-warning); }
+
+/** Shares the same palette-aware spinner artwork across standalone and busy-button states. */
+.max-spinner,
+.max-loading-spinner,
+[data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
+.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 {
+  background: conic-gradient(
+    var(--max-accent) 0 28%,
+    transparent 28% 100%
+  );
+  border: 5px solid var(--max-surface-soft);
+  border-radius: 50%;
+  box-shadow: none;
+  animation: max-spin .8s linear infinite;
+}
+
+/** Keeps the shared spinner compact and uncompressed within native and authored buttons. */
+.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 {
+  border-width: .12em;
+  flex-shrink: 0;
+  clip-path: none;
+}
+
+.max-nav {
+  padding: .5rem;
+  background: var(--max-ink);
+  border-color: var(--max-ink);
+}
+
+.max-nav-link {
+  color: var(--max-on-ink);
+  border-radius: 0;
+}
+
+.max-nav-link[aria-current="page"],
+.max-nav-link.is-active {
+  background: var(--max-warning);
+  color: var(--max-on-warning);
+  box-shadow: 3px 3px 0 var(--max-secondary);
+}
+
+.max-table-wrap { overflow: auto; }
+
+.max-table th {
+  background-color: var(--max-warning);
+  background-image: none;
+  color: var(--max-on-warning);
+  border-color: var(--max-ink);
+}
+
+.max-table td {
+  color: var(--max-text);
+  border-color: var(--max-ink);
+}
+
+.max-card-service,
+.max-card-feature { transform: rotate(-.35deg); }
+.max-card-service:nth-of-type(even),
+.max-card-feature:nth-of-type(even) { transform: rotate(.35deg); }
+
+.max-icon-medallion {
+  background: var(--max-secondary);
+  color: var(--max-on-secondary);
+  border-radius: 0;
+}
+
+.max-feature-strip { background: var(--max-surface-strong); }
+.max-callout-bar { background: var(--max-warning); color: var(--max-on-warning); }
+.max-callout-bar .max-copy { color: inherit; }
+
+[data-ui="maximalist"][data-mode] :where(dialog) {
+  background: var(--max-surface-strong);
+  color: var(--max-text);
+  border: 3px solid var(--max-ink);
+  border-radius: 0;
+  box-shadow: 5px 5px 0 var(--max-danger);
+}
+
+[data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  background-color: var(--max-primary);
+  background-image: none;
+  color: var(--max-on-primary);
+}
+
+[data-ui="maximalist"][data-mode] :where(table:not([class]) th) {
+  background: var(--max-warning);
+  color: var(--max-on-warning);
+  border: 2px solid var(--max-ink);
+}
+
+[data-ui="maximalist"] :where(details) {
+  border: 3px solid var(--max-ink);
+  box-shadow: 3px 3px 0 var(--max-ink);
+}
+
+[data-ui="maximalist"] :where(summary) {
+  font-family: var(--max-font-heading);
+  font-weight: 900;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+
+[data-ui="maximalist"] :where(:focus-visible) {
+  outline: 3px solid var(--max-focus);
+  outline-offset: 3px;
+}
+/** Warning actions inherit preset geometry and use the paired semantic warning colors. */
+[data-ui="maximalist"][data-mode] .max-button.max-button-warning {
+  background: var(--max-warning);
+  color: var(--max-on-warning);
+  border-color: var(--max-warning);
+  text-shadow: none;
+}
+
+}
+
+@layer ui-style-kit.maximalist {
+/**
+ * Applies the annotation-driven reading pass without detaching component fill
+ * colors from the active semantic theme. Fixed poster inks are exposed as
+ * identity tokens so standalone consumers receive the same label polarity.
+ */
+:root {
+  --max-poster-dark-ink: rgb(9 9 11);
+  --max-poster-light-ink: rgb(255 250 240);
+}
+
+[data-ui="maximalist"][data-mode] {
+  --max-poster-warning-deep: var(--max-warning);
+  --max-poster-secondary-deep: var(--max-secondary);
+  --max-poster-success-deep: var(--max-success);
+  --usk-native-select-indicator-image:
+    linear-gradient(38deg, transparent 38%, var(--max-ink) 39% 66%, transparent 67%),
+    linear-gradient(142deg, transparent 38%, var(--max-ink) 39% 66%, transparent 67%);
+  --usk-native-select-indicator-size: .68rem .68rem, .68rem .68rem;
+  --usk-native-select-indicator-position: calc(100% - 1.7rem) 48%, calc(100% - 1.16rem) 52%;
+}
+
+/** Deep poster inks progressively enhance without excluding older browsers. */
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="maximalist"][data-mode] {
+    --max-poster-warning-deep: color-mix(in srgb, var(--max-warning) 48%, var(--max-poster-dark-ink));
+    --max-poster-secondary-deep: color-mix(in srgb, var(--max-secondary) 64%, var(--max-poster-dark-ink));
+    --max-poster-success-deep: color-mix(in srgb, var(--max-success) 70%, var(--max-poster-dark-ink));
+  }
+}
+
+[data-ui="maximalist"][data-mode] h1:not([class]) {
+  letter-spacing: max(.045em, .8px);
+}
+
+.max-button-primary,
+.max-button-secondary,
+.max-button-danger {
+  color: var(--max-poster-dark-ink);
+}
+
+:where(.max-button-primary, .max-button-secondary, .max-button-danger) :where(svg),
+:where(.max-button-primary, .max-button-secondary, .max-button-danger)[aria-busy="true"]::after {
+  color: var(--max-poster-light-ink);
+}
+
+.max-nav-link[aria-current="page"],
+.max-nav-link.is-active,
+.max-table th,
+[data-ui="maximalist"][data-mode] :where(table:not([class]) th) {
+  background: var(--max-poster-warning-deep);
+  color: var(--max-poster-light-ink);
+}
+
+.max-alert {
+  background: var(--max-poster-secondary-deep);
+  color: var(--max-poster-light-ink);
+}
+
+.max-alert-success {
+  background: var(--max-poster-success-deep);
+  color: var(--max-poster-light-ink);
+}
+
+.max-alert .max-alert-title,
+.max-alert .max-alert-body {
+  color: inherit;
+}
+
+.max-badge-seal {
+  background: var(--max-poster-warning-deep);
+  color: var(--max-poster-light-ink);
+}
+
+.max-badge-secondary,
+.max-badge-success,
+.max-badge-danger,
+.max-kicker,
+.max-card-service > .max-kicker {
+  color: var(--max-poster-dark-ink);
+}
+
+.max-badge-warning,
+.max-heading > .max-kicker {
+  background: var(--max-poster-warning-deep);
+  color: var(--max-poster-light-ink);
+}
+
+.max-panel:nth-of-type(3n) > .max-heading .max-kicker {
+  background: var(--max-poster-warning-deep);
+  color: var(--max-poster-light-ink);
+}
+
+.max-sticker {
+  font-weight: 700;
+}
+
+.max-kicker + .max-heading {
+  margin-block-start: .75rem;
+}
+
+.max-icon-button :where(svg) {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  font-size: 1.5rem;
+  font-weight: 800;
+  stroke-width: 2.75;
+}
+
+.max-card-service > .max-icon-medallion :where(svg) {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  font-size: 1.75rem;
+  font-weight: 800;
+  stroke-width: 3.25;
+}
+
+/** Gives trust and CTA artwork poster-weight strokes without resizing their frames. */
+.max-feature-item > .max-icon-medallion > :where(svg),
+.max-callout-bar > .max-icon-medallion > :where(svg) {
+  stroke-width: 3.25;
+}
+
+.max-icon-button > :where(span) {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+}
+
+.max-card-service > .max-icon-medallion > :where(span) {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+}
+
+.max-callout-bar {
+  background: var(--max-poster-dark-ink);
+  color: var(--max-poster-light-ink);
+}
+
+.max-callout-bar > div {
+  border-inline-start-color: var(--max-poster-light-ink);
+}
+
+.max-callout-bar > div > strong {
+  color: inherit;
+  font-weight: 800;
+  letter-spacing: .02em;
+  line-height: 1.25;
+}
+
+.max-callout-bar .max-copy {
+  color: inherit;
+  font-family: var(--max-font-sans);
+  font-weight: 600;
+  line-height: 1.55;
+}
+}
+
+@layer ui-style-kit.maximalist {
+/**
+ * Keeps the poster hierarchy energetic without using the single-weight Impact
+ * face for functional copy. Semantic foreground tokens preserve AA contrast
+ * when a consumer switches the active color theme.
+ */
+[data-ui="maximalist"][data-mode] {
+  --usk-native-font-heading: var(--max-font-heading);
+  --usk-native-font-control: var(--max-font-control);
+}
+
+.max-title {
+  font-weight: 800;
+  line-height: 1.02;
+  letter-spacing: max(.045em, .8px);
+}
+
+.max-heading,
+[data-ui="maximalist"][data-mode] :where(h1, h2, h3, h4, h5, h6):not([class]) {
+  font-family: var(--max-font-heading);
+  font-weight: 800;
+  line-height: 1.12;
+  letter-spacing: max(.04em, .65px);
+}
+
+.max-kicker,
+.max-button,
+.max-icon-button,
+.max-badge,
+.max-badge-seal,
+.max-nav-link,
+.max-label,
+.max-alert-title,
+.max-table th,
+.max-tooltip,
+.max-sticker,
+.max-eyebrow,
+.max-skip-link,
+[data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]),
+[data-ui="maximalist"] :where(summary),
+[data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  font-family: var(--max-font-control);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: max(.045em, .8px);
+}
+
+[data-ui="maximalist"][data-mode] :where(strong, b, dt, legend, output, [aria-current="page"]),
+.max-callout-bar > div > strong,
+.max-media-scrim > :where(figcaption, [data-media-caption]) strong {
+  font-weight: 700;
+}
+
+.max-button-primary {
+  background: var(--max-primary);
+  color: var(--max-on-primary);
+}
+
+.max-button-secondary {
+  background: var(--max-secondary);
+  color: var(--max-on-secondary);
+}
+
+.max-button-danger {
+  background: var(--max-danger);
+  color: var(--max-on-danger);
+}
+
+:where(.max-button-primary, .max-button-secondary, .max-button-danger) :where(svg),
+:where(.max-button-primary, .max-button-secondary, .max-button-danger)[aria-busy="true"]::after {
+  color: inherit;
+}
+
+.max-nav-link[aria-current="page"],
+.max-nav-link.is-active,
+.max-table th,
+[data-ui="maximalist"][data-mode] :where(table:not([class]) th),
+.max-badge-seal,
+.max-badge-warning,
+.max-heading > .max-kicker,
+.max-panel:nth-of-type(3n) > .max-heading .max-kicker {
+  background: var(--max-warning);
+  color: var(--max-on-warning);
+}
+
+.max-alert {
+  background: var(--max-secondary);
+  color: var(--max-on-secondary);
+}
+
+.max-alert-success {
+  background: var(--max-success);
+  color: var(--max-on-success);
+}
+
+.max-alert-warning {
+  background: var(--max-warning);
+  color: var(--max-on-warning);
+}
+
+.max-alert-danger {
+  background: var(--max-danger);
+  color: var(--max-on-danger);
+}
+
+/** Lets bridged semantic alert copy inherit each variant foreground. */
+.max-alert .max-alert-title,
+.max-alert .max-alert-body {
+  color: inherit;
+}
+
+.max-badge-primary,
+.max-kicker,
+.max-card-service > .max-kicker {
+  background: var(--max-primary);
+  color: var(--max-on-primary);
+}
+
+.max-badge-secondary { background: var(--max-secondary); color: var(--max-on-secondary); }
+.max-badge-success { background: var(--max-success); color: var(--max-on-success); }
+.max-badge-danger { background: var(--max-danger); color: var(--max-on-danger); }
+}