ui-style-kit-css 2.2.0 → 2.4.0

package/styles/tactile.css

@@ -1,6 +1,6 @@
 /* =========================================================
    UI Style Kit CSS — Skeuomorphic / Tactile 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.
 
@@ -18,16 +18,16 @@
 @layer ui-style-kit.tactile {
 :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-display: Georgia, Cambria, "Times New Roman", Times, serif;
   --tactile-font-body: var(--tactile-font-sans);
   --tactile-font-heading: var(--tactile-font-display);
-  --tactile-font-control: var(--tactile-font-display);
+  --tactile-font-control: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --tactile-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  --tactile-radius-xs: .25rem;
-  --tactile-radius-sm: .5rem;
-  --tactile-radius-md: 0.9rem;
-  --tactile-radius-lg: 1.4rem;
-  --tactile-radius-xl: calc(1.4rem + .5rem);
+  --tactile-radius-xs: .1rem;
+  --tactile-radius-sm: .18rem;
+  --tactile-radius-md: .28rem;
+  --tactile-radius-lg: .4rem;
+  --tactile-radius-xl: .6rem;
   --tactile-radius-pill: 999px;
   --tactile-space-1: .25rem;
   --tactile-space-2: .5rem;
@@ -42,33 +42,108 @@
 
 [data-ui="tactile"][data-mode="light"] {
   color-scheme: light;
+  --tactile-fallback-bg-rgb: 248 242 231;
+  --tactile-fallback-surface-rgb: 255 255 255;
+  --tactile-fallback-surface-strong-rgb: 255 250 241;
+  --tactile-fallback-surface-soft-rgb: 234 223 205;
+  --tactile-fallback-text-rgb: 43 36 25;
+  --tactile-fallback-text-muted-rgb: 107 97 78;
+  --tactile-fallback-border-rgb: 215 198 167;
+  --tactile-fallback-primary-rgb: 177 60 28;
+  --tactile-fallback-primary-hover-rgb: 145 46 20;
+  --tactile-fallback-primary-text-rgb: 255 255 255;
+  --tactile-fallback-secondary-rgb: 91 104 67;
+  --tactile-fallback-secondary-hover-rgb: 71 84 50;
+  --tactile-fallback-secondary-text-rgb: 255 255 255;
+  --tactile-fallback-accent-rgb: 197 160 82;
+  --tactile-fallback-accent-text-rgb: 0 0 0;
+  --tactile-fallback-success-rgb: 91 104 67;
+  --tactile-fallback-success-text-rgb: 255 255 255;
+  --tactile-fallback-warning-rgb: 166 107 0;
+  --tactile-fallback-warning-text-rgb: 0 0 0;
+  --tactile-fallback-danger-rgb: 174 74 63;
+  --tactile-fallback-danger-text-rgb: 255 255 255;
+  --tactile-fallback-link-rgb: 112 83 47;
+  --tactile-fallback-focus-rgb: 201 151 74;
   --tactile-panel-alpha: .98;
-  --tactile-panel-soft-alpha: .78;
-  --tactile-border-alpha: .58;
-  --tactile-shadow-alpha: .12;
+  --tactile-panel-soft-alpha: .82;
+  --tactile-border-alpha: .68;
+  --tactile-shadow-alpha: .16;
   --tactile-focus-alpha: .34;
+  --tactile-paper-alpha: .96;
+  --tactile-sidebar-alpha: .94;
 }
 
 [data-ui="tactile"][data-mode="dark"] {
   color-scheme: dark;
+  --tactile-fallback-bg-rgb: 18 15 9;
+  --tactile-fallback-surface-rgb: 33 27 18;
+  --tactile-fallback-surface-strong-rgb: 47 40 27;
+  --tactile-fallback-surface-soft-rgb: 25 20 13;
+  --tactile-fallback-text-rgb: 248 239 223;
+  --tactile-fallback-text-muted-rgb: 199 186 163;
+  --tactile-fallback-border-rgb: 91 78 56;
+  --tactile-fallback-primary-rgb: 211 83 43;
+  --tactile-fallback-primary-hover-rgb: 230 107 63;
+  --tactile-fallback-primary-text-rgb: 21 16 6;
+  --tactile-fallback-secondary-rgb: 131 145 92;
+  --tactile-fallback-secondary-hover-rgb: 155 169 112;
+  --tactile-fallback-secondary-text-rgb: 9 20 7;
+  --tactile-fallback-accent-rgb: 222 181 91;
+  --tactile-fallback-accent-text-rgb: 0 0 0;
+  --tactile-fallback-success-rgb: 131 145 92;
+  --tactile-fallback-success-text-rgb: 0 0 0;
+  --tactile-fallback-warning-rgb: 255 209 102;
+  --tactile-fallback-warning-text-rgb: 0 0 0;
+  --tactile-fallback-danger-rgb: 255 136 122;
+  --tactile-fallback-danger-text-rgb: 0 0 0;
+  --tactile-fallback-link-rgb: 240 211 154;
+  --tactile-fallback-focus-rgb: 241 196 110;
   --tactile-panel-alpha: .92;
-  --tactile-panel-soft-alpha: .64;
-  --tactile-border-alpha: .52;
+  --tactile-panel-soft-alpha: .68;
+  --tactile-border-alpha: .62;
   --tactile-shadow-alpha: .34;
   --tactile-focus-alpha: .42;
+  --tactile-paper-alpha: .88;
+  --tactile-sidebar-alpha: .96;
 }
 
 [data-ui="tactile"][data-mode="contrast"] {
   color-scheme: dark;
+  --tactile-fallback-bg-rgb: 0 0 0;
+  --tactile-fallback-surface-rgb: 15 11 3;
+  --tactile-fallback-surface-strong-rgb: 26 18 5;
+  --tactile-fallback-surface-soft-rgb: 0 0 0;
+  --tactile-fallback-text-rgb: 255 255 255;
+  --tactile-fallback-text-muted-rgb: 255 248 232;
+  --tactile-fallback-border-rgb: 255 255 255;
+  --tactile-fallback-primary-rgb: 255 209 102;
+  --tactile-fallback-primary-hover-rgb: 255 255 255;
+  --tactile-fallback-primary-text-rgb: 0 0 0;
+  --tactile-fallback-secondary-rgb: 157 255 107;
+  --tactile-fallback-secondary-hover-rgb: 255 255 255;
+  --tactile-fallback-secondary-text-rgb: 0 0 0;
+  --tactile-fallback-accent-rgb: 255 176 0;
+  --tactile-fallback-accent-text-rgb: 0 0 0;
+  --tactile-fallback-success-rgb: 0 255 117;
+  --tactile-fallback-success-text-rgb: 0 0 0;
+  --tactile-fallback-warning-rgb: 255 225 0;
+  --tactile-fallback-warning-text-rgb: 0 0 0;
+  --tactile-fallback-danger-rgb: 255 77 77;
+  --tactile-fallback-danger-text-rgb: 0 0 0;
+  --tactile-fallback-link-rgb: 255 209 102;
+  --tactile-fallback-focus-rgb: 255 255 255;
   --tactile-panel-alpha: 1;
   --tactile-panel-soft-alpha: .92;
   --tactile-border-alpha: 1;
   --tactile-shadow-alpha: .5;
   --tactile-focus-alpha: .72;
+  --tactile-paper-alpha: 1;
+  --tactile-sidebar-alpha: 1;
 }
 
+/** Preserves direct aliases for static extraction when a scheme is selected. */
 [data-ui="tactile"][data-theme][data-mode] {
-  /* Shared scheme aliases preserve the existing prefixed token API. */
   --tactile-bg-rgb: var(--usk-bg-rgb);
   --tactile-surface-rgb: var(--usk-surface-rgb);
   --tactile-surface-strong-rgb: var(--usk-surface-strong-rgb);
@@ -83,15 +158,43 @@
   --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-rgb: var(--usk-success-rgb);
   --tactile-success-text-rgb: var(--usk-success-text-rgb);
+  --tactile-warning-rgb: var(--usk-warning-rgb);
   --tactile-warning-text-rgb: var(--usk-warning-text-rgb);
+  --tactile-danger-rgb: var(--usk-danger-rgb);
   --tactile-danger-text-rgb: var(--usk-danger-text-rgb);
+  --tactile-link-rgb: var(--usk-link-rgb);
   --tactile-focus-rgb: var(--usk-focus-rgb);
+}
+
+[data-ui="tactile"][data-mode] {
+  --usk-native-bg: var(--tactile-bg);
+  /* Explicit schemes win; reference colors are used only when no scheme exists. */
+  --tactile-bg-rgb: var(--usk-bg-rgb, var(--tactile-fallback-bg-rgb));
+  --tactile-surface-rgb: var(--usk-surface-rgb, var(--tactile-fallback-surface-rgb));
+  --tactile-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--tactile-fallback-surface-strong-rgb));
+  --tactile-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--tactile-fallback-surface-soft-rgb));
+  --tactile-text-rgb: var(--usk-text-rgb, var(--tactile-fallback-text-rgb));
+  --tactile-text-muted-rgb: var(--usk-text-muted-rgb, var(--tactile-fallback-text-muted-rgb));
+  --tactile-border-rgb: var(--usk-border-rgb, var(--tactile-fallback-border-rgb));
+  --tactile-primary-rgb: var(--usk-primary-rgb, var(--tactile-fallback-primary-rgb));
+  --tactile-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--tactile-fallback-primary-hover-rgb));
+  --tactile-primary-text-rgb: var(--usk-primary-text-rgb, var(--tactile-fallback-primary-text-rgb));
+  --tactile-secondary-rgb: var(--usk-secondary-rgb, var(--tactile-fallback-secondary-rgb));
+  --tactile-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--tactile-fallback-secondary-hover-rgb));
+  --tactile-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--tactile-fallback-secondary-text-rgb));
+  --tactile-accent-rgb: var(--usk-accent-rgb, var(--tactile-fallback-accent-rgb));
+  --tactile-accent-text-rgb: var(--usk-accent-text-rgb, var(--tactile-fallback-accent-text-rgb));
+  --tactile-success-rgb: var(--usk-success-rgb, var(--tactile-fallback-success-rgb));
+  --tactile-success-text-rgb: var(--usk-success-text-rgb, var(--tactile-fallback-success-text-rgb));
+  --tactile-warning-rgb: var(--usk-warning-rgb, var(--tactile-fallback-warning-rgb));
+  --tactile-warning-text-rgb: var(--usk-warning-text-rgb, var(--tactile-fallback-warning-text-rgb));
+  --tactile-danger-rgb: var(--usk-danger-rgb, var(--tactile-fallback-danger-rgb));
+  --tactile-danger-text-rgb: var(--usk-danger-text-rgb, var(--tactile-fallback-danger-text-rgb));
+  --tactile-link-rgb: var(--usk-link-rgb, var(--tactile-fallback-link-rgb));
+  --tactile-focus-rgb: var(--usk-focus-rgb, var(--tactile-fallback-focus-rgb));
   /* Native fallback selectors inherit visual identity through shared tokens. */
   --usk-native-surface: var(--tactile-surface);
   --usk-native-surface-strong: var(--tactile-surface-strong);
@@ -113,15 +216,66 @@
   --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-sm: var(--tactile-radius-xs);
   --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-shadow: var(--tactile-button-shadow);
