@d4gger/design-system 3.0.1 → 4.0.0

package/dist/styles.css

@@ -282,6 +282,7 @@ svg {
   --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
   --dsx-color-border-subtle: #333640;
   --dsx-color-border-strong: #565b70;
+  --dsx-color-accent-border: #bfb1ff;
   --dsx-effect-shadow-1: 0 1px 2px rgba(8, 9, 12, 0.24);
   --dsx-effect-shadow-2: 0 2px 8px rgba(8, 9, 12, 0.32);
   --dsx-effect-shadow-3: 0 4px 16px rgba(8, 9, 12, 0.40);
@@ -319,6 +320,7 @@ svg {
   --dsx-drawer-min-height-lg: 50vh;
   --dsx-drawer-min-height-full: 100vh;
   --dsx-rich-text-editor-min-height: 220px;
+  --dsx-rich-text-editor-link-popover-width: 320px;
   --dsx-empty-state-max-width: 600px;
   --dsx-empty-state-min-height: 400px;
   --dsx-input-otp-slot-width: 36px;
@@ -516,146 +518,76 @@ svg {
   --dsx-z-index-overlay: 80;
   --dsx-z-index-modal: 90;
   --dsx-z-index-toast: 100;
-}
-
-[data-accent-color='rift'] {
-  --dsx-color-accent-1: var(--dsx-color-accent-rift-1);
-  --dsx-color-accent-2: var(--dsx-color-accent-rift-2);
-  --dsx-color-accent-3: var(--dsx-color-accent-rift-3);
-  --dsx-color-accent-4: var(--dsx-color-accent-rift-4);
-  --dsx-color-accent-5: var(--dsx-color-accent-rift-5);
-  --dsx-color-accent-6: var(--dsx-color-accent-rift-6);
-  --dsx-color-accent-7: var(--dsx-color-accent-rift-7);
-  --dsx-color-accent-8: var(--dsx-color-accent-rift-8);
-  --dsx-color-accent-9: var(--dsx-color-accent-rift-9);
-  --dsx-color-accent-10: var(--dsx-color-accent-rift-10);
-  --dsx-color-accent-11: var(--dsx-color-accent-rift-11);
-  --dsx-color-accent-12: var(--dsx-color-accent-rift-12);
-  --dsx-color-primary: var(--dsx-color-accent-rift-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-rift-3);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-rift-11);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-rift-11);
-  --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 64%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 28%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 40%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 8%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 16%, transparent);
-}
-
-[data-accent-color='warp'] {
-  --dsx-color-accent-1: var(--dsx-color-accent-warp-1);
-  --dsx-color-accent-2: var(--dsx-color-accent-warp-2);
-  --dsx-color-accent-3: var(--dsx-color-accent-warp-3);
-  --dsx-color-accent-4: var(--dsx-color-accent-warp-4);
-  --dsx-color-accent-5: var(--dsx-color-accent-warp-5);
-  --dsx-color-accent-6: var(--dsx-color-accent-warp-6);
-  --dsx-color-accent-7: var(--dsx-color-accent-warp-7);
-  --dsx-color-accent-8: var(--dsx-color-accent-warp-8);
-  --dsx-color-accent-9: var(--dsx-color-accent-warp-9);
-  --dsx-color-accent-10: var(--dsx-color-accent-warp-10);
-  --dsx-color-accent-11: var(--dsx-color-accent-warp-11);
-  --dsx-color-accent-12: var(--dsx-color-accent-warp-12);
-  --dsx-color-primary: var(--dsx-color-accent-warp-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-warp-3);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-warp-11);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-warp-11);
-  --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 64%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 28%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 40%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 8%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 16%, transparent);
-}
-
-[data-accent-color='ray'] {
-  --dsx-color-accent-1: var(--dsx-color-accent-ray-1);
-  --dsx-color-accent-2: var(--dsx-color-accent-ray-2);
-  --dsx-color-accent-3: var(--dsx-color-accent-ray-3);
-  --dsx-color-accent-4: var(--dsx-color-accent-ray-4);
-  --dsx-color-accent-5: var(--dsx-color-accent-ray-5);
-  --dsx-color-accent-6: var(--dsx-color-accent-ray-6);
-  --dsx-color-accent-7: var(--dsx-color-accent-ray-7);
-  --dsx-color-accent-8: var(--dsx-color-accent-ray-8);
-  --dsx-color-accent-9: var(--dsx-color-accent-ray-9);
-  --dsx-color-accent-10: var(--dsx-color-accent-ray-10);
-  --dsx-color-accent-11: var(--dsx-color-accent-ray-11);
-  --dsx-color-accent-12: var(--dsx-color-accent-ray-12);
-  --dsx-color-primary: var(--dsx-color-accent-ray-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-ray-3);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-ray-11);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-ray-11);
-  --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 64%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 28%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 40%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 8%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 16%, transparent);
-}
-
-[data-accent-color='astral'] {
-  --dsx-color-accent-1: var(--dsx-color-accent-astral-1);
-  --dsx-color-accent-2: var(--dsx-color-accent-astral-2);
-  --dsx-color-accent-3: var(--dsx-color-accent-astral-3);
-  --dsx-color-accent-4: var(--dsx-color-accent-astral-4);
-  --dsx-color-accent-5: var(--dsx-color-accent-astral-5);
-  --dsx-color-accent-6: var(--dsx-color-accent-astral-6);
-  --dsx-color-accent-7: var(--dsx-color-accent-astral-7);
-  --dsx-color-accent-8: var(--dsx-color-accent-astral-8);
-  --dsx-color-accent-9: var(--dsx-color-accent-astral-9);
-  --dsx-color-accent-10: var(--dsx-color-accent-astral-10);
-  --dsx-color-accent-11: var(--dsx-color-accent-astral-11);
-  --dsx-color-accent-12: var(--dsx-color-accent-astral-12);
-  --dsx-color-primary: var(--dsx-color-accent-astral-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-astral-3);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-astral-11);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-astral-11);
-  --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 64%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 28%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 40%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 8%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 16%, transparent);
-}
-
-[data-accent-color='spark'] {
-  --dsx-color-accent-1: var(--dsx-color-accent-spark-1);
-  --dsx-color-accent-2: var(--dsx-color-accent-spark-2);
-  --dsx-color-accent-3: var(--dsx-color-accent-spark-3);
-  --dsx-color-accent-4: var(--dsx-color-accent-spark-4);
-  --dsx-color-accent-5: var(--dsx-color-accent-spark-5);
-  --dsx-color-accent-6: var(--dsx-color-accent-spark-6);
-  --dsx-color-accent-7: var(--dsx-color-accent-spark-7);
-  --dsx-color-accent-8: var(--dsx-color-accent-spark-8);
-  --dsx-color-accent-9: var(--dsx-color-accent-spark-9);
-  --dsx-color-accent-10: var(--dsx-color-accent-spark-10);
-  --dsx-color-accent-11: var(--dsx-color-accent-spark-11);
-  --dsx-color-accent-12: var(--dsx-color-accent-spark-12);
-  --dsx-color-primary: var(--dsx-color-accent-spark-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-spark-3);
-  --dsx-color-on-primary: #0c0d12;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-spark-11);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-spark-11);
-  --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
-  --dsx-color-accent-contrast: #0c0d12;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 64%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 28%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 40%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 8%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 16%, transparent);
+  --dsx-_accent-rift-primary: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-primary-container: var(--dsx-color-accent-rift-3);
+  --dsx-_accent-rift-on-primary: #ffffff;
+  --dsx-_accent-rift-on-primary-container: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-indicator: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-border: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-track: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-accent-contrast: #ffffff;
+  --dsx-_accent-rift-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
+  --dsx-_accent-rift-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 64%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 28%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 40%, transparent);
+  --dsx-_accent-rift-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 8%, transparent);
+  --dsx-_accent-rift-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 16%, transparent);
+  --dsx-_accent-warp-primary: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-primary-container: var(--dsx-color-accent-warp-3);
+  --dsx-_accent-warp-on-primary: #ffffff;
+  --dsx-_accent-warp-on-primary-container: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-indicator: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-border: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-track: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-accent-contrast: #ffffff;
+  --dsx-_accent-warp-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
+  --dsx-_accent-warp-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 64%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 28%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 40%, transparent);
+  --dsx-_accent-warp-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 8%, transparent);
+  --dsx-_accent-warp-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 16%, transparent);
+  --dsx-_accent-ray-primary: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-primary-container: var(--dsx-color-accent-ray-3);
+  --dsx-_accent-ray-on-primary: #ffffff;
+  --dsx-_accent-ray-on-primary-container: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-indicator: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-border: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-track: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-accent-contrast: #ffffff;
+  --dsx-_accent-ray-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
+  --dsx-_accent-ray-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 64%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 28%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 40%, transparent);
+  --dsx-_accent-ray-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 8%, transparent);
+  --dsx-_accent-ray-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 16%, transparent);
+  --dsx-_accent-astral-primary: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-primary-container: var(--dsx-color-accent-astral-3);
+  --dsx-_accent-astral-on-primary: #ffffff;
+  --dsx-_accent-astral-on-primary-container: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-indicator: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-border: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-track: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-accent-contrast: #ffffff;
+  --dsx-_accent-astral-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
+  --dsx-_accent-astral-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 64%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 28%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 40%, transparent);
+  --dsx-_accent-astral-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 8%, transparent);
+  --dsx-_accent-astral-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 16%, transparent);
+  --dsx-_accent-spark-primary: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-primary-container: var(--dsx-color-accent-spark-3);
+  --dsx-_accent-spark-on-primary: #0c0d12;
+  --dsx-_accent-spark-on-primary-container: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-indicator: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-border: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-track: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-accent-contrast: #0c0d12;
+  --dsx-_accent-spark-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
+  --dsx-_accent-spark-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 64%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 28%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 40%, transparent);
+  --dsx-_accent-spark-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 8%, transparent);
+  --dsx-_accent-spark-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 16%, transparent);
 }
 
 [data-dsx-theme="light"] {
@@ -673,7 +605,7 @@ svg {
   --dsx-color-accent-12: #28005d;
   --dsx-color-accent-contrast: #ffffff;
   --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
-  --dsx-color-accent-indicator: #28005d;
+  --dsx-color-accent-indicator: #5211ac;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #fbfbfc;
   --dsx-color-gray-2: #f4f5f7;
@@ -846,12 +778,13 @@ svg {
   --dsx-color-info-10: #2689c7;
   --dsx-color-info-11: #004c76;
   --dsx-color-info-12: #00243b;
-  --dsx-color-accent-indicator: #28005d;
+  --dsx-color-accent-indicator: #5211ac;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-accent-contrast: #ffffff;
   --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
   --dsx-color-border-subtle: #c3c8d4;
   --dsx-color-border-strong: #8b90a3;
+  --dsx-color-accent-border: #9672ff;
   --dsx-effect-shadow-1: 0 1px 2px rgba(44, 47, 61, 0.12);
   --dsx-effect-shadow-2: 0 2px 8px rgba(44, 47, 61, 0.18);
   --dsx-effect-shadow-3: 0 4px 16px rgba(44, 47, 61, 0.24);
@@ -871,10 +804,79 @@ svg {
   --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
   --dsx-effect-hover-secondary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 3%, transparent);
   --dsx-effect-hover-ghost: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-_accent-rift-primary: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-primary-container: var(--dsx-color-accent-rift-4);
+  --dsx-_accent-rift-on-primary: #ffffff;
+  --dsx-_accent-rift-on-primary-container: var(--dsx-color-accent-rift-12);
+  --dsx-_accent-rift-accent-indicator: var(--dsx-color-accent-rift-11);
+  --dsx-_accent-rift-accent-border: var(--dsx-color-accent-rift-8);
+  --dsx-_accent-rift-accent-track: var(--dsx-color-accent-rift-9);
+  --dsx-_accent-rift-accent-contrast: #ffffff;
+  --dsx-_accent-rift-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
+  --dsx-_accent-rift-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 56%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 24%, transparent);
+  --dsx-_accent-rift-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 36%, transparent);
+  --dsx-_accent-rift-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-_accent-rift-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
+  --dsx-_accent-warp-primary: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-primary-container: var(--dsx-color-accent-warp-4);
+  --dsx-_accent-warp-on-primary: #ffffff;
+  --dsx-_accent-warp-on-primary-container: var(--dsx-color-accent-warp-12);
+  --dsx-_accent-warp-accent-indicator: var(--dsx-color-accent-warp-11);
+  --dsx-_accent-warp-accent-border: var(--dsx-color-accent-warp-8);
+  --dsx-_accent-warp-accent-track: var(--dsx-color-accent-warp-9);
+  --dsx-_accent-warp-accent-contrast: #ffffff;
+  --dsx-_accent-warp-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
+  --dsx-_accent-warp-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 56%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 24%, transparent);
+  --dsx-_accent-warp-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 36%, transparent);
+  --dsx-_accent-warp-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 6%, transparent);
+  --dsx-_accent-warp-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 12%, transparent);
+  --dsx-_accent-ray-primary: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-primary-container: var(--dsx-color-accent-ray-4);
+  --dsx-_accent-ray-on-primary: #ffffff;
+  --dsx-_accent-ray-on-primary-container: var(--dsx-color-accent-ray-12);
+  --dsx-_accent-ray-accent-indicator: var(--dsx-color-accent-ray-11);
+  --dsx-_accent-ray-accent-border: var(--dsx-color-accent-ray-8);
+  --dsx-_accent-ray-accent-track: var(--dsx-color-accent-ray-9);
+  --dsx-_accent-ray-accent-contrast: #ffffff;
+  --dsx-_accent-ray-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
+  --dsx-_accent-ray-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 56%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 24%, transparent);
+  --dsx-_accent-ray-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 36%, transparent);
+  --dsx-_accent-ray-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 6%, transparent);
+  --dsx-_accent-ray-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 12%, transparent);
+  --dsx-_accent-astral-primary: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-primary-container: var(--dsx-color-accent-astral-4);
+  --dsx-_accent-astral-on-primary: #ffffff;
+  --dsx-_accent-astral-on-primary-container: var(--dsx-color-accent-astral-12);
+  --dsx-_accent-astral-accent-indicator: var(--dsx-color-accent-astral-11);
+  --dsx-_accent-astral-accent-border: var(--dsx-color-accent-astral-8);
+  --dsx-_accent-astral-accent-track: var(--dsx-color-accent-astral-9);
+  --dsx-_accent-astral-accent-contrast: #ffffff;
+  --dsx-_accent-astral-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
+  --dsx-_accent-astral-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 56%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 24%, transparent);
+  --dsx-_accent-astral-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 36%, transparent);
+  --dsx-_accent-astral-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 6%, transparent);
+  --dsx-_accent-astral-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 12%, transparent);
+  --dsx-_accent-spark-primary: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-primary-container: var(--dsx-color-accent-spark-4);
+  --dsx-_accent-spark-on-primary: #0c0d12;
+  --dsx-_accent-spark-on-primary-container: var(--dsx-color-accent-spark-12);
+  --dsx-_accent-spark-accent-indicator: var(--dsx-color-accent-spark-11);
+  --dsx-_accent-spark-accent-border: var(--dsx-color-accent-spark-8);
+  --dsx-_accent-spark-accent-track: var(--dsx-color-accent-spark-9);
+  --dsx-_accent-spark-accent-contrast: #0c0d12;
+  --dsx-_accent-spark-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
+  --dsx-_accent-spark-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 56%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 24%, transparent);
+  --dsx-_accent-spark-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 36%, transparent);
+  --dsx-_accent-spark-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 6%, transparent);
+  --dsx-_accent-spark-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 12%, transparent);
 }
 
-[data-dsx-theme="light"] [data-accent-color='rift'],
-[data-dsx-theme="light"][data-accent-color='rift'] {
+[data-accent-color='rift'] {
   --dsx-color-accent-1: var(--dsx-color-accent-rift-1);
   --dsx-color-accent-2: var(--dsx-color-accent-rift-2);
   --dsx-color-accent-3: var(--dsx-color-accent-rift-3);
@@ -887,23 +889,23 @@ svg {
   --dsx-color-accent-10: var(--dsx-color-accent-rift-10);
   --dsx-color-accent-11: var(--dsx-color-accent-rift-11);
   --dsx-color-accent-12: var(--dsx-color-accent-rift-12);
-  --dsx-color-primary: var(--dsx-color-accent-rift-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-rift-4);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-rift-12);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-rift-12);
-  --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 56%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 24%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 36%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
+  --dsx-color-primary: var(--dsx-_accent-rift-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-rift-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-rift-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-rift-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-rift-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-rift-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-rift-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-rift-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-rift-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-rift-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-rift-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-rift-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-rift-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-rift-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='warp'],
-[data-dsx-theme="light"][data-accent-color='warp'] {
+[data-accent-color='warp'] {
   --dsx-color-accent-1: var(--dsx-color-accent-warp-1);
   --dsx-color-accent-2: var(--dsx-color-accent-warp-2);
   --dsx-color-accent-3: var(--dsx-color-accent-warp-3);
@@ -916,23 +918,23 @@ svg {
   --dsx-color-accent-10: var(--dsx-color-accent-warp-10);
   --dsx-color-accent-11: var(--dsx-color-accent-warp-11);
   --dsx-color-accent-12: var(--dsx-color-accent-warp-12);
-  --dsx-color-primary: var(--dsx-color-accent-warp-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-warp-4);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-warp-12);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-warp-12);
-  --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 56%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 24%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 36%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 6%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-warp-9) 12%, transparent);
+  --dsx-color-primary: var(--dsx-_accent-warp-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-warp-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-warp-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-warp-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-warp-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-warp-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-warp-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-warp-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-warp-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-warp-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-warp-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-warp-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-warp-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-warp-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='ray'],
-[data-dsx-theme="light"][data-accent-color='ray'] {
+[data-accent-color='ray'] {
   --dsx-color-accent-1: var(--dsx-color-accent-ray-1);
   --dsx-color-accent-2: var(--dsx-color-accent-ray-2);
   --dsx-color-accent-3: var(--dsx-color-accent-ray-3);
@@ -945,23 +947,23 @@ svg {
   --dsx-color-accent-10: var(--dsx-color-accent-ray-10);
   --dsx-color-accent-11: var(--dsx-color-accent-ray-11);
   --dsx-color-accent-12: var(--dsx-color-accent-ray-12);
-  --dsx-color-primary: var(--dsx-color-accent-ray-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-ray-4);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-ray-12);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-ray-12);
-  --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 56%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 24%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 36%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 6%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-ray-9) 12%, transparent);
+  --dsx-color-primary: var(--dsx-_accent-ray-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-ray-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-ray-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-ray-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-ray-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-ray-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-ray-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-ray-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-ray-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-ray-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-ray-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-ray-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-ray-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-ray-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='astral'],
-[data-dsx-theme="light"][data-accent-color='astral'] {
+[data-accent-color='astral'] {
   --dsx-color-accent-1: var(--dsx-color-accent-astral-1);
   --dsx-color-accent-2: var(--dsx-color-accent-astral-2);
   --dsx-color-accent-3: var(--dsx-color-accent-astral-3);
@@ -974,23 +976,23 @@ svg {
   --dsx-color-accent-10: var(--dsx-color-accent-astral-10);
   --dsx-color-accent-11: var(--dsx-color-accent-astral-11);
   --dsx-color-accent-12: var(--dsx-color-accent-astral-12);
-  --dsx-color-primary: var(--dsx-color-accent-astral-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-astral-4);
-  --dsx-color-on-primary: #ffffff;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-astral-12);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-astral-12);
-  --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
-  --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 56%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 24%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 36%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 6%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-astral-9) 12%, transparent);
+  --dsx-color-primary: var(--dsx-_accent-astral-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-astral-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-astral-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-astral-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-astral-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-astral-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-astral-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-astral-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-astral-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-astral-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-astral-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-astral-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-astral-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-astral-effect-pressed-primary);
 }
 