+  --usk-native-shadow-md: var(--tactile-panel-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);
+  --usk-native-control-min-block-size: 3rem;
+  --usk-native-control-padding-block: .74rem;
+  --usk-native-control-padding-inline: .95rem;
+  --usk-native-subcontrol-padding-block: .58rem;
+  --usk-native-subcontrol-padding-inline: .72rem;
+  --usk-native-choice-size: 1.35rem;
+  --usk-native-choice-background: var(--tactile-control-bg);
+  --usk-native-choice-border: 1px solid var(--tactile-keyline);
+  --usk-native-checkbox-radius: .18rem;
+  --usk-native-radio-radius: 50%;
+  --usk-native-choice-shadow: var(--tactile-inset-shadow);
+  --usk-native-choice-checked-background: var(--tactile-action-solid);
+  --usk-native-choice-mark-color: var(--tactile-on-primary);
+  --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--tactile-text) 50%), linear-gradient(135deg, var(--tactile-text) 50%, transparent 50%);
+  --usk-native-select-indicator-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
+  --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%;
+  --usk-native-select-padding-inline-end: 2.25rem;
+  --usk-native-range-track-size: .56rem;
+  --usk-native-range-track-background: var(--tactile-recessed-track);
+  --usk-native-range-track-border: 1px solid var(--tactile-track-rim);
+  --usk-native-range-track-radius: .2rem;
+  --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
+  --usk-native-range-progress-background: var(--tactile-action-solid);
+  --usk-native-range-thumb-size: 1.55rem;
+  --usk-native-range-thumb-background: var(--tactile-thumb-bg);
+  --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
+  --usk-native-range-thumb-radius: .22rem;
+  --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
+  --usk-native-progress-size: .76rem;
+  --usk-native-progress-track-background: var(--tactile-recessed-track);
+  --usk-native-progress-track-border: 1px solid var(--tactile-track-rim);
+  --usk-native-progress-track-radius: .18rem;
+  --usk-native-progress-track-shadow: var(--tactile-deep-inset-shadow);
+  --usk-native-progress-value-background: var(--tactile-progress-fill);
+  --usk-native-progress-value-radius: .12rem;
+  --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .22);
+  --usk-native-meter-optimum-background: var(--tactile-success);
+  --usk-native-meter-suboptimum-background: var(--tactile-warning);
+  --usk-native-meter-critical-background: var(--tactile-danger);
+  --usk-native-file-button-background: var(--tactile-action-solid);
+  --usk-native-file-button-border: 1px solid var(--tactile-keyline);
+  --usk-native-file-button-radius: .22rem;
+  --usk-native-file-button-shadow: var(--tactile-button-shadow);
+  --usk-native-color-swatch-border: 1px solid var(--tactile-keyline);
+  --usk-native-color-swatch-radius: .18rem;
+  --usk-native-indicator-opacity: 0.9199999999999999;
+  --usk-native-indicator-filter: none;
+  --usk-native-scrollbar-size: .85rem;
+  --usk-native-scrollbar-track: var(--tactile-recessed-track);
+  --usk-native-scrollbar-thumb: var(--tactile-thumb-bg);
+  --usk-native-scrollbar-radius: .18rem;
   --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));
@@ -131,7 +285,7 @@
   --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-border: rgb(var(--tactile-border-rgb) / max(var(--tactile-border-alpha), var(--usk-border-min-alpha)));
   --tactile-control-fg: var(--tactile-text);
   --tactile-primary: rgb(var(--tactile-primary-rgb));
   --tactile-primary-hover: rgb(var(--tactile-primary-hover-rgb));
@@ -152,15 +306,42 @@
   --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-paper-wash: rgb(var(--tactile-warning-rgb) / .14);
+  --tactile-bevel-highlight: rgb(var(--tactile-surface-strong-rgb) / .82);
+  --tactile-bevel-shadow: rgb(var(--tactile-text-rgb) / .24);
   --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) / .10), transparent 34rem), var(--tactile-bg);
-  --tactile-card-bg: linear-gradient(135deg, rgb(var(--tactile-primary-rgb) / .10), 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-paper-bg: linear-gradient(180deg, var(--tactile-paper-wash), transparent 28rem), linear-gradient(135deg, rgb(var(--tactile-accent-rgb) / .06), transparent 26rem), linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-paper-alpha)), rgb(var(--tactile-surface-rgb) / var(--tactile-panel-alpha)));
+  --tactile-paper-grain: radial-gradient(circle at 12% 18%, rgb(var(--tactile-text-rgb) / .04) 0 1px, transparent 1.4px), radial-gradient(circle at 68% 34%, rgb(var(--tactile-warning-rgb) / .055) 0 1px, transparent 1.5px), linear-gradient(90deg, rgb(var(--tactile-text-rgb) / .018) 1px, transparent 1px), linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .055), transparent 18rem);
+  --tactile-theme-bg: var(--tactile-paper-grain), var(--tactile-paper-bg), var(--tactile-bg);
+  --tactile-card-bg: var(--tactile-paper-grain), var(--tactile-paper-bg);
+  --tactile-control-bg: linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .1), transparent), linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / .86), rgb(var(--tactile-surface-soft-rgb) / .7));
+  --tactile-field-bg: linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .075), transparent), linear-gradient(180deg, rgb(var(--tactile-surface-soft-rgb) / .8), rgb(var(--tactile-surface-strong-rgb) / .58));
+  --tactile-inset-bg: linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .08), transparent), linear-gradient(180deg, rgb(var(--tactile-surface-soft-rgb) / .74), rgb(var(--tactile-surface-rgb) / .6));
+  --tactile-recessed-track: rgb(var(--tactile-text-rgb) / .82);
+  --tactile-track-rim: rgb(var(--tactile-text-rgb) / .72);
+  --tactile-thumb-bg: linear-gradient(90deg, rgb(var(--tactile-warning-rgb) / .1), transparent), linear-gradient(90deg, rgb(var(--tactile-surface-strong-rgb) / .98), rgb(var(--tactile-surface-soft-rgb) / .9));
+  --tactile-action-solid: var(--tactile-primary);
+  --tactile-action-bg: linear-gradient(180deg, var(--tactile-primary), var(--tactile-primary-hover));
+  --tactile-action-hover-bg: linear-gradient(180deg, var(--tactile-primary-hover), var(--tactile-primary));
+  --tactile-progress-fill: linear-gradient(90deg, var(--tactile-success), var(--tactile-primary));
+  --tactile-keyline: rgb(var(--tactile-text-rgb) / max(.46, calc(var(--tactile-border-alpha) * .78)));
+  --tactile-panel-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -2px 0 var(--tactile-bevel-shadow), 0 .55rem 1.25rem rgb(var(--tactile-text-rgb) / var(--tactile-shadow-alpha));
+  --tactile-button-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -2px 0 var(--tactile-bevel-shadow), 0 .32rem .68rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) * .92));
+  --tactile-inset-shadow: inset .16rem .16rem .34rem rgb(var(--tactile-text-rgb) / .2), inset -.08rem -.08rem .2rem rgb(var(--tactile-surface-strong-rgb) / .38);
+  --tactile-deep-inset-shadow: inset .16rem .16rem .32rem rgb(0 0 0 / .58), inset -.08rem -.08rem .16rem rgb(var(--tactile-surface-strong-rgb) / .14);
+  --tactile-sidebar-bg: linear-gradient(180deg, rgb(var(--tactile-text-rgb) / var(--tactile-sidebar-alpha)), rgb(var(--tactile-text-rgb) / calc(var(--tactile-sidebar-alpha) - .06)));
+  --tactile-sidebar-fg: rgb(var(--tactile-bg-rgb));
+  --tactile-sidebar-muted: rgb(var(--tactile-bg-rgb) / .74);
+  --tactile-rail: var(--tactile-primary);
   --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);
 }
 
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="tactile"][data-mode] { --tactile-border: color-mix(in srgb, rgb(var(--tactile-border-rgb) / max(var(--tactile-border-alpha), var(--usk-border-min-alpha))), var(--tactile-text) var(--usk-border-text-mix)); }
+}
+
 
 
 
@@ -197,7 +378,7 @@
 
 [data-ui="tactile"] {
   min-height: 100vh;
-  background: radial-gradient(circle at 50% -10%, rgb(255 255 255 / .08), transparent 30rem), var(--tactile-bg);
+  background: var(--tactile-paper-grain), var(--tactile-paper-bg), var(--tactile-bg);
   color: var(--tactile-text);
   font-family: var(--tactile-font-body);
   line-height: 1.5;
@@ -210,7 +391,7 @@
 [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); }
+[data-ui="tactile"][data-mode] { background: var(--tactile-theme-bg); background-size: var(--tactile-theme-bg-size); }
 
 .tactile-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
 .tactile-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
@@ -224,13 +405,14 @@
    Typography
 ========================================================= */
 
-.tactile-title, .tactile-heading, .tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link { font-family: var(--tactile-font-heading); }
-.tactile-title { margin: 0; color: var(--tactile-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
-.tactile-heading { margin: 0; color: var(--tactile-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
-.tactile-kicker { margin: 0; color: var(--tactile-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
-.tactile-subtitle, .tactile-copy { margin: 0; color: var(--tactile-text-muted); line-height: 1.65; }
+.tactile-title, .tactile-heading { font-family: var(--tactile-font-heading); }
+.tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link { font-family: var(--tactile-font-control); }
+.tactile-title { margin: 0; color: var(--tactile-text); font-family: var(--tactile-font-display); font-size: clamp(2.2rem, 5vw, 4rem); line-height: .98; letter-spacing: -.03em; }
+.tactile-heading { margin: 0; color: var(--tactile-text); font-size: clamp(1.25rem, 2.5vw, 2.1rem); line-height: 1.08; letter-spacing: -.02em; }
+.tactile-kicker { margin: 0; color: var(--tactile-text); font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
+.tactile-subtitle, .tactile-copy { margin: 0; color: var(--tactile-text-muted); line-height: 1.58; }
 .tactile-text-muted { color: var(--tactile-text-muted); }
-.tactile-divider { width: 100%; height: 1px; border: 0; background: var(--tactile-border); }
+.tactile-divider { width: 100%; height: 1px; border: 0; background: rgb(var(--tactile-border-rgb) / .62); box-shadow: 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .48); }
 
 /* =========================================================
    Surfaces
@@ -238,19 +420,19 @@
 
 .tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap {
   position: relative;
-  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .03)), linear-gradient(135deg, rgb(var(--tactile-primary-rgb) / .07), transparent 46%), var(--tactile-surface);
+  background: var(--tactile-card-bg);
   color: var(--tactile-text);
-  border: 1px solid var(--tactile-border);
+  border: 1px solid var(--tactile-keyline);
   border-radius: var(--tactile-radius-lg);
-  box-shadow: 0 18px 36px rgb(0 0 0 / var(--tactile-shadow-alpha)), inset 0 1px 0 rgb(255 255 255 / .25);
+  box-shadow: var(--tactile-panel-shadow);
   transition: transform var(--tactile-transition-base), box-shadow var(--tactile-transition-base), border-color var(--tactile-transition-base), background var(--tactile-transition-base);
 }
 .tactile-card, .tactile-panel { padding: var(--tactile-space-6); }
 .tactile-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tactile-space-4); padding: var(--tactile-space-4); }
-.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 rgb(0 0 0 / .08); }
-.tactile-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) + .12)); }
+.tactile-surface-sm { border-radius: var(--tactile-radius-md); box-shadow: var(--tactile-button-shadow); }
+.tactile-surface-lg { border-radius: var(--tactile-radius-xl); box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .72), 0 .9rem 2rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) + .08)); }
+.tactile-well, .tactile-inset { background: var(--tactile-inset-bg); color: var(--tactile-text); border: 1px solid rgb(var(--tactile-border-rgb) / calc(var(--tactile-border-alpha) * .82)); border-radius: var(--tactile-radius-md); padding: var(--tactile-space-5); box-shadow: var(--tactile-inset-shadow); }
+.tactile-hover-lift:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .8), 0 .9rem 1.8rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) + .08)); }
 
 /* =========================================================
    Buttons
@@ -258,26 +440,26 @@
 
 .tactile-button, .tactile-icon-button {
   appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--tactile-space-2);
-  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--tactile-surface); 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));
+  min-height: 3rem; padding: .72rem 1.15rem; background: var(--tactile-control-bg); color: var(--tactile-text);
+  border: 1px solid var(--tactile-keyline); border-radius: var(--tactile-radius-md); box-shadow: var(--tactile-button-shadow);
   font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
   transition: color var(--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);
 }
-.tactile-button:hover, .tactile-icon-button:hover { transform: translateY(-1px); border-color: var(--tactile-primary); }
-.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 rgb(0 0 0 / .18); }
-.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 { background: transparent; color: var(--tactile-text); box-shadow: none; }
-.tactile-icon-button { width: 2.75rem; padding: 0; border-radius: var(--tactile-radius-pill); }
+.tactile-button:hover, .tactile-icon-button:hover { transform: translateY(-1px); border-color: var(--tactile-primary); box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .86), inset 0 -2px 0 rgb(var(--tactile-text-rgb) / .22), 0 .42rem .82rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) + .06)); }
+.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: var(--tactile-inset-shadow); }
+.tactile-button-primary { background: var(--tactile-action-bg); color: var(--tactile-on-primary); border-color: var(--tactile-primary); box-shadow: var(--tactile-button-shadow); }
+.tactile-button-primary:hover { background: var(--tactile-action-hover-bg); border-color: var(--tactile-primary-hover); }
+.tactile-button-secondary { background: var(--tactile-control-bg); color: var(--tactile-primary); border-color: rgb(var(--tactile-primary-rgb) / .48); }
+.tactile-button-secondary:hover { background: var(--tactile-field-bg); border-color: var(--tactile-primary); }
+.tactile-button-danger { background: linear-gradient(180deg, var(--tactile-danger), rgb(var(--tactile-danger-rgb) / .82)); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }
+.tactile-button-ghost { background: transparent; color: var(--tactile-primary); border-color: transparent; box-shadow: none; }
+.tactile-icon-button { width: 3rem; padding: 0; border-radius: var(--tactile-radius-sm); }
 .tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
 /* Theme-responsive component defaults */
 .tactile-card, .tactile-panel { background: var(--tactile-card-bg); }
-.tactile-toolbar, .tactile-table-wrap { background: var(--tactile-control-bg); }
-.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-toolbar, .tactile-table-wrap { background: var(--tactile-card-bg); }
+.tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-warning):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); }
 
 
@@ -286,65 +468,65 @@
 ========================================================= */
 
 .tactile-field { display: flex; flex-direction: column; gap: var(--tactile-space-2); }
-.tactile-label { color: var(--tactile-text); font-size: .925rem; font-weight: 800; }
+.tactile-label { color: var(--tactile-text); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
 .tactile-input, .tactile-textarea, .tactile-select {
-  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--tactile-surface-soft); color: var(--tactile-text);
-  border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-md); font: inherit; outline: none;
+  width: 100%; min-height: 3rem; padding: .74rem 1rem; background: var(--tactile-field-bg); color: var(--tactile-text);
+  border: 1px solid var(--tactile-keyline); border-radius: var(--tactile-radius-md); box-shadow: var(--tactile-inset-shadow); font: inherit; outline: none;
   transition: background var(--tactile-transition-fast), border-color var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast);
 }
 .tactile-textarea { min-height: 8rem; resize: vertical; }
 .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-input:focus, .tactile-textarea:focus, .tactile-select:focus { border-color: var(--tactile-focus); box-shadow: var(--tactile-inset-shadow), var(--tactile-focus-ring); }
 .tactile-help-text { color: var(--tactile-text-muted); font-size: .875rem; line-height: 1.45; }
 
 /* Checkbox / Radio */
 .tactile-check, .tactile-radio { display: inline-flex; align-items: center; gap: var(--tactile-space-2); color: var(--tactile-text); cursor: pointer; }
 .tactile-check input, .tactile-radio input { position: absolute; opacity: 0; pointer-events: none; }
-.tactile-check-control, .tactile-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--tactile-surface-soft); border: 1px solid var(--tactile-border); transition: background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
+.tactile-check-control, .tactile-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--tactile-field-bg); border: 1px solid var(--tactile-keyline); box-shadow: var(--tactile-inset-shadow); transition: background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
 .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, .tactile-radio input:checked + .tactile-radio-control { background: var(--tactile-action-solid); border-color: var(--tactile-primary); box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .28), 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: ""; width: .55rem; height: .55rem; background: var(--tactile-on-primary); border-radius: 50%; }
 
 /* Switch */
 .tactile-switch { display: inline-flex; align-items: center; gap: var(--tactile-space-3); color: var(--tactile-text); cursor: pointer; }
 .tactile-switch input { position: absolute; opacity: 0; pointer-events: none; }