-[data-dsx-theme="light"] [data-accent-color='spark'],
-[data-dsx-theme="light"][data-accent-color='spark'] {
+[data-accent-color='spark'] {
   --dsx-color-accent-1: var(--dsx-color-accent-spark-1);
   --dsx-color-accent-2: var(--dsx-color-accent-spark-2);
   --dsx-color-accent-3: var(--dsx-color-accent-spark-3);
@@ -1003,19 +1005,20 @@ svg {
   --dsx-color-accent-10: var(--dsx-color-accent-spark-10);
   --dsx-color-accent-11: var(--dsx-color-accent-spark-11);
   --dsx-color-accent-12: var(--dsx-color-accent-spark-12);
-  --dsx-color-primary: var(--dsx-color-accent-spark-9);
-  --dsx-color-primary-container: var(--dsx-color-accent-spark-4);
-  --dsx-color-on-primary: #0c0d12;
-  --dsx-color-on-primary-container: var(--dsx-color-accent-spark-12);
-  --dsx-color-accent-indicator: var(--dsx-color-accent-spark-12);
-  --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
-  --dsx-color-accent-contrast: #0c0d12;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
-  --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 56%, transparent);
-  --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 24%, transparent);
-  --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 36%, transparent);
-  --dsx-effect-hover-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 6%, transparent);
-  --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-spark-9) 12%, transparent);
+  --dsx-color-primary: var(--dsx-_accent-spark-primary);
+  --dsx-color-primary-container: var(--dsx-_accent-spark-primary-container);
+  --dsx-color-on-primary: var(--dsx-_accent-spark-on-primary);
+  --dsx-color-on-primary-container: var(--dsx-_accent-spark-on-primary-container);
+  --dsx-color-accent-indicator: var(--dsx-_accent-spark-accent-indicator);
+  --dsx-color-accent-border: var(--dsx-_accent-spark-accent-border);
+  --dsx-color-accent-track: var(--dsx-_accent-spark-accent-track);
+  --dsx-color-accent-contrast: var(--dsx-_accent-spark-accent-contrast);
+  --dsx-color-accent-surface: var(--dsx-_accent-spark-accent-surface);
+  --dsx-effect-ring-focus: var(--dsx-_accent-spark-effect-ring-focus);
+  --dsx-effect-shadow-accent: var(--dsx-_accent-spark-effect-shadow-accent);
+  --dsx-effect-shadow-accent-strong: var(--dsx-_accent-spark-effect-shadow-accent-strong);
+  --dsx-effect-hover-primary: var(--dsx-_accent-spark-effect-hover-primary);
+  --dsx-effect-pressed-primary: var(--dsx-_accent-spark-effect-pressed-primary);
 }
 
 :root {
@@ -1035,7 +1038,6 @@ svg {
   --dsx-breakpoint-lg: 1024px;
   --dsx-breakpoint-xl: 1280px;
   --dsx-breakpoint-2xl: 1536px;
-  --dsx-backdrop-blur-sm: var(--dsx-effect-overlay-backdrop-blur);
   --dsx-shadow-offset-xs: 1px;
   --dsx-shadow-offset-sm: 4px;
   --dsx-shadow-offset-md: 12px;
@@ -1070,8 +1072,6 @@ svg {
   --dsx-resizable-grip-height: var(--dsx-size-xs);
   --dsx-icon-stroke-width: 1.75;
   --dsx-icon-stroke-width-strong: 2.25;
-  --dsx-control-separator-color: var(--dsx-color-outline-variant);
-  --dsx-control-separator-color-strong: var(--dsx-color-outline);
 
   /* Boundary hierarchy (F2, DESIGN.md). Six boundary roles, each a paired
      width + colour token. Components consume the role, not a raw
@@ -1087,51 +1087,12 @@ svg {
      there is no layout shift when a card becomes selected and the ring stays
      crisp at every display density. The -width token feeds the ring spread. */
   --dsx-boundary-structural-width: var(--dsx-border-width-sm);
-  --dsx-boundary-structural-color: var(--dsx-color-outline);
   --dsx-boundary-control-width: var(--dsx-border-width-sm);
-  --dsx-boundary-control-color: var(--dsx-color-outline);
   --dsx-boundary-separator-width: var(--dsx-border-width-sm);
-  --dsx-boundary-separator-color: var(--dsx-color-outline-variant);
   --dsx-boundary-divider-width: var(--dsx-border-width-sm);
-  --dsx-boundary-divider-color: var(--dsx-color-outline);
   --dsx-boundary-selected-width: var(--dsx-border-width-lg);
-  --dsx-boundary-selected-color: var(--dsx-color-accent-indicator);
-  --dsx-boundary-selected-ring: inset 0 0 0 var(--dsx-boundary-selected-width) var(--dsx-boundary-selected-color);
   --dsx-boundary-high-contrast-width: var(--dsx-border-width-lg);
-  --dsx-boundary-high-contrast-color: var(--dsx-color-high-contrast-border);
-  --dsx-boundary-high-contrast-ring: inset 0 0 0 var(--dsx-boundary-high-contrast-width) var(--dsx-boundary-high-contrast-color);
-
   --dsx-grouped-radius: var(--dsx-rounded-md);
-  /* Segmented control / tabs active indicator — elevated surface above the track. */
-  /* Dark: surface-overlay sits visually above surface-raised (the track bg).     */
-  /* Light mode override below flips this since the elevation hierarchy inverts.  */
-  --dsx-control-active-background: var(--dsx-color-surface-overlay);
-  --dsx-control-active-foreground: var(--dsx-color-on-surface);
-  --dsx-control-active-border: var(--dsx-color-outline-variant);
-  --dsx-shadow-active-indicator: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-high-contrast-border);
-  --dsx-menu-item-hover-background: var(--dsx-color-high-contrast-container);
-  --dsx-menu-item-hover-foreground: var(--dsx-color-high-contrast);
-  --dsx-menu-item-selected-background: var(--dsx-color-surface);
-  --dsx-menu-item-selected-foreground: var(--dsx-color-high-contrast);
-
-  /* Panel backgrounds — referenced by baseDialog.css */
-  --dsx-color-panel-solid: var(--dsx-color-surface-raised);
-  --dsx-color-panel-translucent: var(--dsx-effect-panel-glass-background);
-  --dsx-color-panel-border: var(--dsx-color-outline);
-  /* Glass edges use the designed rim token, not outline-variant: on dark,
-     outline-variant (#40434f) dissolves into near-black and glass borders
-     read as missing (confirmed live 2026-09-19: borderless dropdown). The
-     light block below keeps outline-variant, which reads correctly there. */
-  --dsx-color-panel-border-translucent: var(--dsx-effect-panel-glass-border);
-
-  /* Hover/effect tokens — referenced by baseMenu.css, baseTabs.css, calendar.css */
-  --dsx-effect-hover-layer: var(--dsx-effect-hover-primary);
-  --dsx-color-surface-hover: var(--dsx-effect-hover-primary);
-
-  --dsx-accent-contrast: var(--dsx-color-accent-contrast);
-  --dsx-accent-surface: var(--dsx-color-accent-surface);
-  --dsx-accent-indicator: var(--dsx-color-accent-indicator);
-  --dsx-accent-track: var(--dsx-color-accent-track);
   --dsx-stepper-connector-thickness: var(--dsx-border-width-lg);
   --dsx-stepper-content-offset: var(--dsx-space-0-5);
   --dsx-switch-padding: var(--dsx-space-0-5);
@@ -1142,12 +1103,14 @@ svg {
   --dsx-visually-hidden-size: var(--dsx-border-width-sm);
   --dsx-focus-ring-offset: 2px;
   --dsx-motion-easing-decelerate: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-/* Added 2026-09-15 alongside dsx-motion-collapse — decelerate had no accelerate
+
+  /* Added 2026-09-15 alongside dsx-motion-collapse — decelerate had no accelerate
    counterpart, and every entrance reveal in motion.css needed one to have an exit to
    pair with. Standard easeInCubic (easings.net) — slow start, fast end, the mirror-image
    FEEL of an ease-out, not a literal point-reflection of decelerate's own curve (which is
    close enough to symmetric that reflecting it barely changes the numbers). */
---dsx-motion-easing-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --dsx-motion-easing-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
   /* z-index scale for layered surfaces */
   --dsx-z-index-dropdown: 50;
   --dsx-z-index-sticky: 60;
@@ -1160,76 +1123,15 @@ svg {
   --dsx-space-0-5: 2px;
   --dsx-space-1-5: 6px;
 
-  /* ── Shadow elevation ───────────────────────────────────────────────── */
-  /* These bridge to the effect-shadow palette. When generated/tokens.css   */
-  /* is updated from the design source, identical names there will take     */
-  /* precedence (generated is imported first at the top of this file).      */
-  --dsx-shadow-elevation-1: var(--dsx-effect-shadow-1);
-  --dsx-shadow-elevation-2: var(--dsx-effect-shadow-2);
-  --dsx-shadow-elevation-3: var(--dsx-effect-shadow-3);
-  --dsx-shadow-elevation-4: var(--dsx-effect-shadow-4);
-  /* Step 5 (Spotlight: toasts, dragged panels). Step 6 stays raw until an
-     occupant earns it — no elevation-6 alias by decision (B4 Q3). */
-  --dsx-shadow-elevation-5: var(--dsx-effect-shadow-5);
-  /* Menu-tier control point (B4 Q3): every menu-family content rides step 3
-     unless a component file reasserts it locally for cascade order. */
-  --dsx-menu-content-elevation: var(--dsx-shadow-elevation-3);
-  --dsx-shadow-panel-shadow: var(--dsx-effect-shadow-3);
-
-  /* ── Constructed shadows ────────────────────────────────────────────── */
-  --dsx-shadow-focus-ring: 0 0 0 3px var(--dsx-effect-ring-focus);
-  --dsx-shadow-inset-outline: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-outline);
-  --dsx-shadow-active-inset-outline: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-accent-indicator);
-  --dsx-shadow-accent-ring: 0 0 0 3px var(--dsx-effect-shadow-accent);
-  --dsx-shadow-accent-ring-strong: 0 0 0 4px var(--dsx-effect-shadow-accent-strong);
-  --dsx-shadow-accent-glow: 0 4px 16px var(--dsx-effect-shadow-accent);
-  --dsx-shadow-color-swatch-shadow: 0 2px 4px var(--dsx-color-shadow);
-
-  /* ── Overlay (dark default) ─────────────────────────────────────────── */
-  --dsx-effect-overlay: rgba(8, 9, 12, 0.72);
-  --dsx-effect-overlay-backdrop-filter: blur(4px);
-
   /* ── Panel backdrop filters ─────────────────────────────────────────── */
   --dsx-effect-panel-glass-backdrop-filter: blur(16px) saturate(1.6);
   --dsx-effect-panel-solid-backdrop-filter: none;
 
-  /* ── Alpha effect layers ────────────────────────────────────────────── */
-  /* Derived via color-mix so they adapt to accent-color overrides.         */
-  --dsx-effect-accent-alpha-3: color-mix(in srgb, var(--dsx-color-primary) 12%, transparent);
-  --dsx-effect-accent-alpha-4: color-mix(in srgb, var(--dsx-color-primary) 18%, transparent);
-  --dsx-effect-accent-alpha-8: color-mix(in srgb, var(--dsx-color-primary) 40%, transparent);
-  --dsx-effect-gray-alpha-2: color-mix(in srgb, var(--dsx-color-gray-12) 6%, transparent);
-  --dsx-effect-gray-alpha-3: color-mix(in srgb, var(--dsx-color-gray-12) 10%, transparent);
-  --dsx-effect-gray-alpha-4: color-mix(in srgb, var(--dsx-color-gray-12) 15%, transparent);
-
-  /* ── Hover / press semantic layers ─────────────────────────────────── */
-  /* Defined here before the [data-dsx-theme='light'] block below uses     */
-  /* --dsx-effect-hover-emphasis-layer, which would otherwise be circular. */
-  --dsx-effect-hover-emphasis-layer: color-mix(in srgb, var(--dsx-color-primary) 10%, transparent);
-  --dsx-effect-pressed-layer: color-mix(in srgb, var(--dsx-color-primary) 18%, transparent);
-  /* Stronger hover layer for menu/select items. Was 15%, then 24% — still
-     too faint to read on hover-only (mouse) states, where no focus ring
-     backs it up, in both themes (review 2026-09-19: context-menu hover
-     nearly invisible light + dark). 32% for real legibility across
-     rift/warp/ray; the glass panel's own translucency compounds under it. */
-  --dsx-effect-hover-emphasis-strong: color-mix(in srgb, var(--dsx-color-primary) 32%, transparent);
-
-  /* ── Disabled state layers ──────────────────────────────────────────── */
-  --dsx-effect-disabled-layer: var(--dsx-color-disabled-surface);
-  --dsx-effect-disabled-checked-layer: color-mix(in srgb, var(--dsx-color-primary) 30%, transparent);
-
-  /* ── Semantic color aliases ─────────────────────────────────────────── */
-  /* Named semantic alias, permanent — "the muted seam between list rows".
-     Not on the 2.8.0 compat-removal list (docs/design-system/color-naming-cleanup.md §1). */
-  --dsx-color-separator-muted: var(--dsx-color-outline-variant);
   --dsx-cursor-disabled: not-allowed;
   --dsx-cursor-not-allowed: not-allowed;
   --dsx-cursor-pointer: pointer;
   --dsx-cursor-wait: wait;
 
-  /* ── Shadow shorthand ───────────────────────────────────────────────── */
-  --dsx-shadow-card-md: 0 4px 16px var(--dsx-effect-shadow-card);
-
   /* ── Blur utilities ─────────────────────────────────────────────────── */
   --dsx-blur-md: blur(12px);
 
@@ -1242,57 +1144,37 @@ svg {
   /* ── Z-index extensions ─────────────────────────────────────────────── */
   --dsx-z-index-popover: 60;
 
-  /* ── Color extensions ───────────────────────────────────────────────── */
-  --dsx-color-primary-ghost: color-mix(in srgb, var(--dsx-color-primary) 8%, transparent);
-  --dsx-color-primary-alpha: color-mix(in srgb, var(--dsx-color-primary) 15%, transparent);
-
   /* ── Typography caption scale ───────────────────────────────────────── */
   --dsx-typography-caption-font-family: inherit;
   --dsx-typography-caption-font-size: 0.75rem;
   --dsx-typography-caption-font-weight: 400;
 
-  /* ── Semantic aliases (calendar / chart shadcn-port compat) ─────────── */
-  --dsx-semantic-border: var(--dsx-color-outline);
-  --dsx-semantic-card: var(--dsx-color-surface-raised);
-  --dsx-semantic-card-foreground: var(--dsx-color-on-surface);
-  --dsx-semantic-muted: var(--dsx-color-surface-sunken);
-  --dsx-semantic-muted-foreground: var(--dsx-color-on-surface-variant);
-  --dsx-semantic-primary: var(--dsx-color-primary);
-  --dsx-semantic-primary-foreground: var(--dsx-color-on-primary);
-  --dsx-semantic-ring: var(--dsx-shadow-focus-ring);
-
   /* ── Raw display-white ──────────────────────────────────────────────── */
+
   /* NOT a semantic color — never consume this for text/background/border
      roles, use a real semantic token for those. Only for effects that need
      the literal white channel regardless of theme/accent (a mix-blend-mode:
      difference checkmark, a motion sweep's saturation peak) — see
      color-swatch.css's __check and motion.css's .dsx-motion-scan. */
   --dsx-raw-white: #ffffff;
+
   /* Literal black channel, same contract as --dsx-raw-white above: only for
      effects that need the channel itself (the ColorSwatch check on light
      fills), never for semantic roles. */
   --dsx-raw-black: #000000;
 
-  /* ── Chart categorical palette ──────────────────────────────────────── */
-  /* Chart.tsx cycles these per series (index % 5) + 1. Previously undefined,
-     so every Pie slice fell back to the SVG initial fill (black). */
-  --dsx-chart-1: var(--dsx-color-primary);
-  --dsx-chart-2: var(--dsx-color-secondary);
-  --dsx-chart-3: var(--dsx-color-tertiary);
-  --dsx-chart-4: var(--dsx-color-success);
-  --dsx-chart-5: var(--dsx-color-error);
-
-  /* ── Surface context ────────────────────────────────────────────────── */
-  --dsx-color-surface-editor-subtle: var(--dsx-color-surface-sunken);
-  --dsx-color-surface-editor-toolbar: var(--dsx-color-surface-raised);
-  --dsx-color-surface-field-autofill: color-mix(in srgb, var(--dsx-color-primary) 5%, var(--dsx-color-surface));
-
   /* ── Typography extras ──────────────────────────────────────────────── */
   --dsx-typography-code-font-size: 0.875em;
   --dsx-typography-code-font-weight: 400;
   --dsx-typography-code-letter-spacing: -0.02em;
   --dsx-typography-code-line-height: 1.5;
   --dsx-typography-font-weight-bold: 700;
+
+  /* Existing typography weight utilities resolve through these aliases. */
+  --dsx-r-font-weight-light: 300;
+  --dsx-r-font-weight-regular: 400;
+  --dsx-r-font-weight-medium: 500;
+  --dsx-r-font-weight-bold: var(--dsx-typography-font-weight-bold);
   --dsx-typography-kbd-line-height: 1;
 }
 
@@ -1411,18 +1293,6 @@ svg {
   --dsx-effect-pressed-primary: var(--dsx-effect-pressed-layer);
   --dsx-effect-hover-ghost: var(--dsx-effect-hover-layer);
   --dsx-opacity-disabled: 0.5;
-  /* F2: light structural edges are the softer outline-variant (matches the
-     pre-F2 [data-dsx-theme='light'] .dsx-card / .dsx-alert override). */
-  --dsx-boundary-structural-color: var(--dsx-color-outline-variant);
-  /* Lighter overlay for light mode */
-  --dsx-effect-overlay: rgba(44, 47, 61, 0.4);
-  --dsx-effect-overlay-backdrop-filter: blur(2px);
-  /* Segmented/tabs indicator: in light mode, surface (lighter) sits above surface-raised (track). */
-  --dsx-control-active-background: var(--dsx-color-surface);
-  --dsx-control-active-border: var(--dsx-color-outline);
-  /* Glass edges stay outline-variant on light: the white rim token designed
-     for dark glass would dissolve into the light page. */
-  --dsx-color-panel-border-translucent: var(--dsx-color-outline-variant);
 }
 
 [data-dsx-theme='dark'][data-gray-color='neutral'] {
@@ -1465,6 +1335,119 @@ svg {
   --dsx-color-disabled-text: #6b7d93;
 }
 
+/* Rebind paint aliases at local boundaries. Inherited var() aliases have
+   already resolved in the parent; changing a source color alone cannot update
+   the inherited ring, seam, shadow or effect. Keep non-paint defaults above. */
+
+:root,
+[data-dsx-theme],
+[data-accent-color],
+[data-gray-color] {
+  --dsx-backdrop-blur-sm: var(--dsx-effect-overlay-backdrop-blur);
+  --dsx-control-separator-color: var(--dsx-color-outline-variant);
+  --dsx-control-separator-color-strong: var(--dsx-color-outline);
+  --dsx-boundary-control-color: var(--dsx-color-outline);
+  --dsx-boundary-separator-color: var(--dsx-color-outline-variant);
+  --dsx-boundary-divider-color: var(--dsx-color-outline);
+  --dsx-boundary-selected-color: var(--dsx-color-accent-indicator);
+  --dsx-boundary-selected-ring: inset 0 0 0 var(--dsx-boundary-selected-width) var(--dsx-boundary-selected-color);
+  --dsx-boundary-high-contrast-color: var(--dsx-color-high-contrast-border);
+  --dsx-boundary-high-contrast-ring: inset 0 0 0 var(--dsx-boundary-high-contrast-width) var(--dsx-boundary-high-contrast-color);
+  --dsx-control-active-foreground: var(--dsx-color-on-surface);
+  --dsx-shadow-active-indicator: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-high-contrast-border);
+  --dsx-menu-item-hover-background: var(--dsx-color-high-contrast-container);
+  --dsx-menu-item-hover-foreground: var(--dsx-color-high-contrast);
+  --dsx-menu-item-selected-background: var(--dsx-color-surface);
+  --dsx-menu-item-selected-foreground: var(--dsx-color-high-contrast);
+  --dsx-color-panel-solid: var(--dsx-color-surface-raised);
+  --dsx-color-panel-translucent: var(--dsx-effect-panel-glass-background);
+  --dsx-color-panel-border: var(--dsx-color-outline);
+  --dsx-effect-hover-layer: var(--dsx-effect-hover-primary);
+  --dsx-color-surface-hover: var(--dsx-effect-hover-primary);
+  --dsx-accent-contrast: var(--dsx-color-accent-contrast);
+  --dsx-accent-surface: var(--dsx-color-accent-surface);
+  --dsx-accent-indicator: var(--dsx-color-accent-indicator);
+  --dsx-accent-track: var(--dsx-color-accent-track);
+  --dsx-shadow-elevation-1: var(--dsx-effect-shadow-1);
+  --dsx-shadow-elevation-2: var(--dsx-effect-shadow-2);
+  --dsx-shadow-elevation-3: var(--dsx-effect-shadow-3);
+  --dsx-shadow-elevation-4: var(--dsx-effect-shadow-4);
+  /* Step 5 (Spotlight: toasts, dragged panels). Step 6 stays raw until an
+     occupant earns it — no elevation-6 alias by decision (B4 Q3). */
+  --dsx-shadow-elevation-5: var(--dsx-effect-shadow-5);
+  /* Menu-tier control point (B4 Q3): every menu-family content rides step 3
+     unless a component file reasserts it locally for cascade order. */
+  --dsx-menu-content-elevation: var(--dsx-shadow-elevation-3);
+  --dsx-shadow-panel-shadow: var(--dsx-effect-shadow-3);
+  --dsx-shadow-focus-ring: 0 0 0 3px var(--dsx-effect-ring-focus);
+  --dsx-shadow-inset-outline: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-outline);
+  --dsx-shadow-active-inset-outline: inset 0 calc(-1 * var(--dsx-border-width-lg)) 0 0 var(--dsx-color-accent-indicator);
+  --dsx-shadow-accent-ring: 0 0 0 3px var(--dsx-effect-shadow-accent);
+  --dsx-shadow-accent-ring-strong: 0 0 0 4px var(--dsx-effect-shadow-accent-strong);
+  --dsx-shadow-accent-glow: 0 4px 16px var(--dsx-effect-shadow-accent);
+  --dsx-shadow-color-swatch-shadow: 0 2px 4px var(--dsx-color-shadow);
+  --dsx-effect-accent-alpha-3: color-mix(in srgb, var(--dsx-color-primary) 12%, transparent);
+  --dsx-effect-accent-alpha-4: color-mix(in srgb, var(--dsx-color-primary) 18%, transparent);
+  --dsx-effect-accent-alpha-8: color-mix(in srgb, var(--dsx-color-primary) 40%, transparent);
+  --dsx-effect-gray-alpha-2: color-mix(in srgb, var(--dsx-color-gray-12) 6%, transparent);
+  --dsx-effect-gray-alpha-3: color-mix(in srgb, var(--dsx-color-gray-12) 10%, transparent);
+  --dsx-code-soft-background: var(--dsx-effect-gray-alpha-3);
+  --dsx-effect-gray-alpha-4: color-mix(in srgb, var(--dsx-color-gray-12) 15%, transparent);
+  --dsx-effect-hover-emphasis-layer: color-mix(in srgb, var(--dsx-color-primary) 10%, transparent);
+  --dsx-effect-pressed-layer: color-mix(in srgb, var(--dsx-color-primary) 18%, transparent);
+  /* Stronger hover layer for menu/select items. Was 15%, then 24% — still
+     too faint to read on hover-only (mouse) states, where no focus ring
+     backs it up, in both themes (review 2026-09-19: context-menu hover
+     nearly invisible light + dark). 32% for real legibility across
+     rift/warp/ray; the glass panel's own translucency compounds under it. */
+  --dsx-effect-hover-emphasis-strong: color-mix(in srgb, var(--dsx-color-primary) 32%, transparent);
+  --dsx-effect-disabled-layer: var(--dsx-color-disabled-surface);
+  --dsx-effect-disabled-checked-layer: color-mix(in srgb, var(--dsx-color-primary) 30%, transparent);
+  /* Named semantic alias, permanent — "the muted seam between list rows".
+     Not on the 2.8.0 compat-removal list (docs/design-system/color-naming-cleanup.md §1). */
+  --dsx-color-separator-muted: var(--dsx-color-outline-variant);
+  --dsx-shadow-card-md: 0 4px 16px var(--dsx-effect-shadow-card);
+  --dsx-color-primary-ghost: color-mix(in srgb, var(--dsx-color-primary) 8%, transparent);
+  --dsx-color-primary-alpha: color-mix(in srgb, var(--dsx-color-primary) 15%, transparent);
+  --dsx-semantic-border: var(--dsx-color-outline);
+  --dsx-semantic-card: var(--dsx-color-surface-raised);
+  --dsx-semantic-card-foreground: var(--dsx-color-on-surface);
+  --dsx-semantic-muted: var(--dsx-color-surface-sunken);
+  --dsx-semantic-muted-foreground: var(--dsx-color-on-surface-variant);
+  --dsx-semantic-primary: var(--dsx-color-primary);
+  --dsx-semantic-primary-foreground: var(--dsx-color-on-primary);
+  --dsx-semantic-ring: var(--dsx-shadow-focus-ring);
+  /* Chart.tsx cycles these per series (index % 5) + 1. Previously undefined,
+     so every Pie slice fell back to the SVG initial fill (black). */
+  --dsx-chart-1: var(--dsx-color-primary);
+  --dsx-chart-2: var(--dsx-color-secondary);
+  --dsx-chart-3: var(--dsx-color-tertiary);
+  --dsx-chart-4: var(--dsx-color-success);
+  --dsx-chart-5: var(--dsx-color-error);
+  --dsx-color-surface-editor-subtle: var(--dsx-color-surface-sunken);
+  --dsx-color-surface-editor-toolbar: var(--dsx-color-surface-raised);
+  --dsx-color-surface-field-autofill: color-mix(in srgb, var(--dsx-color-primary) 5%, var(--dsx-color-surface));
+}
+
+:root,
+[data-dsx-theme='dark'] {
+  --dsx-boundary-structural-color: var(--dsx-color-outline);
+  --dsx-control-active-background: var(--dsx-color-surface-overlay);
+  --dsx-control-active-border: var(--dsx-color-outline-variant);
+  --dsx-color-panel-border-translucent: var(--dsx-effect-panel-glass-border);
+  --dsx-effect-overlay: rgba(8, 9, 12, 0.72);
+  --dsx-effect-overlay-backdrop-filter: blur(4px);
+}
+
+[data-dsx-theme='light'] {
+  --dsx-effect-overlay: rgba(44, 47, 61, 0.4);
+  --dsx-effect-overlay-backdrop-filter: blur(2px);
+  --dsx-boundary-structural-color: var(--dsx-color-outline-variant);
+  --dsx-control-active-background: var(--dsx-color-surface);
+  --dsx-control-active-border: var(--dsx-color-outline);
+  --dsx-color-panel-border-translucent: var(--dsx-color-outline-variant);
+}
+
 html {
   color-scheme: light dark;
 }
@@ -2591,12 +2574,16 @@ textarea {
   gap: var(--dsx-space-xs);
   padding: var(--dsx-space-lg);
   border-radius: var(--dsx-rounded-lg);
-  background: var(--dsx-color-accent-surface);
+  background: var(--dsx-color-primary-container);
   box-sizing: border-box;
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
+.dsx-banner :is(.dsx-banner__label, .dsx-banner__value, .dsx-banner__footnote) {
+  color: var(--dsx-color-on-primary-container);
+}
+
 /* Fill: solid accent mass reusing Button primary's solved compliance —
    accent-track background with accent-contrast text (near-black on spark,
    white elsewhere, per the token). Wash stays the default hero. */
@@ -2620,7 +2607,6 @@ textarea {
   font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
   text-transform: var(--dsx-typography-label-small-text-transform);
   text-decoration: var(--dsx-typography-label-small-text-decoration);
-  color: var(--dsx-color-on-surface-variant);
 }
 
 .dsx-banner__value {
@@ -2632,7 +2618,6 @@ textarea {
   font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
   text-transform: var(--dsx-typography-display-medium-text-transform);
   text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  color: var(--dsx-color-on-surface);
 }
 
 .dsx-banner__footnote {
@@ -2644,7 +2629,143 @@ textarea {
   font-variation-settings: var(--dsx-typography-body-small-font-variation-settings);
   text-transform: var(--dsx-typography-body-small-text-transform);
   text-decoration: var(--dsx-typography-body-small-text-decoration);
+}
+
+/* BottomDock — a floating pill of primary destinations for phone widths.
+   Tokens only. No breakpoints: the app renders the dock at phone widths. */
+
+.dsx-bottom-dock {
+  position: fixed;
+  inset-inline: var(--dsx-space-3);
+  inset-block-end: calc(var(--dsx-space-3) + var(--dsx-safe-area-inset-bottom, 0px));
+  z-index: var(--dsx-z-index-fixed);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--dsx-space-xs);
+  padding: var(--dsx-space-xs);
+  box-sizing: border-box;
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
+  border-radius: var(--dsx-rounded-xl);
+  background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  box-shadow: var(--dsx-panel-shadow);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-bottom-dock:where([data-placement='contained']) {
+  position: absolute;
+}
+
+.dsx-bottom-dock__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dsx-space-xs);
+  min-block-size: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
+  min-inline-size: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
+  padding: 0 var(--dsx-space-3);
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--dsx-rounded-lg);
+  background: transparent;
   color: var(--dsx-color-on-surface-variant);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard),
+    color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
+}
+
+/* Hover only on inactive items, so an active item never loses its container to the ghost wash. */
+
+.dsx-bottom-dock__item:where(:not([data-active='true'])):hover {
+  background: var(--dsx-effect-hover-ghost);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-bottom-dock__item:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-bottom-dock__item:where([data-active='true']) {
+  background: var(--dsx-color-primary-container);
+  color: var(--dsx-color-on-primary-container);
+}
+
+/* labels="always": icon over label, items share the width (Material 3 / HIG). */
+
+.dsx-bottom-dock:where([data-labels='always']) .dsx-bottom-dock__item {
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 0;
+  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+}
+
+.dsx-bottom-dock__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--dsx-size-md);
+  block-size: var(--dsx-size-md);
+}
+
+.dsx-bottom-dock__label {
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
+  text-transform: var(--dsx-typography-label-small-text-transform);
+  text-decoration: var(--dsx-typography-label-small-text-decoration);
+  white-space: nowrap;
+  /* A long label truncates inside its item instead of poking out of the pill on a narrow phone. */
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Place the badge inside BottomDock.Icon to sit on the glyph; outside it, it sits on the item corner. */
+
+.dsx-bottom-dock__badge {
+  position: absolute;
+  inset-block-start: calc(var(--dsx-space-xs) * -1);
+  inset-inline-end: calc(var(--dsx-space-xs) * -1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--dsx-space-md);
+  block-size: var(--dsx-space-md);
+  padding: 0 var(--dsx-space-xs);
+  box-sizing: border-box;
+  border-radius: var(--dsx-rounded-full);
+  background: var(--dsx-color-primary);
+  color: var(--dsx-color-on-primary);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+  pointer-events: none;
+}
+
+/* An empty badge is a dot. */
+
+.dsx-bottom-dock__badge:empty {
+  min-inline-size: var(--dsx-space-sm);
+  block-size: var(--dsx-space-sm);
+  padding: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-bottom-dock__item {
+    transition: none;
+  }
 }
 
 @keyframes dsx-base-button-loading-shimmer {
@@ -3306,7 +3427,7 @@ textarea {
    hover with a neutral background wash + elevated shadow, masking its own accent-tinted
    border underneath even though the border's own color value never actually changed. */
 
-.dsx-card:hover:not([data-interactive='false']) {
+.dsx-card:hover:not([data-interactive='false']):where(:not([data-active='true'], [data-selected='true'], [aria-selected='true'], [data-state='active'], [data-state='selected'], [data-high-contrast='true'])) {
   border-color: var(--dsx-color-outline-variant);
   background: linear-gradient(var(--dsx-effect-hover-layer), var(--dsx-effect-hover-layer)), var(--dsx-color-surface-raised);
   box-shadow: var(--dsx-shadow-elevation-2);
@@ -3327,7 +3448,7 @@ textarea {
    reinforces the highlight instead of competing with it. Kept low (10%) so it reads as a wash,
    not a fill. */
 
-.dsx-card[data-interactive='false'][data-accent-color]:hover {
+.dsx-card[data-interactive='false'][data-accent-color]:hover:where(:not([data-active='true'], [data-selected='true'], [aria-selected='true'], [data-state='active'], [data-state='selected'], [data-high-contrast='true'])) {
   border-color: var(--dsx-color-primary);
   background: color-mix(in srgb, var(--dsx-color-primary) 10%, transparent);
   box-shadow: 0 0 0 1px var(--dsx-color-primary);
@@ -3340,7 +3461,7 @@ textarea {
    comparison card's identity (this one is Space Rift, that one is Warp Dagger) is a rest-state
    fact, not a hover reveal — moved here so any consumer gets it for free. */
 
-.dsx-card[data-interactive='false'][data-accent-color] {
+.dsx-card[data-interactive='false'][data-accent-color]:where(:not([data-active='true'], [data-selected='true'], [aria-selected='true'], [data-state='active'], [data-state='selected'], [data-high-contrast='true'])) {
   border-color: var(--dsx-color-primary);
 }
 
@@ -3358,7 +3479,7 @@ textarea {
   -webkit-backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
 }
 
-[data-dsx-theme='light'] .dsx-card[data-variant='glass'] {
+[data-dsx-theme='light'] .dsx-card[data-variant='glass']:where(:not([data-active='true'], [data-selected='true'], [aria-selected='true'], [data-state='active'], [data-state='selected'], [data-high-contrast='true'])) {
   box-shadow:
     inset 0 1px 0 0 var(--dsx-effect-panel-glass-rim-highlight),
     inset 0 0 0 1px var(--dsx-effect-panel-glass-rim),
@@ -3498,6 +3619,15 @@ textarea {
   box-shadow: var(--dsx-boundary-high-contrast-ring);
 }
 
+/* Selection paints an inset ring. Reassert the transparent physical border
+   after the shared light-appearance edge rule, including in nested Themes. */
+
+.dsx-card:is([data-active='true'], [data-selected='true'], [aria-selected='true'], [data-state='active'], [data-state='selected']):where(:not([data-high-contrast='true'])) {
+  border-color: transparent;
+  background: var(--dsx-color-accent-surface);
+  box-shadow: var(--dsx-boundary-selected-ring), var(--dsx-shadow-1, var(--dsx-effect-shadow-1));
+}
+
 .dsx-carousel {
   --_carousel-nav-size: var(--dsx-size-lg);
   position: relative;
@@ -4384,7 +4514,8 @@ textarea {
 .dsx-context-menu__content {
   position: relative;
   z-index: var(--dsx-z-index-dropdown);
-  min-width: var(--dsx-size-menu-min-width);
+  min-width: min(var(--dsx-size-menu-min-width), var(--radix-context-menu-content-available-width, var(--dsx-size-menu-min-width)));
+  max-width: var(--radix-context-menu-content-available-width);
   padding: var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-lg);
   overflow: hidden;
@@ -4409,6 +4540,7 @@ textarea {
   color: var(--dsx-color-on-surface);
   text-align: left;
   text-decoration: none;
+  overflow-wrap: anywhere;
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);
 }
@@ -6387,23 +6519,15 @@ textarea {
   margin-inline: var(--dsx-space-xs);
 }
 
-.dsx-separator[data-orientation='horizontal'][data-size='sm'] { height: var(--dsx-border-width-sm); }
-
-.dsx-separator[data-orientation='horizontal'][data-size='lg'] { height: var(--dsx-border-width-lg); }
-
-.dsx-separator[data-orientation='vertical'][data-size='sm'] { width: var(--dsx-border-width-sm); }
-
-.dsx-separator[data-orientation='vertical'][data-size='lg'] { width: var(--dsx-border-width-lg); }
-
 .dsx-separator--decorative {
   background: var(--dsx-color-separator-muted);
 }
 
-/* Reserved accent hook: any accent-color value paints the separator in the accent
-   indicator tone, for deliberate accent-divided surfaces. */
+/* Explicit accent rules use the decorative role; readable ink and selected
+   control indicators retain their own accent-indicator role. */
 
 .dsx-separator[data-accent-color] {
-  background: var(--dsx-color-accent-indicator);
+  background: var(--dsx-color-accent-border);
 }
 
 .dsx-dialog__overlay,
@@ -6542,6 +6666,8 @@ textarea {
      above that owning surface; otherwise the portal paints behind the control that opened it. */
   z-index: calc(var(--dsx-z-index-modal, 90) + 1);
   gap: var(--dsx-space-md);
+  grid-template-columns: minmax(0, 1fr);
+  overflow-wrap: anywhere;
   min-width: var(--dsx-popover-min-width);
   max-width: min(var(--dsx-popover-max-width), calc(100vw - var(--dsx-dialog-viewport-gap)));
   padding: var(--dsx-space-md);
@@ -6579,12 +6705,50 @@ textarea {
 }
 
 .dsx-popover__close {
-  position: absolute;
-  top: var(--dsx-space-md);
-  right: var(--dsx-space-md);
-  width: var(--dsx-size-lg);
-  height: var(--dsx-size-lg);
-  border-radius: var(--dsx-rounded-full);
+  min-width: var(--dsx-size-md);
+  min-height: var(--dsx-size-md);
+}
+
+/* Close may compose a public Button. Restore its rest palette after the
+   shared overlay close reset; Button's state selectors retain precedence. */
+
+.dsx-popover__close:where(.dsx-button) {
+  border-width: var(--dsx-border-width-sm);
+  border-style: solid;
+  border-color: transparent;
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='primary']) {
+  background: var(--dsx-color-accent-track);
+  border-color: var(--dsx-color-accent-track);
+  color: var(--dsx-color-accent-contrast);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='secondary']) {
+  background: var(--dsx-color-secondary);
+  border-color: var(--dsx-color-secondary);
+  color: var(--dsx-color-on-secondary);
+}
+
+:where([data-dsx-theme='dark']) .dsx-popover__close:where(.dsx-button[data-variant='secondary']) {
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='outline']) {
+  background: transparent;
+  border-color: var(--dsx-color-outline-variant);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='ghost']) {
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='destructive']) {
+  background: var(--dsx-color-error);
+  border-color: var(--dsx-color-error);
+  color: var(--dsx-color-on-error);
 }
 
 .dsx-popover-show-arrow {
@@ -7107,6 +7271,8 @@ textarea {
 }
 
 .dsx-hover-card__content {
+  z-index: var(--dsx-z-index-popover);
+  overflow-wrap: anywhere;
   gap: var(--dsx-space-md);
   min-width: var(--dsx-size-popover-min-width);
   max-width: min(var(--dsx-size-popover-max-width), calc(100vw - var(--dsx-space-xl)));
@@ -7137,9 +7303,10 @@ textarea {
 }
 
 .dsx-hover-card__arrow {
-  fill: currentColor;
+  color: var(--dsx-color-panel-translucent);
+  fill: var(--dsx-color-panel-translucent);
   stroke: var(--dsx-color-outline-variant);
-  stroke-width: 1px;
+  stroke-width: var(--dsx-border-width-sm);
   vector-effect: non-scaling-stroke;
 }
 
@@ -7481,7 +7648,6 @@ textarea {
 .dsx-command__group [cmdk-group-heading] {
   margin-top: var(--dsx-space-md);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   font-family: var(--dsx-typography-label-small-font-family), sans-serif;
   font-size: var(--dsx-typography-label-small-font-size);
   font-weight: var(--dsx-typography-label-small-font-weight);
@@ -7504,7 +7670,6 @@ textarea {
 .dsx-command__group-heading {
   margin-top: var(--dsx-space-md);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   font-size: var(--dsx-typography-label-small-font-size);
   font-family: var(--dsx-typography-label-small-font-family), sans-serif;
   font-weight: var(--dsx-typography-label-small-font-weight);
@@ -7613,7 +7778,7 @@ textarea {
   padding: var(--dsx-space-md) var(--dsx-space-lg);
 }
 
-/* ConfigDrawer renders inside Sheet.Content (right-anchored panel).
+/* ConfigDrawer renders inside Drawer.Content (host-selected edge).
    These rules style the body layout and each settings row. */
 
 .dsx-config-drawer__body {
@@ -7624,11 +7789,13 @@ textarea {
   overflow-y: auto;
   padding: var(--dsx-space-md) 0;
   min-height: 0;
+  min-width: 0;
 }
 
 .dsx-config-drawer__row {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--dsx-space-md);
@@ -7639,12 +7806,14 @@ textarea {
   display: flex;
   flex-direction: column;
   gap: var(--dsx-space-2xs);
-  flex: 1 1 auto;
+  flex: 1 1 max-content;
   min-width: 0;
 }
 
 .dsx-config-drawer__row-control {
-  flex-shrink: 0;
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-config-drawer__accent-swatch {
@@ -7695,11 +7864,27 @@ textarea {
   z-index: calc(var(--dsx-z-index-dropdown) + 1);
   gap: var(--dsx-space-md);
   min-height: var(--dsx-drawer-min-height, 30vh);
+  max-height: 100dvh;
+  max-width: 100%;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
   padding: var(--dsx-space-md) var(--dsx-space-lg) var(--dsx-space-lg);
   border-top-left-radius: var(--dsx-rounded-xl);
   border-top-right-radius: var(--dsx-rounded-xl);
 }
 
+.dsx-drawer__content > :not(.dsx-drawer__handle) {
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+/* Vaul's offscreen filler grows the shell's scroll area and covers footer
+   controls after scrolling. The bounded scrolling shell owns its surface. */
+
+.dsx-drawer__content::after {
+  display: none;
+}
+
 .dsx-drawer__content[data-direction='bottom'] {
   right: 0;
   bottom: 0;
@@ -7721,8 +7906,9 @@ textarea {
   top: 0;
   bottom: 0;
   left: 0;
-  width: min(100vw, var(--dsx-sheet-width));
-  min-height: var(--dsx-drawer-min-height-full, 100vh);
+  width: min(100%, var(--dsx-sheet-width));
+  height: 100dvh;
+  min-height: 0;
   border-top-right-radius: var(--dsx-rounded-xl);
   border-bottom-right-radius: var(--dsx-rounded-xl);
 }
@@ -7731,8 +7917,9 @@ textarea {
   top: 0;
   right: 0;
   bottom: 0;
-  width: min(100vw, var(--dsx-sheet-width));
-  min-height: var(--dsx-drawer-min-height-full, 100vh);
+  width: min(100%, var(--dsx-sheet-width));
+  height: 100dvh;
+  min-height: 0;
   border-top-left-radius: var(--dsx-rounded-xl);
   border-bottom-left-radius: var(--dsx-rounded-xl);
 }
@@ -7784,12 +7971,12 @@ textarea {
 
 .dsx-drawer__content[data-direction='left'][data-size='sm'],
 .dsx-drawer__content[data-direction='right'][data-size='sm'] {
-  width: min(100vw, var(--dsx-sheet-width-sm, 280px));
+  width: min(100%, var(--dsx-sheet-width-sm, 280px));
 }
 
 .dsx-drawer__content[data-direction='left'][data-size='lg'],
 .dsx-drawer__content[data-direction='right'][data-size='lg'] {
-  width: min(100vw, var(--dsx-sheet-width-lg, 540px));
+  width: min(100%, var(--dsx-sheet-width-lg, 540px));
 }
 
 .dsx-drawer__title {
@@ -8127,6 +8314,8 @@ textarea {
   font-weight: var(--dsx-typography-label-large-font-weight);
   line-height: var(--dsx-typography-label-large-line-height);
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
+  text-transform: none;
 }
 
 .dsx-label[data-disabled] {
@@ -8140,6 +8329,7 @@ textarea {
   font-weight: var(--dsx-typography-label-medium-font-weight);
   line-height: var(--dsx-typography-label-medium-line-height);
   letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
 }
 
 .dsx-label[data-size='lg'] {
@@ -8376,7 +8566,7 @@ textarea {
 
 .dsx-accordion__item {
   width: 100%;
-  overflow: hidden;
+  overflow: visible;
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
@@ -8407,10 +8597,11 @@ textarea {
   flex: 1;
   min-width: 0;
   text-align: start;
+  overflow-wrap: anywhere;
 }
 
 .dsx-accordion__trigger[data-state='open'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
 }
 
 .dsx-accordion__trigger:focus-visible {
@@ -8464,7 +8655,14 @@ textarea {
   font-size: var(--dsx-typography-body-medium-font-size);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .dsx-accordion__chevron { transition: none; }
+}
+
+.dsx-accordion__trigger:disabled { opacity: var(--dsx-opacity-disabled); }
+
 .dsx-alert {
+  box-sizing: border-box;
   display: flex;
   align-items: flex-start;
   gap: var(--dsx-space-md);
@@ -8486,16 +8684,31 @@ textarea {
   color: currentColor;
 }
 
+.dsx-alert__icon { flex-shrink: 0; }
+
 .dsx-alert__action {
   align-self: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
 }
 
 .dsx-alert__content {
   display: grid;
   gap: var(--dsx-space-xs);
   flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
+.dsx-alert[data-variant='warning'] { border-color: var(--dsx-color-warning); }
+
+.dsx-alert[data-variant='success'] { border-color: var(--dsx-color-success); }
+
+.dsx-alert[data-variant='destructive'] { border-color: var(--dsx-color-error); }
+
+.dsx-alert[data-high-contrast='true'] { border-color: var(--dsx-color-high-contrast-border); }
+
 .dsx-alert__title {
   margin: 0;
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
@@ -8854,7 +9067,7 @@ textarea {
 }
 
 .dsx-collapsible__trigger[data-state='open'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
 }
 
 .dsx-collapsible__trigger:focus-visible {
@@ -8862,7 +9075,10 @@ textarea {
   box-shadow: var(--dsx-shadow-focus-ring);
 }
 
+.dsx-collapsible__trigger > :where(span) { min-width: 0; text-align: start; overflow-wrap: anywhere; }
+
 .dsx-collapsible__chevron {
+  flex-shrink: 0;
   transition: transform var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
@@ -8878,6 +9094,12 @@ textarea {
   font-size: var(--dsx-typography-body-medium-font-size);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .dsx-collapsible__chevron { transition: none; }
+}
+
+.dsx-collapsible__trigger:disabled { opacity: var(--dsx-opacity-disabled); }
+
 /* ── Root list ─────────────────────────────────────────── */
 
 .dsx-data-list {
@@ -9637,9 +9859,11 @@ textarea {
   width: 100%;
 }
 
-.dsx-file-upload__dropzone {
+.dsx-file-upload .dsx-file-upload__dropzone {
   width: 100%;
   min-height: calc(var(--dsx-size-4xl) * 2);
+  padding: var(--dsx-space-md);
+  gap: var(--dsx-space-sm);
   border: var(--dsx-border-width-md) dashed var(--dsx-color-outline);
   border-radius: var(--dsx-rounded-lg);
   background: var(--dsx-color-surface-sunken);
@@ -9649,14 +9873,36 @@ textarea {
     box-shadow var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
-.dsx-file-upload[data-size='sm'] .dsx-file-upload__dropzone {
-  min-height: calc(var(--dsx-size-4xl) * 1.5);
-  padding: var(--dsx-space-lg);
+.dsx-file-upload:where([data-size='sm']) .dsx-file-upload__dropzone {
+  min-height: var(--dsx-size-4xl);
+  padding: var(--dsx-space-sm);
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  text-align: start;
 }
 
-.dsx-file-upload[data-size='lg'] .dsx-file-upload__dropzone {
+.dsx-file-upload:where([data-size='lg']) .dsx-file-upload__dropzone {
   min-height: calc(var(--dsx-size-4xl) * 2.5);
-  padding: var(--dsx-space-2xl);
+  padding: var(--dsx-space-lg);
+}
+
+.dsx-file-upload__dropzone .dsx-empty-state__title {
+  font-family: var(--dsx-typography-label-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-large-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+  line-height: var(--dsx-typography-label-large-line-height);
+  letter-spacing: var(--dsx-typography-label-large-letter-spacing);
+}
+
+.dsx-file-upload__dropzone .dsx-empty-state__illustration {
+  width: var(--dsx-size-lg);
+  height: var(--dsx-size-lg);
+  flex: none;
+}
+
+.dsx-file-upload:where([data-size='sm']) .dsx-empty-state__header {
+  flex: 1 1 var(--dsx-size-4xl);
 }
 
 .dsx-file-upload__dropzone[data-dragging='true'] {
@@ -9687,15 +9933,17 @@ textarea {
   width: 100%;
 }
 
-.dsx-file-upload__item {
+.dsx-item.dsx-file-upload__item {
   width: 100%;
+  gap: var(--dsx-space-sm);
 }
 
 .dsx-file-upload__media {
   color: var(--dsx-color-on-surface-variant);
 }
 
-.dsx-file-upload__content {
+.dsx-file-upload__item .dsx-file-upload__content {
+  flex: 1 1 0;
   min-width: 0;
 }
 
@@ -9729,9 +9977,10 @@ textarea {
   color: var(--dsx-color-error);
 }
 
-.dsx-file-upload__actions {
+.dsx-file-upload__item .dsx-file-upload__actions {
   margin-left: auto;
   flex-direction: column;
+  flex-wrap: nowrap;
   align-items: flex-end;
   gap: var(--dsx-space-xs);
 }
@@ -9740,6 +9989,8 @@ textarea {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  max-width: calc(100vw - var(--dsx-space-xl));
+  max-height: calc(100dvh - var(--dsx-space-xl));
   border-radius: var(--dsx-rounded-xl);
   border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   background: var(--dsx-color-panel-translucent);
@@ -9760,6 +10011,11 @@ textarea {
   align-items: center;
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
+  padding-right: var(--dsx-space-2xl);
+  flex-shrink: 0;
+  min-height: var(--dsx-size-xl);
+  box-sizing: border-box;
+  touch-action: none;
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
   background: var(--dsx-color-surface-raised);
   cursor: grab;
@@ -9772,8 +10028,8 @@ textarea {
 
 .dsx-floating-panel__close {
   position: absolute;
-  top: var(--dsx-space-xs);
-  right: var(--dsx-space-xs);
+  top: var(--dsx-space-sm);
+  right: var(--dsx-space-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9790,18 +10046,31 @@ textarea {
               background var(--dsx-motion-duration-fast) var(--dsx-motion-easing-in-out);
 }
 
-.dsx-floating-panel__close:hover {
+.dsx-floating-panel__close:hover,
+.dsx-floating-panel__close:active {
   background: var(--dsx-effect-hover-layer);
   color: var(--dsx-color-on-surface);
 }
 
+.dsx-floating-panel__header:focus-visible,
+.dsx-floating-panel__handle:focus-visible,
+.dsx-floating-panel__close:focus-visible {
+  outline: none;
+  box-shadow: inset var(--dsx-shadow-focus-ring);
+}
+
 .dsx-floating-panel__content {
   flex: 1;
+  min-height: 0;
   overflow: auto;
   padding: var(--dsx-space-md);
 }
 
 .dsx-floating-panel__handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dsx-color-on-surface-variant);
   position: absolute;
   bottom: 0;
   right: 0;
@@ -9809,37 +10078,43 @@ textarea {
   height: var(--dsx-space-lg);
   cursor: nwse-resize;
   z-index: var(--dsx-z-index-elevated);
+  touch-action: none;
+}
+
+.dsx-floating-panel__handle--se {
+  cursor: nwse-resize;
 }
 
-.dsx-floating-panel__handle::before {
+.dsx-floating-panel__resize-grip::before,
+.dsx-floating-panel__resize-grip::after {
   content: '';
   position: absolute;
-  bottom: var(--dsx-space-xs);
   right: var(--dsx-space-xs);
-  width: var(--dsx-space-sm);
-  height: var(--dsx-space-sm);
-  border-right: var(--dsx-border-width-md) solid var(--dsx-color-on-surface-variant);
-  border-bottom: var(--dsx-border-width-md) solid var(--dsx-color-on-surface-variant);
-  border-radius: 0 0 var(--dsx-rounded-sm) 0;
-  opacity: var(--dsx-opacity-muted);
-  transition: opacity var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
+  height: var(--dsx-border-width-sm);
+  background: currentColor;
+  transform: rotate(-45deg);
+  transform-origin: right bottom;
 }
 
-.dsx-floating-panel__handle:hover::before {
-  opacity: 1;
+.dsx-floating-panel__resize-grip::before {
+  width: var(--dsx-space-sm);
+  bottom: var(--dsx-space-sm);
 }
 
-.dsx-floating-panel__handle--se {
-  cursor: nwse-resize;
+.dsx-floating-panel__resize-grip::after {
+  width: var(--dsx-space-xs);
+  bottom: var(--dsx-space-xs);
 }
 
+.dsx-floating-panel__handle--s .dsx-icon { transform: rotate(90deg); }
+
 .dsx-floating-panel__handle--s {
   cursor: ns-resize;
   bottom: 0;
   right: 50%;
   transform: translateX(50%);
   width: var(--dsx-space-xl);
-  height: var(--dsx-space-sm);
+  height: var(--dsx-size-md);
 }
 
 .dsx-floating-panel__handle--e {
@@ -9847,10 +10122,15 @@ textarea {
   right: 0;
   bottom: 50%;
   transform: translateY(50%);
-  width: var(--dsx-space-sm);
+  width: var(--dsx-size-md);
   height: var(--dsx-space-xl);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .dsx-floating-panel,
+  .dsx-floating-panel__close { transition: none; }
+}
+
 .dsx-input-group {
   display: flex;
   align-items: stretch;
@@ -10782,6 +11062,7 @@ textarea {
 
 .dsx-qr-code {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   padding: var(--dsx-space-md);
@@ -10793,6 +11074,8 @@ textarea {
 .dsx-qr-code svg,
 .dsx-qr-code:where(.dsx-qr-code-size-sm, .dsx-qr-code-size-md, .dsx-qr-code-size-lg) svg {
   display: block;
+  flex-shrink: 0;
+  max-width: none;
   border-radius: var(--dsx-rounded-sm);
 }
 
@@ -10807,11 +11090,11 @@ textarea {
   border-color: var(--dsx-color-high-contrast-border);
 }
 
-.dsx-qr-code[data-high-contrast='true'] svg rect[fill] {
+.dsx-qr-code[data-high-contrast='true'] :where(svg > path:last-of-type) {
   fill: var(--dsx-color-high-contrast);
 }
 
-.dsx-qr-code[data-high-contrast='true'] svg rect[fill]:first-of-type {
+.dsx-qr-code[data-high-contrast='true'] :where(svg > path:first-of-type) {
   fill: var(--dsx-color-surface-raised);
 }
 
@@ -10830,6 +11113,8 @@ textarea {
   display: flex;
   width: 100%;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
 }
 
 .dsx-resizable-group[data-orientation='horizontal'] {
@@ -10852,6 +11137,7 @@ textarea {
   align-items: center;
   justify-content: center;
   position: relative;
+  z-index: var(--dsx-z-index-elevated);
   background-color: transparent;
   user-select: none;
   touch-action: none;
@@ -10879,7 +11165,7 @@ textarea {
 }
 
 .dsx-resizable-group[data-orientation='horizontal'] > .dsx-resizable-handle {
-  width: var(--dsx-resizable-handle-thickness-active);
+  width: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: col-resize;
 }
 
@@ -10889,7 +11175,7 @@ textarea {
 }
 
 .dsx-resizable-group[data-orientation='vertical'] > .dsx-resizable-handle {
-  height: var(--dsx-resizable-handle-thickness-active);
+  height: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: row-resize;
 }
 
@@ -10926,7 +11212,7 @@ textarea {
 }
 
 .dsx-resizable-group-direction-horizontal > .dsx-resizable-handle {
-  width: var(--dsx-resizable-handle-thickness-active);
+  width: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: col-resize;
 }
 
@@ -10936,7 +11222,7 @@ textarea {
 }
 
 .dsx-resizable-group-direction-vertical > .dsx-resizable-handle {
-  height: var(--dsx-resizable-handle-thickness-active);
+  height: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: row-resize;
 }
 
@@ -10954,6 +11240,19 @@ textarea {
   border-radius: var(--dsx-resizable-grip-radius);
 }
 
+.dsx-resizable-handle:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+  z-index: var(--dsx-z-index-elevated);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-resizable-handle,
+  .dsx-resizable-handle::before {
+    transition: none;
+  }
+}
+
 .dsx-resizable-group-direction-horizontal > .dsx-resizable-handle-grip .dsx-resizable-handle__grip {
   width: var(--dsx-space-xs);
   height: var(--dsx-size-xs);
@@ -11005,11 +11304,15 @@ textarea {
   box-shadow: none;
 }
 
-.dsx-rich-text-editor__toolbar {
+.dsx-rich-text-editor__toolbar.dsx-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--dsx-space-xs);
+  gap: var(--dsx-space-sm) var(--dsx-space-md);
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   background: var(--dsx-color-surface-editor-toolbar);
@@ -11020,13 +11323,15 @@ textarea {
 
 .dsx-rich-text-editor__toolbar-group {
   display: inline-flex;
+  flex-wrap: wrap;
+  max-width: 100%;
   min-width: 0;
   align-items: center;
   gap: var(--dsx-space-xs);
-  padding: var(--dsx-space-xs);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-panel-border-translucent);
+  padding: 0;
+  border: 0;
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-effect-gray-alpha-3);
+  background: transparent;
 }
 
 .dsx-rich-text-editor__toolbar-label {
@@ -11040,13 +11345,14 @@ textarea {
 }
 
 .dsx-rich-text-editor__toolbar-button {
-  min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
-  min-width: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  min-height: var(--dsx-density-control-height-lg);
+  min-width: var(--dsx-density-control-height-lg);
   padding-inline: var(--dsx-space-xs);
   white-space: nowrap;
 }
 
-.dsx-rich-text-editor__toolbar-button[data-active='true'] {
+.dsx-rich-text-editor__toolbar-button[data-active='true'],
+.dsx-rich-text-editor__toolbar-button[aria-pressed='true'] {
   background: var(--dsx-color-high-contrast);
   color: var(--dsx-color-on-high-contrast);
 }
@@ -11075,6 +11381,7 @@ textarea {
   position: absolute;
   inset-block-start: var(--dsx-space-md);
   inset-inline-start: var(--dsx-space-md);
+  inset-inline-end: var(--dsx-space-md);
   pointer-events: none;
   color: var(--dsx-color-on-surface-variant);
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
@@ -11087,6 +11394,8 @@ textarea {
 }
 
 .dsx-rich-text-editor__prosemirror {
+  min-width: 0;
+  overflow-wrap: anywhere;
   min-height: var(--dsx-rich-text-editor-min-height, 220px);
   padding: var(--dsx-space-md);
   outline: none;
@@ -11144,7 +11453,7 @@ textarea {
   margin: var(--dsx-space-md) 0;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   padding-inline-start: var(--dsx-space-lg);
-  border-inline-start: var(--dsx-border-width-lg) solid var(--dsx-color-primary);
+  border-inline-start: var(--dsx-border-width-sm) solid var(--dsx-color-accent-border);
   border-radius: 0 var(--dsx-rounded-md) var(--dsx-rounded-md) 0;
   background: var(--dsx-effect-hover-primary);
   color: var(--dsx-color-on-surface-variant);
@@ -11162,9 +11471,9 @@ textarea {
 .dsx-rich-text-editor__prosemirror code {
   border-radius: var(--dsx-rounded-sm);
   padding: var(--dsx-space-0-5) var(--dsx-space-xs);
-  background: var(--dsx-color-background);
-  color: var(--dsx-color-primary-container);
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  background: var(--dsx-code-soft-background);
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-code-font-family);
   font-size: 0.92em;
 }
 
@@ -11173,8 +11482,8 @@ textarea {
   margin: var(--dsx-space-md) 0;
   padding: var(--dsx-space-md);
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-color-background);
-  color: var(--dsx-color-on-background);
+  background: var(--dsx-code-soft-background);
+  color: var(--dsx-color-on-surface);
 }
 
 .dsx-rich-text-editor__prosemirror pre code {
@@ -11183,6 +11492,19 @@ textarea {
   color: inherit;
 }
 
+.dsx-rich-text-editor__prosemirror img {
+  max-width: 100%;
+  height: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-rich-text-editor,
+  .dsx-rich-text-editor__toolbar,
+  .dsx-rich-text-editor__area {
+    transition: none;
+  }
+}
+
 .dsx-rich-text-editor__status {
   display: flex;
   align-items: center;
@@ -11214,6 +11536,32 @@ textarea {
   color: var(--dsx-color-on-high-contrast);
 }
 
+.dsx-rich-text-editor__toolbar-group:empty { display: none; }
+
+.dsx-editor-tools__popover { display: grid; gap: var(--dsx-space-sm); min-width: 0; width: min(var(--dsx-dialog-content-width-sm), var(--radix-popover-content-available-width)); }
+
+.dsx-editor-tools__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
+
+.dsx-editor-tools__popover.dsx-editor-tools__link { width: min(var(--dsx-rich-text-editor-link-popover-width), var(--radix-popover-content-available-width)); }
+
+.dsx-editor-tools__link .dsx-popover__title { font-family: var(--dsx-typography-label-large-font-family), sans-serif; font-size: var(--dsx-typography-label-large-font-size); line-height: var(--dsx-typography-label-large-line-height); }
+
+.dsx-editor-tools__link .dsx-button { min-height: var(--dsx-size-2xl); }
+
+.dsx-editor-tools__choices { display: grid; gap: var(--dsx-space-xs); max-height: var(--radix-popover-content-available-height); overflow-y: auto; min-width: 0; }
+
+.dsx-editor-tools__choices .dsx-button { justify-content: flex-start; text-align: start; white-space: normal; }
+
+.dsx-editor-tools__choices small { display: block; color: var(--dsx-color-on-surface-variant); overflow-wrap: anywhere; }
+
+.dsx-editor-token { display: inline; padding: var(--dsx-space-0-5) var(--dsx-space-xs); border: var(--dsx-border-width-sm) solid var(--dsx-color-accent-border); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-primary-container); color: var(--dsx-color-on-primary-container); white-space: normal; }
+
+.dsx-editor-token--unknown { border-style: dashed; border-color: var(--dsx-color-error); color: var(--dsx-color-error); background: var(--dsx-color-surface); }
+
+.dsx-rich-text-editor__prosemirror h4 { font-size: var(--dsx-typography-label-large-font-size); line-height: var(--dsx-typography-label-large-line-height); }
+
+.dsx-editor-tools__suggestions { display: flex; flex-wrap: wrap; width: 100%; align-items: center; gap: var(--dsx-space-sm); padding: var(--dsx-space-sm); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-raised); }
+
 .dsx-scroll-area {
   box-sizing: border-box;
   position: relative;
@@ -11244,6 +11592,18 @@ textarea {
   border-radius: inherit;
 }
 
+.dsx-scroll-area__viewport:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--dsx-border-width-md) var(--dsx-color-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-scroll-area__scrollbar,
+  .dsx-scroll-area__thumb {
+    transition: none;
+  }
+}
+
 .dsx-scroll-area__scrollbar {
   display: flex;
   user-select: none;
@@ -11484,6 +11844,35 @@ textarea {
   pointer-events: none;
 }
 
+/* variant="floating" — the panel is a glass surface set off from the viewport edge, with the page
+   beside it. The gap is the provider's own padding and flex gap, never a sidebar margin: the
+   hover-preview and pin-docking rules above animate margin-inline-end and width, and a margin here
+   would fight them. The panel reuses the glass surface tokens the other floating panels use. Source
+   order matters below: these tie the ambient rule at (0,2,0) and must come after it so the glass
+   background wins while the ambient gradient still paints over it. The mobile drawer never carries
+   this variant (it reads `default` there), so no mobile query is needed. */
+
+.dsx-sidebar-provider:where([data-variant='floating']) {
+  gap: var(--dsx-space-3);
+  padding: var(--dsx-space-3);
+}
+
+.dsx-sidebar[data-variant='floating'] {
+  top: var(--dsx-space-3);
+  height: calc(100dvh - var(--dsx-space-3) - var(--dsx-space-3));
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
+  border-radius: var(--dsx-rounded-xl);
+  background-color: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  box-shadow: var(--dsx-panel-shadow);
+}
+
+/* A hidden offcanvas panel is `width: 0`; its border would still leave a sliver. */
+
+.dsx-sidebar[data-variant='floating']:where([data-collapsible='offcanvas'][data-state='collapsed']) {
+  border-width: 0;
+}
+
 .dsx-sidebar__recovery-rail {
   display: inline-flex;
   align-items: center;
@@ -11944,6 +12333,7 @@ textarea {
   justify-content: flex-start;
   align-items: center;
   gap: var(--dsx-space-sm);
+  border-radius: var(--dsx-rounded-sm);
 }
 
 .dsx-sidebar__menu-sub-trigger:hover {
@@ -12200,12 +12590,11 @@ textarea {
 }
 
 .dsx-sonner__toast {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  column-gap: var(--dsx-space-md);
-  padding: var(--dsx-space-sm) var(--dsx-space-md);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--dsx-space-sm);
+  padding: var(--dsx-space-md);
   background-color: var(--dsx-color-surface);
   border-radius: var(--dsx-rounded-md);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
@@ -12238,7 +12627,7 @@ textarea {
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
   font-weight: var(--dsx-typography-label-large-font-weight);
-  line-height: var(--dsx-typography-label-large-line-height);
+  line-height: var(--dsx-size-md);
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
   color: var(--dsx-color-on-surface);
   margin: 0;
@@ -12263,6 +12652,9 @@ textarea {
   color: var(--dsx-color-on-surface-variant);
   padding: var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dsx-sonner__action:hover,
@@ -12281,15 +12673,78 @@ textarea {
   color: var(--dsx-color-on-error-container);
 }
 
-@media (max-width: 640px) {
-  [data-sonner-toaster] {
-    width: calc(100vw - var(--dsx-size-md));
-    max-width: calc(100vw - var(--dsx-size-md));
-    right: var(--dsx-space-3);
-    left: var(--dsx-space-3);
-    bottom: var(--dsx-space-3);
-    padding: var(--dsx-space-sm);
-  }
+.dsx-sonner[data-sonner-toaster] {
+  max-width: calc(100vw - var(--dsx-dialog-viewport-gap));
+}
+
+.dsx-sonner__action,
+.dsx-sonner__cancel,
+.dsx-sonner__close {
+  min-width: var(--dsx-size-md);
+  min-height: var(--dsx-size-md);
+  flex-shrink: 0;
+}
+
+.dsx-sonner__action,
+.dsx-sonner__cancel {
+  white-space: nowrap;
+  grid-row: 2;
+  align-self: start;
+  justify-self: start;
+  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+  min-height: var(--dsx-size-lg);
+  border: var(--dsx-border-width-sm) solid currentColor;
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  line-height: var(--dsx-typography-label-medium-line-height);
+}
+
+.dsx-sonner__action { grid-column: 2; }
+
+.dsx-sonner__cancel { grid-column: 3; }
+
+.dsx-sonner__close {
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: end;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
+  padding: 0;
+}
+
+.dsx-sonner__close svg { width: var(--dsx-size-sm); height: var(--dsx-size-sm); }
+
+.dsx-sonner__toast [data-icon] {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
+}
+
+.dsx-sonner__toast [data-content] {
+  min-width: 0;
+  grid-column: 2;
+  grid-row: 1;
+  overflow-wrap: anywhere;
+}
+
+.dsx-sonner__toast:where(:not(:has([data-icon]))) { grid-template-columns: minmax(0, 1fr) auto; }
+
+.dsx-sonner__toast:where(:not(:has([data-icon]))) [data-content],
+.dsx-sonner__toast:where(:not(:has([data-icon]))) .dsx-sonner__action { grid-column: 1; }
+
+.dsx-sonner__toast:where(:not(:has([data-icon]))) .dsx-sonner__close,
+.dsx-sonner__toast:where(:not(:has([data-icon]))) .dsx-sonner__cancel { grid-column: 2; }
+
+.dsx-sonner__action:focus-visible,
+.dsx-sonner__cancel:focus-visible,
+.dsx-sonner__close:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
 }
 
 .dsx-table {
@@ -12506,8 +12961,8 @@ textarea {
 }
 
 .dsx-tabs__list[data-variant='pills'] .dsx-tabs__trigger[data-state='active'] {
-  background: var(--dsx-color-accent-indicator);
-  color: var(--dsx-color-on-primary);
+  background: var(--dsx-color-accent-track);
+  color: var(--dsx-color-accent-contrast);
   box-shadow: none;
   border-radius: var(--dsx-rounded-full);
 }
@@ -12516,7 +12971,12 @@ textarea {
   margin-top: var(--dsx-space-md);
 }
 
+.dsx-tabs { min-width: 0; max-width: 100%; }
+
+.dsx-tabs[data-orientation='vertical'] { display: flex; flex-wrap: wrap; gap: var(--dsx-space-md); align-items: flex-start; }
+
 .dsx-tabs__list {
+  position: relative;
   display: inline-flex;
   align-items: center;
   width: fit-content;
@@ -12527,8 +12987,8 @@ textarea {
   min-width: 0;
   max-width: 100%;
   overflow-x: auto;
-  border-bottom: var(--dsx-border-width-md, var(--dsx-border-width-sm)) solid var(--dsx-control-separator-color);
-  gap: var(--dsx-space-xs);
+  border-bottom: var(--dsx-boundary-divider-width) solid var(--dsx-control-separator-color);
+  gap: 0;
 }
 
 .dsx-tabs__list[data-variant='pills'] {
@@ -12572,14 +13032,14 @@ textarea {
 
 /* ---- size variants ---- */
 
-[data-size='sm'] .dsx-tabs__trigger {
+.dsx-tabs[data-size='sm'] > .dsx-tabs__list > .dsx-tabs__trigger {
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
   font-size: var(--dsx-typography-label-medium-font-size);
   font-weight: var(--dsx-typography-label-medium-font-weight);
   line-height: var(--dsx-typography-label-medium-line-height);
 }
 
-[data-size='lg'] .dsx-tabs__trigger {
+.dsx-tabs[data-size='lg'] > .dsx-tabs__list > .dsx-tabs__trigger {
   padding: var(--dsx-space-md) var(--dsx-space-lg);
   font-size: var(--dsx-typography-label-large-font-size);
   font-weight: var(--dsx-typography-label-large-font-weight);
@@ -12591,15 +13051,71 @@ textarea {
 .dsx-tabs__indicator {
   position: absolute;
   bottom: 0;
-  height: 2px;
-  background-color: var(--dsx-color-primary);
-  transition: left var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), width var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard);
+  height: var(--dsx-boundary-selected-width);
+  background-color: var(--dsx-color-accent-indicator);
+  transition: left var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), width var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), top var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), height var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard);
+}
+
+.dsx-tabs__list[data-orientation='vertical'] {
+  flex-direction: column;
+  align-items: stretch;
+  border-bottom: 0;
+  border-inline-end: var(--dsx-boundary-divider-width) solid var(--dsx-control-separator-color);
+}
+
+.dsx-tabs__list[data-orientation='vertical'][data-variant='pills'] { border-inline-end: 0; }
+
+.dsx-tabs__list[data-orientation='vertical'] .dsx-tabs__indicator { bottom: auto; width: var(--dsx-boundary-selected-width); }
+
+.dsx-tabs__list:has(> .dsx-tabs__indicator) > .dsx-tabs__trigger[data-state='active'] { box-shadow: none; }
+
+.dsx-tabs__content, .dsx-tabs__content-group { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
+
+.dsx-tabs[data-orientation='vertical'] > .dsx-tabs__content,
+.dsx-tabs[data-orientation='vertical'] > .dsx-tabs__content-group { flex: 1 1 50%; min-width: var(--dsx-size-2xl); margin-top: 0; padding-top: 0; }
+
+.dsx-tabs__trigger:focus-visible { box-shadow: inset var(--dsx-shadow-focus-ring); }
+
+@media (prefers-reduced-motion: reduce) { .dsx-tabs__indicator { transition: none; } }
+
+/* Underlined tabs are contiguous; pills alone carry a selected fill. */
+
+.dsx-tabs__list[data-variant='default'] > .dsx-tabs__trigger[data-state='active'] {
+  color: var(--dsx-color-accent-indicator);
+  background: transparent;
+  box-shadow: none;
+}
+
+.dsx-tabs__list:where([data-variant='default']):where(:not(:has(> .dsx-tabs__indicator))) > .dsx-tabs__trigger[data-state='active']::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--dsx-boundary-selected-width);
+  background: var(--dsx-color-accent-indicator);
+}
+
+.dsx-tabs__list:where([data-orientation='vertical'][data-variant='default']):where(:not(:has(> .dsx-tabs__indicator))) > .dsx-tabs__trigger[data-state='active']::after {
+  inset-inline: auto;
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--dsx-boundary-selected-width);
+  height: auto;
 }
 
+.dsx-tabs__content-group > .dsx-tabs__content { margin-top: 0; }
+
+.dsx-tabs__trigger { font-weight: var(--dsx-typography-label-large-font-weight); line-height: var(--dsx-typography-label-large-line-height); }
+
+.dsx-tabs__list[data-variant='default'] > .dsx-tabs__trigger:focus-visible { box-shadow: inset var(--dsx-shadow-focus-ring); }
+
 /* TabNav — tab navigation for routing (uses <a> tags instead of tab panels) */
 
 .dsx-tab-nav {
   display: block;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-tab-nav__list {
@@ -12609,16 +13125,20 @@ textarea {
   padding: 0;
   margin: 0;
   list-style: none;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .dsx-tab-nav__list-item {
   display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
 }
 
 /* Default variant — underline style */
 
 .dsx-tab-nav[data-variant='default'] .dsx-tab-nav__list {
-  border-bottom: var(--dsx-border-width-md) solid var(--dsx-color-outline-variant);
+  border-bottom: var(--dsx-boundary-divider-width) solid var(--dsx-color-outline-variant);
   padding-bottom: 0;
 }
 
@@ -12634,6 +13154,10 @@ textarea {
   font-size: var(--dsx-typography-label-large-font-size);
   font-weight: var(--dsx-typography-label-large-font-weight);
   text-decoration: none;
+  min-height: var(--dsx-size-md);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  box-sizing: border-box;
   cursor: pointer;
   transition:
     background-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
@@ -12653,7 +13177,7 @@ textarea {
 /* Active state — default (underline) */
 
 .dsx-tab-nav[data-variant='default'] .dsx-tab-nav__link[data-active='true'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
   background: transparent;
   position: relative;
 }
@@ -12661,11 +13185,11 @@ textarea {
 .dsx-tab-nav[data-variant='default'] .dsx-tab-nav__link[data-active='true']::after {
   content: '';
   position: absolute;
-  bottom: calc(-1 * var(--dsx-border-width-md) - 1px);
+  bottom: calc(-1 * var(--dsx-boundary-divider-width));
   left: 0;
   right: 0;
-  height: var(--dsx-border-width-md);
-  background: var(--dsx-color-primary);
+  height: var(--dsx-boundary-selected-width);
+  background: var(--dsx-color-accent-indicator);
   border-radius: var(--dsx-rounded-full);
 }
 
@@ -12684,33 +13208,33 @@ textarea {
 }
 
 .dsx-tab-nav[data-variant='pills'] .dsx-tab-nav__link[data-active='true'] {
-  color: var(--dsx-color-on-primary);
-  background: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-contrast);
+  background: var(--dsx-color-accent-track);
 }
 
 .dsx-tab-nav[data-variant='pills'] .dsx-tab-nav__link[data-active='true']:hover {
-  background: var(--dsx-color-primary);
+  background: var(--dsx-color-accent-track);
 }
 
 /* Underline variant — same as default but without the border on the list */
 
 .dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__list {
-  border-bottom: var(--dsx-border-width-md) solid var(--dsx-color-outline-variant);
+  border-bottom: 0;
 }
 
 .dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__link[data-active='true'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
   position: relative;
 }
 
 .dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__link[data-active='true']::after {
   content: '';
   position: absolute;
-  bottom: calc(-1 * var(--dsx-border-width-md) - 1px);
+  bottom: calc(-1 * var(--dsx-boundary-divider-width));
   left: 0;
   right: 0;
-  height: 2px;
-  background: var(--dsx-color-primary);
+  height: var(--dsx-boundary-selected-width);
+  background: var(--dsx-color-accent-indicator);
   border-radius: var(--dsx-rounded-full);
 }
 
@@ -12732,6 +13256,8 @@ textarea {
   }
 }
 
+.dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__link[data-active='true']::after { bottom: 0; }
+
 .dsx-tags-input {
   display: flex;
   flex-wrap: wrap;
@@ -13237,11 +13763,15 @@ textarea {
 }
 
 .dsx-toast {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  column-gap: var(--dsx-space-md);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "title close"
+    "description description"
+    "action action";
+  align-items: start;
+  column-gap: var(--dsx-space-sm);
+  row-gap: var(--dsx-space-xs);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   background-color: var(--dsx-color-surface);
   border-radius: var(--dsx-rounded-md);
@@ -13249,35 +13779,24 @@ textarea {
   box-shadow: var(--dsx-shadow-elevation-5); /* Spotlight (B4 Q3): below dialogs, above all menus */
 }
 
-/* Predetermined slot placement for action-bearing toasts: without it all
-   four slots land as flex siblings in one row, so title + description sit
-   side by side and squeeze the action (destructive story). Text stacks in
-   column one, action pins center-right, close top-right — no consumer
-   wrapper needed. Action-less toasts keep the flex row above untouched. */
-
-.dsx-toast:has(.dsx-toast__action) {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  grid-template-areas:
-    "title action close"
-    "description action close";
-  align-items: center;
-}
-
-.dsx-toast:has(.dsx-toast__action) .dsx-toast__title {
+.dsx-toast__title {
   grid-area: title;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
-.dsx-toast:has(.dsx-toast__action) .dsx-toast__description {
+.dsx-toast__description {
   grid-area: description;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
-.dsx-toast:has(.dsx-toast__action) .dsx-toast__action {
+.dsx-toast__action {
   grid-area: action;
-  align-self: center;
+  justify-self: start;
 }
 
-.dsx-toast:has(.dsx-toast__action) .dsx-toast__close {
+.dsx-toast__close {
   grid-area: close;
   align-self: start;
 }
@@ -13327,11 +13846,17 @@ textarea {
 }
 
 .dsx-toast__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
   background: transparent;
   border: none;
   cursor: pointer;
   color: var(--dsx-color-on-surface-variant);
-  padding: var(--dsx-space-xs);
+  padding: 0;
   border-radius: var(--dsx-rounded-sm);
 }
 
@@ -13355,18 +13880,6 @@ textarea {
   color: inherit;
 }
 
-/* Keep literal breakpoint because CSS custom properties cannot be used in this media query. */
-
-@media (max-width: 640px) {
-  .dsx-toast__viewport {
-    width: calc(100vw - var(--dsx-size-md));
-    max-width: calc(100vw - var(--dsx-size-md));
-    right: var(--dsx-toast-viewport-mobile-inset);
-    left: var(--dsx-toast-viewport-mobile-inset);
-    padding: var(--dsx-space-sm);
-  }
-}
-
 .dsx-toast-variant-destructive {
   background-color: var(--dsx-color-error-container);
   border-color: var(--dsx-color-error);
@@ -13389,6 +13902,11 @@ textarea {
   background: transparent;
   cursor: pointer;
   font-size: var(--dsx-typography-label-medium-font-size);
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  line-height: var(--dsx-typography-label-medium-line-height);
+  min-height: var(--dsx-size-lg);
+  color: inherit;
 }
 
 .dsx-toast[data-size='sm'] {
@@ -13428,6 +13946,12 @@ textarea {
   color: var(--dsx-color-on-surface-variant);
 }
 
+.dsx-toast__action:focus-visible,
+.dsx-toast__close:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
 .dsx-toggle {
   box-sizing: border-box;
   display: inline-flex;
@@ -13630,8 +14154,8 @@ textarea {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dsx-size-sm);
-  height: var(--dsx-size-sm);
+  width: var(--dsx-size-lg);
+  height: var(--dsx-size-lg);
   padding: 0;
   border: none;
   border-radius: var(--dsx-rounded-full);
@@ -13643,21 +14167,34 @@ textarea {
 }
 
 .dsx-toggle-tip__trigger:hover {
-  background: var(--dsx-effect-hover-layer);
-  color: var(--dsx-color-primary);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
 }
 
-.dsx-toggle-tip[data-size='sm'] .dsx-toggle-tip__trigger {
-  width: var(--dsx-size-xs);
-  height: var(--dsx-size-xs);
+.dsx-toggle-tip__trigger:active,
+.dsx-toggle-tip__trigger[data-state='open'] {
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
 }
 
-.dsx-toggle-tip[data-size='lg'] .dsx-toggle-tip__trigger {
+.dsx-toggle-tip__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-toggle-tip[data-size='sm'] .dsx-toggle-tip__trigger {
   width: var(--dsx-size-md);
   height: var(--dsx-size-md);
 }
 
+.dsx-toggle-tip[data-size='lg'] .dsx-toggle-tip__trigger {
+  width: var(--dsx-size-xl);
+  height: var(--dsx-size-xl);
+}
+
 .dsx-toggle-tip__content {
+  box-sizing: border-box;
+  z-index: calc(var(--dsx-z-index-modal) + 1);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border-radius: var(--dsx-rounded-md);
   background: var(--dsx-color-panel-translucent);
@@ -13671,7 +14208,43 @@ textarea {
   letter-spacing: var(--dsx-typography-body-small-letter-spacing);
   box-shadow: var(--dsx-shadow-elevation-3);
   animation: dsx-toggle-tip-fade var(--dsx-motion-duration-fast) var(--dsx-motion-easing-out);
-  max-width: 280px;
+  max-width: min(var(--dsx-size-popover-max-width), var(--radix-popover-content-available-width));
+  overflow: visible;
+  overflow-wrap: anywhere;
+}
+
+.dsx-toggle-tip__content > :where(div) {
+  max-height: calc(var(--radix-popover-content-available-height) - var(--dsx-space-md) - var(--dsx-border-width-md));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.dsx-toggle-tip__content > :where(div):focus-visible {
+  outline: var(--dsx-border-width-sm) solid var(--dsx-color-accent-indicator);
+  outline-offset: calc(-1 * var(--dsx-border-width-sm));
+}
+
+.dsx-toggle-tip__content[data-size='sm'] {
+  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+}
+
+.dsx-toggle-tip__content[data-size='lg'] {
+  padding: var(--dsx-space-md) var(--dsx-space-lg);
+  font-size: var(--dsx-typography-body-medium-font-size);
+  line-height: var(--dsx-typography-body-medium-line-height);
+}
+
+.dsx-toggle-tip__content[data-size='sm'] > :where(div) {
+  max-height: calc(var(--radix-popover-content-available-height) - var(--dsx-space-sm) - var(--dsx-border-width-md));
+}
+
+.dsx-toggle-tip__content[data-size='lg'] > :where(div) {
+  max-height: calc(var(--radix-popover-content-available-height) - var(--dsx-space-xl) - var(--dsx-border-width-md));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-toggle-tip__content { animation: none; }
+  .dsx-toggle-tip__trigger { transition: none; }
 }
 
 .dsx-toggle-tip__arrow {
@@ -13690,6 +14263,11 @@ textarea {
 }
 
 .dsx-toolbar {
+  --dsx-toolbar-control-height: var(--dsx-size-lg);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
   display: inline-flex;
   align-items: center;
   gap: var(--dsx-space-sm);
@@ -13710,7 +14288,14 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: var(--dsx-size-lg);
+  min-height: var(--dsx-toolbar-control-height);
+  min-width: var(--dsx-toolbar-control-height);
+  box-sizing: border-box;
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  line-height: var(--dsx-typography-label-medium-line-height);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  overflow-wrap: anywhere;
   padding-inline: var(--dsx-space-sm);
   border-radius: var(--dsx-rounded-md);
   border: 0;
@@ -13723,7 +14308,14 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: var(--dsx-size-lg);
+  min-height: var(--dsx-toolbar-control-height);
+  min-width: var(--dsx-toolbar-control-height);
+  box-sizing: border-box;
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  line-height: var(--dsx-typography-label-medium-line-height);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  overflow-wrap: anywhere;
   padding-inline: var(--dsx-space-sm);
   border-radius: var(--dsx-rounded-md);
   border: 0;
@@ -13736,6 +14328,9 @@ textarea {
   align-items: stretch;
   gap: 0;
   isolation: isolate;
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-toolbar__toggle-group > .dsx-toolbar__toggle-button {
@@ -13757,8 +14352,9 @@ textarea {
 }
 
 .dsx-toolbar__separator {
-  width: var(--dsx-border-width-sm);
-  height: var(--dsx-size-md);
+  flex: 0 0 auto;
+  width: var(--dsx-boundary-separator-width);
+  height: calc(var(--dsx-toolbar-control-height) - var(--dsx-space-sm));
   background: var(--dsx-control-separator-color);
 }
 
@@ -13767,7 +14363,53 @@ textarea {
   padding: var(--dsx-space-xs);
 }
 
+.dsx-toolbar[data-size='sm'] { --dsx-toolbar-control-height: var(--dsx-size-md); }
+
+.dsx-toolbar[data-size='lg'] { --dsx-toolbar-control-height: var(--dsx-size-xl); }
+
+.dsx-toolbar[data-orientation='vertical'] { flex-direction: column; align-items: stretch; }
+
+.dsx-toolbar__separator[data-orientation='horizontal'] { width: 100%; height: var(--dsx-boundary-separator-width); }
+
+.dsx-toolbar__button:hover:not(:disabled),
+.dsx-toolbar__link:hover,
+.dsx-toolbar__toggle-button:hover:not(:disabled) { background: var(--dsx-effect-hover-ghost); }
+
+.dsx-toolbar__button:active:not(:disabled),
+.dsx-toolbar__link:active,
+.dsx-toolbar__toggle-button:active:not(:disabled) { background: var(--dsx-effect-pressed-layer); }
+
+.dsx-toolbar__toggle-button[data-state='on'] { background: var(--dsx-color-accent-surface); color: var(--dsx-color-accent-indicator); }
+
+.dsx-toolbar__button:focus-visible,
+.dsx-toolbar__link:focus-visible,
+.dsx-toolbar__toggle-button:focus-visible { outline: none; box-shadow: var(--dsx-shadow-focus-ring); position: relative; z-index: 1; }
+
+.dsx-toolbar__button:disabled,
+.dsx-toolbar__toggle-button:disabled { opacity: var(--dsx-opacity-disabled); }
+
+.dsx-toolbar__toggle-group[data-orientation='vertical'] { flex-direction: column; }
+
+.dsx-toolbar__toggle-group:where([data-orientation='vertical']) > .dsx-toolbar__toggle-button {
+  margin-inline-start: 0;
+  border-radius: 0;
+}
+
+.dsx-toolbar__toggle-group:where([data-orientation='vertical']) > .dsx-toolbar__toggle-button:first-child {
+  border-start-start-radius: var(--dsx-rounded-md);
+  border-start-end-radius: var(--dsx-rounded-md);
+}
+
+.dsx-toolbar__toggle-group:where([data-orientation='vertical']) > .dsx-toolbar__toggle-button:last-child {
+  border-end-start-radius: var(--dsx-rounded-md);
+  border-end-end-radius: var(--dsx-rounded-md);
+}
+
 .dsx-tree-view {
+  --dsx-tree-view-row-height: var(--dsx-size-lg);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--dsx-space-xs);
@@ -13783,6 +14425,9 @@ textarea {
 }
 
 .dsx-tree-view__node {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--dsx-tree-view-row-height);
   display: flex;
   align-items: center;
   gap: var(--dsx-space-xs);
@@ -13825,25 +14470,40 @@ textarea {
 
 .dsx-tree-view__label {
   flex: 1;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .dsx-tree-view__children {
-  margin-left: var(--dsx-space-md);
-  padding-left: var(--dsx-space-sm);
-  border-left: var(--dsx-border-width-xs) solid var(--dsx-color-outline-variant);
+  margin-inline-start: var(--dsx-space-md);
+  padding-inline-start: var(--dsx-space-sm);
+  border-inline-start: var(--dsx-boundary-divider-width) solid var(--dsx-color-outline-variant);
   display: flex;
   flex-direction: column;
   gap: var(--dsx-space-xs);
 }
 
+.dsx-tree-view:where([data-size='sm']) { --dsx-tree-view-row-height: var(--dsx-size-md); }
+
+.dsx-tree-view:where([data-size='sm']) .dsx-tree-view__node { font-size: var(--dsx-typography-body-small-font-size); padding-block: 0; }
+
+.dsx-tree-view:where([data-size='lg']) { --dsx-tree-view-row-height: var(--dsx-size-xl); }
+
+.dsx-tree-view:where([data-size='lg']) .dsx-tree-view__node { font-size: var(--dsx-typography-body-large-font-size); padding-block: var(--dsx-space-sm); }
+
+@media (prefers-reduced-motion: reduce) { .dsx-tree-view__node { transition: none; } }
+
 .dsx-tooltip {
-  max-width: var(--dsx-tooltip-max-width);
+  --_tooltip-background: var(--dsx-color-panel-translucent);
+  box-sizing: border-box;
+  max-width: min(var(--dsx-tooltip-max-width), var(--radix-tooltip-content-available-width));
+  overflow-wrap: anywhere;
+  z-index: calc(var(--dsx-z-index-modal) + 1);
   border-radius: var(--dsx-rounded-sm);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  background: var(--dsx-color-panel-translucent);
+  background: var(--_tooltip-background);
   backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
   color: var(--dsx-color-on-surface);
   box-shadow: var(--dsx-shadow-elevation-2);
@@ -13861,17 +14521,17 @@ textarea {
    dark+spark). Background already wins (no .dsx-theme background rule). */
 
 .dsx-tooltip.dsx-tooltip--primary {
-  background: var(--dsx-color-primary);
+  --_tooltip-background: var(--dsx-color-primary);
   color: var(--dsx-color-on-primary);
 }
 
 .dsx-tooltip.dsx-tooltip--error {
-  background: var(--dsx-color-error);
+  --_tooltip-background: var(--dsx-color-error);
   color: var(--dsx-color-on-error);
 }
 
 .dsx-tooltip__arrow {
-  fill: currentColor;
+  fill: var(--_tooltip-background);
 }
 
 .dsx-skeleton {
@@ -13969,10 +14629,13 @@ textarea {
 .dsx-blockquote {
   box-sizing: border-box;
   margin: 0;
-  padding-left: var(--dsx-space-lg);
-  border-left: var(--dsx-border-width-xl) solid var(--dsx-color-primary);
+  padding-inline-start: var(--dsx-space-lg);
+  border-inline-start: var(--dsx-boundary-divider-width) solid var(--dsx-color-accent-border);
   font-family: var(--dsx-typography-body-large-font-family), sans-serif;
   font-size: var(--dsx-typography-body-large-font-size);
+  font-weight: var(--dsx-typography-body-large-font-weight);
+  letter-spacing: var(--dsx-typography-body-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
   font-style: italic;
   line-height: var(--dsx-typography-body-large-line-height);
   color: var(--dsx-color-on-surface-variant);
@@ -13980,17 +14643,19 @@ textarea {
 
 .dsx-blockquote--muted {
   color: var(--dsx-color-on-surface-variant);
-  border-left-color: var(--dsx-color-outline-variant);
+  border-inline-start-color: var(--dsx-color-outline-variant);
 }
 
 .dsx-blockquote--inverse {
   color: var(--dsx-color-on-inverse-background);
-  border-left-color: var(--dsx-color-on-inverse-background);
+  border-inline-start-color: var(--dsx-color-on-inverse-background);
 }
 
 .dsx-breadcrumb {
   box-sizing: border-box;
   display: block;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-breadcrumb__list {
@@ -14021,7 +14686,7 @@ textarea {
 
 .dsx-breadcrumb__link:hover {
   background: var(--dsx-effect-hover-ghost);
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
 }
 
 .dsx-breadcrumb__link:focus-visible {
@@ -14039,8 +14704,8 @@ textarea {
   align-items: center;
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  background: var(--dsx-color-accent-indicator);
-  color: var(--dsx-color-on-primary);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
   font-weight: var(--dsx-typography-label-large-font-weight);
   border-radius: var(--dsx-rounded-md);
   cursor: default;
@@ -14049,6 +14714,8 @@ textarea {
 .dsx-breadcrumb__item {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-breadcrumb__separator,
@@ -14064,6 +14731,25 @@ textarea {
   flex-shrink: 0;
 }
 
+.dsx-breadcrumb__link, .dsx-breadcrumb__page {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--dsx-size-md);
+  overflow-wrap: anywhere;
+}
+
+.dsx-breadcrumb:where([data-size='sm']) .dsx-breadcrumb__link,
+.dsx-breadcrumb:where([data-size='sm']) .dsx-breadcrumb__page {
+  font-size: var(--dsx-typography-body-small-font-size);
+  padding: var(--dsx-space-xs);
+}
+
+.dsx-breadcrumb:where([data-size='lg']) .dsx-breadcrumb__link,
+.dsx-breadcrumb:where([data-size='lg']) .dsx-breadcrumb__page {
+  font-size: var(--dsx-typography-body-large-font-size);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
+}
+
 .dsx-button-group {
   box-sizing: border-box;
   display: inline-flex;
@@ -14138,11 +14824,14 @@ textarea {
   --_icon-size: var(--dsx-size-md);
   --_padding: var(--dsx-space-md);
   --_gap: var(--dsx-space-sm);
+  --_callout-icon-color: var(--dsx-color-accent-indicator, var(--dsx-color-primary));
 
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: start;
   gap: var(--_gap);
+  min-width: 0;
+  overflow-wrap: anywhere;
   padding: var(--_padding);
   box-sizing: border-box;
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
@@ -14159,31 +14848,39 @@ textarea {
   align-items: center;
   justify-content: center;
   grid-column: 1;
+  grid-row: 1 / span 3;
   width: var(--_icon-size);
   min-width: var(--_icon-size);
   height: var(--_icon-size);
-  color: var(--dsx-color-accent-indicator, var(--dsx-color-primary));
+  color: var(--_callout-icon-color);
 }
 
 .dsx-callout__text {
   grid-column: 2;
+  margin: 0;
+  min-width: 0;
 }
 
 .dsx-callout__title { grid-column: 2; margin: 0; color: var(--dsx-color-on-surface); font-family: var(--dsx-typography-label-large-font-family); font-size: var(--dsx-typography-label-large-font-size); font-weight: var(--dsx-typography-label-large-font-weight); line-height: var(--dsx-typography-label-large-line-height); }
 
-.dsx-callout[data-tone='warning'] { border-color: var(--dsx-color-warning); }
+.dsx-callout[data-tone='warning'] { border-color: var(--dsx-color-warning); --_callout-icon-color: var(--dsx-color-warning); }
 
-.dsx-callout[data-tone='success'] { border-color: var(--dsx-color-success); }
+.dsx-callout[data-tone='success'] { border-color: var(--dsx-color-success); --_callout-icon-color: var(--dsx-color-success); }
 
-.dsx-callout[data-tone='danger'] { border-color: var(--dsx-color-error); }
+.dsx-callout[data-tone='danger'] { border-color: var(--dsx-color-error); --_callout-icon-color: var(--dsx-color-error); }
 
 .dsx-callout__actions {
   display: flex;
   align-items: center;
   gap: var(--dsx-space-xs);
-  grid-column: 3;
+  grid-column: 2;
+  flex-wrap: wrap;
 }
 
+.dsx-callout:not(:has(.dsx-callout__icon)) { grid-template-columns: minmax(0, 1fr); }
+
+.dsx-callout:where(:not(:has(.dsx-callout__icon))) > :where(.dsx-callout__text, .dsx-callout__title, .dsx-callout__actions) { grid-column: 1; }
+
 .dsx-callout--soft {
   background-color: var(--dsx-color-surface-raised);
   border-color: var(--dsx-color-accent-surface, var(--dsx-color-outline-variant));
@@ -14210,33 +14907,50 @@ textarea {
   border-color: var(--dsx-color-high-contrast-border);
 }
 
-.dsx-callout[data-high-contrast='true'] .dsx-text {
+.dsx-callout[data-high-contrast='true'] .dsx-text,
+.dsx-callout[data-high-contrast='true'] .dsx-callout__title {
   color: var(--dsx-color-high-contrast);
 }
 
-.dsx-comment-thread { display: grid; gap: var(--dsx-space-md); }
+:where(.dsx-callout[data-high-contrast='true']) .dsx-callout__icon { color: var(--dsx-color-high-contrast); }
+
+.dsx-comment-thread { display: grid; gap: var(--dsx-space-md); min-width: 0; }
 
-.dsx-comment-thread__comment { display: grid; grid-template-columns: auto 1fr; gap: var(--dsx-space-sm); padding: var(--dsx-space-md); border-block-end: var(--dsx-border-width-sm) solid var(--dsx-color-outline); }
+.dsx-comment-thread__comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--dsx-space-sm); padding: var(--dsx-space-md); border-block-end: var(--dsx-border-width-sm) solid var(--dsx-color-outline); min-width: 0; overflow-wrap: anywhere; }
 
 .dsx-comment-thread__avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--dsx-size-xl); height: var(--dsx-size-xl); overflow: hidden; border-radius: var(--dsx-rounded-full); background: var(--dsx-color-surface); color: var(--dsx-color-on-surface-variant); }
 
 .dsx-comment-thread__avatar img { width: 100%; height: 100%; object-fit: cover; }
 
-.dsx-comment-thread__comment header { display: flex; align-items: baseline; gap: var(--dsx-space-sm); }
+.dsx-comment-thread__comment header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dsx-space-sm); min-width: 0; }
+
+.dsx-comment-thread__comment :where(header > *) { min-width: 0; }
 
 .dsx-comment-thread__comment time { color: var(--dsx-color-on-surface-variant); }
 
-.dsx-comment-thread__body, .dsx-comment-thread__actions { grid-column: 2; }
+.dsx-comment-thread__body, .dsx-comment-thread__actions { grid-column: 2; min-width: 0; }
 
-.dsx-comment-thread__actions { display: flex; gap: var(--dsx-space-sm); }
+.dsx-comment-thread__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
 
 .dsx-comment-thread__replies { margin-inline-start: var(--dsx-space-xl); }
 
 .dsx-comment-thread__tombstone, .dsx-comment-thread__locked { padding: var(--dsx-space-md); color: var(--dsx-color-on-surface-variant); background: var(--dsx-color-surface-sunken); }
 
-.dsx-comment-thread__composer { display: grid; gap: var(--dsx-space-sm); }
+.dsx-comment-thread__composer { display: grid; gap: var(--dsx-space-sm); min-width: 0; }
+
+.dsx-comment-thread__composer :where(textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--dsx-size-4xl); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-sunken); color: var(--dsx-color-on-surface); font-family: var(--dsx-typography-body-medium-font-family), sans-serif; font-size: var(--dsx-typography-body-medium-font-size); font-weight: var(--dsx-typography-body-medium-font-weight); line-height: var(--dsx-typography-body-medium-line-height); resize: vertical; }
+
+.dsx-comment-thread__composer :where(textarea:focus-visible) { outline: none; border-color: var(--dsx-color-accent-indicator); box-shadow: var(--dsx-shadow-focus-ring); }
+
+.dsx-comment-thread__composer :where(textarea:disabled) { background: var(--dsx-color-disabled-surface); color: var(--dsx-color-disabled-text); border-color: var(--dsx-color-disabled-border); cursor: var(--dsx-cursor-disabled, not-allowed); }
+
+.dsx-comment-thread__count { color: var(--dsx-color-on-surface-variant); font-size: var(--dsx-typography-body-small-font-size); }
+
+.dsx-comment-thread__submit { justify-self: start; max-width: 100%; }
 
-.dsx-comment-thread__composer textarea { min-height: var(--dsx-size-4xl); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-sunken); color: var(--dsx-color-on-surface); }
+.dsx-comment-thread__actions .dsx-button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
+
+.dsx-comment-thread__actions .dsx-button__content { min-width: 0; }
 
 .dsx-article-image, .dsx-before-after { margin: var(--dsx-space-md) 0; }
 
@@ -14246,13 +14960,43 @@ textarea {
 
 .dsx-article-embed, .dsx-article-poll { display: grid; gap: var(--dsx-space-sm); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-raised); }
 
+.dsx-article-image, .dsx-article-embed, .dsx-article-poll, .dsx-before-after { min-width: 0; overflow-wrap: anywhere; }
+
 .dsx-before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dsx-space-sm); overflow-x: auto; }
 
 .dsx-before-after > div { min-width: var(--dsx-size-3xl); }
 
 .dsx-before-after span { display: block; margin-block-start: var(--dsx-space-xs); color: var(--dsx-color-on-surface-variant); }
 
-.dsx-article-poll button { min-height: var(--dsx-size-lg); }
+.dsx-article-poll__option { min-width: 0; width: 100%; }
+
+.dsx-article-video { margin: var(--dsx-space-md) 0; min-width: 0; }
+
+.dsx-article-video__media { display: block; width: 100%; border-radius: var(--dsx-rounded-md); }
+
+.dsx-article-video figcaption { margin-block-start: var(--dsx-space-sm); color: var(--dsx-color-on-surface-variant); }
+
+.dsx-article-platform-tabs { min-width: 0; }
+
+.dsx-article-poll__result { display: grid; gap: var(--dsx-space-xs); min-width: 0; }
+
+.dsx-article-poll__result progress { width: 100%; accent-color: var(--dsx-color-accent-indicator); }
+
+.dsx-article-poll__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
+
+.dsx-article-editor-block { display: grid; gap: var(--dsx-space-md); min-width: 0; margin-block: var(--dsx-space-md); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface); }
+
+.dsx-article-editor-block[aria-current='true'] { border-color: var(--dsx-color-accent-border); }
+
+.dsx-article-editor-block__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dsx-space-sm); }
+
+.dsx-article-editor-block__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-xs); }
+
+.dsx-article-editor-block__fields { display: grid; gap: var(--dsx-space-sm); min-width: 0; }
+
+.dsx-article-editor-block__content { min-width: 0; }
+
+.dsx-article-editor-block__textarea { width: 100%; min-height: var(--dsx-size-4xl); display: block; padding: var(--dsx-space-sm); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-surface-raised); color: var(--dsx-color-on-surface); font: inherit; }
 
 .dsx-prose { width: 100%; min-width: 0; max-width: 68ch; overflow-wrap: anywhere; color: var(--dsx-color-on-surface); font-family: var(--dsx-typography-body-medium-font-family); line-height: 1.65; }
 
@@ -14266,11 +15010,11 @@ textarea {
 
 .dsx-prose a { color: var(--dsx-color-accent-indicator); text-underline-offset: var(--dsx-space-xs); }
 
-.dsx-prose blockquote { margin-inline: 0; padding-inline-start: var(--dsx-space-md); border-inline-start: var(--dsx-border-width-md) solid var(--dsx-color-accent-indicator); color: var(--dsx-color-on-surface-variant); }
+.dsx-prose blockquote { margin-inline: 0; padding-inline-start: var(--dsx-space-md); border-inline-start: var(--dsx-boundary-divider-width) solid var(--dsx-color-accent-border); color: var(--dsx-color-on-surface-variant); }
 
-.dsx-prose code { padding: 0 var(--dsx-space-xs); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-surface-sunken); }
+.dsx-prose code { padding: 0 var(--dsx-space-xs); border-radius: var(--dsx-rounded-sm); background: var(--dsx-code-soft-background); }
 
-.dsx-prose pre { overflow-x: auto; padding: var(--dsx-space-md); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-sunken); }
+.dsx-prose pre { overflow-x: auto; padding: var(--dsx-space-md); border-radius: var(--dsx-rounded-md); background: var(--dsx-code-soft-background); }
 
 .dsx-prose pre code { padding: 0; background: transparent; }
 
@@ -14324,7 +15068,7 @@ textarea {
 
 .dsx-table-of-contents { color: var(--dsx-color-on-surface-variant); font-family: var(--dsx-typography-body-small-font-family); font-size: var(--dsx-typography-body-small-font-size); line-height: var(--dsx-typography-body-small-line-height); }
 
-.dsx-table-of-contents[data-sticky='true'] { position: static; }
+.dsx-table-of-contents[data-sticky='true'] { position: sticky; top: var(--dsx-space-lg); }
 
 .dsx-table-of-contents ol { display: grid; gap: var(--dsx-space-xs); margin: 0; padding: 0; list-style: none; }
 
@@ -14336,7 +15080,19 @@ textarea {
 
 .dsx-table-of-contents__link[aria-current='location'] { color: var(--dsx-color-accent-indicator); font-weight: var(--dsx-typography-label-large-font-weight); }
 
-@media (min-width: 640px) { .dsx-table-of-contents[data-sticky='true'] { position: sticky; top: var(--dsx-space-lg); } }
+.dsx-table-of-contents { min-width: 0; max-width: 100%; }
+
+.dsx-table-of-contents__link {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--dsx-size-md);
+  padding-block: var(--dsx-space-xs);
+  border-radius: var(--dsx-rounded-sm);
+  overflow-wrap: anywhere;
+}
+
+.dsx-table-of-contents__link:focus-visible { outline: none; box-shadow: var(--dsx-shadow-focus-ring); }
 
 .dsx-code {
   font-family: var(--dsx-typography-code-font-family);
@@ -14348,20 +15104,19 @@ textarea {
   text-transform: var(--dsx-typography-code-text-transform);
   text-decoration: var(--dsx-typography-code-text-decoration);
   border-radius: var(--dsx-rounded-sm);
-  padding: var(--dsx-space-0-5, 2px) var(--dsx-space-1-5, 6px);
+  padding: var(--dsx-space-0-5) var(--dsx-space-1-5);
   box-sizing: border-box;
   height: fit-content;
 }
 
 .dsx-code--soft {
-  background-color: var(--dsx-color-surface-sunken);
+  background-color: var(--dsx-code-soft-background);
   color: var(--dsx-color-on-surface);
-  box-shadow: inset 0 0 0 1px var(--dsx-color-outline-variant);
 }
 
 .dsx-code--solid {
-  background-color: var(--dsx-color-primary);
-  color: var(--dsx-color-on-primary);
+  background-color: var(--dsx-color-accent-track);
+  color: var(--dsx-color-accent-contrast);
 }
 
 .dsx-code--outline {
@@ -14381,7 +15136,7 @@ textarea {
 }
 
 .dsx-code--solid.dsx-code--muted {
-  color: color-mix(in srgb, var(--dsx-color-on-primary) 65%, transparent);
+  color: var(--dsx-color-accent-contrast);
 }
 
 .dsx-code--inverse {
@@ -14389,15 +15144,15 @@ textarea {
 }
 
 .dsx-code--soft.dsx-code--inverse {
-  background-color: color-mix(in srgb, var(--dsx-color-on-high-contrast) 15%, transparent);
-  color: var(--dsx-color-on-high-contrast);
+  background-color: var(--dsx-color-inverse-background);
+  color: var(--dsx-color-on-inverse-background);
   box-shadow: none;
 }
 
 /* solid already supplies its own on-primary/background pairing — tone must not override it */
 
 .dsx-code--solid.dsx-code--inverse {
-  color: var(--dsx-color-on-primary);
+  color: var(--dsx-color-accent-contrast);
 }
 
 /* Size */
@@ -14406,15 +15161,33 @@ textarea {
   font-size: calc(var(--dsx-typography-code-font-size, 0.875em) * 0.85);
 }
 
-.dsx-code[data-size='lg'] {
+.dsx-code:where([data-size='lg']) {
   font-size: calc(var(--dsx-typography-code-font-size, 0.875em) * 1.15);
-  padding: var(--dsx-space-1-5, 6px) var(--dsx-space-sm, 8px);
 }
 
 /* Accent color — solid already tracks --dsx-color-primary via the [data-accent-color] token rescope */
 
-.dsx-code[data-accent-color]:not(.dsx-code--solid) {
-  color: var(--dsx-color-accent-9);
+.dsx-code:where([data-accent-color]):not(.dsx-code--solid, .dsx-code--inverse) {
+  color: var(--dsx-color-accent-indicator);
+}
+
+/* Contrast keeps each filled treatment paired with its own foreground. */
+
+.dsx-code:where(:not(.dsx-code--inverse))[data-high-contrast='true'] {
+  color: var(--dsx-color-high-contrast);
+}
+
+.dsx-code--soft:where(:not(.dsx-code--inverse))[data-high-contrast='true'] {
+  background-color: var(--dsx-color-high-contrast-container);
+}
+
+.dsx-code--solid[data-high-contrast='true'] {
+  background-color: var(--dsx-color-high-contrast);
+  color: var(--dsx-color-on-high-contrast);
+}
+
+.dsx-code--inverse:is(.dsx-code--outline, .dsx-code--ghost) {
+  color: var(--dsx-color-on-inverse-background);
 }
 
 .dsx-copy-button {
@@ -14511,13 +15284,38 @@ textarea {
   line-height: var(--dsx-typography-body-small-line-height);
 }
 
+:where(.dsx-heading) {
+  --dsx-r-m: initial;
+  --dsx-r-mx: initial;
+  --dsx-r-my: initial;
+  --dsx-r-mt: initial;
+  --dsx-r-mr: initial;
+  --dsx-r-mb: initial;
+  --dsx-r-ml: initial;
+  --dsx-r-margin-top: initial;
+  --dsx-r-margin-right: initial;
+  --dsx-r-margin-bottom: initial;
+  --dsx-r-margin-left: initial;
+  --dsx-r-margin-top-override: initial;
+  --dsx-r-margin-right-override: initial;
+  --dsx-r-margin-bottom-override: initial;
+  --dsx-r-margin-left-override: initial;
+  --dsx-r-p: initial;
+  --dsx-r-px: initial;
+  --dsx-r-py: initial;
+  --dsx-r-pt: initial;
+  --dsx-r-pr: initial;
+  --dsx-r-pb: initial;
+  --dsx-r-pl: initial;
+}
+
 .dsx-heading {
   box-sizing: border-box;
   margin: var(--dsx-r-m, 0);
-  margin-top: var(--dsx-r-mt, var(--dsx-r-my, var(--dsx-r-m, 0)));
-  margin-right: var(--dsx-r-mr, var(--dsx-r-mx, var(--dsx-r-m, 0)));
-  margin-bottom: var(--dsx-r-mb, var(--dsx-r-my, var(--dsx-r-m, 0)));
-  margin-left: var(--dsx-r-ml, var(--dsx-r-mx, var(--dsx-r-m, 0)));
+  margin-top: var(--dsx-r-margin-top-override, var(--dsx-r-margin-top, 0));
+  margin-right: var(--dsx-r-margin-right-override, var(--dsx-r-margin-right, 0));
+  margin-bottom: var(--dsx-r-margin-bottom-override, var(--dsx-r-margin-bottom, 0));
+  margin-left: var(--dsx-r-margin-left-override, var(--dsx-r-margin-left, 0));
   padding: var(--dsx-r-p, 0);
   padding-top: var(--dsx-r-pt, var(--dsx-r-py, var(--dsx-r-p, 0)));
   padding-right: var(--dsx-r-pr, var(--dsx-r-px, var(--dsx-r-p, 0)));
@@ -14588,612 +15386,107 @@ textarea {
 
 /* High-contrast mode — shift heading color to HC family (Pattern 3) */
 
-.dsx-heading[data-high-contrast='true'] {
+.dsx-heading:where(:not(.dsx-heading--inverse))[data-high-contrast='true'] {
   color: var(--dsx-color-high-contrast);
 }
 
 .dsx-r-heading-size-1 {
-    font-family: var(--dsx-typography-label-small-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-small-font-size);
-    font-weight: var(--dsx-typography-label-small-font-weight);
-    line-height: var(--dsx-typography-label-small-line-height);
-    letter-spacing: var(--dsx-typography-label-small-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
-    text-transform: var(--dsx-typography-label-small-text-transform);
-    text-decoration: var(--dsx-typography-label-small-text-decoration);
-  }
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
+  text-transform: var(--dsx-typography-label-small-text-transform);
+  text-decoration: var(--dsx-typography-label-small-text-decoration);
+}
 
 .dsx-r-heading-size-2 {
-    font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-medium-font-size);
-    font-weight: var(--dsx-typography-label-medium-font-weight);
-    line-height: var(--dsx-typography-label-medium-line-height);
-    letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-label-medium-text-transform);
-    text-decoration: var(--dsx-typography-label-medium-text-decoration);
-  }
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  line-height: var(--dsx-typography-label-medium-line-height);
+  letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-label-medium-text-transform);
+  text-decoration: var(--dsx-typography-label-medium-text-decoration);
+}
 
 .dsx-r-heading-size-3 {
-    font-family: var(--dsx-typography-label-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-large-font-size);
-    font-weight: var(--dsx-typography-label-large-font-weight);
-    line-height: var(--dsx-typography-label-large-line-height);
-    letter-spacing: var(--dsx-typography-label-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
-    text-transform: var(--dsx-typography-label-large-text-transform);
-    text-decoration: var(--dsx-typography-label-large-text-decoration);
-  }
+  font-family: var(--dsx-typography-label-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-large-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+  line-height: var(--dsx-typography-label-large-line-height);
+  letter-spacing: var(--dsx-typography-label-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
+  text-transform: var(--dsx-typography-label-large-text-transform);
+  text-decoration: var(--dsx-typography-label-large-text-decoration);
+}
 
 .dsx-r-heading-size-4 {
-    font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-medium-font-size);
-    font-weight: var(--dsx-typography-body-medium-font-weight);
-    line-height: var(--dsx-typography-body-medium-line-height);
-    letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-body-medium-text-transform);
-    text-decoration: var(--dsx-typography-body-medium-text-decoration);
-  }
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  font-weight: var(--dsx-typography-body-medium-font-weight);
+  line-height: var(--dsx-typography-body-medium-line-height);
+  letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-body-medium-text-transform);
+  text-decoration: var(--dsx-typography-body-medium-text-decoration);
+}
 
 .dsx-r-heading-size-5 {
-    font-family: var(--dsx-typography-body-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-large-font-size);
-    font-weight: var(--dsx-typography-body-large-font-weight);
-    line-height: var(--dsx-typography-body-large-line-height);
-    letter-spacing: var(--dsx-typography-body-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
-    text-transform: var(--dsx-typography-body-large-text-transform);
-    text-decoration: var(--dsx-typography-body-large-text-decoration);
-  }
-
-.dsx-r-heading-size-6 {
-    font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-medium-font-size);
-    font-weight: var(--dsx-typography-headline-medium-font-weight);
-    line-height: var(--dsx-typography-headline-medium-line-height);
-    letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-medium-text-transform);
-    text-decoration: var(--dsx-typography-headline-medium-text-decoration);
-  }
-
-.dsx-r-heading-size-7 {
-    font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-large-font-size);
-    font-weight: var(--dsx-typography-headline-large-font-weight);
-    line-height: var(--dsx-typography-headline-large-line-height);
-    letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-large-text-transform);
-    text-decoration: var(--dsx-typography-headline-large-text-decoration);
-  }
-
-.dsx-r-heading-size-8 {
-    font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-medium-font-size);
-    font-weight: var(--dsx-typography-display-medium-font-weight);
-    line-height: var(--dsx-typography-display-medium-line-height);
-    letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-display-medium-text-transform);
-    text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  }
-
-.dsx-r-heading-size-9 {
-    font-family: var(--dsx-typography-display-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-large-font-size);
-    font-weight: var(--dsx-typography-display-large-font-weight);
-    line-height: var(--dsx-typography-display-large-line-height);
-    letter-spacing: var(--dsx-typography-display-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
-    text-transform: var(--dsx-typography-display-large-text-transform);
-    text-decoration: var(--dsx-typography-display-large-text-decoration);
-  }
-
-@media(min-width: 640px) {
-  .sm\:dsx-r-heading-size-1 {
-    font-family: var(--dsx-typography-label-small-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-small-font-size);
-    font-weight: var(--dsx-typography-label-small-font-weight);
-    line-height: var(--dsx-typography-label-small-line-height);
-    letter-spacing: var(--dsx-typography-label-small-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
-    text-transform: var(--dsx-typography-label-small-text-transform);
-    text-decoration: var(--dsx-typography-label-small-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-2 {
-    font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-medium-font-size);
-    font-weight: var(--dsx-typography-label-medium-font-weight);
-    line-height: var(--dsx-typography-label-medium-line-height);
-    letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-label-medium-text-transform);
-    text-decoration: var(--dsx-typography-label-medium-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-3 {
-    font-family: var(--dsx-typography-label-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-large-font-size);
-    font-weight: var(--dsx-typography-label-large-font-weight);
-    line-height: var(--dsx-typography-label-large-line-height);
-    letter-spacing: var(--dsx-typography-label-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
-    text-transform: var(--dsx-typography-label-large-text-transform);
-    text-decoration: var(--dsx-typography-label-large-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-4 {
-    font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-medium-font-size);
-    font-weight: var(--dsx-typography-body-medium-font-weight);
-    line-height: var(--dsx-typography-body-medium-line-height);
-    letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-body-medium-text-transform);
-    text-decoration: var(--dsx-typography-body-medium-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-5 {
-    font-family: var(--dsx-typography-body-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-large-font-size);
-    font-weight: var(--dsx-typography-body-large-font-weight);
-    line-height: var(--dsx-typography-body-large-line-height);
-    letter-spacing: var(--dsx-typography-body-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
-    text-transform: var(--dsx-typography-body-large-text-transform);
-    text-decoration: var(--dsx-typography-body-large-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-6 {
-    font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-medium-font-size);
-    font-weight: var(--dsx-typography-headline-medium-font-weight);
-    line-height: var(--dsx-typography-headline-medium-line-height);
-    letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-medium-text-transform);
-    text-decoration: var(--dsx-typography-headline-medium-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-7 {
-    font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-large-font-size);
-    font-weight: var(--dsx-typography-headline-large-font-weight);
-    line-height: var(--dsx-typography-headline-large-line-height);
-    letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-large-text-transform);
-    text-decoration: var(--dsx-typography-headline-large-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-8 {
-    font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-medium-font-size);
-    font-weight: var(--dsx-typography-display-medium-font-weight);
-    line-height: var(--dsx-typography-display-medium-line-height);
-    letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-display-medium-text-transform);
-    text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  }
-
-  .sm\:dsx-r-heading-size-9 {
-    font-family: var(--dsx-typography-display-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-large-font-size);
-    font-weight: var(--dsx-typography-display-large-font-weight);
-    line-height: var(--dsx-typography-display-large-line-height);
-    letter-spacing: var(--dsx-typography-display-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
-    text-transform: var(--dsx-typography-display-large-text-transform);
-    text-decoration: var(--dsx-typography-display-large-text-decoration);
-  }
+  font-family: var(--dsx-typography-body-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-large-font-size);
+  font-weight: var(--dsx-typography-body-large-font-weight);
+  line-height: var(--dsx-typography-body-large-line-height);
+  letter-spacing: var(--dsx-typography-body-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
+  text-transform: var(--dsx-typography-body-large-text-transform);
+  text-decoration: var(--dsx-typography-body-large-text-decoration);
 }
 
-@media(min-width: 768px) {
-  .md\:dsx-r-heading-size-1 {
-    font-family: var(--dsx-typography-label-small-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-small-font-size);
-    font-weight: var(--dsx-typography-label-small-font-weight);
-    line-height: var(--dsx-typography-label-small-line-height);
-    letter-spacing: var(--dsx-typography-label-small-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
-    text-transform: var(--dsx-typography-label-small-text-transform);
-    text-decoration: var(--dsx-typography-label-small-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-2 {
-    font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-medium-font-size);
-    font-weight: var(--dsx-typography-label-medium-font-weight);
-    line-height: var(--dsx-typography-label-medium-line-height);
-    letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-label-medium-text-transform);
-    text-decoration: var(--dsx-typography-label-medium-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-3 {
-    font-family: var(--dsx-typography-label-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-large-font-size);
-    font-weight: var(--dsx-typography-label-large-font-weight);
-    line-height: var(--dsx-typography-label-large-line-height);
-    letter-spacing: var(--dsx-typography-label-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
-    text-transform: var(--dsx-typography-label-large-text-transform);
-    text-decoration: var(--dsx-typography-label-large-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-4 {
-    font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-medium-font-size);
-    font-weight: var(--dsx-typography-body-medium-font-weight);
-    line-height: var(--dsx-typography-body-medium-line-height);
-    letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-body-medium-text-transform);
-    text-decoration: var(--dsx-typography-body-medium-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-5 {
-    font-family: var(--dsx-typography-body-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-large-font-size);
-    font-weight: var(--dsx-typography-body-large-font-weight);
-    line-height: var(--dsx-typography-body-large-line-height);
-    letter-spacing: var(--dsx-typography-body-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
-    text-transform: var(--dsx-typography-body-large-text-transform);
-    text-decoration: var(--dsx-typography-body-large-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-6 {
-    font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-medium-font-size);
-    font-weight: var(--dsx-typography-headline-medium-font-weight);
-    line-height: var(--dsx-typography-headline-medium-line-height);
-    letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-medium-text-transform);
-    text-decoration: var(--dsx-typography-headline-medium-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-7 {
-    font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-large-font-size);
-    font-weight: var(--dsx-typography-headline-large-font-weight);
-    line-height: var(--dsx-typography-headline-large-line-height);
-    letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-large-text-transform);
-    text-decoration: var(--dsx-typography-headline-large-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-8 {
-    font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-medium-font-size);
-    font-weight: var(--dsx-typography-display-medium-font-weight);
-    line-height: var(--dsx-typography-display-medium-line-height);
-    letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-display-medium-text-transform);
-    text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  }
-
-  .md\:dsx-r-heading-size-9 {
-    font-family: var(--dsx-typography-display-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-large-font-size);
-    font-weight: var(--dsx-typography-display-large-font-weight);
-    line-height: var(--dsx-typography-display-large-line-height);
-    letter-spacing: var(--dsx-typography-display-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
-    text-transform: var(--dsx-typography-display-large-text-transform);
-    text-decoration: var(--dsx-typography-display-large-text-decoration);
-  }
+.dsx-r-heading-size-6 {
+  font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-headline-medium-font-size);
+  font-weight: var(--dsx-typography-headline-medium-font-weight);
+  line-height: var(--dsx-typography-headline-medium-line-height);
+  letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-headline-medium-text-transform);
+  text-decoration: var(--dsx-typography-headline-medium-text-decoration);
 }
 
-@media(min-width: 1024px) {
-  .lg\:dsx-r-heading-size-1 {
-    font-family: var(--dsx-typography-label-small-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-small-font-size);
-    font-weight: var(--dsx-typography-label-small-font-weight);
-    line-height: var(--dsx-typography-label-small-line-height);
-    letter-spacing: var(--dsx-typography-label-small-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
-    text-transform: var(--dsx-typography-label-small-text-transform);
-    text-decoration: var(--dsx-typography-label-small-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-2 {
-    font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-medium-font-size);
-    font-weight: var(--dsx-typography-label-medium-font-weight);
-    line-height: var(--dsx-typography-label-medium-line-height);
-    letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-label-medium-text-transform);
-    text-decoration: var(--dsx-typography-label-medium-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-3 {
-    font-family: var(--dsx-typography-label-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-large-font-size);
-    font-weight: var(--dsx-typography-label-large-font-weight);
-    line-height: var(--dsx-typography-label-large-line-height);
-    letter-spacing: var(--dsx-typography-label-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
-    text-transform: var(--dsx-typography-label-large-text-transform);
-    text-decoration: var(--dsx-typography-label-large-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-4 {
-    font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-medium-font-size);
-    font-weight: var(--dsx-typography-body-medium-font-weight);
-    line-height: var(--dsx-typography-body-medium-line-height);
-    letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-body-medium-text-transform);
-    text-decoration: var(--dsx-typography-body-medium-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-5 {
-    font-family: var(--dsx-typography-body-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-large-font-size);
-    font-weight: var(--dsx-typography-body-large-font-weight);
-    line-height: var(--dsx-typography-body-large-line-height);
-    letter-spacing: var(--dsx-typography-body-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
-    text-transform: var(--dsx-typography-body-large-text-transform);
-    text-decoration: var(--dsx-typography-body-large-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-6 {
-    font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-medium-font-size);
-    font-weight: var(--dsx-typography-headline-medium-font-weight);
-    line-height: var(--dsx-typography-headline-medium-line-height);
-    letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-medium-text-transform);
-    text-decoration: var(--dsx-typography-headline-medium-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-7 {
-    font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-large-font-size);
-    font-weight: var(--dsx-typography-headline-large-font-weight);
-    line-height: var(--dsx-typography-headline-large-line-height);
-    letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-large-text-transform);
-    text-decoration: var(--dsx-typography-headline-large-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-8 {
-    font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-medium-font-size);
-    font-weight: var(--dsx-typography-display-medium-font-weight);
-    line-height: var(--dsx-typography-display-medium-line-height);
-    letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-display-medium-text-transform);
-    text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  }
-
-  .lg\:dsx-r-heading-size-9 {
-    font-family: var(--dsx-typography-display-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-large-font-size);
-    font-weight: var(--dsx-typography-display-large-font-weight);
-    line-height: var(--dsx-typography-display-large-line-height);
-    letter-spacing: var(--dsx-typography-display-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
-    text-transform: var(--dsx-typography-display-large-text-transform);
-    text-decoration: var(--dsx-typography-display-large-text-decoration);
-  }
+.dsx-r-heading-size-7 {
+  font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-headline-large-font-size);
+  font-weight: var(--dsx-typography-headline-large-font-weight);
+  line-height: var(--dsx-typography-headline-large-line-height);
+  letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
+  text-transform: var(--dsx-typography-headline-large-text-transform);
+  text-decoration: var(--dsx-typography-headline-large-text-decoration);
 }
 
-@media(min-width: 1280px) {
-  .xl\:dsx-r-heading-size-1 {
-    font-family: var(--dsx-typography-label-small-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-small-font-size);
-    font-weight: var(--dsx-typography-label-small-font-weight);
-    line-height: var(--dsx-typography-label-small-line-height);
-    letter-spacing: var(--dsx-typography-label-small-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
-    text-transform: var(--dsx-typography-label-small-text-transform);
-    text-decoration: var(--dsx-typography-label-small-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-2 {
-    font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-medium-font-size);
-    font-weight: var(--dsx-typography-label-medium-font-weight);
-    line-height: var(--dsx-typography-label-medium-line-height);
-    letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-label-medium-text-transform);
-    text-decoration: var(--dsx-typography-label-medium-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-3 {
-    font-family: var(--dsx-typography-label-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-large-font-size);
-    font-weight: var(--dsx-typography-label-large-font-weight);
-    line-height: var(--dsx-typography-label-large-line-height);
-    letter-spacing: var(--dsx-typography-label-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
-    text-transform: var(--dsx-typography-label-large-text-transform);
-    text-decoration: var(--dsx-typography-label-large-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-4 {
-    font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-medium-font-size);
-    font-weight: var(--dsx-typography-body-medium-font-weight);
-    line-height: var(--dsx-typography-body-medium-line-height);
-    letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-body-medium-text-transform);
-    text-decoration: var(--dsx-typography-body-medium-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-5 {
-    font-family: var(--dsx-typography-body-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-large-font-size);
-    font-weight: var(--dsx-typography-body-large-font-weight);
-    line-height: var(--dsx-typography-body-large-line-height);
-    letter-spacing: var(--dsx-typography-body-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
-    text-transform: var(--dsx-typography-body-large-text-transform);
-    text-decoration: var(--dsx-typography-body-large-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-6 {
-    font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-medium-font-size);
-    font-weight: var(--dsx-typography-headline-medium-font-weight);
-    line-height: var(--dsx-typography-headline-medium-line-height);
-    letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-medium-text-transform);
-    text-decoration: var(--dsx-typography-headline-medium-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-7 {
-    font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-large-font-size);
-    font-weight: var(--dsx-typography-headline-large-font-weight);
-    line-height: var(--dsx-typography-headline-large-line-height);
-    letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-large-text-transform);
-    text-decoration: var(--dsx-typography-headline-large-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-8 {
-    font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-medium-font-size);
-    font-weight: var(--dsx-typography-display-medium-font-weight);
-    line-height: var(--dsx-typography-display-medium-line-height);
-    letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-display-medium-text-transform);
-    text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  }
-
-  .xl\:dsx-r-heading-size-9 {
-    font-family: var(--dsx-typography-display-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-large-font-size);
-    font-weight: var(--dsx-typography-display-large-font-weight);
-    line-height: var(--dsx-typography-display-large-line-height);
-    letter-spacing: var(--dsx-typography-display-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
-    text-transform: var(--dsx-typography-display-large-text-transform);
-    text-decoration: var(--dsx-typography-display-large-text-decoration);
-  }
+.dsx-r-heading-size-8 {
+  font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-display-medium-font-size);
+  font-weight: var(--dsx-typography-display-medium-font-weight);
+  line-height: var(--dsx-typography-display-medium-line-height);
+  letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-display-medium-text-transform);
+  text-decoration: var(--dsx-typography-display-medium-text-decoration);
 }
 
-@media(min-width: 1536px) {
-  .\32 xl\:dsx-r-heading-size-1 {
-    font-family: var(--dsx-typography-label-small-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-small-font-size);
-    font-weight: var(--dsx-typography-label-small-font-weight);
-    line-height: var(--dsx-typography-label-small-line-height);
-    letter-spacing: var(--dsx-typography-label-small-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
-    text-transform: var(--dsx-typography-label-small-text-transform);
-    text-decoration: var(--dsx-typography-label-small-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-2 {
-    font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-medium-font-size);
-    font-weight: var(--dsx-typography-label-medium-font-weight);
-    line-height: var(--dsx-typography-label-medium-line-height);
-    letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-label-medium-text-transform);
-    text-decoration: var(--dsx-typography-label-medium-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-3 {
-    font-family: var(--dsx-typography-label-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-label-large-font-size);
-    font-weight: var(--dsx-typography-label-large-font-weight);
-    line-height: var(--dsx-typography-label-large-line-height);
-    letter-spacing: var(--dsx-typography-label-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
-    text-transform: var(--dsx-typography-label-large-text-transform);
-    text-decoration: var(--dsx-typography-label-large-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-4 {
-    font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-medium-font-size);
-    font-weight: var(--dsx-typography-body-medium-font-weight);
-    line-height: var(--dsx-typography-body-medium-line-height);
-    letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-body-medium-text-transform);
-    text-decoration: var(--dsx-typography-body-medium-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-5 {
-    font-family: var(--dsx-typography-body-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-body-large-font-size);
-    font-weight: var(--dsx-typography-body-large-font-weight);
-    line-height: var(--dsx-typography-body-large-line-height);
-    letter-spacing: var(--dsx-typography-body-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
-    text-transform: var(--dsx-typography-body-large-text-transform);
-    text-decoration: var(--dsx-typography-body-large-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-6 {
-    font-family: var(--dsx-typography-headline-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-medium-font-size);
-    font-weight: var(--dsx-typography-headline-medium-font-weight);
-    line-height: var(--dsx-typography-headline-medium-line-height);
-    letter-spacing: var(--dsx-typography-headline-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-medium-text-transform);
-    text-decoration: var(--dsx-typography-headline-medium-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-7 {
-    font-family: var(--dsx-typography-headline-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-headline-large-font-size);
-    font-weight: var(--dsx-typography-headline-large-font-weight);
-    line-height: var(--dsx-typography-headline-large-line-height);
-    letter-spacing: var(--dsx-typography-headline-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-headline-large-font-variation-settings);
-    text-transform: var(--dsx-typography-headline-large-text-transform);
-    text-decoration: var(--dsx-typography-headline-large-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-8 {
-    font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-medium-font-size);
-    font-weight: var(--dsx-typography-display-medium-font-weight);
-    line-height: var(--dsx-typography-display-medium-line-height);
-    letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
-    text-transform: var(--dsx-typography-display-medium-text-transform);
-    text-decoration: var(--dsx-typography-display-medium-text-decoration);
-  }
-
-  .\32 xl\:dsx-r-heading-size-9 {
-    font-family: var(--dsx-typography-display-large-font-family), sans-serif;
-    font-size: var(--dsx-typography-display-large-font-size);
-    font-weight: var(--dsx-typography-display-large-font-weight);
-    line-height: var(--dsx-typography-display-large-line-height);
-    letter-spacing: var(--dsx-typography-display-large-letter-spacing);
-    font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
-    text-transform: var(--dsx-typography-display-large-text-transform);
-    text-decoration: var(--dsx-typography-display-large-text-decoration);
-  }
+.dsx-r-heading-size-9 {
+  font-family: var(--dsx-typography-display-large-font-family), sans-serif;
+  font-size: var(--dsx-typography-display-large-font-size);
+  font-weight: var(--dsx-typography-display-large-font-weight);
+  line-height: var(--dsx-typography-display-large-line-height);
+  letter-spacing: var(--dsx-typography-display-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-display-large-font-variation-settings);
+  text-transform: var(--dsx-typography-display-large-text-transform);
+  text-decoration: var(--dsx-typography-display-large-text-decoration);
 }
 
 .dsx-icon-button {
@@ -15417,35 +15710,34 @@ textarea {
   color: currentColor;
 }
 
+/* Native inline flow keeps links inside the surrounding sentence. */
+
 .dsx-link {
   box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--dsx-space-xs);
+  display: inline;
+  /* Native inline boxes ignore these; standalone flex/grid items keep a 24px floor. */
+  min-inline-size: calc(var(--dsx-size-md) / var(--dsx-density-scale));
+  min-block-size: calc(var(--dsx-size-md) / var(--dsx-density-scale));
   cursor: pointer;
+  overflow-wrap: anywhere;
   text-decoration: none;
-  color: var(--dsx-color-primary);
-  transition: color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
-}
-
-/* Accent color overrides */
-
-.dsx-link[data-accent-color='rift'] {
-  color: var(--dsx-color-accent-9);
-}
-
-.dsx-link[data-accent-color='warp'] {
-  color: var(--dsx-color-accent-9);
+  text-decoration-color: currentColor;
+  text-decoration-style: solid;
+  text-decoration-thickness: min(2px, max(1px, 0.05em));
+  text-underline-offset: calc(0.025em + 2px);
+  color: var(--dsx-color-accent-indicator);
+  transition: color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
 }
 
-.dsx-link[data-accent-color='ray'] {
-  color: var(--dsx-color-accent-9);
+.dsx-link :where(svg) {
+  vertical-align: middle;
+  margin-inline-end: var(--dsx-space-xs);
 }
 
-.dsx-link:focus-visible {
+.dsx-link:where(:focus-visible) {
   border-radius: var(--dsx-rounded-sm);
-  outline: 2px solid var(--dsx-effect-ring-focus);
-  outline-offset: var(--dsx-focus-ring-offset, 2px);
+  outline: var(--dsx-border-width-lg) solid var(--dsx-effect-ring-focus);
+  outline-offset: var(--dsx-space-0-5);
 }
 
 .dsx-link--muted {
@@ -15458,88 +15750,34 @@ textarea {
 
 .dsx-link--always {
   text-decoration-line: underline;
-  text-decoration-style: solid;
-  /* Browser-native underline thickness heuristic: min(2px, max(1px, 0.05em)) adapts to font size */
-  text-decoration-thickness: min(2px, max(1px, 0.05em));
-  /* Browser-native underline offset heuristic: calc(0.025em + 2px) for optical alignment */
-  text-underline-offset: calc(0.025em + 2px);
-  text-decoration-color: var(--dsx-color-primary);
-}
-
-.dsx-link[data-accent-color='rift'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-accent-9);
-}
-
-.dsx-link[data-accent-color='warp'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-accent-9);
-}
-
-.dsx-link[data-accent-color='ray'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-accent-9);
 }
 
-.dsx-link--hover {
+.dsx-link--auto,
+.dsx-link--hover,
+.dsx-link--none {
   text-decoration-line: none;
 }
 
 @media (hover: hover) {
-  .dsx-link--hover:hover {
+  .dsx-link:where(.dsx-link--auto, .dsx-link--hover):hover {
     text-decoration-line: underline;
-    text-decoration-style: solid;
-    /* Browser-native underline thickness heuristic: min(2px, max(1px, 0.05em)) adapts to font size */
-    text-decoration-thickness: min(2px, max(1px, 0.05em));
-    /* Browser-native underline offset heuristic: calc(0.025em + 2px) for optical alignment */
-    text-underline-offset: calc(0.025em + 2px);
-    text-decoration-color: var(--dsx-color-primary);
-  }
-
-  .dsx-link[data-accent-color='rift'].dsx-link--hover:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-
-  .dsx-link[data-accent-color='warp'].dsx-link--hover:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-
-  .dsx-link[data-accent-color='ray'].dsx-link--hover:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
   }
 }
 
-.dsx-link--auto {
-  text-decoration-line: none;
-}
+/* Default links remain identifiable on touch; explicit hover/none stay opt-in. */
 
-@media (hover: hover) {
-  .dsx-link--auto:hover {
+@media (hover: none) {
+  .dsx-link--auto {
     text-decoration-line: underline;
-    text-decoration-style: solid;
-    /* Browser-native underline thickness heuristic: min(2px, max(1px, 0.05em)) adapts to font size */
-    text-decoration-thickness: min(2px, max(1px, 0.05em));
-    /* Browser-native underline offset heuristic: calc(0.025em + 2px) for optical alignment */
-    text-underline-offset: calc(0.025em + 2px);
-    text-decoration-color: var(--dsx-color-primary);
-  }
-
-  .dsx-link[data-accent-color='rift'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-
-  .dsx-link[data-accent-color='warp'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
-  }
-
-  .dsx-link[data-accent-color='ray'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-accent-9);
   }
 }
 
-a.dsx-link--none,
-button.dsx-link--none {
-  text-decoration-line: none;
+.dsx-link:where(.dsx-link--auto, .dsx-link--hover):focus-visible,
+.dsx-link:where(.dsx-link--auto, .dsx-link--hover):active {
+  text-decoration-line: underline;
 }
 
-/* Size scale — mirrors Text/Heading's responsive 1-9 font-size mapping */
+/* Preserve the existing single-value font-size mapping. */
 
 .dsx-link[data-size='1'] { font-size: var(--dsx-typography-label-small-font-size); }
 
@@ -15559,20 +15797,13 @@ button.dsx-link--none {
 
 .dsx-link[data-size='9'] { font-size: var(--dsx-typography-display-large-font-size); }
 
-/* High-contrast mode — shift link color to HC family (Pattern 3) */
-
-.dsx-link[data-high-contrast='true'] {
+.dsx-link:where(:not(.dsx-link--inverse))[data-high-contrast='true'] {
   color: var(--dsx-color-high-contrast);
 }
 
-.dsx-link[data-high-contrast='true'].dsx-link--always {
-  text-decoration-color: var(--dsx-color-high-contrast);
-}
-
-@media (hover: hover) {
-  .dsx-link[data-high-contrast='true'].dsx-link--hover:hover,
-  .dsx-link[data-high-contrast='true'].dsx-link--auto:hover {
-    text-decoration-color: var(--dsx-color-high-contrast);
+@media (prefers-reduced-motion: reduce) {
+  .dsx-link {
+    transition: none;
   }
 }
 
@@ -16249,13 +16480,39 @@ button.dsx-link--none {
   background: var(--dsx-color-tertiary);
 }
 
+:where(.dsx-text) {
+  --dsx-r-margin-top: initial;
+  --dsx-r-margin-right: initial;
+  --dsx-r-margin-bottom: initial;
+  --dsx-r-margin-left: initial;
+  --dsx-r-margin-top-override: initial;
+  --dsx-r-margin-right-override: initial;
+  --dsx-r-margin-bottom-override: initial;
+  --dsx-r-margin-left-override: initial;
+}
+
 .dsx-text {
+  /* Spacing belongs to this element, not an enclosing layout primitive. */
+  --dsx-r-m: initial;
+  --dsx-r-mx: initial;
+  --dsx-r-my: initial;
+  --dsx-r-mt: initial;
+  --dsx-r-mr: initial;
+  --dsx-r-mb: initial;
+  --dsx-r-ml: initial;
+  --dsx-r-p: initial;
+  --dsx-r-px: initial;
+  --dsx-r-py: initial;
+  --dsx-r-pt: initial;
+  --dsx-r-pr: initial;
+  --dsx-r-pb: initial;
+  --dsx-r-pl: initial;
   box-sizing: border-box;
   margin: var(--dsx-r-m, 0);
-  margin-top: var(--dsx-r-mt, var(--dsx-r-my, var(--dsx-r-m, 0)));
-  margin-right: var(--dsx-r-mr, var(--dsx-r-mx, var(--dsx-r-m, 0)));
-  margin-bottom: var(--dsx-r-mb, var(--dsx-r-my, var(--dsx-r-m, 0)));
-  margin-left: var(--dsx-r-ml, var(--dsx-r-mx, var(--dsx-r-m, 0)));
+  margin-top: var(--dsx-r-margin-top-override, var(--dsx-r-margin-top, 0));
+  margin-right: var(--dsx-r-margin-right-override, var(--dsx-r-margin-right, 0));
+  margin-bottom: var(--dsx-r-margin-bottom-override, var(--dsx-r-margin-bottom, 0));
+  margin-left: var(--dsx-r-margin-left-override, var(--dsx-r-margin-left, 0));
   padding: var(--dsx-r-p, 0);
   padding-top: var(--dsx-r-pt, var(--dsx-r-py, var(--dsx-r-p, 0)));
   padding-right: var(--dsx-r-pr, var(--dsx-r-px, var(--dsx-r-p, 0)));
@@ -16338,42 +16595,51 @@ button.dsx-link--none {
   text-decoration: var(--dsx-typography-label-small-text-decoration);
 }
 
-/* Responsive size scale (1-9) — font-size only, overrides variant when both provided */
+/* Existing size scale (1-9) — font size and matching role rhythm. */
 
 .dsx-r-text-size-1 {
   font-size: var(--dsx-typography-label-small-font-size);
+  line-height: var(--dsx-typography-label-small-line-height);
 }
 
 .dsx-r-text-size-2 {
   font-size: var(--dsx-typography-label-medium-font-size);
+  line-height: var(--dsx-typography-label-medium-line-height);
 }
 
 .dsx-r-text-size-3 {
   font-size: var(--dsx-typography-body-medium-font-size);
+  line-height: var(--dsx-typography-body-medium-line-height);
 }
 
 .dsx-r-text-size-4 {
   font-size: var(--dsx-typography-body-large-font-size);
+  line-height: var(--dsx-typography-body-large-line-height);
 }
 
 .dsx-r-text-size-5 {
   font-size: var(--dsx-typography-label-large-font-size);
+  line-height: var(--dsx-typography-label-large-line-height);
 }
 
 .dsx-r-text-size-6 {
   font-size: var(--dsx-typography-headline-medium-font-size);
+  line-height: var(--dsx-typography-headline-medium-line-height);
 }
 
 .dsx-r-text-size-7 {
   font-size: var(--dsx-typography-headline-large-font-size);
+  line-height: var(--dsx-typography-headline-large-line-height);
 }
 
 .dsx-r-text-size-8 {
   font-size: var(--dsx-typography-display-medium-font-size);
+  line-height: var(--dsx-typography-display-medium-line-height);
 }
 
 .dsx-r-text-size-9 {
   font-size: var(--dsx-typography-display-large-font-size);
+  line-height: var(--dsx-typography-display-large-line-height);
 }
 
 .dsx-text--muted {
@@ -16395,11 +16661,14 @@ button.dsx-link--none {
 
 /* High-contrast mode — shift text color to HC family (Pattern 3) */
 
-.dsx-text[data-high-contrast='true'] {
+.dsx-text:where(:not(.dsx-text--inverse))[data-high-contrast='true'] {
   color: var(--dsx-color-high-contrast);
 }
 
 .dsx-theme-panel {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--dsx-space-xs);
@@ -16412,6 +16681,8 @@ button.dsx-link--none {
 }
 
 .dsx-theme-panel__row {
+  flex-wrap: wrap;
+  min-width: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -16420,6 +16691,7 @@ button.dsx-link--none {
 }
 
 .dsx-theme-panel__label {
+  overflow-wrap: anywhere;
   color: var(--dsx-color-on-surface-variant);
 }
 
@@ -16462,6 +16734,7 @@ button.dsx-link--none {
 
 .dsx-text-field__input {
   flex: 1;
+  min-inline-size: 0;
   border: 0;
   background: transparent;
   color: var(--dsx-color-on-surface);
@@ -17214,8 +17487,12 @@ span.dsx-filter-bar__condition-label {
 }
 
 .dsx-stepper {
+  --dsx-stepper-indicator-size: var(--dsx-size-lg);
   display: flex;
+  flex-wrap: wrap;
   box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-stepper--horizontal {
@@ -17268,25 +17545,25 @@ span.dsx-filter-bar__condition-label {
 }
 
 /* Connector, ported from vertical mode's already-correct technique: an absolutely-positioned
-   line anchored directly to the Indicator's own known geometry (--dsx-size-md is its
+   line anchored directly to the Indicator's own known geometry (--dsx-stepper-indicator-size is its
    diameter), not a flex-sibling that only knows about leftover space between item boxes.
    Starts right at the Indicator's own right edge (left: --dsx-size-md) and extends past this
    item's own right edge into the inter-item `gap` above (right: -gap), landing exactly at the
    start of the next item's box — which is where its Indicator begins, since Indicator is
    always flush-left in the item column. */
 
-.dsx-stepper--horizontal .dsx-stepper__item:not(:last-child)::after {
+.dsx-stepper--horizontal .dsx-stepper__item:has(~ .dsx-stepper__item)::after {
   content: '';
   position: absolute;
-  top: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-lg) / 2);
-  left: var(--dsx-size-md);
+  top: calc(var(--dsx-stepper-indicator-size) / 2 - var(--dsx-border-width-lg) / 2);
+  left: var(--dsx-stepper-indicator-size);
   right: calc(-1 * var(--dsx-space-lg));
   height: var(--dsx-border-width-lg);
   background: var(--dsx-color-outline-variant);
   border-radius: var(--dsx-rounded-full);
 }
 
-.dsx-stepper--horizontal .dsx-stepper__item--complete:not(:last-child)::after {
+.dsx-stepper--horizontal .dsx-stepper__item--complete:has(~ .dsx-stepper__item)::after {
   background: var(--dsx-color-primary);
 }
 
@@ -17308,24 +17585,24 @@ span.dsx-filter-bar__condition-label {
   width: 100%;
 }
 
-.dsx-stepper--vertical .dsx-stepper__item:last-child {
+.dsx-stepper--vertical .dsx-stepper__item:not(:has(~ .dsx-stepper__item)) {
   padding-bottom: 0;
 }
 
 /* Connector line drawn from bottom of indicator to bottom of item (padding area) */
 
-.dsx-stepper--vertical .dsx-stepper__item:not(:last-child)::after {
+.dsx-stepper--vertical .dsx-stepper__item:has(~ .dsx-stepper__item)::after {
   content: '';
   position: absolute;
-  top: var(--dsx-size-md);
-  left: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-lg) / 2);
+  top: var(--dsx-stepper-indicator-size);
+  left: calc(var(--dsx-stepper-indicator-size) / 2 - var(--dsx-border-width-lg) / 2);
   bottom: 0;
   width: var(--dsx-border-width-lg);
   background: var(--dsx-color-outline-variant);
   border-radius: var(--dsx-rounded-full);
 }
 
-.dsx-stepper--vertical .dsx-stepper__item--complete:not(:last-child)::after {
+.dsx-stepper--vertical .dsx-stepper__item--complete:has(~ .dsx-stepper__item)::after {
   background: var(--dsx-color-primary);
 }
 
@@ -17336,12 +17613,13 @@ span.dsx-filter-bar__condition-label {
 }
 
 .dsx-stepper__indicator {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: var(--dsx-size-md);
-  height: var(--dsx-size-md);
+  width: var(--dsx-stepper-indicator-size);
+  height: var(--dsx-stepper-indicator-size);
   border-radius: var(--dsx-rounded-full);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
@@ -17375,6 +17653,7 @@ span.dsx-filter-bar__condition-label {
 }
 
 .dsx-stepper__label {
+  overflow-wrap: anywhere;
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
   font-weight: var(--dsx-typography-label-large-font-weight);
@@ -17390,6 +17669,7 @@ span.dsx-filter-bar__condition-label {
 }
 
 .dsx-stepper__description {
+  overflow-wrap: anywhere;
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);
   color: var(--dsx-color-on-surface-variant);
@@ -17417,12 +17697,22 @@ span.dsx-filter-bar__condition-label {
   margin-top: var(--dsx-space-lg);
 }
 
+.dsx-stepper[data-size='sm'] { --dsx-stepper-indicator-size: var(--dsx-size-md); }
+
+.dsx-stepper[data-size='lg'] { --dsx-stepper-indicator-size: var(--dsx-size-xl); }
+
+.dsx-stepper__item > :not(.dsx-stepper__indicator) { min-width: 0; max-width: 100%; }
+
 .dsx-notification-center {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-notification-center--popover {
-  width: 320px;
+  width: var(--dsx-sheet-width-sm);
   border-radius: var(--dsx-rounded-lg);
   border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   background: var(--dsx-color-panel-translucent);
@@ -17440,6 +17730,9 @@ span.dsx-filter-bar__condition-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  gap: var(--dsx-space-sm);
   padding: var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
 }
@@ -17452,6 +17745,8 @@ span.dsx-filter-bar__condition-label {
 }
 
 .dsx-notification-center__list {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
   max-height: 400px;
 }
@@ -17463,16 +17758,36 @@ span.dsx-filter-bar__condition-label {
   padding: var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
   cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border-top: 0;
+  border-right: 0;
+  border-left: var(--dsx-border-width-sm) solid transparent;
+  overflow-wrap: anywhere;
 }
 
 .dsx-notification-center__item:last-child {
   border-bottom: none;
 }
 
-.dsx-notification-center__item:hover {
+.dsx-notification-center__item:hover,
+.dsx-notification-center__item:focus-visible {
   background: var(--dsx-effect-hover-ghost);
 }
 
+.dsx-notification-center__item:focus-visible {
+  outline: var(--dsx-border-width-md) solid var(--dsx-color-primary);
+  outline-offset: calc(-1 * var(--dsx-border-width-md));
+}
+
+.dsx-notification-center__item:active {
+  background: var(--dsx-effect-pressed-layer);
+}
+
 .dsx-notification-center__item--unread {
   background: var(--dsx-color-surface-raised);
   border-left: var(--dsx-border-width-sm) solid var(--dsx-color-primary);
@@ -17501,26 +17816,37 @@ span.dsx-filter-bar__condition-label {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   padding: var(--dsx-space-sm);
   border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
 }
 
-.dsx-notification-center__trigger {
+.dsx-notification-center__trigger.dsx-icon-button {
   position: relative;
   display: inline-flex;
   align-items: center;
+  gap: 0;
+  width: auto;
+  min-width: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
+  height: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
+  padding-inline: var(--dsx-space-sm);
+}
+
+.dsx-notification-center__trigger .dsx-icon-button__content {
+  gap: 0;
 }
 
 .dsx-notification-center__badge {
-  position: absolute;
-  top: calc(-1 * var(--dsx-space-xs));
-  right: calc(-1 * var(--dsx-space-xs));
-  min-width: var(--dsx-size-xs);
-  height: var(--dsx-size-xs);
+  position: relative;
+  top: calc(-1 * var(--dsx-space-sm));
+  margin-inline-start: calc(-1 * var(--dsx-space-xs));
+  flex-shrink: 0;
+  min-width: var(--dsx-size-sm);
+  height: var(--dsx-size-sm);
   padding: 0 var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-full);
   font-size: var(--dsx-typography-label-small-font-size);
-  line-height: var(--dsx-size-xs);
+  line-height: var(--dsx-size-sm);
   text-align: center;
 }
 
@@ -17731,6 +18057,9 @@ span.dsx-filter-bar__condition-label {
 
 .dsx-pill {
   display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   align-items: center;
   gap: var(--dsx-space-xs);
   cursor: default;
@@ -17871,6 +18200,9 @@ span.dsx-filter-bar__condition-label {
 
 .dsx-pill__remove {
   display: inline-flex;
+  flex: none;
+  min-width: max(var(--dsx-size-md), calc(var(--dsx-size-md) / var(--dsx-density-scale, 1)));
+  min-height: max(var(--dsx-size-md), calc(var(--dsx-size-md) / var(--dsx-density-scale, 1)));
   align-items: center;
   justify-content: center;
   padding: 0;