-.tactile-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--tactile-surface-soft); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-pill); transition: background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
-.tactile-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--tactile-surface-strong); border: 1px solid var(--tactile-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--tactile-shadow-alpha)); transition: left var(--tactile-transition-fast), background var(--tactile-transition-fast); }
-.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 { left: calc(100% - 1.34rem - .22rem); background: var(--tactile-on-primary); }
+.tactile-switch-track { position: relative; width: 4.35rem; height: 1.9rem; background: var(--tactile-recessed-track); border: 1px solid var(--tactile-track-rim); border-radius: var(--tactile-radius-sm); box-shadow: var(--tactile-deep-inset-shadow); transition: background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
+.tactile-switch-thumb { position: absolute; top: .16rem; left: .16rem; width: 1.58rem; height: 1.58rem; background: var(--tactile-thumb-bg); border: 1px solid var(--tactile-keyline); border-radius: var(--tactile-radius-xs); box-shadow: var(--tactile-button-shadow); transition: left var(--tactile-transition-fast), background var(--tactile-transition-fast); }
+.tactile-switch input:checked + .tactile-switch-track { background: linear-gradient(90deg, var(--tactile-recessed-track) 0 50%, var(--tactile-action-solid) 50% 100%); border-color: var(--tactile-primary); }
+.tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb { left: calc(100% - 1.58rem - .16rem); background: var(--tactile-thumb-bg); }
 
 /* =========================================================
    Badges / Nav / Progress / Alerts / Tables
 ========================================================= */
 
-.tactile-badge { display: inline-flex; align-items: center; gap: var(--tactile-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--tactile-surface-soft); color: var(--tactile-text); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
-.tactile-badge-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); border-color: var(--tactile-primary); }
+.tactile-badge { display: inline-flex; align-items: center; gap: var(--tactile-space-1); min-height: 1.65rem; padding: .32rem .68rem; background: var(--tactile-field-bg); color: var(--tactile-text); border: 1px solid var(--tactile-keyline); border-radius: var(--tactile-radius-sm); box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .58); font-size: .78rem; font-weight: 900; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
+.tactile-badge-primary { background: var(--tactile-action-solid); 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 { display: flex; flex-wrap: wrap; 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)); }
-.tactile-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--tactile-text-muted); border-radius: var(--tactile-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--tactile-transition-fast), background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
-.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-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tactile-space-2); padding: var(--tactile-space-2); background: var(--tactile-sidebar-bg); border: 1px solid rgb(var(--tactile-text-rgb) / .88); border-radius: var(--tactile-radius-lg); box-shadow: inset 0 1px 0 rgb(var(--tactile-bg-rgb) / .08), 0 .75rem 1.5rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) + .12)); }
+.tactile-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .72rem 1rem; color: var(--tactile-sidebar-muted); border: 1px solid transparent; border-radius: var(--tactile-radius-md); text-decoration: none; font-weight: 850; transition: color var(--tactile-transition-fast), background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
+.tactile-nav-link:hover { color: var(--tactile-sidebar-fg); background: rgb(var(--tactile-bg-rgb) / .08); border-color: rgb(var(--tactile-bg-rgb) / .18); }
+.tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active { color: var(--tactile-sidebar-fg); background: rgb(var(--tactile-bg-rgb) / .12); border-color: rgb(var(--tactile-bg-rgb) / .22); box-shadow: inset .25rem 0 0 var(--tactile-rail), inset .08rem .08rem .18rem rgb(0 0 0 / .35); }
 
 /* Tooltips use compact contrast surfaces that stay readable across theme modes. */
 .tactile-tooltip, [data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
   display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .6rem .82rem;
-  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(0 0 0 / .08)), var(--tactile-surface-strong);
-  color: var(--tactile-text); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-lg);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 .7rem 1.4rem rgb(0 0 0 / var(--tactile-shadow-alpha)); font-size: .82rem; font-weight: 850; line-height: 1.35;
+  background: var(--tactile-sidebar-bg);
+  color: var(--tactile-sidebar-fg); border: 1px solid rgb(var(--tactile-bg-rgb) / .18); border-radius: var(--tactile-radius-md);
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-bg-rgb) / .08), 0 .7rem 1.4rem rgb(var(--tactile-text-rgb) / var(--tactile-shadow-alpha)); font-size: .82rem; font-weight: 850; line-height: 1.35;
 }
-.tactile-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: var(--tactile-surface-strong); border: 1px solid var(--tactile-border); border-radius: .18rem; transform: rotate(45deg); }
+.tactile-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: rgb(var(--tactile-text-rgb) / .9); border: 1px solid rgb(var(--tactile-bg-rgb) / .18); border-radius: .12rem; transform: rotate(45deg); }
 
-.tactile-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--tactile-surface-soft); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-pill); }
-.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-progress { width: 100%; height: .8rem; overflow: hidden; background: var(--tactile-recessed-track); border: 1px solid var(--tactile-track-rim); border-radius: var(--tactile-radius-sm); box-shadow: var(--tactile-deep-inset-shadow); }
+.tactile-progress-bar { height: 100%; width: var(--tactile-progress-value, 50%); background: var(--tactile-progress-fill); border-radius: .12rem; box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .2); }
 
-.tactile-alert { display: grid; 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)); }
+.tactile-alert { display: grid; gap: var(--tactile-space-2); padding: var(--tactile-space-4); background: var(--tactile-card-bg); color: var(--tactile-text); border: 1px solid var(--tactile-keyline); border-inline-start-width: .28rem; border-radius: var(--tactile-radius-lg); box-shadow: var(--tactile-panel-shadow); }
 .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); }
@@ -353,8 +535,8 @@
 
 .tactile-table-wrap { overflow: auto; }
 .tactile-table { width: 100%; border-collapse: collapse; }
-.tactile-table th, .tactile-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--tactile-border); }
-.tactile-table th { color: var(--tactile-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--tactile-primary-rgb) / .08); }
+.tactile-table th, .tactile-table td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid rgb(var(--tactile-border-rgb) / .58); }
+.tactile-table th { color: var(--tactile-text); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: var(--tactile-field-bg); box-shadow: inset 0 -1px 0 rgb(var(--tactile-text-rgb) / .08); }
 .tactile-table td { color: var(--tactile-text-muted); }
 .tactile-table tr:hover td { background: rgb(var(--tactile-primary-rgb) / .045); }
 
@@ -370,9 +552,9 @@
 .tactile-skip-link:focus { transform: translateY(0); }
 
 /* Tactile-specific physical helpers */
-.tactile-bevel { background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(0 0 0 / .08)), var(--tactile-surface); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -1px 0 rgb(0 0 0 / .18), 0 16px 34px rgb(0 0 0 / var(--tactile-shadow-alpha)); }
-.tactile-pressed { background: var(--tactile-surface-soft); box-shadow: inset 0 4px 14px rgb(0 0 0 / .22), inset 0 -1px 0 rgb(255 255 255 / .12); transform: translateY(1px); }
-.tactile-knob { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .35), transparent 28%), var(--tactile-surface-strong); border: 1px solid var(--tactile-border); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 12px 24px rgb(0 0 0 / var(--tactile-shadow-alpha)); }
+.tactile-bevel { background: var(--tactile-card-bg); border: 1px solid var(--tactile-keyline); box-shadow: var(--tactile-panel-shadow); }
+.tactile-pressed { background: var(--tactile-inset-bg); box-shadow: var(--tactile-inset-shadow); transform: translateY(1px); }
+.tactile-knob { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(var(--tactile-surface-strong-rgb) / .72), transparent 30%), var(--tactile-thumb-bg); border: 1px solid var(--tactile-keyline); box-shadow: var(--tactile-button-shadow); }
 
 /* Spinner geometry follows the tactile preset's pressed material controls. */
 .tactile-spinner, .tactile-loading-spinner, [data-ui="tactile"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
@@ -383,8 +565,8 @@
   border-block-start-color: var(--tactile-spinner-stroke);
   border-inline-end-color: var(--tactile-spinner-accent);
   border-radius: 50%;
-  background: linear-gradient(145deg, rgb(var(--tactile-surface-strong-rgb) / .96), rgb(var(--tactile-surface-soft-rgb) / .72));
-  box-shadow: inset .16rem .16rem .32rem rgb(0 0 0 / .18), inset -.16rem -.16rem .32rem rgb(255 255 255 / .26), 0 .25rem .75rem rgb(0 0 0 / var(--tactile-shadow-alpha));
+  background: var(--tactile-thumb-bg);
+  box-shadow: var(--tactile-button-shadow);
   vertical-align: -.2em;
   animation: tactile-spin .85s cubic-bezier(.2, .8, .2, 1) infinite;
 }
@@ -404,6 +586,474 @@
 @keyframes tactile-spin { to { transform: rotate(360deg); } }
 
 
+
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+
+.tactile-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-md);
+  box-shadow: var(--tactile-inset-shadow);
+}
+
+.tactile-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--tactile-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.tactile-card-service > .tactile-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.tactile-card-service > .tactile-card-media + .tactile-icon-medallion { margin-block-start: -2.15rem; }
+
+.tactile-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--tactile-space-4);
+  align-items: start;
+}
+
+.tactile-card-accent-edge {
+  border-inline-start: .28rem solid var(--tactile-primary);
+}
+
+.tactile-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--tactile-primary);
+  color: var(--tactile-on-primary);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-md);
+  line-height: 1;
+}
+.tactile-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+
+.tactile-button.tactile-button-cut,
+.tactile-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
+}
+.tactile-button.tactile-button-cut:focus-visible,
+.tactile-button-cut:focus-visible { outline-offset: -3px; }
+
+.tactile-button.tactile-button-outline-heavy,
+.tactile-button-outline-heavy {
+  background: transparent;
+  color: var(--tactile-primary);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--tactile-primary);
+  box-shadow: none;
+}
+.tactile-button.tactile-button-outline-heavy:hover,
+.tactile-button-outline-heavy:hover {
+  background: var(--tactile-primary);
+  color: var(--tactile-on-primary);
+  border-color: var(--tactile-primary-hover);
+}
+
+.tactile-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(--tactile-surface-strong);
+  color: var(--tactile-text);
+  border: 1px solid var(--tactile-primary);
+  border-radius: 50%;
+  text-align: center;
+  font-family: var(--tactile-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+}
+
+.tactile-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  background: var(--tactile-card-bg);
+  color: var(--tactile-text);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-lg);
+}
+
+.tactile-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--tactile-space-3);
+  min-inline-size: 0;
+  padding: var(--tactile-space-4);
+  border-inline-end: 1px solid rgb(var(--tactile-border-rgb) / .62);
+}
+.tactile-feature-item:last-child { border-inline-end: 0; }
+.tactile-feature-item > :where(p, small) { margin: 0; color: var(--tactile-text-muted); }
+
+.tactile-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--tactile-space-4);
+  padding: var(--tactile-space-4) var(--tactile-space-5);
+  background: var(--tactile-card-bg);
+  color: var(--tactile-text);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-lg);
+}
+.tactile-callout-bar > :where(p, div) { min-inline-size: 0; }
+.tactile-callout-bar > :where(.tactile-button, a, button):last-child { justify-self: end; }
+
+.tactile-eyebrow {
+  margin: 0;
+  color: var(--tactile-primary);
+  font-family: var(--tactile-font-heading);
+  font-size: .76rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+
+.tactile-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--tactile-inset-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-md);
+}
+.tactile-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.tactile-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);
+}
+.tactile-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+
+@media (max-width: 42rem) {
+  .tactile-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .tactile-callout-bar > :where(.tactile-button, a, button):last-child { justify-self: stretch; }
+  .tactile-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--tactile-border-rgb) / .62); }
+  .tactile-feature-item:last-child { border-block-end: 0; }
+}
+
+.tactile-card-service, .tactile-card-feature, .tactile-feature-strip, .tactile-callout-bar { box-shadow: var(--tactile-panel-shadow); }
+.tactile-icon-medallion, .tactile-badge-seal { background: var(--tactile-action-bg); box-shadow: var(--tactile-button-shadow); }
+.tactile-button-outline-heavy { box-shadow: var(--tactile-button-shadow); }
+
+/* Filled and framed actions share a shallow keycap chamfer and physical depth. */
+.tactile-button.tactile-button-cut, .tactile-button-cut {
+  min-block-size: 2.75rem;
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: center;
+  justify-content: center;
+  clip-path: polygon(.38rem 0, calc(100% - .38rem) 0, 100% .38rem, 100% calc(100% - .38rem), calc(100% - .38rem) 100%, .38rem 100%, 0 calc(100% - .38rem), 0 .38rem);
+}
+.tactile-button.tactile-button-outline-heavy, .tactile-button-outline-heavy {
+  border-width: 2px;
+  border-radius: 0;
+  clip-path: polygon(.28rem 0, calc(100% - .28rem) 0, 100% .28rem, 100% calc(100% - .28rem), calc(100% - .28rem) 100%, .28rem 100%, 0 calc(100% - .28rem), 0 .28rem);
+  box-shadow: var(--tactile-button-shadow);
+}
+
+/* Marketing and native surfaces use the same bevel highlight and physical depth. */
+.tactile-card-service, .tactile-media-scrim, .tactile-feature-strip, .tactile-callout-bar, .tactile-well {
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-lg);
+  box-shadow: var(--tactile-panel-shadow);
+}
+[data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  background: var(--tactile-control-bg);
+  color: var(--tactile-text);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-md);
+  box-shadow: var(--tactile-button-shadow);
+}
+[data-ui="tactile"][data-mode] :where(dialog) {
+  background-color: var(--tactile-surface);
+  background-image: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-lg);
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+/* Reference-aligned material system: paper plates, keylines, and mechanical controls. */
+[data-ui="tactile"][data-mode] {
+  --tactile-card-bg: var(--tactile-paper-grain), var(--tactile-paper-bg), var(--tactile-surface);
+  --tactile-control-bg: linear-gradient(180deg, var(--tactile-bevel-highlight), transparent .28rem), linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / .94), rgb(var(--tactile-surface-soft-rgb) / .76));
+  --tactile-field-bg: linear-gradient(180deg, rgb(var(--tactile-text-rgb) / .055), transparent .2rem), linear-gradient(180deg, rgb(var(--tactile-surface-soft-rgb) / .78), rgb(var(--tactile-surface-strong-rgb) / .62));
+  --tactile-inset-bg: linear-gradient(180deg, rgb(var(--tactile-text-rgb) / .07), transparent .28rem), rgb(var(--tactile-surface-soft-rgb) / .72);
+  --tactile-keyline: rgb(var(--tactile-text-rgb) / max(.58, calc(var(--tactile-border-alpha) * .86)));
+  --tactile-panel-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -3px 0 var(--tactile-bevel-shadow), 0 2px 0 var(--tactile-keyline), 0 .42rem .9rem rgb(var(--tactile-text-rgb) / var(--tactile-shadow-alpha));
+  --tactile-button-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -3px 0 var(--tactile-bevel-shadow), 0 2px 0 var(--tactile-keyline), 0 .3rem .58rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) * .82));
+  --tactile-inset-shadow: inset .18rem .2rem .38rem rgb(var(--tactile-text-rgb) / .25), inset -.08rem -.08rem .16rem rgb(var(--tactile-surface-strong-rgb) / .34);
+  --tactile-deep-inset-shadow: inset .2rem .22rem .38rem rgb(0 0 0 / .68), inset -.08rem -.08rem .14rem rgb(var(--tactile-surface-strong-rgb) / .12);
+  --tactile-progress-fill: repeating-linear-gradient(90deg, var(--tactile-success) 0 calc(12.5% - .16rem), transparent calc(12.5% - .16rem) 12.5%), var(--tactile-primary);
+  --usk-native-panel-padding: 1.2rem;
+  --usk-native-control-min-block-size: 3.05rem;
+  --usk-native-control-padding-block: .7rem;
+  --usk-native-control-padding-inline: .9rem;
+  --usk-native-subcontrol-padding-block: .52rem;
+  --usk-native-subcontrol-padding-inline: .7rem;
+  --usk-native-choice-size: 1.3rem;
+  --usk-native-choice-background: var(--tactile-field-bg);
+  --usk-native-choice-border: 1px solid var(--tactile-keyline);
+  --usk-native-choice-shadow: var(--tactile-inset-shadow);
+  --usk-native-checkbox-radius: .08rem;
+  --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
+  --usk-native-range-track-size: .68rem;
+  --usk-native-range-track-border: 2px solid var(--tactile-track-rim);
+  --usk-native-range-track-radius: 0;
+  --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
+  --usk-native-range-thumb-size: 1.65rem;
+  --usk-native-range-thumb-border: 2px solid var(--tactile-keyline);
+  --usk-native-range-thumb-radius: .08rem;
+  --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
+  --usk-native-progress-size: .85rem;
+  --usk-native-progress-track-border: 2px solid var(--tactile-track-rim);
+  --usk-native-progress-track-radius: 0;
+  --usk-native-progress-track-shadow: var(--tactile-deep-inset-shadow);
+  --usk-native-progress-value-background: var(--tactile-progress-fill);
+  --usk-native-progress-value-radius: 0;
+  --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .24);
+  --usk-native-file-button-border: 2px solid var(--tactile-keyline);
+  --usk-native-file-button-radius: .08rem;
+  --usk-native-scrollbar-size: 1rem;
+  --usk-native-scrollbar-radius: 0;
+}
+
+.tactile-title {
+  font-family: var(--tactile-font-display);
+  font-weight: 750;
+  letter-spacing: -.035em;
+}
+.tactile-heading { font-family: var(--tactile-font-heading); font-weight: 750; letter-spacing: -.018em; }
+.tactile-label { font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
+
+.tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap {
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .4rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+.tactile-card, .tactile-panel { padding: 1.35rem; }
+.tactile-toolbar { padding: .8rem 1rem; }
+.tactile-well, .tactile-inset {
+  padding: 1rem;
+  background: var(--tactile-inset-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .28rem;
+  box-shadow: var(--tactile-inset-shadow);
+}
+
+.tactile-button, .tactile-icon-button {
+  min-height: 3.05rem;
+  padding: .7rem 1.05rem;
+  border: 1px solid var(--tactile-keyline);
+  border-radius: 0;
+  box-shadow: var(--tactile-button-shadow);
+  clip-path: polygon(.24rem 0, calc(100% - .24rem) 0, 100% .24rem, 100% calc(100% - .24rem), calc(100% - .24rem) 100%, .24rem 100%, 0 calc(100% - .24rem), 0 .24rem);
+  font-weight: 850;
+  letter-spacing: .025em;
+}
+.tactile-icon-button { width: 3.05rem; padding: 0; }
+.tactile-button:hover, .tactile-icon-button:hover {
+  transform: translateY(-1px);
+  box-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -3px 0 var(--tactile-bevel-shadow), 0 3px 0 var(--tactile-keyline), 0 .4rem .72rem rgb(var(--tactile-text-rgb) / var(--tactile-shadow-alpha));
+}
+.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(2px);
+  box-shadow: var(--tactile-inset-shadow);
+}
+.tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled {
+  opacity: .48;
+  transform: none;
+  box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), inset 0 -1px 0 var(--tactile-bevel-shadow);
+}
+
+.tactile-input, .tactile-textarea, .tactile-select {
+  min-height: 3.05rem;
+  padding: .7rem .9rem;
+  background: var(--tactile-field-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .28rem;
+  box-shadow: var(--tactile-inset-shadow);
+}
+.tactile-input:focus, .tactile-textarea:focus, .tactile-select:focus {
+  border-color: var(--tactile-focus);
+  box-shadow: var(--tactile-inset-shadow), var(--tactile-focus-ring);
+}
+
+.tactile-badge {
+  min-height: 1.6rem;
+  padding: .28rem .58rem;
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-xs);
+  box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), 0 1px 0 var(--tactile-keyline);
+  font-size: .7rem;
+  font-weight: 900;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.tactile-nav {
+  gap: .2rem;
+  padding: .4rem;
+  background: var(--tactile-sidebar-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-md);
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-bg-rgb) / .1), inset 0 -2px 0 rgb(0 0 0 / .45), 0 .35rem .8rem rgb(var(--tactile-text-rgb) / var(--tactile-shadow-alpha));
+}
+.tactile-nav-link {
+  min-height: 2.55rem;
+  padding: .62rem .82rem;
+  border-radius: var(--tactile-radius-xs);
+  font-size: .75rem;
+  font-weight: 900;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active {
+  color: var(--tactile-sidebar-fg);
+  background: rgb(var(--tactile-bg-rgb) / .12);
+  border-color: rgb(var(--tactile-bg-rgb) / .22);
+  box-shadow: inset .28rem 0 0 var(--tactile-rail), inset .12rem .12rem .22rem rgb(0 0 0 / .46);
+}
+
+.tactile-progress {
+  height: .85rem;
+  padding: .1rem;
+  background: var(--tactile-recessed-track);
+  border: 2px solid var(--tactile-track-rim);
+  border-radius: 0;
+  box-shadow: var(--tactile-deep-inset-shadow);
+}
+.tactile-progress-bar {
+  background: var(--tactile-progress-fill);
+  border-radius: 0;
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .24);
+}
+
+.tactile-alert {
+  padding: 1rem 1.1rem;
+  background: var(--tactile-card-bg);
+  border: 2px solid var(--tactile-keyline);
+  border-inline-start-width: .45rem;
+  border-radius: .28rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+.tactile-alert-title { font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
+
+.tactile-table { border-collapse: separate; border-spacing: 0; }
+.tactile-table th, .tactile-table td {
+  padding: .72rem .82rem;
+  border-inline-end: 1px solid var(--tactile-keyline);
+  border-bottom: 1px solid var(--tactile-keyline);
+}
+.tactile-table th {
+  color: var(--tactile-sidebar-fg);
+  background: var(--tactile-sidebar-bg);
+  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .42);
+}
+.tactile-table td { background: var(--tactile-field-bg); box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight); }
+
+.tactile-card-service, .tactile-card-feature, .tactile-feature-strip, .tactile-callout-bar {
+  padding: 1rem;
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-lg);
+  box-shadow: var(--tactile-panel-shadow);
+}
+.tactile-card-service { text-align: start; }
+.tactile-feature-item {
+  padding: .85rem 1rem;
+  background: var(--tactile-inset-bg);
+  border-inline-end: 1px solid var(--tactile-keyline);
+  box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), inset 0 -1px 0 var(--tactile-bevel-shadow);
+}
+.tactile-callout-bar {
+  color: var(--tactile-sidebar-fg);
+  background: var(--tactile-sidebar-bg);
+  border-width: 2px;
+}
+.tactile-callout-bar > :where(.tactile-button, a, button):last-child { justify-self: end; }
+
+[data-ui="tactile"][data-mode] :where(fieldset, article, aside, details, dialog) {
+  background-color: var(--tactile-surface);
+  background-image: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-lg);
+  box-shadow: var(--tactile-panel-shadow);
+}
+[data-ui="tactile"][data-mode] :where(legend) {
+  padding: .32rem .58rem;
+  background: var(--tactile-control-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-xs);
+  box-shadow: var(--tactile-button-shadow);
+  font-size: .7rem;
+  font-weight: 900;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+[data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  border: 1px solid var(--tactile-keyline);
+  border-radius: 0;
+  box-shadow: var(--tactile-button-shadow);
+  clip-path: polygon(.2rem 0, calc(100% - .2rem) 0, 100% .2rem, 100% calc(100% - .2rem), calc(100% - .2rem) 100%, .2rem 100%, 0 calc(100% - .2rem), 0 .2rem);
+}
+[data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])):active {
+  transform: translateY(2px);
+  box-shadow: var(--tactile-inset-shadow);
+}
+[data-ui="tactile"][data-mode] :where(dialog) {
+  border: 2px solid var(--tactile-keyline);
+  border-radius: var(--tactile-radius-lg);
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+/* Busy indicators preserve the bevel and pressed-depth cues of tactile controls. */
+.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 {
+  border: .12em solid currentColor; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / .35), transparent 48%); box-shadow: inset .1em .1em .18em rgb(0 0 0 / .3), inset -.08em -.08em .15em rgb(255 255 255 / .32), 0 .08em .16em rgb(0 0 0 / .22); clip-path: circle(50%); animation: tactile-spin .88s cubic-bezier(.2, .8, .2, 1) infinite;
+}
+
 @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; }
 }
@@ -411,7 +1061,7 @@
   [data-ui="tactile"] { --tactile-border-alpha: 1; --tactile-focus-alpha: .75; }
 }
 @media (forced-colors: active) {
-  [data-ui="tactile"] * { forced-color-adjust: auto; }
+  @supports (forced-color-adjust: auto) { [data-ui="tactile"] * { forced-color-adjust: auto; } }
   [data-ui="tactile"] :where(:focus-visible) { outline: 3px solid CanvasText; }
 }
 @media print {
@@ -420,3 +1070,1287 @@
   [data-ui="tactile"] a { color: #000 !important; text-decoration: underline; }
 }
 }
+
+@layer ui-style-kit.tactile {
+/* Keeps semantic field states above preset-specific material paint. */
+.tactile-input[aria-invalid="true"], .tactile-textarea[aria-invalid="true"], .tactile-select[aria-invalid="true"] { border-color: var(--tactile-danger); box-shadow: 0 0 0 2px rgb(var(--tactile-danger-rgb) / .18); }
+.tactile-input[readonly], .tactile-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+}
+
+@layer ui-style-kit.tactile {
+/**
+ * Reasserts the paper-plate and mechanical-control hierarchy after busy indicators.
+ * Chamfered keycaps, hard keylines, and dark troughs remain legible in every theme.
+ */
+.tactile-title { margin-block: .75rem; font-family: var(--tactile-font-display); font-weight: 750; letter-spacing: max(.022em, .5px); }
+.tactile-label { font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
+.tactile-button, .tactile-icon-button {
+  min-height: 3.05rem;
+  padding: .7rem 1.05rem;
+  background: var(--tactile-control-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: 0;
+  box-shadow: var(--tactile-button-shadow);
+  clip-path: polygon(.24rem 0, calc(100% - .24rem) 0, 100% .24rem, 100% calc(100% - .24rem), calc(100% - .24rem) 100%, .24rem 100%, 0 calc(100% - .24rem), 0 .24rem);
+  font-weight: 850;
+}
+.tactile-icon-button { padding: 0; }
+.tactile-button-primary { background: var(--tactile-action-bg); box-shadow: var(--tactile-button-shadow); }
+.tactile-button-secondary { background: var(--tactile-control-bg); box-shadow: var(--tactile-button-shadow); }
+.tactile-button-danger { background: var(--tactile-danger); box-shadow: var(--tactile-button-shadow); }
+.tactile-button:active, .tactile-icon-button:active,
+.tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"] {
+  transform: translateY(2px);
+  box-shadow: var(--tactile-inset-shadow);
+}
+.tactile-input, .tactile-textarea, .tactile-select {
+  min-height: 3.05rem;
+  padding: .7rem .9rem;
+  background: var(--tactile-field-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .28rem;
+  box-shadow: var(--tactile-inset-shadow);
+}
+.tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap {
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .4rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+.tactile-card, .tactile-panel { padding: 1rem; }
+.tactile-well, .tactile-inset {
+  background: var(--tactile-inset-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .28rem;
+  box-shadow: var(--tactile-inset-shadow);
+}
+.tactile-badge { min-height: 1.6rem; padding: .28rem .58rem; border-radius: var(--tactile-radius-xs); }
+.tactile-alert {
+  background: var(--tactile-card-bg);
+  border: 2px solid var(--tactile-keyline);
+  border-inline-start-width: .45rem;
+  border-radius: .28rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+.tactile-progress { height: .85rem; background: var(--tactile-recessed-track); border: 2px solid var(--tactile-track-rim); box-shadow: var(--tactile-deep-inset-shadow); }
+.tactile-progress-bar { background: var(--tactile-progress-fill); border-radius: 0; }
+.tactile-table-wrap { background: var(--tactile-card-bg); border-radius: .4rem; box-shadow: var(--tactile-panel-shadow); }
+.tactile-table th { padding: .72rem .82rem; background: var(--tactile-sidebar-bg); font-weight: 900; }
+.tactile-table td { padding: .72rem .82rem; background: var(--tactile-field-bg); }
+.tactile-nav { background: var(--tactile-sidebar-bg); border: 1px solid var(--tactile-keyline); border-radius: .35rem; box-shadow: var(--tactile-panel-shadow); }
+.tactile-nav-link { min-height: 2.55rem; padding: .62rem .82rem; border-radius: .12rem; }
+.tactile-tooltip, [data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { border: 1px solid var(--tactile-keyline); border-radius: .2rem; box-shadow: var(--tactile-panel-shadow); }
+.tactile-card-service, .tactile-card-feature, .tactile-feature-strip, .tactile-callout-bar {
+  padding: 1rem;
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .4rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+.tactile-feature-item { padding: .85rem 1rem; background: var(--tactile-inset-bg); }
+[data-ui="tactile"][data-mode] :where(fieldset, article, aside, details, dialog) {
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .4rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+}
+
+@layer ui-style-kit.tactile {
+/* Restores semantic action paint after identity-specific geometry. */
+.tactile-button-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); border-color: var(--tactile-primary); }
+.tactile-button-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); border-color: var(--tactile-secondary); }
+.tactile-button-danger { background: var(--tactile-danger); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }
+.tactile-button-ghost { background: transparent; color: var(--tactile-primary); border-color: transparent; }
+}
+
+@layer ui-style-kit.tactile {
+/* Shared annotation fidelity: readable display rhythm and appropriately scaled text icons. */
+.tactile-feature-item > .tactile-icon-medallion { font-size: 1.5rem; line-height: 1; }
+.tactile-callout-bar > .tactile-icon-medallion { min-inline-size: 4.5rem; min-block-size: 4.5rem; font-size: 2rem; font-weight: 800; line-height: 1; }
+}
+
+@layer ui-style-kit.tactile {
+/**
+ * Defines the compact type, restrained geometry, and material constants from
+ * the retained Workspace Configuration reference without changing public selectors.
+ */
+:root {
+  --tactile-font-sans: "Segoe UI", Tahoma, Arial, sans-serif;
+  --tactile-font-display: Georgia, Cambria, "Times New Roman", Times, serif;
+  --tactile-font-body: var(--tactile-font-sans);
+  --tactile-font-heading: var(--tactile-font-display);
+  --tactile-font-control: "Arial Narrow", "Aptos Narrow", "Segoe UI", Tahoma, Arial, sans-serif;
+  --tactile-radius-xs: .12rem;
+  --tactile-radius-sm: .18rem;
+  --tactile-radius-md: .24rem;
+  --tactile-radius-lg: .38rem;
+  --tactile-radius-xl: .5rem;
+}
+
+/**
+ * Locks the light reference palette to warm paper, umber ink, aged brass,
+ * oxidized olive, and fired-copper indicators.
+ */
+[data-ui="tactile"][data-mode="light"] {
+  --tactile-paper-rgb: 246 240 224;
+  --tactile-paper-deep-rgb: 229 218 194;
+  --tactile-paper-highlight-rgb: 255 252 241;
+  --tactile-ink-rgb: 45 40 34;
+  --tactile-muted-ink-rgb: 96 86 73;
+  --tactile-keyline-rgb: 158 135 99;
+  --tactile-material-shadow-rgb: 74 61 43;
+  --tactile-track-rgb: 37 33 31;
+  --tactile-sidebar-rgb: 45 41 36;
+  --tactile-sidebar-text-rgb: 236 221 190;
+  --tactile-copper-rgb: 177 60 28;
+  --tactile-olive-rgb: 91 104 67;
+  --tactile-brass-rgb: 197 160 82;
+}
+
+/**
+ * Carries the same physical materials into dark mode with warm charcoal paper,
+ * readable parchment ink, and brighter hardware accents.
+ */
+[data-ui="tactile"][data-mode="dark"] {
+  --tactile-paper-rgb: 57 51 44;
+  --tactile-paper-deep-rgb: 42 38 34;
+  --tactile-paper-highlight-rgb: 84 75 63;
+  --tactile-ink-rgb: 241 232 214;
+  --tactile-muted-ink-rgb: 198 184 158;
+  --tactile-keyline-rgb: 151 128 91;
+  --tactile-material-shadow-rgb: 0 0 0;
+  --tactile-track-rgb: 25 23 21;
+  --tactile-sidebar-rgb: 27 25 23;
+  --tactile-sidebar-text-rgb: 236 218 184;
+  --tactile-copper-rgb: 211 83 43;
+  --tactile-olive-rgb: 131 145 92;
+  --tactile-brass-rgb: 222 181 91;
+}
+
+/**
+ * Preserves the reference geometry in contrast mode while reducing the
+ * material system to explicit black, white, and high-chroma state hardware.
+ */
+[data-ui="tactile"][data-mode="contrast"] {
+  --tactile-paper-rgb: 0 0 0;
+  --tactile-paper-deep-rgb: 0 0 0;
+  --tactile-paper-highlight-rgb: 255 255 255;
+  --tactile-ink-rgb: 255 255 255;
+  --tactile-muted-ink-rgb: 255 255 255;
+  --tactile-keyline-rgb: 255 255 255;
+  --tactile-material-shadow-rgb: 0 0 0;
+  --tactile-track-rgb: 0 0 0;
+  --tactile-sidebar-rgb: 0 0 0;
+  --tactile-sidebar-text-rgb: 255 255 255;
+  --tactile-copper-rgb: 255 110 48;
+  --tactile-olive-rgb: 196 232 112;
+  --tactile-brass-rgb: 255 214 102;
+}
+
+/**
+ * Repaints the retained physical materials with the selected library scheme.
+ * The mode palettes above therefore remain standalone defaults, while an
+ * explicit data-theme keeps the complete color-token contract authoritative.
+ */
+[data-ui="tactile"][data-theme][data-mode] {
+  --tactile-paper-rgb: var(--usk-bg-rgb);
+  --tactile-paper-deep-rgb: var(--usk-surface-soft-rgb);
+  --tactile-paper-highlight-rgb: var(--usk-surface-strong-rgb);
+  --tactile-ink-rgb: var(--usk-text-rgb);
+  --tactile-muted-ink-rgb: var(--usk-text-muted-rgb);
+  --tactile-keyline-rgb: var(--usk-border-rgb);
+  --tactile-material-shadow-rgb: var(--usk-text-rgb);
+  --tactile-track-rgb: var(--usk-text-rgb);
+  --tactile-sidebar-rgb: var(--usk-text-rgb);
+  --tactile-sidebar-text-rgb: var(--usk-bg-rgb);
+  --tactile-copper-rgb: var(--usk-primary-rgb);
+  --tactile-olive-rgb: var(--usk-success-rgb);
+  --tactile-brass-rgb: var(--usk-accent-rgb);
+}
+
+/**
+ * Maps the fixed Tactile materials onto theme-aware action colors and every
+ * shared native-control token consumed by the package.
+ */
+[data-ui="tactile"][data-mode] {
+  --tactile-paper: rgb(var(--tactile-paper-rgb));
+  --tactile-paper-deep: rgb(var(--tactile-paper-deep-rgb));
+  --tactile-paper-highlight: rgb(var(--tactile-paper-highlight-rgb));
+  --tactile-ink: rgb(var(--tactile-ink-rgb));
+  --tactile-muted-ink: rgb(var(--tactile-muted-ink-rgb));
+  --tactile-copper: rgb(var(--tactile-copper-rgb));
+  --tactile-olive: rgb(var(--tactile-olive-rgb));
+  --tactile-brass: rgb(var(--tactile-brass-rgb));
+  --tactile-bg: var(--tactile-paper);
+  --tactile-surface: var(--tactile-paper);
+  --tactile-surface-strong: var(--tactile-paper-highlight);
+  --tactile-surface-soft: var(--tactile-paper-deep);
+  --tactile-text: var(--tactile-ink);
+  --tactile-text-muted: var(--tactile-muted-ink);
+  --tactile-fg: var(--tactile-ink);
+  --tactile-surface-fg: var(--tactile-ink);
+  --tactile-muted: var(--tactile-muted-ink);
+  --tactile-control-fg: var(--tactile-ink);
+  --tactile-border: rgb(var(--tactile-keyline-rgb) / .72);
+  --tactile-keyline: rgb(var(--tactile-keyline-rgb) / .78);
+  --tactile-bevel-highlight: rgb(var(--tactile-paper-highlight-rgb) / .88);
+  --tactile-bevel-shadow: rgb(var(--tactile-material-shadow-rgb) / .24);
+  --tactile-paper-wash: rgb(var(--tactile-brass-rgb) / .06);
+  --tactile-paper-grain: radial-gradient(circle at 16% 22%, rgb(var(--tactile-ink-rgb) / .025) 0 1px, transparent 1.2px), radial-gradient(circle at 72% 64%, rgb(var(--tactile-brass-rgb) / .04) 0 1px, transparent 1.3px), repeating-linear-gradient(96deg, transparent 0 2.4rem, rgb(var(--tactile-ink-rgb) / .012) 2.45rem 2.5rem);
+  --tactile-paper-bg: linear-gradient(180deg, rgb(var(--tactile-paper-highlight-rgb) / .34), transparent 11rem), linear-gradient(102deg, rgb(var(--tactile-brass-rgb) / .035), transparent 32rem), var(--tactile-paper);
+  --tactile-theme-bg: var(--tactile-paper-grain), var(--tactile-paper-bg);
+  --tactile-card-bg: var(--tactile-paper-grain), var(--tactile-paper-bg);
+  --tactile-control-bg: linear-gradient(180deg, var(--tactile-paper-highlight) 0, var(--tactile-paper) 48%, var(--tactile-paper-deep) 100%);
+  --tactile-field-bg: linear-gradient(180deg, rgb(var(--tactile-material-shadow-rgb) / .075), transparent .24rem), linear-gradient(180deg, var(--tactile-paper) 0, rgb(var(--tactile-paper-highlight-rgb) / .7) 100%);
+  --tactile-inset-bg: linear-gradient(180deg, rgb(var(--tactile-material-shadow-rgb) / .1), transparent .28rem), var(--tactile-paper);
+  --tactile-recessed-track: rgb(var(--tactile-track-rgb));
+  --tactile-track-rim: rgb(var(--tactile-keyline-rgb) / .9);
+  --tactile-progress-track: linear-gradient(180deg, var(--tactile-paper-deep), var(--tactile-paper-highlight));
+  --tactile-thumb-bg: linear-gradient(90deg, var(--tactile-paper-deep), var(--tactile-paper-highlight) 42%, var(--tactile-paper) 58%, var(--tactile-paper-deep));
+  --tactile-select-endcap: linear-gradient(90deg, transparent calc(100% - 2.25rem), rgb(var(--tactile-keyline-rgb) / .56) calc(100% - 2.25rem), rgb(var(--tactile-keyline-rgb) / .56) calc(100% - 2.2rem), transparent calc(100% - 2.2rem)), linear-gradient(135deg, transparent 50%, var(--tactile-ink) 50%), linear-gradient(45deg, var(--tactile-ink) 50%, transparent 50%), linear-gradient(45deg, transparent 50%, var(--tactile-ink) 50%), linear-gradient(135deg, var(--tactile-ink) 50%, transparent 50%), var(--tactile-field-bg);
+  --tactile-sidebar-bg: linear-gradient(90deg, rgb(var(--tactile-sidebar-rgb) / .98), rgb(var(--tactile-sidebar-rgb)));
+  --tactile-sidebar-fg: rgb(var(--tactile-sidebar-text-rgb));
+  --tactile-sidebar-muted: rgb(var(--tactile-sidebar-text-rgb) / .78);
+  --tactile-rail: var(--tactile-copper);
+  --tactile-panel-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), inset 0 -1px 0 rgb(var(--tactile-material-shadow-rgb) / .18), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .2), 0 .28rem .62rem rgb(var(--tactile-material-shadow-rgb) / .09);
+  --tactile-button-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), inset 0 -2px 0 rgb(var(--tactile-material-shadow-rgb) / .22), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .22);
+  --tactile-inset-shadow: inset .1rem .12rem .22rem rgb(var(--tactile-material-shadow-rgb) / .2), inset -.04rem -.04rem .12rem rgb(var(--tactile-paper-highlight-rgb) / .34);
+  --tactile-deep-inset-shadow: inset .12rem .14rem .2rem rgb(0 0 0 / .72), inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .12);
+  --tactile-progress-fill: repeating-linear-gradient(90deg, var(--tactile-olive) 0 calc(14.285% - 1px), rgb(var(--tactile-keyline-rgb) / .84) calc(14.285% - 1px) 14.285%);
+  --usk-native-surface: var(--tactile-paper);
+  --usk-native-surface-strong: var(--tactile-paper-highlight);
+  --usk-native-surface-soft: var(--tactile-paper-deep);
+  --usk-native-card-bg: var(--tactile-card-bg);
+  --usk-native-control-bg: var(--tactile-field-bg);
+  --usk-native-text: var(--tactile-ink);
+  --usk-native-text-muted: var(--tactile-muted-ink);
+  --usk-native-border: var(--tactile-keyline);
+  --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-shadow: var(--tactile-button-shadow);
+  --usk-native-shadow-md: var(--tactile-panel-shadow);
+  --usk-native-control-min-block-size: 2.75rem;
+  --usk-native-control-padding-block: .55rem;
+  --usk-native-control-padding-inline: .78rem;
+  --usk-native-subcontrol-padding-block: .45rem;
+  --usk-native-subcontrol-padding-inline: .66rem;
+  --usk-native-panel-padding: 1rem;
+  --usk-native-choice-size: 1.05rem;
+  --usk-native-choice-background: var(--tactile-field-bg);
+  --usk-native-choice-border: 1px solid var(--tactile-keyline);
+  --usk-native-choice-shadow: var(--tactile-inset-shadow);
+  --usk-native-choice-checked-background: var(--tactile-copper);
+  --usk-native-choice-mark-color: var(--tactile-paper-highlight);
+  --usk-native-checkbox-radius: .08rem;
+  --usk-native-select-indicator-size: .36rem .36rem, .36rem .36rem;
+  --usk-native-select-indicator-position: calc(100% - 1.05rem) calc(50% - .22rem), calc(100% - 1.05rem) calc(50% + .22rem);
+  --usk-native-select-padding-inline-end: 2.6rem;
+  --usk-native-range-track-size: .55rem;
+  --usk-native-range-track-background: var(--tactile-recessed-track);
+  --usk-native-range-track-border: 1px solid var(--tactile-track-rim);
+  --usk-native-range-track-radius: .16rem;
+  --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
+  --usk-native-range-thumb-size: 1.35rem;
+  --usk-native-range-thumb-background: var(--tactile-thumb-bg);
+  --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
+  --usk-native-range-thumb-radius: .16rem;
+  --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
+  --usk-native-progress-size: .68rem;
+  --usk-native-progress-track-background: var(--tactile-progress-track);
+  --usk-native-progress-track-border: 1px solid var(--tactile-keyline);
+  --usk-native-progress-track-radius: .14rem;
+  --usk-native-progress-track-shadow: var(--tactile-inset-shadow);
+  --usk-native-progress-value-background: var(--tactile-progress-fill);
+  --usk-native-progress-value-radius: .08rem;
+  --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .3);
+  --usk-native-meter-optimum-background: var(--tactile-olive);
+  --usk-native-meter-suboptimum-background: var(--tactile-brass);
+  --usk-native-meter-critical-background: var(--tactile-copper);
+  --usk-native-file-button-background: var(--tactile-control-bg);
+  --usk-native-file-button-border: 1px solid var(--tactile-keyline);
+  --usk-native-file-button-radius: .2rem;
+  --usk-native-file-button-shadow: var(--tactile-button-shadow);
+  --usk-native-color-swatch-border: 1px solid var(--tactile-keyline);
+  --usk-native-color-swatch-radius: .12rem;
+  --usk-native-scrollbar-track: var(--tactile-paper-deep);
+  --usk-native-scrollbar-thumb: var(--tactile-thumb-bg);
+  --usk-native-scrollbar-radius: .14rem;
+}
+
+/**
+ * Establishes the restrained paper page and the reference's compact text rhythm.
+ */
+[data-ui="tactile"] {
+  background: var(--tactile-theme-bg);
+  color: var(--tactile-ink);
+  font-family: var(--tactile-font-body);
+  font-size: .875rem;
+  line-height: 1.42;
+}
+
+.tactile-title {
+  margin-block: .75rem;
+  font-family: var(--tactile-font-display);
+  font-size: clamp(2rem, 4.2vw, 3.05rem);
+  font-weight: 700;
+  line-height: 1.02;
+  letter-spacing: max(.022em, .5px);
+}
+
+.tactile-heading {
+  font-family: var(--tactile-font-heading);
+  font-size: clamp(1.25rem, 2vw, 1.7rem);
+  font-weight: 700;
+  line-height: 1.08;
+  letter-spacing: -.015em;
+}
+
+.tactile-kicker,
+.tactile-eyebrow {
+  font-family: var(--tactile-font-control);
+  font-size: .7rem;
+  font-weight: 700;
+  letter-spacing: .075em;
+  text-transform: uppercase;
+}
+
+.tactile-label {
+  color: var(--tactile-ink);
+  font-family: var(--tactile-font-control);
+  font-size: .74rem;
+  font-weight: 650;
+  letter-spacing: .01em;
+  text-transform: none;
+}
+
+.tactile-subtitle,
+.tactile-copy,
+.tactile-help-text,
+.tactile-alert-body {
+  color: var(--tactile-muted-ink);
+}
+
+.tactile-divider {
+  background: rgb(var(--tactile-keyline-rgb) / .44);
+  box-shadow: 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .58);
+}
+
+/**
+ * Gives every framed component the thin umber rule, shallow radius, and
+ * low-profile paper elevation visible in the reference panels.
+ */
+.tactile-surface,
+.tactile-card,
+.tactile-panel,
+.tactile-toolbar,
+.tactile-table-wrap {
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .38rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+.tactile-card,
+.tactile-panel {
+  padding: 1rem;
+}
+
+.tactile-toolbar {
+  padding: .72rem .82rem;
+}
+
+.tactile-well,
+.tactile-inset {
+  padding: .82rem;
+  background: var(--tactile-inset-bg);
+  border: 1px solid rgb(var(--tactile-keyline-rgb) / .64);
+  border-radius: .28rem;
+  box-shadow: var(--tactile-inset-shadow);
+}
+
+/**
+ * Recreates the shallow raised keycaps and the one-pixel pressed travel used
+ * by neutral, semantic, icon, destructive, and disabled actions.
+ */
+.tactile-button,
+.tactile-icon-button {
+  min-height: 2.75rem;
+  padding: .55rem .9rem;
+  background: var(--tactile-control-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .24rem;
+  box-shadow: var(--tactile-button-shadow);
+  clip-path: none;
+  font-family: var(--tactile-font-control);
+  font-size: .84rem;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: .005em;
+  text-transform: none;
+}
+
+.tactile-icon-button {
+  width: 2.75rem;
+  padding: 0;
+}
+
+.tactile-button:hover,
+.tactile-icon-button:hover {
+  transform: translateY(-1px);
+  border-color: rgb(var(--tactile-keyline-rgb) / .96);
+  box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), inset 0 -2px 0 rgb(var(--tactile-material-shadow-rgb) / .26), 0 2px 3px rgb(var(--tactile-material-shadow-rgb) / .2);
+}
+
+.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: var(--tactile-inset-shadow);
+}
+
+.tactile-button-primary {
+  background: linear-gradient(180deg, var(--tactile-primary-hover), var(--tactile-primary) 48%, rgb(var(--tactile-primary-rgb) / .84));
+  color: var(--tactile-on-primary);
+  border-color: var(--tactile-primary);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -2px 0 rgb(0 0 0 / .25), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .3);
+}
+
+.tactile-button-secondary {
+  background: var(--tactile-control-bg);
+  color: var(--tactile-ink);
+  border-color: var(--tactile-keyline);
+}
+
+.tactile-button-danger {
+  background: linear-gradient(180deg, rgb(var(--tactile-danger-rgb) / .88), var(--tactile-danger) 52%, rgb(var(--tactile-danger-rgb) / .76));
+  color: var(--tactile-on-danger);
+  border-color: var(--tactile-danger);
+}
+
+/** Enhances supported browsers with the reference's light-to-dark enamel ramp. */
+@supports (color: color-mix(in srgb, black, white)) {
+  .tactile-button-primary {
+    background: linear-gradient(180deg, color-mix(in srgb, var(--tactile-primary), white 16%), var(--tactile-primary) 48%, color-mix(in srgb, var(--tactile-primary), black 18%));
+    border-color: color-mix(in srgb, var(--tactile-primary), black 34%);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -2px 0 rgb(0 0 0 / .25), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .3);
+  }
+
+  .tactile-button-danger {
+    background: linear-gradient(180deg, color-mix(in srgb, var(--tactile-danger), white 12%), var(--tactile-danger) 52%, color-mix(in srgb, var(--tactile-danger), black 18%));
+    border-color: color-mix(in srgb, var(--tactile-danger), black 30%);
+  }
+}
+
+.tactile-button-ghost {
+  background: transparent;
+  color: var(--tactile-primary);
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.tactile-button:disabled,
+.tactile-icon-button:disabled,
+.tactile-disabled {
+  opacity: .46;
+  transform: none;
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .38), inset 0 -1px 0 rgb(var(--tactile-material-shadow-rgb) / .12);
+}
+
+/**
+ * Applies the recessed paper field, mechanical selector end-cap, and compact
+ * type treatment to text, textarea, select, and file-entry families.
+ */
+.tactile-input,
+.tactile-textarea,
+.tactile-select {
+  min-height: 2.75rem;
+  padding: .55rem .72rem;
+  background: var(--tactile-field-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .24rem;
+  box-shadow: var(--tactile-inset-shadow);
+  font-family: var(--tactile-font-control);
+  font-size: .84rem;
+  font-weight: 500;
+}
+
+.tactile-select {
+  appearance: none;
+  padding-inline-end: 2.75rem;
+  background-image: var(--tactile-select-endcap);
+  background-repeat: no-repeat;
+  background-position: 0 0, calc(100% - 1.18rem) calc(50% - .36rem), calc(100% - .9rem) calc(50% - .36rem), calc(100% - 1.18rem) calc(50% + .34rem), calc(100% - .9rem) calc(50% + .34rem), 0 0;
+  background-size: 100% 100%, .28rem .28rem, .28rem .28rem, .28rem .28rem, .28rem .28rem, 100% 100%;
+}
+
+.tactile-input::placeholder,
+.tactile-textarea::placeholder {
+  color: var(--tactile-muted-ink);
+  opacity: .72;
+}
+
+/**
+ * Matches the small fired-copper checks and radios while retaining the native
+ * focus ring and full-label pointer target.
+ */
+.tactile-check-control,
+.tactile-radio-control {
+  width: 1.05rem;
+  height: 1.05rem;
+  background: var(--tactile-field-bg);
+  border: 1px solid var(--tactile-keyline);
+  box-shadow: var(--tactile-inset-shadow);
+}
+
+.tactile-check input:checked + .tactile-check-control,
+.tactile-radio input:checked + .tactile-radio-control {
+  background: var(--tactile-copper);
+  border-color: rgb(var(--tactile-copper-rgb) / .96);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), var(--tactile-focus-ring);
+}
+
+.tactile-radio input:checked + .tactile-radio-control {
+  background: var(--tactile-field-bg);
+}
+
+.tactile-radio input:checked + .tactile-radio-control::after {
+  width: .52rem;
+  height: .52rem;
+  background: var(--tactile-copper);
+}
+
+.tactile-switch-track {
+  width: 4.1rem;
+  height: 1.75rem;
+  background: var(--tactile-recessed-track);
+  border: 1px solid var(--tactile-track-rim);
+  border-radius: .2rem;
+  box-shadow: var(--tactile-deep-inset-shadow);
+}
+
+.tactile-switch-thumb {
+  top: .14rem;
+  left: .14rem;
+  width: 1.42rem;
+  height: 1.42rem;
+  background: var(--tactile-thumb-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .16rem;
+  box-shadow: var(--tactile-button-shadow);
+}
+
+.tactile-switch input:checked + .tactile-switch-track {
+  background: linear-gradient(90deg, var(--tactile-recessed-track) 0 50%, var(--tactile-olive) 50% 100%);
+  border-color: var(--tactile-keyline);
+}
+
+.tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb {
+  left: calc(100% - 1.42rem - .14rem);
+}
+
+/**
+ * Recreates the charcoal navigation plate with brass line work, sentence-case
+ * labels, and the narrow fired-copper selection rail.
+ */
+.tactile-nav {
+  gap: .2rem;
+  padding: .35rem;
+  background: var(--tactile-sidebar-bg);
+  border: 1px solid rgb(var(--tactile-keyline-rgb) / .72);
+  border-radius: .28rem;
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-sidebar-text-rgb) / .1), inset 0 -1px 0 rgb(0 0 0 / .52), 0 2px 5px rgb(0 0 0 / .18);
+}
+
+.tactile-nav-link {
+  min-height: 2.65rem;
+  padding: .58rem .76rem;
+  color: var(--tactile-sidebar-muted);
+  border-radius: .18rem;
+  font-family: var(--tactile-font-control);
+  font-size: .84rem;
+  font-weight: 500;
+  letter-spacing: .01em;
+  text-transform: none;
+}
+
+.tactile-nav-link:hover {
+  color: var(--tactile-sidebar-fg);
+  background: rgb(var(--tactile-sidebar-text-rgb) / .055);
+  border-color: rgb(var(--tactile-sidebar-text-rgb) / .14);
+}
+
+.tactile-nav-link[aria-current="page"],
+.tactile-nav-link.is-active {
+  color: var(--tactile-brass);
+  background: rgb(var(--tactile-sidebar-text-rgb) / .06);
+  border-color: rgb(var(--tactile-sidebar-text-rgb) / .18);
+  box-shadow: inset .18rem 0 0 var(--tactile-copper), inset .08rem .08rem .18rem rgb(0 0 0 / .38);
+}
+
+/**
+ * Separates slider troughs from the paper-backed segmented progress gauge and
+ * applies the olive fill used by readiness and completion indicators.
+ */
+.tactile-progress {
+  height: .68rem;
+  padding: .08rem;
+  background: var(--tactile-progress-track);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .14rem;
+  box-shadow: var(--tactile-inset-shadow);
+}
+
+.tactile-progress-bar {
+  background: var(--tactile-progress-fill);
+  border-radius: .06rem;
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .26);
+}
+
+.tactile-badge {
+  min-height: 1.45rem;
+  padding: .22rem .48rem;
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .12rem;
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .34);
+  font-size: .68rem;
+  font-weight: 700;
+  letter-spacing: .045em;
+}
+
+.tactile-alert {
+  padding: .82rem .9rem;
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-inline-start-width: .28rem;
+  border-radius: .3rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+.tactile-alert-title {
+  font-size: .72rem;
+  font-weight: 700;
+  letter-spacing: .045em;
+}
+
+.tactile-table th,
+.tactile-table td {
+  padding: .62rem .72rem;
+  border-color: rgb(var(--tactile-keyline-rgb) / .52);
+}
+
+.tactile-table th {
+  color: var(--tactile-sidebar-fg);
+  background: var(--tactile-sidebar-bg);
+  font-family: var(--tactile-font-control);
+  font-size: .7rem;
+  font-weight: 700;
+  letter-spacing: .055em;
+}
+
+.tactile-table td {
+  color: var(--tactile-ink);
+  background: var(--tactile-field-bg);
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .28);
+}
+
+.tactile-tooltip,
+[data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
+  background: var(--tactile-sidebar-bg);
+  color: var(--tactile-sidebar-fg);
+  border: 1px solid rgb(var(--tactile-keyline-rgb) / .72);
+  border-radius: .2rem;
+  box-shadow: 0 .28rem .6rem rgb(0 0 0 / .24);
+  font-family: var(--tactile-font-control);
+  font-size: .75rem;
+}
+
+/**
+ * Extends the same border, paper, and hardware treatment through the marketing
+ * primitives and native framed content used by direct stylesheet consumers.
+ */
+.tactile-card-service,
+.tactile-card-feature,
+.tactile-feature-strip,
+.tactile-callout-bar {
+  padding: .9rem;
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .38rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+.tactile-feature-item {
+  padding: .72rem .82rem;
+  background: var(--tactile-inset-bg);
+  border-color: rgb(var(--tactile-keyline-rgb) / .54);
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .3);
+}
+
+.tactile-icon-medallion,
+.tactile-badge-seal {
+  background: var(--tactile-sidebar-bg);
+  color: var(--tactile-brass);
+  border-color: rgb(var(--tactile-keyline-rgb) / .82);
+  box-shadow: var(--tactile-button-shadow);
+}
+
+/** Pairs the seal's small text with its dark material instead of the page's ink colors. */
+.tactile-badge-seal {
+  color: var(--tactile-sidebar-fg);
+}
+
+/** Native strong/small defaults must not repaint the two lines inside the trust seal. */
+.tactile-badge-seal > :where(strong, small) {
+  color: inherit;
+}
+
+.tactile-callout-bar {
+  color: var(--tactile-sidebar-fg);
+  background: var(--tactile-sidebar-bg);
+}
+
+[data-ui="tactile"][data-mode] :where(fieldset, article, aside, details, dialog) {
+  background-color: var(--tactile-paper);
+  background-image: var(--tactile-card-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .38rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+[data-ui="tactile"][data-mode] :where(legend) {
+  padding: .26rem .5rem;
+  background: var(--tactile-control-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .16rem;
+  box-shadow: var(--tactile-button-shadow);
+  font-family: var(--tactile-font-control);
+  font-size: .68rem;
+  font-weight: 700;
+  letter-spacing: .055em;
+}
+
+[data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  min-height: 2.75rem;
+  padding: .55rem .9rem;
+  background: var(--tactile-control-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .24rem;
+  box-shadow: var(--tactile-button-shadow);
+  clip-path: none;
+  font-family: var(--tactile-font-control);
+  font-size: .84rem;
+  font-weight: 600;
+}
+
+[data-ui="tactile"][data-mode] :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
+  min-height: 2.75rem;
+  background-color: var(--tactile-paper);
+  background-image: var(--tactile-field-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .24rem;
+  box-shadow: var(--tactile-inset-shadow);
+  font-family: var(--tactile-font-control);
+  font-size: .84rem;
+  font-weight: 500;
+}
+
+/**
+ * Gives unclassed selectors the same divided, double-arrow hardware end cap as
+ * the prefixed selector so direct stylesheet consumers retain the reference cue.
+ */
+[data-ui="tactile"][data-mode] :where(select) {
+  appearance: none;
+  padding-inline-end: 2.75rem;
+  background-image: var(--tactile-select-endcap);
+  background-repeat: no-repeat;
+  background-position: 0 0, calc(100% - 1.18rem) calc(50% - .36rem), calc(100% - .9rem) calc(50% - .36rem), calc(100% - 1.18rem) calc(50% + .34rem), calc(100% - .9rem) calc(50% + .34rem), 0 0;
+  background-size: 100% 100%, .28rem .28rem, .28rem .28rem, .28rem .28rem, .28rem .28rem, 100% 100%;
+}
+
+[data-ui="tactile"][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
+  accent-color: var(--tactile-copper);
+}
+
+[data-ui="tactile"][data-mode] :where(input[type="file"])::file-selector-button {
+  background: var(--tactile-control-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .2rem;
+  box-shadow: var(--tactile-button-shadow);
+  font-family: var(--tactile-font-control);
+  font-weight: 600;
+}
+
+/**
+ * Reasserts state affordances after the late native-control material layer.
+ * Keeping these selectors last prevents the tactile paper fill from masking
+ * focus, validation, and read-only cues on prefixed form controls.
+ */
+.tactile-input:focus-visible,
+.tactile-textarea:focus-visible,
+.tactile-select:focus-visible {
+  border-color: var(--tactile-focus);
+  box-shadow: var(--tactile-inset-shadow), var(--tactile-focus-ring);
+  outline: 2px solid var(--tactile-focus);
+  outline-offset: 2px;
+}
+
+.tactile-input[aria-invalid="true"],
+.tactile-textarea[aria-invalid="true"],
+.tactile-select[aria-invalid="true"],
+[data-ui="tactile"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
+  border-color: var(--tactile-danger);
+  box-shadow: var(--tactile-inset-shadow), 0 0 0 2px rgb(var(--tactile-danger-rgb) / .24);
+}
+
+.tactile-input[readonly],
+.tactile-textarea[readonly],
+[data-ui="tactile"][data-mode] :where(input[readonly]:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea[readonly]) {
+  border-style: dashed;
+  filter: saturate(.72);
+  opacity: .78;
+}
+}
+
+@layer ui-style-kit.tactile {
+/**
+ * Reconstructs the retained workspace composition as reusable Tactile layout
+ * elements. These selectors consume material variables exclusively so theme
+ * schemes repaint the composition without changing its measured geometry.
+ */
+.tactile-workspace-shell {
+  overflow: hidden;
+  background: var(--tactile-card-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .38rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+.tactile-workspace-shell,
+.tactile-workspace-shell *,
+.tactile-workspace-shell *::before,
+.tactile-workspace-shell *::after {
+  box-sizing: border-box;
+}
+
+.tactile-workspace-shell > .tactile-workspace-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 1.35rem 1rem 1rem;
+  background: var(--tactile-sidebar-bg);
+  color: var(--tactile-sidebar-fg);
+  border: 0;
+  border-inline-end: 1px solid rgb(var(--tactile-keyline-rgb) / .82);
+  border-radius: 0;
+  box-shadow: inset -1px 0 0 rgb(0 0 0 / .34), inset 0 1px 0 rgb(var(--tactile-sidebar-text-rgb) / .08);
+}
+
+.tactile-workspace-brand {
+  display: grid;
+  align-items: center;
+  gap: .7rem;
+  color: var(--tactile-sidebar-fg);
+  text-decoration: none;
+}
+
+.tactile-workspace-brand-mark {
+  display: grid;
+  place-items: center;
+  width: 2.3rem;
+  height: 2.3rem;
+  background: linear-gradient(180deg, rgb(var(--tactile-copper-rgb) / .92), var(--tactile-copper));
+  color: var(--tactile-paper-highlight);
+  border: 1px solid rgb(var(--tactile-brass-rgb) / .72);
+  border-radius: .16rem;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 1px 2px rgb(0 0 0 / .42);
+  font-family: var(--tactile-font-display);
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.tactile-workspace-brand :where(strong, small) {
+  display: block;
+}
+
+.tactile-workspace-brand strong {
+  color: var(--tactile-sidebar-fg);
+  font-family: var(--tactile-font-display);
+  font-size: 1.18rem;
+  line-height: 1.05;
+}
+
+.tactile-workspace-brand small {
+  margin-top: .18rem;
+  color: var(--tactile-sidebar-muted);
+  font-family: var(--tactile-font-control);
+  font-size: .64rem;
+  font-weight: 700;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+.tactile-workspace-menu {
+  display: grid;
+  gap: .3rem;
+  margin-top: 2.4rem;
+}
+
+.tactile-workspace-link {
+  display: grid;
+  align-items: center;
+  gap: .68rem;
+  min-height: 2.65rem;
+  padding: .62rem .7rem;
+  color: var(--tactile-sidebar-muted);
+  border: 1px solid transparent;
+  border-radius: .14rem;
+  font-family: var(--tactile-font-control);
+  font-size: .78rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.tactile-workspace-link small {
+  color: inherit;
+  font-size: .6rem;
+  letter-spacing: .08em;
+}
+
+.tactile-workspace-link:hover {
+  color: var(--tactile-sidebar-fg);
+  background: rgb(var(--tactile-sidebar-text-rgb) / .055);
+  border-color: rgb(var(--tactile-sidebar-text-rgb) / .16);
+}
+
+.tactile-workspace-link.is-active,
+.tactile-workspace-link[aria-current="page"] {
+  color: var(--tactile-brass);
+  background: rgb(var(--tactile-sidebar-text-rgb) / .06);
+  border-color: rgb(var(--tactile-sidebar-text-rgb) / .14);
+  box-shadow: inset .2rem 0 0 var(--tactile-copper), inset .08rem .08rem .2rem rgb(0 0 0 / .4);
+}
+
+.tactile-workspace-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 1.05rem;
+  height: 1.05rem;
+}
+
+.tactile-workspace-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  stroke-width: 1.7;
+}
+
+.tactile-workspace-sidebar-note {
+  margin-top: auto;
+  padding: .82rem;
+  background: rgb(0 0 0 / .16);
+  border: 1px solid rgb(var(--tactile-sidebar-text-rgb) / .13);
+  border-radius: .18rem;
+  box-shadow: inset .08rem .1rem .18rem rgb(0 0 0 / .34);
+}
+
+.tactile-workspace-sidebar-note p {
+  margin: .52rem 0 0;
+  color: var(--tactile-sidebar-muted);
+  font-size: .7rem;
+  line-height: 1.4;
+}
+
+.tactile-workspace-main {
+  background: var(--tactile-card-bg);
+}
+
+.tactile-workspace-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.5rem 1.6rem 1.3rem;
+  border-bottom: 1px solid rgb(var(--tactile-keyline-rgb) / .55);
+  box-shadow: 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .62);
+}
+
+.tactile-workspace-header :where(p, h2) {
+  margin: 0;
+}
+
+.tactile-workspace-title {
+  margin-top: .26rem;
+  font-family: var(--tactile-font-display);
+  font-size: clamp(2.15rem, 4vw, 2.8rem);
+  font-weight: 700;
+  line-height: 1.02;
+  letter-spacing: -.035em;
+}
+
+.tactile-workspace-header .tactile-copy {
+  max-width: 40rem;
+  margin-top: .55rem;
+  font-size: .8rem;
+}
+
+.tactile-workspace-body {
+  display: grid;
+  align-items: start;
+  gap: 1rem;
+  padding: 1.25rem 1.6rem 1.5rem;
+}
+
+.tactile-workspace-settings {
+  overflow: hidden;
+  background: var(--tactile-card-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .28rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+.tactile-workspace-row {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.15rem 1.2rem;
+  border-bottom: 1px solid rgb(var(--tactile-keyline-rgb) / .46);
+  box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .46);
+}
+
+.tactile-workspace-row:last-child {
+  border-bottom: 0;
+}
+
+.tactile-workspace-row :where(h3, p) {
+  margin: 0;
+}
+
+.tactile-workspace-row h3 {
+  font-family: var(--tactile-font-display);
+  font-size: 1rem;
+  line-height: 1.15;
+}
+
+.tactile-workspace-row > div:first-child p {
+  margin-top: .3rem;
+  color: var(--tactile-muted-ink);
+  font-size: .68rem;
+}
+
+.tactile-workspace-fields,
+.tactile-workspace-switches {
+  display: grid;
+  gap: .8rem;
+}
+
+.tactile-workspace-switches .tactile-switch {
+  width: 100%;
+  justify-content: flex-start;
+  padding: .7rem .74rem;
+  background: var(--tactile-inset-bg);
+  border: 1px solid rgb(var(--tactile-keyline-rgb) / .52);
+  border-radius: .2rem;
+  box-shadow: var(--tactile-inset-shadow);
+}
+
+.tactile-workspace-switches .tactile-switch > span:last-child {
+  display: grid;
+  gap: .08rem;
+}
+
+.tactile-workspace-switches small,
+.tactile-workspace-security small {
+  color: var(--tactile-muted-ink);
+  font-size: .66rem;
+}
+
+.tactile-workspace-security {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .8rem;
+}
+
+.tactile-workspace-security > div {
+  display: grid;
+  gap: .35rem;
+}
+
+.tactile-workspace-readiness {
+  padding: 1rem;
+  background: var(--tactile-card-bg);
+  color: var(--tactile-ink);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: .28rem;
+  box-shadow: var(--tactile-panel-shadow);
+}
+
+.tactile-workspace-gauge {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: min(100%, 11rem);
+  aspect-ratio: 1;
+  margin: 1rem auto .55rem;
+  overflow: hidden;
+  background: radial-gradient(circle, var(--tactile-paper-highlight) 0 52%, transparent 52.5%), repeating-conic-gradient(from 218deg, var(--tactile-keyline) 0 1deg, transparent 1deg 11deg), var(--tactile-paper-deep);
+  border: .42rem solid var(--tactile-paper);
+  border-radius: 999px;
+  box-shadow: inset 0 0 0 1px var(--tactile-keyline), inset .18rem .2rem .42rem rgb(var(--tactile-material-shadow-rgb) / .18), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .22);
+}
+
+.tactile-workspace-gauge::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 48%;
+  width: .16rem;
+  height: 35%;
+  background: var(--tactile-copper);
+  border-radius: .08rem;
+  box-shadow: 0 0 0 1px rgb(var(--tactile-material-shadow-rgb) / .26);
+  transform: translateX(-50%) rotate(44deg);
+  transform-origin: 50% 100%;
+}
+
+.tactile-workspace-gauge > span {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 4.8rem;
+  height: 4.8rem;
+  background: var(--tactile-control-bg);
+  border: 1px solid var(--tactile-keyline);
+  border-radius: 999px;
+  box-shadow: var(--tactile-button-shadow);
+}
+
+.tactile-workspace-gauge :where(strong, small) {
+  display: block;
+  text-align: center;
+}
+
+.tactile-workspace-gauge strong {
+  align-self: end;
+  font-family: var(--tactile-font-display);
+  font-size: 1.65rem;
+  line-height: 1;
+}
+
+.tactile-workspace-gauge small {
+  align-self: start;
+  color: var(--tactile-muted-ink);
+  font-family: var(--tactile-font-control);
+  font-size: .6rem;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.tactile-workspace-gauge-key {
+  display: flex;
+  justify-content: space-between;
+  color: var(--tactile-muted-ink);
+  font-family: var(--tactile-font-control);
+  font-size: .6rem;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+.tactile-workspace-readiness .tactile-alert {
+  margin-top: 1rem;
+}
+
+.tactile-workspace-shelf {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  display: grid;
+  align-items: center;
+  gap: 1.25rem;
+  padding: .9rem 1.6rem;
+  background: var(--tactile-control-bg);
+  border-top: 1px solid var(--tactile-keyline);
+  box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), 0 -.2rem .55rem rgb(var(--tactile-material-shadow-rgb) / .12);
+}
+
+.tactile-workspace-progress {
+  display: grid;
+  align-items: center;
+  gap: .8rem;
+}
+
+.tactile-workspace-progress > span {
+  display: grid;
+  gap: .08rem;
+}
+
+.tactile-workspace-progress small {
+  color: var(--tactile-muted-ink);
+  font-size: .65rem;
+}
+
+.tactile-workspace-progress .tactile-progress {
+  width: 100%;
+}
+
+@media (max-width: 52rem) {
+  .tactile-workspace-shell > .tactile-workspace-sidebar {
+    border-inline-end: 0;
+    border-bottom: 1px solid rgb(var(--tactile-keyline-rgb) / .82);
+  }
+
+  .tactile-workspace-menu {
+    margin-top: 1rem;
+    overflow-x: auto;
+  }
+
+  .tactile-workspace-sidebar-note {
+    display: none;
+  }
+
+}
+
+@media (max-width: 38rem) {
+  .tactile-workspace-header,
+  .tactile-workspace-security {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .tactile-workspace-header,
+  .tactile-workspace-body,
+  .tactile-workspace-shelf {
+    padding-inline: 1rem;
+  }
+
+  .tactile-workspace-row { gap: .8rem; }
+
+  .tactile-workspace-shelf .tactile-cluster,
+  .tactile-workspace-shelf .tactile-button {
+    width: 100%;
+  }
+}
+/** Warning actions inherit preset geometry and use the paired semantic warning colors. */
+[data-ui="tactile"][data-mode] .tactile-button.tactile-button-warning {
+  background: var(--tactile-warning);
+  color: var(--tactile-on-warning);
+  border-color: var(--tactile-warning);
+  text-shadow: none;
+}
+
+}