ui-style-kit-css 2.3.0 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/CHANGELOG.md +57 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +102 -44
  4. package/STYLE-MAP.md +14 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +47898 -15121
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47771 -15122
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47932 -15145
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +3247 -295
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +1229 -231
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2663 -282
  37. package/dist/visual/data-terminal.css +2064 -276
  38. package/dist/visual/editorial-luxe.css +2315 -259
  39. package/dist/visual/industrial-utility.css +3142 -270
  40. package/dist/visual/maximalist.css +2185 -454
  41. package/dist/visual/minimal-saas.css +1503 -398
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1690 -402
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2977 -292
  46. package/dist/visual/retro-glass.css +2625 -299
  47. package/dist/visual/retrofuturism.css +1885 -397
  48. package/dist/visual/tactile.css +2716 -498
  49. package/dist/visual/technical-blueprint.css +2599 -267
  50. package/dist/visual/y2k.css +1906 -309
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/COLOR-THEMES.md +63 -0
  56. package/docs/DEMO-SHOWCASE.md +65 -0
  57. package/docs/ECOSYSTEM.md +4 -4
  58. package/docs/EDITORIAL-LUX.md +75 -0
  59. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  60. package/docs/NATIVE-ELEMENTS.md +23 -17
  61. package/docs/NEO-NOIR.md +94 -0
  62. package/docs/ORGANIC-MODERN.md +91 -0
  63. package/docs/PAPER-EDITORIAL.md +63 -0
  64. package/docs/PUBLISHING.md +31 -10
  65. package/docs/RELEASE-2.4.0.md +88 -0
  66. package/docs/RELEASE-2.4.1.md +35 -0
  67. package/docs/RETRO-GLASS.md +105 -0
  68. package/docs/STYLE-GUIDE.md +41 -26
  69. package/docs/TACTILE.md +38 -0
  70. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  71. package/docs/TOKENS.md +80 -3
  72. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  73. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  74. package/manifest.json +624 -28
  75. package/package.json +20 -11
  76. package/styles/art-deco.css +1402 -17
  77. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  78. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  79. package/styles/assets/bauhaus-barlow.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  81. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  82. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  83. package/styles/assets/bento-manrope-OFL.txt +93 -0
  84. package/styles/assets/bento-manrope.ttf +0 -0
  85. package/styles/assets/clay-grain.png +0 -0
  86. package/styles/assets/clay-rounded-OFL.txt +93 -0
  87. package/styles/assets/clay-rounded.ttf +0 -0
  88. package/styles/assets/neo-noir-corner-dark.png +0 -0
  89. package/styles/assets/neo-noir-corner-light.png +0 -0
  90. package/styles/assets/neo-noir-texture-dark.png +0 -0
  91. package/styles/assets/neo-noir-texture-light.png +0 -0
  92. package/styles/assets/organic-display-OFL.txt +93 -0
  93. package/styles/assets/organic-display.ttf +0 -0
  94. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  95. package/styles/assets/organic-sans-OFL.txt +93 -0
  96. package/styles/assets/organic-sans.ttf +0 -0
  97. package/styles/bauhaus.css +881 -110
  98. package/styles/bento.css +1182 -113
  99. package/styles/brutalism.css +266 -15
  100. package/styles/clay.css +1307 -72
  101. package/styles/compat-layout.css +1 -2
  102. package/styles/components.css +107 -36
  103. package/styles/content-overflow.css +11 -5
  104. package/styles/cyberpunk.css +1856 -51
  105. package/styles/data-terminal.css +1122 -18
  106. package/styles/editorial-luxe.css +581 -17
  107. package/styles/industrial-utility.css +1775 -16
  108. package/styles/interactive-surface-bridge.css +30 -20
  109. package/styles/interactive-surface-theme.css +21 -11
  110. package/styles/maximalist.css +1215 -133
  111. package/styles/minimal-saas.css +465 -93
  112. package/styles/native-elements.css +347 -171
  113. package/styles/neo-noir.css +661 -19
  114. package/styles/neumorphism.css +1021 -149
  115. package/styles/organic-modern.css +693 -23
  116. package/styles/paper-editorial.css +1053 -17
  117. package/styles/retro-glass.css +639 -50
  118. package/styles/retrofuturism.css +948 -60
  119. package/styles/tactile.css +1813 -111
  120. package/styles/technical-blueprint.css +673 -22
  121. package/styles/theme-colors.css +412 -2
  122. package/styles/y2k.css +954 -46
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.3.0
2
+ * UI Style Kit CSS v2.4.1
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -13,13 +13,26 @@
13
13
  ========================================================= */
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
+ /**
17
+ * Optional text inks let bright palette fills retain their color without making
18
+ * text on neutral surfaces unreadable. Initial values preserve preset colors and
19
+ * prevent an outer palette's text override from leaking into a nested UI root.
20
+ */
21
+ :where([data-ui]) {
22
+ --usk-primary-ink: initial;
23
+ --usk-accent-ink: initial;
24
+ }
25
+
16
26
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
- :where([data-ui][data-theme][data-mode="light"]) {
27
+ :where([data-ui][data-mode="light"]) {
28
+ /* Keep vivid fills intact while using the darker link role for text treatments. */
29
+ --usk-primary-ink: rgb(var(--usk-link-rgb));
30
+ --usk-accent-ink: rgb(var(--usk-link-rgb));
18
31
  --usk-border-text-mix: 45%;
19
32
  --usk-border-min-alpha: 1;
20
33
  }
21
34
 
22
- :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
35
+ :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
23
36
  --usk-border-text-mix: 0%;
24
37
  --usk-border-min-alpha: 0;
25
38
  }
@@ -1584,6 +1597,403 @@
1584
1597
  --usk-danger-text-rgb: 0 0 0;
1585
1598
  --usk-focus-rgb: 255 255 255;
1586
1599
  }
1600
+
1601
+ /** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
1602
+ :where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
1603
+ --usk-primary-ink: rgb(var(--usk-link-rgb));
1604
+ --usk-accent-ink: rgb(var(--usk-link-rgb));
1605
+ --usk-bg-rgb: 255 251 232;
1606
+ --usk-surface-rgb: 255 255 255;
1607
+ --usk-surface-strong-rgb: 255 254 245;
1608
+ --usk-surface-soft-rgb: 247 237 187;
1609
+ --usk-text-rgb: 33 29 12;
1610
+ --usk-text-muted-rgb: 100 91 55;
1611
+ --usk-border-rgb: 217 199 111;
1612
+ --usk-primary-rgb: 255 204 0;
1613
+ --usk-primary-hover-rgb: 222 175 0;
1614
+ --usk-primary-text-rgb: 0 0 0;
1615
+ --usk-secondary-rgb: 37 50 78;
1616
+ --usk-secondary-hover-rgb: 25 37 61;
1617
+ --usk-secondary-text-rgb: 255 255 255;
1618
+ --usk-accent-rgb: 255 228 92;
1619
+ --usk-success-rgb: 34 122 75;
1620
+ --usk-warning-rgb: 144 92 0;
1621
+ --usk-danger-rgb: 177 54 54;
1622
+ --usk-link-rgb: 112 79 0;
1623
+ --usk-accent-text-rgb: 0 0 0;
1624
+ --usk-success-text-rgb: 255 255 255;
1625
+ --usk-warning-text-rgb: 255 255 255;
1626
+ --usk-danger-text-rgb: 255 255 255;
1627
+ --usk-focus-rgb: 255 204 0;
1628
+ }
1629
+
1630
+ :where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
1631
+ --usk-bg-rgb: 18 15 3;
1632
+ --usk-surface-rgb: 32 27 7;
1633
+ --usk-surface-strong-rgb: 48 40 10;
1634
+ --usk-surface-soft-rgb: 25 21 5;
1635
+ --usk-text-rgb: 255 249 222;
1636
+ --usk-text-muted-rgb: 207 195 145;
1637
+ --usk-border-rgb: 104 88 31;
1638
+ --usk-primary-rgb: 255 216 59;
1639
+ --usk-primary-hover-rgb: 255 234 130;
1640
+ --usk-primary-text-rgb: 0 0 0;
1641
+ --usk-secondary-rgb: 142 198 255;
1642
+ --usk-secondary-hover-rgb: 182 220 255;
1643
+ --usk-secondary-text-rgb: 0 0 0;
1644
+ --usk-accent-rgb: 255 232 102;
1645
+ --usk-success-rgb: 103 217 151;
1646
+ --usk-warning-rgb: 255 194 62;
1647
+ --usk-danger-rgb: 255 119 119;
1648
+ --usk-link-rgb: 255 232 102;
1649
+ --usk-accent-text-rgb: 0 0 0;
1650
+ --usk-success-text-rgb: 0 0 0;
1651
+ --usk-warning-text-rgb: 0 0 0;
1652
+ --usk-danger-text-rgb: 0 0 0;
1653
+ --usk-focus-rgb: 255 232 102;
1654
+ }
1655
+
1656
+ :where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
1657
+ --usk-bg-rgb: 0 0 0;
1658
+ --usk-surface-rgb: 13 11 0;
1659
+ --usk-surface-strong-rgb: 26 22 0;
1660
+ --usk-surface-soft-rgb: 0 0 0;
1661
+ --usk-text-rgb: 255 255 255;
1662
+ --usk-text-muted-rgb: 255 250 222;
1663
+ --usk-border-rgb: 255 255 255;
1664
+ --usk-primary-rgb: 255 214 0;
1665
+ --usk-primary-hover-rgb: 255 255 255;
1666
+ --usk-primary-text-rgb: 0 0 0;
1667
+ --usk-secondary-rgb: 0 217 255;
1668
+ --usk-secondary-hover-rgb: 255 255 255;
1669
+ --usk-secondary-text-rgb: 0 0 0;
1670
+ --usk-accent-rgb: 255 234 0;
1671
+ --usk-success-rgb: 0 255 144;
1672
+ --usk-warning-rgb: 255 191 0;
1673
+ --usk-danger-rgb: 255 77 77;
1674
+ --usk-link-rgb: 255 234 0;
1675
+ --usk-accent-text-rgb: 0 0 0;
1676
+ --usk-success-text-rgb: 0 0 0;
1677
+ --usk-warning-text-rgb: 0 0 0;
1678
+ --usk-danger-text-rgb: 0 0 0;
1679
+ --usk-focus-rgb: 255 255 255;
1680
+ }
1681
+
1682
+ /** Botanical Green pairs leaf-green actions with restrained berry support. */
1683
+ :where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
1684
+ --usk-bg-rgb: 239 249 242;
1685
+ --usk-surface-rgb: 255 255 255;
1686
+ --usk-surface-strong-rgb: 248 253 249;
1687
+ --usk-surface-soft-rgb: 214 237 220;
1688
+ --usk-text-rgb: 14 38 23;
1689
+ --usk-text-muted-rgb: 75 98 81;
1690
+ --usk-border-rgb: 176 207 185;
1691
+ --usk-primary-rgb: 13 126 66;
1692
+ --usk-primary-hover-rgb: 8 97 50;
1693
+ --usk-primary-text-rgb: 255 255 255;
1694
+ --usk-secondary-rgb: 121 48 88;
1695
+ --usk-secondary-hover-rgb: 91 35 65;
1696
+ --usk-secondary-text-rgb: 255 255 255;
1697
+ --usk-accent-rgb: 64 201 117;
1698
+ --usk-success-rgb: 24 116 65;
1699
+ --usk-warning-rgb: 150 96 0;
1700
+ --usk-danger-rgb: 178 60 70;
1701
+ --usk-link-rgb: 8 97 50;
1702
+ --usk-accent-text-rgb: 0 0 0;
1703
+ --usk-success-text-rgb: 255 255 255;
1704
+ --usk-warning-text-rgb: 255 255 255;
1705
+ --usk-danger-text-rgb: 255 255 255;
1706
+ --usk-focus-rgb: 64 201 117;
1707
+ }
1708
+
1709
+ :where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
1710
+ --usk-bg-rgb: 4 17 9;
1711
+ --usk-surface-rgb: 10 32 18;
1712
+ --usk-surface-strong-rgb: 17 48 28;
1713
+ --usk-surface-soft-rgb: 7 24 14;
1714
+ --usk-text-rgb: 235 252 241;
1715
+ --usk-text-muted-rgb: 173 205 182;
1716
+ --usk-border-rgb: 49 91 63;
1717
+ --usk-primary-rgb: 82 222 139;
1718
+ --usk-primary-hover-rgb: 128 240 169;
1719
+ --usk-primary-text-rgb: 0 0 0;
1720
+ --usk-secondary-rgb: 238 148 199;
1721
+ --usk-secondary-hover-rgb: 255 187 222;
1722
+ --usk-secondary-text-rgb: 0 0 0;
1723
+ --usk-accent-rgb: 107 240 164;
1724
+ --usk-success-rgb: 100 218 149;
1725
+ --usk-warning-rgb: 255 205 91;
1726
+ --usk-danger-rgb: 255 126 137;
1727
+ --usk-link-rgb: 128 240 169;
1728
+ --usk-accent-text-rgb: 0 0 0;
1729
+ --usk-success-text-rgb: 0 0 0;
1730
+ --usk-warning-text-rgb: 0 0 0;
1731
+ --usk-danger-text-rgb: 0 0 0;
1732
+ --usk-focus-rgb: 107 240 164;
1733
+ }
1734
+
1735
+ :where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
1736
+ --usk-bg-rgb: 0 0 0;
1737
+ --usk-surface-rgb: 0 14 5;
1738
+ --usk-surface-strong-rgb: 0 29 11;
1739
+ --usk-surface-soft-rgb: 0 0 0;
1740
+ --usk-text-rgb: 255 255 255;
1741
+ --usk-text-muted-rgb: 238 255 244;
1742
+ --usk-border-rgb: 255 255 255;
1743
+ --usk-primary-rgb: 0 255 112;
1744
+ --usk-primary-hover-rgb: 255 255 255;
1745
+ --usk-primary-text-rgb: 0 0 0;
1746
+ --usk-secondary-rgb: 255 92 178;
1747
+ --usk-secondary-hover-rgb: 255 255 255;
1748
+ --usk-secondary-text-rgb: 0 0 0;
1749
+ --usk-accent-rgb: 103 255 166;
1750
+ --usk-success-rgb: 0 255 117;
1751
+ --usk-warning-rgb: 255 212 0;
1752
+ --usk-danger-rgb: 255 77 91;
1753
+ --usk-link-rgb: 103 255 166;
1754
+ --usk-accent-text-rgb: 0 0 0;
1755
+ --usk-success-text-rgb: 0 0 0;
1756
+ --usk-warning-text-rgb: 0 0 0;
1757
+ --usk-danger-text-rgb: 0 0 0;
1758
+ --usk-focus-rgb: 255 255 255;
1759
+ }
1760
+
1761
+ /** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
1762
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
1763
+ --usk-bg-rgb: 240 244 255;
1764
+ --usk-surface-rgb: 255 255 255;
1765
+ --usk-surface-strong-rgb: 248 250 255;
1766
+ --usk-surface-soft-rgb: 220 229 250;
1767
+ --usk-text-rgb: 14 27 57;
1768
+ --usk-text-muted-rgb: 73 89 123;
1769
+ --usk-border-rgb: 177 195 232;
1770
+ --usk-primary-rgb: 0 82 204;
1771
+ --usk-primary-hover-rgb: 0 61 158;
1772
+ --usk-primary-text-rgb: 255 255 255;
1773
+ --usk-secondary-rgb: 181 57 72;
1774
+ --usk-secondary-hover-rgb: 143 41 54;
1775
+ --usk-secondary-text-rgb: 255 255 255;
1776
+ --usk-accent-rgb: 82 121 255;
1777
+ --usk-success-rgb: 35 121 78;
1778
+ --usk-warning-rgb: 151 96 0;
1779
+ --usk-danger-rgb: 180 55 74;
1780
+ --usk-link-rgb: 0 64 163;
1781
+ --usk-accent-text-rgb: 0 0 0;
1782
+ --usk-success-text-rgb: 255 255 255;
1783
+ --usk-warning-text-rgb: 255 255 255;
1784
+ --usk-danger-text-rgb: 255 255 255;
1785
+ --usk-focus-rgb: 82 121 255;
1786
+ }
1787
+
1788
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
1789
+ --usk-bg-rgb: 4 9 25;
1790
+ --usk-surface-rgb: 10 20 48;
1791
+ --usk-surface-strong-rgb: 16 32 72;
1792
+ --usk-surface-soft-rgb: 7 14 36;
1793
+ --usk-text-rgb: 239 244 255;
1794
+ --usk-text-muted-rgb: 174 188 218;
1795
+ --usk-border-rgb: 49 70 122;
1796
+ --usk-primary-rgb: 111 149 255;
1797
+ --usk-primary-hover-rgb: 164 188 255;
1798
+ --usk-primary-text-rgb: 0 0 0;
1799
+ --usk-secondary-rgb: 255 133 147;
1800
+ --usk-secondary-hover-rgb: 255 173 183;
1801
+ --usk-secondary-text-rgb: 0 0 0;
1802
+ --usk-accent-rgb: 143 170 255;
1803
+ --usk-success-rgb: 105 219 159;
1804
+ --usk-warning-rgb: 255 205 91;
1805
+ --usk-danger-rgb: 255 121 139;
1806
+ --usk-link-rgb: 164 188 255;
1807
+ --usk-accent-text-rgb: 0 0 0;
1808
+ --usk-success-text-rgb: 0 0 0;
1809
+ --usk-warning-text-rgb: 0 0 0;
1810
+ --usk-danger-text-rgb: 0 0 0;
1811
+ --usk-focus-rgb: 143 170 255;
1812
+ }
1813
+
1814
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
1815
+ --usk-bg-rgb: 0 0 0;
1816
+ --usk-surface-rgb: 0 7 22;
1817
+ --usk-surface-strong-rgb: 0 15 44;
1818
+ --usk-surface-soft-rgb: 0 0 0;
1819
+ --usk-text-rgb: 255 255 255;
1820
+ --usk-text-muted-rgb: 239 245 255;
1821
+ --usk-border-rgb: 255 255 255;
1822
+ --usk-primary-rgb: 76 133 255;
1823
+ --usk-primary-hover-rgb: 255 255 255;
1824
+ --usk-primary-text-rgb: 0 0 0;
1825
+ --usk-secondary-rgb: 255 105 125;
1826
+ --usk-secondary-hover-rgb: 255 255 255;
1827
+ --usk-secondary-text-rgb: 0 0 0;
1828
+ --usk-accent-rgb: 132 168 255;
1829
+ --usk-success-rgb: 0 255 144;
1830
+ --usk-warning-rgb: 255 212 0;
1831
+ --usk-danger-rgb: 255 92 112;
1832
+ --usk-link-rgb: 132 168 255;
1833
+ --usk-accent-text-rgb: 0 0 0;
1834
+ --usk-success-text-rgb: 0 0 0;
1835
+ --usk-warning-text-rgb: 0 0 0;
1836
+ --usk-danger-text-rgb: 0 0 0;
1837
+ --usk-focus-rgb: 255 255 255;
1838
+ }
1839
+
1840
+ /** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
1841
+ :where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
1842
+ --usk-bg-rgb: 244 244 242;
1843
+ --usk-surface-rgb: 255 255 255;
1844
+ --usk-surface-strong-rgb: 250 250 248;
1845
+ --usk-surface-soft-rgb: 227 229 225;
1846
+ --usk-text-rgb: 27 29 28;
1847
+ --usk-text-muted-rgb: 86 91 88;
1848
+ --usk-border-rgb: 184 189 185;
1849
+ --usk-primary-rgb: 56 60 58;
1850
+ --usk-primary-hover-rgb: 37 40 38;
1851
+ --usk-primary-text-rgb: 255 255 255;
1852
+ --usk-secondary-rgb: 91 97 93;
1853
+ --usk-secondary-hover-rgb: 69 74 71;
1854
+ --usk-secondary-text-rgb: 255 255 255;
1855
+ --usk-accent-rgb: 184 190 186;
1856
+ --usk-success-rgb: 48 115 79;
1857
+ --usk-warning-rgb: 145 94 0;
1858
+ --usk-danger-rgb: 168 60 60;
1859
+ --usk-link-rgb: 52 60 56;
1860
+ --usk-accent-text-rgb: 0 0 0;
1861
+ --usk-success-text-rgb: 255 255 255;
1862
+ --usk-warning-text-rgb: 255 255 255;
1863
+ --usk-danger-text-rgb: 255 255 255;
1864
+ --usk-focus-rgb: 112 121 116;
1865
+ }
1866
+
1867
+ :where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
1868
+ --usk-bg-rgb: 12 13 13;
1869
+ --usk-surface-rgb: 25 27 26;
1870
+ --usk-surface-strong-rgb: 40 43 41;
1871
+ --usk-surface-soft-rgb: 18 20 19;
1872
+ --usk-text-rgb: 245 246 245;
1873
+ --usk-text-muted-rgb: 189 193 190;
1874
+ --usk-border-rgb: 78 84 80;
1875
+ --usk-primary-rgb: 208 212 209;
1876
+ --usk-primary-hover-rgb: 235 237 235;
1877
+ --usk-primary-text-rgb: 0 0 0;
1878
+ --usk-secondary-rgb: 164 170 166;
1879
+ --usk-secondary-hover-rgb: 194 199 196;
1880
+ --usk-secondary-text-rgb: 0 0 0;
1881
+ --usk-accent-rgb: 230 232 231;
1882
+ --usk-success-rgb: 130 210 165;
1883
+ --usk-warning-rgb: 242 197 112;
1884
+ --usk-danger-rgb: 240 137 137;
1885
+ --usk-link-rgb: 220 224 221;
1886
+ --usk-accent-text-rgb: 0 0 0;
1887
+ --usk-success-text-rgb: 0 0 0;
1888
+ --usk-warning-text-rgb: 0 0 0;
1889
+ --usk-danger-text-rgb: 0 0 0;
1890
+ --usk-focus-rgb: 255 255 255;
1891
+ }
1892
+
1893
+ :where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
1894
+ --usk-bg-rgb: 0 0 0;
1895
+ --usk-surface-rgb: 8 8 8;
1896
+ --usk-surface-strong-rgb: 20 20 20;
1897
+ --usk-surface-soft-rgb: 0 0 0;
1898
+ --usk-text-rgb: 255 255 255;
1899
+ --usk-text-muted-rgb: 245 245 245;
1900
+ --usk-border-rgb: 255 255 255;
1901
+ --usk-primary-rgb: 255 255 255;
1902
+ --usk-primary-hover-rgb: 221 221 221;
1903
+ --usk-primary-text-rgb: 0 0 0;
1904
+ --usk-secondary-rgb: 205 205 205;
1905
+ --usk-secondary-hover-rgb: 255 255 255;
1906
+ --usk-secondary-text-rgb: 0 0 0;
1907
+ --usk-accent-rgb: 245 245 245;
1908
+ --usk-success-rgb: 0 255 144;
1909
+ --usk-warning-rgb: 255 212 0;
1910
+ --usk-danger-rgb: 255 92 92;
1911
+ --usk-link-rgb: 255 255 255;
1912
+ --usk-accent-text-rgb: 0 0 0;
1913
+ --usk-success-text-rgb: 0 0 0;
1914
+ --usk-warning-text-rgb: 0 0 0;
1915
+ --usk-danger-text-rgb: 0 0 0;
1916
+ --usk-focus-rgb: 255 255 255;
1917
+ }
1918
+
1919
+ /** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
1920
+ :where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
1921
+ --usk-bg-rgb: 248 241 233;
1922
+ --usk-surface-rgb: 255 255 255;
1923
+ --usk-surface-strong-rgb: 253 249 245;
1924
+ --usk-surface-soft-rgb: 232 216 202;
1925
+ --usk-text-rgb: 49 36 29;
1926
+ --usk-text-muted-rgb: 102 84 74;
1927
+ --usk-border-rgb: 199 172 154;
1928
+ --usk-primary-rgb: 112 67 48;
1929
+ --usk-primary-hover-rgb: 83 47 34;
1930
+ --usk-primary-text-rgb: 255 255 255;
1931
+ --usk-secondary-rgb: 88 98 78;
1932
+ --usk-secondary-hover-rgb: 66 75 57;
1933
+ --usk-secondary-text-rgb: 255 255 255;
1934
+ --usk-accent-rgb: 190 111 82;
1935
+ --usk-success-rgb: 53 117 76;
1936
+ --usk-warning-rgb: 147 91 0;
1937
+ --usk-danger-rgb: 173 61 55;
1938
+ --usk-link-rgb: 105 60 43;
1939
+ --usk-accent-text-rgb: 0 0 0;
1940
+ --usk-success-text-rgb: 255 255 255;
1941
+ --usk-warning-text-rgb: 255 255 255;
1942
+ --usk-danger-text-rgb: 255 255 255;
1943
+ --usk-focus-rgb: 190 111 82;
1944
+ }
1945
+
1946
+ :where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
1947
+ --usk-bg-rgb: 18 12 9;
1948
+ --usk-surface-rgb: 35 24 19;
1949
+ --usk-surface-strong-rgb: 51 34 26;
1950
+ --usk-surface-soft-rgb: 27 18 14;
1951
+ --usk-text-rgb: 250 241 233;
1952
+ --usk-text-muted-rgb: 205 184 169;
1953
+ --usk-border-rgb: 107 78 61;
1954
+ --usk-primary-rgb: 218 158 124;
1955
+ --usk-primary-hover-rgb: 240 188 156;
1956
+ --usk-primary-text-rgb: 0 0 0;
1957
+ --usk-secondary-rgb: 178 192 157;
1958
+ --usk-secondary-hover-rgb: 207 217 190;
1959
+ --usk-secondary-text-rgb: 0 0 0;
1960
+ --usk-accent-rgb: 235 169 136;
1961
+ --usk-success-rgb: 133 214 164;
1962
+ --usk-warning-rgb: 255 203 100;
1963
+ --usk-danger-rgb: 255 135 128;
1964
+ --usk-link-rgb: 240 188 156;
1965
+ --usk-accent-text-rgb: 0 0 0;
1966
+ --usk-success-text-rgb: 0 0 0;
1967
+ --usk-warning-text-rgb: 0 0 0;
1968
+ --usk-danger-text-rgb: 0 0 0;
1969
+ --usk-focus-rgb: 235 169 136;
1970
+ }
1971
+
1972
+ :where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
1973
+ --usk-bg-rgb: 0 0 0;
1974
+ --usk-surface-rgb: 15 7 3;
1975
+ --usk-surface-strong-rgb: 31 15 7;
1976
+ --usk-surface-soft-rgb: 0 0 0;
1977
+ --usk-text-rgb: 255 255 255;
1978
+ --usk-text-muted-rgb: 255 244 237;
1979
+ --usk-border-rgb: 255 255 255;
1980
+ --usk-primary-rgb: 255 174 128;
1981
+ --usk-primary-hover-rgb: 255 255 255;
1982
+ --usk-primary-text-rgb: 0 0 0;
1983
+ --usk-secondary-rgb: 208 234 166;
1984
+ --usk-secondary-hover-rgb: 255 255 255;
1985
+ --usk-secondary-text-rgb: 0 0 0;
1986
+ --usk-accent-rgb: 255 194 160;
1987
+ --usk-success-rgb: 0 255 144;
1988
+ --usk-warning-rgb: 255 212 0;
1989
+ --usk-danger-rgb: 255 102 96;
1990
+ --usk-link-rgb: 255 194 160;
1991
+ --usk-accent-text-rgb: 0 0 0;
1992
+ --usk-success-text-rgb: 0 0 0;
1993
+ --usk-warning-text-rgb: 0 0 0;
1994
+ --usk-danger-text-rgb: 0 0 0;
1995
+ --usk-focus-rgb: 255 255 255;
1996
+ }
1587
1997
  }
1588
1998
 
1589
1999
 
@@ -1597,7 +2007,8 @@
1597
2007
  ========================================================= */
1598
2008
 
1599
2009
  @layer ui-style-kit.native_elements {
1600
- [data-ui][data-theme][data-mode] {
2010
+ [data-ui][data-mode] {
2011
+ --usk-native-bg: rgb(var(--usk-bg-rgb));
1601
2012
  --usk-native-surface: rgb(var(--usk-surface-rgb));
1602
2013
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
1603
2014
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
@@ -1634,6 +2045,52 @@
1634
2045
  --usk-native-thumb: var(--usk-native-surface-strong);
1635
2046
  --usk-native-thumb-border: var(--usk-native-primary);
1636
2047
  --usk-native-indicator: var(--usk-native-primary);
2048
+ --usk-native-choice-size: 1.5rem;
2049
+ --usk-native-choice-background: var(--usk-native-control-bg);
2050
+ --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
2051
+ --usk-native-checkbox-radius: .3rem;
2052
+ --usk-native-radio-radius: 50%;
2053
+ --usk-native-choice-shadow: none;
2054
+ --usk-native-choice-checked-background: var(--usk-native-primary);
2055
+ --usk-native-choice-mark-color: var(--usk-native-on-primary);
2056
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
2057
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
2058
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
2059
+ --usk-native-select-padding-inline-end: 2.5rem;
2060
+ --usk-native-range-track-size: .45rem;
2061
+ --usk-native-range-track-background: var(--usk-native-track);
2062
+ --usk-native-range-track-border: 0 solid transparent;
2063
+ --usk-native-range-track-radius: 999px;
2064
+ --usk-native-range-track-shadow: none;
2065
+ --usk-native-range-progress-background: var(--usk-native-track-fill);
2066
+ --usk-native-range-thumb-size: 1.2rem;
2067
+ --usk-native-range-thumb-background: var(--usk-native-thumb);
2068
+ --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
2069
+ --usk-native-range-thumb-radius: 50%;
2070
+ --usk-native-range-thumb-shadow: var(--usk-native-shadow);
2071
+ --usk-native-progress-size: .9rem;
2072
+ --usk-native-progress-track-background: var(--usk-native-track);
2073
+ --usk-native-progress-track-border: 0 solid transparent;
2074
+ --usk-native-progress-track-radius: 999px;
2075
+ --usk-native-progress-track-shadow: none;
2076
+ --usk-native-progress-value-background: var(--usk-native-track-fill);
2077
+ --usk-native-progress-value-radius: inherit;
2078
+ --usk-native-progress-value-shadow: none;
2079
+ --usk-native-meter-optimum-background: var(--usk-native-success);
2080
+ --usk-native-meter-suboptimum-background: var(--usk-native-warning);
2081
+ --usk-native-meter-critical-background: var(--usk-native-danger);
2082
+ --usk-native-file-button-background: var(--usk-native-primary);
2083
+ --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
2084
+ --usk-native-file-button-radius: var(--usk-native-radius-sm);
2085
+ --usk-native-file-button-shadow: var(--usk-native-shadow);
2086
+ --usk-native-color-swatch-border: 0 solid transparent;
2087
+ --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
2088
+ --usk-native-indicator-opacity: .78;
2089
+ --usk-native-indicator-filter: none;
2090
+ --usk-native-scrollbar-size: .75rem;
2091
+ --usk-native-scrollbar-track: var(--usk-native-track);
2092
+ --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
2093
+ --usk-native-scrollbar-radius: 999px;
1637
2094
  --usk-native-shadow: none;
1638
2095
  --usk-native-shadow-md: var(--usk-native-shadow);
1639
2096
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -1641,7 +2098,7 @@
1641
2098
  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
2099
 
1643
2100
  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
1644
- --ui-color-bg: rgb(var(--usk-bg-rgb));
2101
+ --ui-color-bg: var(--usk-native-bg);
1645
2102
  --ui-color-surface: var(--usk-native-surface-strong);
1646
2103
  --ui-color-text: var(--usk-native-text);
1647
2104
  --ui-color-muted: var(--usk-native-text-muted);
@@ -1655,7 +2112,7 @@
1655
2112
  --ui-motion-easing: var(--usk-motion-easing);
1656
2113
  }
1657
2114
 
1658
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
2115
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1659
2116
  color: var(--usk-native-text);
1660
2117
  font-family: var(--usk-native-font-heading);
1661
2118
  line-height: 1.15;
@@ -1663,42 +2120,42 @@
1663
2120
  }
1664
2121
 
1665
2122
  @supports (text-wrap: balance) {
1666
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
2123
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1667
2124
  }
1668
2125
 
1669
- [data-ui][data-theme][data-mode] :where(hgroup) {
2126
+ [data-ui][data-mode] :where(hgroup) {
1670
2127
  display: grid;
1671
2128
  gap: .35rem;
1672
2129
  margin-block: 0 1rem;
1673
2130
  }
1674
2131
 
1675
- [data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1676
- [data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1677
- [data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
2132
+ [data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
2133
+ [data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
2134
+ [data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1678
2135
 
1679
- [data-ui][data-theme][data-mode] :where(p) {
2136
+ [data-ui][data-mode] :where(p) {
1680
2137
  margin: 0 0 1rem;
1681
2138
  color: var(--usk-native-text-muted);
1682
2139
  line-height: 1.7;
1683
2140
  }
1684
2141
 
1685
- [data-ui][data-theme][data-mode] :where(a) {
2142
+ [data-ui][data-mode] :where(a) {
1686
2143
  color: var(--usk-native-link);
1687
2144
  text-decoration-thickness: .08em;
1688
2145
  text-underline-offset: .18em;
1689
2146
  }
1690
2147
 
1691
- [data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
2148
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
1692
2149
 
1693
- [data-ui][data-theme][data-mode] :where(ul, ol, menu) {
2150
+ [data-ui][data-mode] :where(ul, ol, menu) {
1694
2151
  margin: 0 0 1rem;
1695
2152
  padding-left: 1.35rem;
1696
2153
  color: var(--usk-native-text-muted);
1697
2154
  }
1698
2155
 
1699
- [data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }
2156
+ [data-ui][data-mode] :where(li) { margin-block: .25rem; }
1700
2157
 
1701
- [data-ui][data-theme][data-mode] :where(blockquote) {
2158
+ [data-ui][data-mode] :where(blockquote) {
1702
2159
  margin: 1.25rem 0;
1703
2160
  padding: 1rem 1.25rem;
1704
2161
  color: var(--usk-native-text);
@@ -1707,7 +2164,7 @@
1707
2164
  border-radius: var(--usk-native-radius);
1708
2165
  }
1709
2166
 
1710
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2167
+ [data-ui][data-mode] :where(code, kbd, samp) {
1711
2168
  padding: .15em .35em;
1712
2169
  color: var(--usk-native-text);
1713
2170
  background: var(--usk-native-surface-soft);
@@ -1717,7 +2174,7 @@
1717
2174
  font-size: .92em;
1718
2175
  }
1719
2176
 
1720
- [data-ui][data-theme][data-mode] :where(pre) {
2177
+ [data-ui][data-mode] :where(pre) {
1721
2178
  overflow: auto;
1722
2179
  margin: 1rem 0;
1723
2180
  padding: 1rem;
@@ -1727,57 +2184,88 @@
1727
2184
  border-radius: var(--usk-native-radius);
1728
2185
  }
1729
2186
 
1730
- [data-ui][data-theme][data-mode] :where(pre code) {
2187
+ [data-ui][data-mode] :where(pre code) {
1731
2188
  display: block;
1732
2189
  padding: 0;
1733
2190
  background: transparent;
1734
2191
  border: 0;
1735
2192
  }
1736
2193
 
1737
- [data-ui][data-theme][data-mode] :where(hr) {
2194
+ [data-ui][data-mode] :where(hr) {
1738
2195
  height: 1px;
1739
2196
  margin: 2rem 0;
1740
2197
  background: var(--usk-native-border);
1741
2198
  border: 0;
1742
2199
  }
1743
2200
 
1744
- [data-ui][data-theme][data-mode] :where(mark) {
2201
+ [data-ui][data-mode] :where(mark) {
1745
2202
  padding-inline: .15em;
1746
2203
  color: var(--usk-native-text);
1747
2204
  background: rgb(var(--usk-warning-rgb) / .32);
1748
2205
  border-radius: .2em;
1749
2206
  }
1750
2207
 
1751
- [data-ui][data-theme][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1752
- [data-ui][data-theme][data-mode] :where(rt, rp) { font-size: .72em; }
2208
+ [data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
2209
+ [data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
1753
2210
 
1754
- [data-ui][data-theme][data-mode] :where(abbr[title]) {
2211
+ [data-ui][data-mode] :where(abbr[title]) {
1755
2212
  text-decoration: underline dotted var(--usk-native-primary);
1756
2213
  text-underline-offset: .18em;
1757
2214
  cursor: help;
1758
2215
  }
1759
2216
 
1760
- [data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
2217
+ [data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1761
2218
  max-width: 100%;
1762
2219
  }
1763
2220
 
1764
- [data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
2221
+ [data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
2222
+
2223
+ /** Native playback retains browser accessibility while inheriting preset material and geometry. */
2224
+ [data-ui][data-mode] audio[controls] {
2225
+ display: block;
2226
+ box-sizing: border-box;
2227
+ inline-size: 100%;
2228
+ min-inline-size: 0;
2229
+ block-size: 60px;
2230
+ padding: 3px;
2231
+ background: var(--usk-native-control-bg);
2232
+ color: var(--usk-native-text);
2233
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
2234
+ border-radius: var(--usk-native-radius);
2235
+ box-shadow: var(--usk-native-shadow);
2236
+ accent-color: var(--usk-native-primary);
2237
+ color-scheme: light;
2238
+ }
2239
+ [data-ui][data-mode="dark"] audio[controls],
2240
+ [data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
2241
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
2242
+ border-radius: var(--usk-native-radius);
2243
+ background: transparent;
2244
+ }
2245
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
2246
+ background: var(--usk-native-control-bg);
2247
+ color: var(--usk-native-text);
2248
+ }
2249
+ [data-ui][data-mode] audio[controls]:focus-visible {
2250
+ outline: 2px solid var(--usk-native-focus);
2251
+ outline-offset: 2px;
2252
+ }
1765
2253
 
1766
- [data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }
2254
+ [data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
1767
2255
 
1768
- [data-ui][data-theme][data-mode] :where(figcaption) {
2256
+ [data-ui][data-mode] :where(figcaption) {
1769
2257
  margin-top: .5rem;
1770
2258
  color: var(--usk-native-text-muted);
1771
2259
  font-size: .9rem;
1772
2260
  }
1773
2261
 
1774
- [data-ui][data-theme][data-mode] :where(form) {
2262
+ [data-ui][data-mode] :where(form) {
1775
2263
  display: grid;
1776
2264
  gap: var(--usk-native-field-gap);
1777
2265
  min-inline-size: 0;
1778
2266
  }
1779
2267
 
1780
- [data-ui][data-theme][data-mode] :where(fieldset) {
2268
+ [data-ui][data-mode] :where(fieldset) {
1781
2269
  display: grid;
1782
2270
  gap: .9rem;
1783
2271
  min-inline-size: 0;
@@ -1788,30 +2276,30 @@
1788
2276
  border-radius: var(--usk-native-radius);
1789
2277
  }
1790
2278
 
1791
- [data-ui][data-theme][data-mode] :where(legend) {
2279
+ [data-ui][data-mode] :where(legend) {
1792
2280
  padding-inline: .35rem;
1793
2281
  color: var(--usk-native-text);
1794
2282
  font-weight: 900;
1795
2283
  }
1796
2284
 
1797
- [data-ui][data-theme][data-mode] :where(label) {
2285
+ [data-ui][data-mode] :where(label) {
1798
2286
  color: var(--usk-native-text);
1799
2287
  font-weight: 750;
1800
2288
  }
1801
2289
 
1802
- [data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
2290
+ [data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1803
2291
  display: grid;
1804
2292
  gap: var(--usk-native-field-gap);
1805
2293
  align-content: start;
1806
2294
  }
1807
2295
 
1808
- [data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
2296
+ [data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1809
2297
  display: inline-flex;
1810
2298
  gap: var(--usk-native-field-gap);
1811
2299
  align-items: center;
1812
2300
  }
1813
2301
 
1814
- [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
2302
+ [data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1815
2303
  width: 100%;
1816
2304
  min-block-size: var(--usk-native-control-min-block-size);
1817
2305
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1822,24 +2310,44 @@
1822
2310
  font: inherit;
1823
2311
  }
1824
2312
 
1825
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
2313
+ [data-ui][data-mode] :where(input, textarea, select, button) {
1826
2314
  color-scheme: inherit;
1827
2315
  accent-color: var(--usk-native-primary);
1828
2316
  }
1829
2317
 
1830
- [data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
2318
+ [data-ui][data-mode] :where(input, textarea)::placeholder {
1831
2319
  color: var(--usk-native-text-muted);
1832
2320
  opacity: .78;
1833
2321
  }
1834
2322
 
1835
- [data-ui][data-theme][data-mode] :where(textarea) {
2323
+ [data-ui][data-mode] :where(textarea) {
1836
2324
  min-height: 7rem;
1837
2325
  resize: vertical;
1838
2326
  }
1839
2327
 
1840
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
2328
+ [data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
2329
+
2330
+ [data-ui][data-mode] :where(select:not([multiple])) {
2331
+ -webkit-appearance: none;
2332
+ appearance: none;
2333
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
2334
+ background-image: var(--usk-native-select-indicator-image);
2335
+ background-repeat: no-repeat;
2336
+ background-position: var(--usk-native-select-indicator-position);
2337
+ background-size: var(--usk-native-select-indicator-size);
2338
+ }
2339
+
2340
+ [data-ui][data-mode] :where(select[multiple]) {
2341
+ padding-inline-end: var(--usk-native-control-padding-inline);
2342
+ background-image: none;
2343
+ }
2344
+
2345
+ [dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
2346
+ [data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
2347
+ --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
2348
+ }
1841
2349
 
1842
- [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
2350
+ [data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
2351
  -webkit-appearance: none;
1844
2352
  appearance: none;
1845
2353
  box-sizing: border-box;
@@ -1848,7 +2356,7 @@
1848
2356
  font: inherit;
1849
2357
  }
1850
2358
 
1851
- [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
2359
+ [data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1852
2360
  color: var(--usk-native-on-primary);
1853
2361
  background: var(--usk-native-primary);
1854
2362
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1859,29 +2367,56 @@
1859
2367
  }
1860
2368
 
1861
2369
  /* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
1862
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
2370
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1863
2371
  display: inline-flex;
1864
2372
  align-items: center;
1865
2373
  justify-content: center;
1866
2374
  gap: .55rem;
1867
2375
  }
1868
2376
 
1869
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
2377
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1870
2378
  flex: 0 0 1em;
1871
2379
  }
1872
2380
 
1873
- [data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
2381
+ [data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1874
2382
  background: var(--usk-native-primary-hover);
1875
2383
  border-color: var(--usk-native-primary-hover);
1876
2384
  }
1877
2385
 
1878
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1879
- inline-size: 1.5rem;
1880
- block-size: 1.5rem;
2386
+ [data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
2387
+ -webkit-appearance: none;
2388
+ appearance: none;
2389
+ inline-size: var(--usk-native-choice-size);
2390
+ block-size: var(--usk-native-choice-size);
2391
+ background: var(--usk-native-choice-background);
2392
+ border: var(--usk-native-choice-border);
2393
+ box-shadow: var(--usk-native-choice-shadow);
1881
2394
  accent-color: var(--usk-native-primary);
1882
2395
  }
1883
2396
 
1884
- [data-ui][data-theme][data-mode] :where(input[type="range"]) {
2397
+ [data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
2398
+ [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
2399
+
2400
+ [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
2401
+ background-color: var(--usk-native-choice-checked-background);
2402
+ background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
2403
+ }
2404
+
2405
+ [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
2406
+ border-color: var(--usk-native-primary);
2407
+ filter: brightness(1.04);
2408
+ }
2409
+
2410
+ [data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
2411
+ filter: brightness(.94);
2412
+ transform: scale(.94);
2413
+ }
2414
+
2415
+ [data-ui][data-mode] :where(input[type="radio"]:checked) {
2416
+ background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
2417
+ }
2418
+
2419
+ [data-ui][data-mode] :where(input[type="range"]) {
1885
2420
  -webkit-appearance: none;
1886
2421
  appearance: none;
1887
2422
  width: 100%;
@@ -1890,40 +2425,50 @@
1890
2425
  accent-color: var(--usk-native-primary);
1891
2426
  }
1892
2427
 
1893
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
1894
- block-size: .45rem;
1895
- background: var(--usk-native-track);
1896
- border-radius: 999px;
2428
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
2429
+ block-size: var(--usk-native-range-track-size);
2430
+ background: var(--usk-native-range-track-background);
2431
+ border: var(--usk-native-range-track-border);
2432
+ border-radius: var(--usk-native-range-track-radius);
2433
+ box-shadow: var(--usk-native-range-track-shadow);
1897
2434
  }
1898
2435
 
1899
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-track {
1900
- block-size: .45rem;
1901
- background: var(--usk-native-track);
1902
- border-radius: 999px;
2436
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
2437
+ block-size: var(--usk-native-range-track-size);
2438
+ background: var(--usk-native-range-track-background);
2439
+ border: var(--usk-native-range-track-border);
2440
+ border-radius: var(--usk-native-range-track-radius);
2441
+ box-shadow: var(--usk-native-range-track-shadow);
2442
+ }
2443
+
2444
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
2445
+ block-size: var(--usk-native-range-track-size);
2446
+ background: var(--usk-native-range-progress-background);
2447
+ border-radius: var(--usk-native-range-track-radius);
1903
2448
  }
1904
2449
 
1905
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
2450
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
1906
2451
  -webkit-appearance: none;
1907
2452
  appearance: none;
1908
- inline-size: 1.2rem;
1909
- block-size: 1.2rem;
1910
- margin-block-start: -.38rem;
1911
- background: var(--usk-native-thumb);
1912
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1913
- border-radius: 999px;
1914
- box-shadow: var(--usk-native-shadow);
2453
+ inline-size: var(--usk-native-range-thumb-size);
2454
+ block-size: var(--usk-native-range-thumb-size);
2455
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
2456
+ background: var(--usk-native-range-thumb-background);
2457
+ border: var(--usk-native-range-thumb-border);
2458
+ border-radius: var(--usk-native-range-thumb-radius);
2459
+ box-shadow: var(--usk-native-range-thumb-shadow);
1915
2460
  }
1916
2461
 
1917
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-thumb {
1918
- inline-size: 1.2rem;
1919
- block-size: 1.2rem;
1920
- background: var(--usk-native-thumb);
1921
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1922
- border-radius: 999px;
1923
- box-shadow: var(--usk-native-shadow);
2462
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
2463
+ inline-size: var(--usk-native-range-thumb-size);
2464
+ block-size: var(--usk-native-range-thumb-size);
2465
+ background: var(--usk-native-range-thumb-background);
2466
+ border: var(--usk-native-range-thumb-border);
2467
+ border-radius: var(--usk-native-range-thumb-radius);
2468
+ box-shadow: var(--usk-native-range-thumb-shadow);
1924
2469
  }
1925
2470
 
1926
- [data-ui][data-theme][data-mode] :where(input[type="color"]) {
2471
+ [data-ui][data-mode] :where(input[type="color"]) {
1927
2472
  inline-size: 3rem;
1928
2473
  block-size: 2.4rem;
1929
2474
  padding: .2rem;
@@ -1932,84 +2477,86 @@
1932
2477
  border-radius: var(--usk-native-radius-sm);
1933
2478
  }
1934
2479
 
1935
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
2480
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
1936
2481
  padding: 0;
1937
2482
  }
1938
2483
 
1939
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch {
1940
- border: 0;
1941
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2484
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
2485
+ border: var(--usk-native-color-swatch-border);
2486
+ border-radius: var(--usk-native-color-swatch-radius);
1942
2487
  }
1943
2488
 
1944
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-moz-color-swatch {
1945
- border: 0;
1946
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2489
+ [data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
2490
+ border: var(--usk-native-color-swatch-border);
2491
+ border-radius: var(--usk-native-color-swatch-radius);
1947
2492
  }
1948
2493
 
1949
- [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
2494
+ [data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
1950
2495
 
1951
2496
  /* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
1952
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1953
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2497
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2498
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
1954
2499
  margin-inline-end: .75rem;
1955
2500
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
1956
2501
  color: var(--usk-native-on-primary);
1957
- background: var(--usk-native-primary);
1958
- border: var(--usk-native-border-width) solid var(--usk-native-primary);
1959
- border-radius: var(--usk-native-radius-sm);
2502
+ background: var(--usk-native-file-button-background);
2503
+ border: var(--usk-native-file-button-border);
2504
+ border-radius: var(--usk-native-file-button-radius);
2505
+ box-shadow: var(--usk-native-file-button-shadow);
1960
2506
  font-weight: 800;
1961
2507
  cursor: pointer;
1962
2508
  }
1963
2509
 
1964
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
1965
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
2510
+ [data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
2511
+ [data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
1966
2512
  background: var(--usk-native-primary-hover);
1967
2513
  border-color: var(--usk-native-primary-hover);
1968
2514
  }
1969
2515
 
1970
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
1971
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
2516
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
2517
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
1972
2518
  box-shadow: var(--usk-native-focus-ring);
1973
2519
  }
1974
2520
 
1975
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::file-selector-button,
1976
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
2521
+ [data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
2522
+ [data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
1977
2523
  filter: brightness(.96);
1978
2524
  }
1979
2525
 
1980
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
1981
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
2526
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
2527
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
1982
2528
  color: var(--usk-native-text-muted);
1983
2529
  background: var(--usk-native-surface-soft);
1984
2530
  border-color: var(--usk-native-border);
1985
2531
  cursor: not-allowed;
1986
2532
  }
1987
2533
 
1988
- [data-ui][data-theme][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
2534
+ [data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
1989
2535
  background: var(--usk-native-surface-soft);
1990
2536
  }
1991
2537
 
1992
- [data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
2538
+ [data-ui][data-mode] :where(input:required, textarea:required, select:required) {
1993
2539
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
1994
2540
  }
1995
2541
 
1996
- [data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
2542
+ [data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
1997
2543
  border-color: var(--usk-native-success);
1998
2544
  }
1999
2545
 
2000
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2546
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2001
2547
  border-color: var(--usk-native-danger);
2002
2548
  }
2003
2549
 
2004
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2550
+ [data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2551
+ background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
2005
2552
  accent-color: var(--usk-native-warning);
2006
2553
  }
2007
2554
 
2008
- [data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2555
+ [data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2009
2556
  filter: brightness(.96);
2010
2557
  }
2011
2558
 
2012
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2559
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2013
2560
  color: var(--usk-native-text-muted);
2014
2561
  background: var(--usk-native-surface-soft);
2015
2562
  border-color: var(--usk-native-border);
@@ -2018,37 +2565,36 @@
2018
2565
  cursor: not-allowed;
2019
2566
  }
2020
2567
 
2021
- [data-ui][data-theme][data-mode] :where(table) {
2568
+ [data-ui][data-mode] :where(table) {
2022
2569
  width: 100%;
2023
2570
  margin: 1rem 0;
2024
- overflow: hidden;
2025
2571
  background: var(--usk-native-surface);
2026
2572
  border: var(--usk-native-border-width) solid var(--usk-native-border);
2027
2573
  border-radius: var(--usk-native-radius);
2028
2574
  border-collapse: collapse;
2029
2575
  }
2030
2576
 
2031
- [data-ui][data-theme][data-mode] :where(caption) {
2577
+ [data-ui][data-mode] :where(caption) {
2032
2578
  caption-side: bottom;
2033
2579
  padding: .75rem;
2034
2580
  color: var(--usk-native-text-muted);
2035
2581
  font-size: .9rem;
2036
2582
  }
2037
2583
 
2038
- [data-ui][data-theme][data-mode] :where(th, td) {
2584
+ [data-ui][data-mode] :where(th, td) {
2039
2585
  padding: .8rem .9rem;
2040
2586
  text-align: left;
2041
2587
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
2042
2588
  }
2043
2589
 
2044
- [data-ui][data-theme][data-mode] :where(th) {
2590
+ [data-ui][data-mode] :where(th) {
2045
2591
  color: var(--usk-native-text);
2046
2592
  background: var(--usk-native-surface-soft);
2047
2593
  }
2048
2594
 
2049
- [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2595
+ [data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2050
2596
 
2051
- [data-ui][data-theme][data-mode] :where(details) {
2597
+ [data-ui][data-mode] :where(details) {
2052
2598
  margin: 1rem 0;
2053
2599
  padding: .9rem 1rem;
2054
2600
  color: var(--usk-native-text);
@@ -2057,13 +2603,13 @@
2057
2603
  border-radius: var(--usk-native-radius);
2058
2604
  }
2059
2605
 
2060
- [data-ui][data-theme][data-mode] :where(summary) {
2606
+ [data-ui][data-mode] :where(summary) {
2061
2607
  color: var(--usk-native-text);
2062
2608
  font-weight: 900;
2063
2609
  cursor: pointer;
2064
2610
  }
2065
2611
 
2066
- [data-ui][data-theme][data-mode] :where(dialog) {
2612
+ [data-ui][data-mode] :where(dialog) {
2067
2613
  max-width: min(92vw, 42rem);
2068
2614
  padding: 0;
2069
2615
  color: var(--usk-native-text);
@@ -2073,47 +2619,68 @@
2073
2619
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
2074
2620
  }
2075
2621
 
2076
- [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2622
+ [data-ui][data-mode] :where(dialog p) { color: inherit; }
2077
2623
 
2078
- [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2624
+ [data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2079
2625
 
2080
- [data-ui][data-theme][data-mode] :where(progress, meter) {
2626
+ [data-ui][data-mode] :where(progress, meter) {
2627
+ -webkit-appearance: none;
2628
+ appearance: none;
2081
2629
  width: 100%;
2082
- min-height: .9rem;
2630
+ min-height: var(--usk-native-progress-size);
2083
2631
  accent-color: var(--usk-native-primary);
2084
2632
  }
2085
2633
 
2086
- [data-ui][data-theme][data-mode] :where(progress, meter)::-webkit-progress-bar,
2087
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-bar {
2088
- background: var(--usk-native-track);
2089
- border-radius: 999px;
2634
+ [data-ui][data-mode] :where(progress:not([value])) {
2635
+ background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
2636
+ background-size: 200% 100%;
2637
+ border: var(--usk-native-progress-track-border);
2638
+ border-radius: var(--usk-native-progress-track-radius);
2639
+ box-shadow: var(--usk-native-progress-track-shadow);
2640
+ animation: usk-native-progress-indeterminate 1.2s linear infinite;
2090
2641
  }
2091
2642
 
2092
- [data-ui][data-theme][data-mode] :where(progress)::-webkit-progress-value,
2093
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-optimum-value {
2094
- background: var(--usk-native-track-fill);
2095
- border-radius: inherit;
2643
+ @keyframes usk-native-progress-indeterminate {
2644
+ to { background-position: -2rem 0; }
2096
2645
  }
2097
2646
 
2098
- [data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
2099
- [data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
2100
- background: var(--usk-native-track-fill);
2101
- border-radius: 999px;
2647
+ [data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
2648
+ [data-ui][data-mode] :where(meter)::-webkit-meter-bar {
2649
+ background: var(--usk-native-progress-track-background);
2650
+ border: var(--usk-native-progress-track-border);
2651
+ border-radius: var(--usk-native-progress-track-radius);
2652
+ box-shadow: var(--usk-native-progress-track-shadow);
2653
+ }
2654
+
2655
+ [data-ui][data-mode] :where(progress)::-webkit-progress-value,
2656
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
2657
+ background: var(--usk-native-progress-value-background);
2658
+ border-radius: var(--usk-native-progress-value-radius);
2659
+ box-shadow: var(--usk-native-progress-value-shadow);
2660
+ }
2661
+
2662
+ [data-ui][data-mode] :where(progress)::-moz-progress-bar,
2663
+ [data-ui][data-mode] :where(meter)::-moz-meter-bar {
2664
+ background: var(--usk-native-progress-value-background);
2665
+ border-radius: var(--usk-native-progress-value-radius);
2666
+ box-shadow: var(--usk-native-progress-value-shadow);
2102
2667
  }
2103
2668
 
2104
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2105
- background: var(--usk-native-warning);
2669
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
2670
+
2671
+ [data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2672
+ background: var(--usk-native-meter-suboptimum-background);
2106
2673
  }
2107
2674
 
2108
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2109
- background: var(--usk-native-danger);
2675
+ [data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2676
+ background: var(--usk-native-meter-critical-background);
2110
2677
  }
2111
2678
 
2112
- [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2679
+ [data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2113
2680
  color: var(--usk-native-text);
2114
2681
  }
2115
2682
 
2116
- [data-ui][data-theme][data-mode] :where(article, aside) {
2683
+ [data-ui][data-mode] :where(article, aside) {
2117
2684
  padding: var(--usk-native-panel-padding);
2118
2685
  color: var(--usk-native-text);
2119
2686
  background: var(--usk-native-card-bg);
@@ -2122,113 +2689,132 @@
2122
2689
  box-shadow: var(--usk-native-shadow);
2123
2690
  }
2124
2691
 
2125
- [data-ui][data-theme][data-mode] :where(dl) {
2692
+ [data-ui][data-mode] :where(dl) {
2126
2693
  margin: 0 0 1rem;
2127
2694
  color: var(--usk-native-text-muted);
2128
2695
  }
2129
2696
 
2130
- [data-ui][data-theme][data-mode] :where(dt) {
2697
+ [data-ui][data-mode] :where(dt) {
2131
2698
  color: var(--usk-native-text);
2132
2699
  font-weight: 900;
2133
2700
  }
2134
2701
 
2135
- [data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2136
- [data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2137
- [data-ui][data-theme][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2138
- [data-ui][data-theme][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2139
- [data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2140
- [data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2141
- [data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2142
- [data-ui][data-theme][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2143
- [data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2144
- [data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2145
- [data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2146
- [data-ui][data-theme][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2147
- [data-ui][data-theme][data-mode] :where(datalist) { display: none; }
2148
-
2149
- [data-ui][data-theme][data-mode] :where(summary, li)::marker {
2702
+ [data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2703
+ [data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2704
+ [data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2705
+ [data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2706
+ [data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2707
+ [data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2708
+ [data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2709
+ [data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2710
+ [data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2711
+ [data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2712
+ [data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2713
+ [data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2714
+ [data-ui][data-mode] :where(datalist) { display: none; }
2715
+
2716
+ [data-ui][data-mode] :where(summary, li)::marker {
2150
2717
  color: var(--usk-native-indicator);
2151
2718
  }
2152
2719
 
2153
- [data-ui][data-theme][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2154
- opacity: .78;
2720
+ [data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2721
+ opacity: var(--usk-native-indicator-opacity);
2722
+ filter: var(--usk-native-indicator-filter);
2155
2723
  accent-color: var(--usk-native-indicator);
2156
2724
  }
2157
2725
 
2158
- [data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2726
+ [data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2159
2727
  accent-color: var(--usk-native-indicator);
2160
2728
  }
2161
2729
 
2162
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2163
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2730
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2731
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2164
2732
  opacity: .72;
2165
2733
  }
2166
2734
 
2167
- [data-ui][data-theme][data-mode] :where(select)::picker-icon {
2735
+ [data-ui][data-mode] :where(select)::picker-icon {
2168
2736
  color: var(--usk-native-indicator);
2737
+ opacity: var(--usk-native-indicator-opacity);
2738
+ filter: var(--usk-native-indicator-filter);
2169
2739
  }
2170
2740
 
2171
- [data-ui][data-theme][data-mode] :where(:focus-visible) {
2741
+ [data-ui][data-mode] :where(:focus-visible) {
2172
2742
  outline: 3px solid var(--usk-native-focus);
2173
2743
  outline-offset: 3px;
2174
2744
  box-shadow: var(--usk-native-focus-ring);
2175
2745
  }
2176
2746
 
2177
- [data-ui][data-theme][data-mode] :where(:target) {
2747
+ [data-ui][data-mode] :where(:target) {
2178
2748
  scroll-margin-top: 6rem;
2179
2749
  outline: 3px solid var(--usk-native-focus);
2180
2750
  outline-offset: .35rem;
2181
2751
  }
2182
2752
 
2183
- [data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2184
- [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2185
- [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
2186
- [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2187
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
2188
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
2189
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
2753
+ [data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2754
+ [data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2755
+ [data-ui][data-mode] :where([hidden]) { display: none !important; }
2756
+ [data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2757
+ [data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
2758
+ [data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
2759
+ [data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
2190
2760
 
2191
2761
  @supports (color: color-mix(in srgb, black, white)) {
2192
- [data-ui][data-theme][data-mode] {
2762
+ [data-ui][data-mode] {
2193
2763
  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
2764
  }
2195
2765
 
2196
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2766
+ [data-ui][data-mode] :where(code, kbd, samp) {
2197
2767
  border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
2768
  }
2199
2769
 
2200
- [data-ui][data-theme][data-mode] :where(mark) {
2770
+ [data-ui][data-mode] :where(mark) {
2201
2771
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
2772
  }
2203
2773
 
2204
- [data-ui][data-theme][data-mode] :where(fieldset) {
2774
+ [data-ui][data-mode] :where(fieldset) {
2205
2775
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
2776
  }
2207
2777
 
2208
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2778
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
2779
  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
2780
  }
2211
2781
 
2212
- [data-ui][data-theme][data-mode] :where(th) {
2782
+ [data-ui][data-mode] :where(th) {
2213
2783
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
2784
  }
2215
2785
  }
2216
2786
 
2217
2787
  @media (prefers-reduced-motion: reduce) {
2218
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
2219
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2788
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2789
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2220
2790
  transition-duration: 1ms !important;
2221
2791
  }
2792
+
2793
+ [data-ui][data-mode] :where(progress:not([value])) {
2794
+ animation: none;
2795
+ }
2796
+ }
2797
+
2798
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
2799
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
2800
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
2801
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
2802
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
2803
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
2804
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
2805
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
2806
+ box-shadow: none;
2807
+ filter: none;
2222
2808
  }
2223
2809
 
2224
2810
  @media (forced-colors: active) {
2225
2811
  @supports (forced-color-adjust: auto) {
2226
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2812
+ [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
2813
  forced-color-adjust: auto;
2228
2814
  }
2229
2815
  }
2230
2816
 
2231
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2817
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2232
2818
  border-color: Mark;
2233
2819
  }
2234
2820
  }
@@ -2244,7 +2830,7 @@
2244
2830
  ========================================================= */
2245
2831
 
2246
2832
  @layer ui-style-kit.components {
2247
- [data-ui][data-theme][data-mode] :where(
2833
+ [data-ui][data-mode] :where(
2248
2834
  h1,
2249
2835
  h2,
2250
2836
  h3,
@@ -2261,6 +2847,9 @@
2261
2847
  label,
2262
2848
  legend,
2263
2849
  summary,
2850
+ strong,
2851
+ small,
2852
+ em,
2264
2853
  code,
2265
2854
  kbd,
2266
2855
  samp,
@@ -2270,10 +2859,11 @@
2270
2859
  ) {
2271
2860
  max-inline-size: 100%;
2272
2861
  min-inline-size: 0;
2273
- overflow-wrap: anywhere;
2862
+ overflow-wrap: break-word;
2863
+ word-break: normal;
2274
2864
  }
2275
2865
 
2276
- [data-ui][data-theme][data-mode] :where(
2866
+ [data-ui][data-mode] :where(
2277
2867
  [class~="saas-surface"],
2278
2868
  [class~="saas-surface-sm"],
2279
2869
  [class~="saas-surface-lg"],
@@ -2395,13 +2985,12 @@
2395
2985
  [class~="rg-alert"],
2396
2986
  [class~="rg-table-wrap"],
2397
2987
  [class~="rg-nav"]
2398
- ), [data-ui]:where([data-ui="technical-blueprint"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2988
+ ), [data-ui]:where([data-ui="technical-blueprint"])[data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2399
2989
  max-inline-size: 100%;
2400
2990
  min-inline-size: 0;
2401
- overflow-wrap: anywhere;
2402
2991
  }
2403
2992
 
2404
- [data-ui][data-theme][data-mode] :where(
2993
+ [data-ui][data-mode] :where(
2405
2994
  [class~="saas-button"],
2406
2995
  [class~="saas-icon-button"],
2407
2996
  [class~="saas-badge"],
@@ -2446,13 +3035,15 @@
2446
3035
  [class~="rg-icon-button"],
2447
3036
  [class~="rg-badge"],
2448
3037
  [class~="rg-nav-link"]
2449
- ), [data-ui]:where([data-ui="technical-blueprint"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
3038
+ ), [data-ui]:where([data-ui="technical-blueprint"])[data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2450
3039
  max-inline-size: 100%;
2451
3040
  min-inline-size: 0;
3041
+ overflow-wrap: break-word;
3042
+ word-break: normal;
2452
3043
  white-space: normal;
2453
3044
  }
2454
3045
 
2455
- [data-ui][data-theme][data-mode] :where(
3046
+ [data-ui][data-mode] :where(
2456
3047
  .saas-button,
2457
3048
  .saas-icon-button,
2458
3049
  .saas-button-pill,
@@ -2486,7 +3077,7 @@
2486
3077
  .rg-button,
2487
3078
  .rg-icon-button,
2488
3079
  .rg-button-pill
2489
- ), [data-ui]:where([data-ui="technical-blueprint"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
3080
+ ), [data-ui]:where([data-ui="technical-blueprint"])[data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2490
3081
  box-sizing: border-box;
2491
3082
  display: inline-flex;
2492
3083
  align-items: center;
@@ -2498,7 +3089,7 @@
2498
3089
  vertical-align: middle;
2499
3090
  }
2500
3091
 
2501
- [data-ui][data-theme][data-mode] :where(
3092
+ [data-ui][data-mode] :where(
2502
3093
  .saas-button-pill,
2503
3094
  .bento-button-pill,
2504
3095
  .max-button-pill,
@@ -2521,7 +3112,8 @@
2521
3112
  font-weight: 850;
2522
3113
  text-align: center;
2523
3114
  text-decoration: none;
2524
- overflow-wrap: anywhere;
3115
+ overflow-wrap: break-word;
3116
+ word-break: normal;
2525
3117
  white-space: normal;
2526
3118
  cursor: pointer;
2527
3119
  transition:
@@ -2555,7 +3147,7 @@
2555
3147
  .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
2556
3148
  .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
2557
3149
 
2558
- [data-ui][data-theme][data-mode] :where(
3150
+ [data-ui][data-mode] :where(
2559
3151
  .saas-button-pill:active,
2560
3152
  .saas-button-pill[aria-pressed="true"],
2561
3153
  .bento-button-pill:active,
@@ -2594,7 +3186,7 @@
2594
3186
  .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
2595
3187
  .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
2596
3188
 
2597
- [data-ui][data-theme][data-mode] :where(
3189
+ [data-ui][data-mode] :where(
2598
3190
  .saas-button-pill:disabled,
2599
3191
  .saas-button-pill[aria-disabled="true"],
2600
3192
  .bento-button-pill:disabled,
@@ -2624,7 +3216,7 @@
2624
3216
  transform: none;
2625
3217
  }
2626
3218
 
2627
- [data-ui][data-theme][data-mode] :where(
3219
+ [data-ui][data-mode] :where(
2628
3220
  .saas-tooltip,
2629
3221
  .saas-tooltip-top,
2630
3222
  .saas-tooltip-right,
@@ -2683,16 +3275,17 @@
2683
3275
  ) {
2684
3276
  max-inline-size: min(18rem, calc(100vw - 2rem));
2685
3277
  text-align: start;
2686
- overflow-wrap: anywhere;
3278
+ overflow-wrap: break-word;
3279
+ word-break: normal;
2687
3280
  }
2688
3281
 
2689
3282
  /* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
2690
- [data-ui][data-theme][data-mode]:where([data-ui-tooltip-anchor]),
2691
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor]) {
3283
+ [data-ui][data-mode]:where([data-ui-tooltip-anchor]),
3284
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
2692
3285
  position: relative;
2693
3286
  }
2694
3287
 
2695
- [data-ui][data-theme][data-mode] :where(
3288
+ [data-ui][data-mode] :where(
2696
3289
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
2697
3290
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
2698
3291
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -2742,10 +3335,10 @@
2742
3335
  z-index: 20;
2743
3336
  }
2744
3337
 
2745
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2746
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2747
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2748
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3338
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3339
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3340
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3341
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2749
3342
 
2750
3343
  .saas-pill { border-radius: var(--saas-radius-pill); }
2751
3344
  .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -2811,7 +3404,7 @@
2811
3404
  .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2812
3405
 
2813
3406
  .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="ghost"]) {
2814
- color: var(--usk-native-primary);
3407
+ color: var(--usk-primary-ink, var(--usk-native-primary));
2815
3408
  background: transparent;
2816
3409
  border-color: var(--usk-native-border);
2817
3410
  }
@@ -2895,15 +3488,77 @@
2895
3488
  }
2896
3489
  }
2897
3490
 
2898
- /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
- /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
- @layer ui-style-kit.components {
2901
- [data-ui][data-theme][data-mode] :where(
2902
- .luxe-surface,
2903
- .luxe-surface-sm,
2904
- .luxe-surface-lg,
2905
- .luxe-card,
2906
- .luxe-card-service,
3491
+ /**
3492
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
3493
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
3494
+ * The root attributes intentionally raise specificity within the preset layer
3495
+ * so later style-specific defaults cannot collapse the number and caption.
3496
+ */
3497
+ @layer ui-style-kit.presets {
3498
+ [data-ui][data-mode] :where(
3499
+ .saas-badge-seal,
3500
+ .bento-badge-seal,
3501
+ .max-badge-seal,
3502
+ .bau-badge-seal,
3503
+ .tactile-badge-seal,
3504
+ .neo-badge-seal,
3505
+ .retro-badge-seal,
3506
+ .brutal-badge-seal,
3507
+ .cyber-badge-seal,
3508
+ .y2k-badge-seal,
3509
+ .rg-badge-seal,
3510
+ .luxe-badge-seal,
3511
+ .organic-badge-seal,
3512
+ .utility-badge-seal,
3513
+ .blueprint-badge-seal,
3514
+ .deco-badge-seal,
3515
+ .clay-badge-seal,
3516
+ .terminal-badge-seal,
3517
+ .paper-badge-seal,
3518
+ .noir-badge-seal
3519
+ ) > strong {
3520
+ color: inherit;
3521
+ font-size: 1.5rem;
3522
+ line-height: .9;
3523
+ }
3524
+
3525
+ [data-ui][data-mode] :where(
3526
+ .saas-badge-seal,
3527
+ .bento-badge-seal,
3528
+ .max-badge-seal,
3529
+ .bau-badge-seal,
3530
+ .tactile-badge-seal,
3531
+ .neo-badge-seal,
3532
+ .retro-badge-seal,
3533
+ .brutal-badge-seal,
3534
+ .cyber-badge-seal,
3535
+ .y2k-badge-seal,
3536
+ .rg-badge-seal,
3537
+ .luxe-badge-seal,
3538
+ .organic-badge-seal,
3539
+ .utility-badge-seal,
3540
+ .blueprint-badge-seal,
3541
+ .deco-badge-seal,
3542
+ .clay-badge-seal,
3543
+ .terminal-badge-seal,
3544
+ .paper-badge-seal,
3545
+ .noir-badge-seal
3546
+ ) > small {
3547
+ color: inherit;
3548
+ font-size: .8125rem;
3549
+ line-height: 1;
3550
+ }
3551
+ }
3552
+
3553
+ /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
3554
+ /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
3555
+ @layer ui-style-kit.components {
3556
+ [data-ui][data-mode] :where(
3557
+ .luxe-surface,
3558
+ .luxe-surface-sm,
3559
+ .luxe-surface-lg,
3560
+ .luxe-card,
3561
+ .luxe-card-service,
2907
3562
  .luxe-card-feature,
2908
3563
  .luxe-panel,
2909
3564
  .luxe-toolbar,
@@ -3061,13 +3716,12 @@
3061
3716
  .noir-feature-item,
3062
3717
  .noir-callout-bar,
3063
3718
  .noir-media-scrim
3064
- ), [data-ui]:where([data-ui="technical-blueprint"])[data-theme][data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3719
+ ), [data-ui]:where([data-ui="technical-blueprint"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3065
3720
  max-inline-size: 100%;
3066
3721
  min-inline-size: 0;
3067
- overflow-wrap: anywhere;
3068
3722
  }
3069
3723
 
3070
- [data-ui][data-theme][data-mode] :where(
3724
+ [data-ui][data-mode] :where(
3071
3725
  .luxe-button,
3072
3726
  .luxe-icon-button,
3073
3727
  .luxe-button-cut,
@@ -3140,13 +3794,15 @@
3140
3794
  .noir-badge-seal,
3141
3795
  .noir-nav-link,
3142
3796
  .noir-icon-medallion
3143
- ), [data-ui]:where([data-ui="technical-blueprint"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3797
+ ), [data-ui]:where([data-ui="technical-blueprint"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3144
3798
  max-inline-size: 100%;
3145
3799
  min-inline-size: 0;
3800
+ overflow-wrap: break-word;
3801
+ word-break: normal;
3146
3802
  white-space: normal;
3147
3803
  }
3148
3804
 
3149
- [data-ui][data-theme][data-mode] :where(
3805
+ [data-ui][data-mode] :where(
3150
3806
  .luxe-button,
3151
3807
  .luxe-icon-button,
3152
3808
  .luxe-button-pill,
@@ -3174,7 +3830,7 @@
3174
3830
  .noir-button,
3175
3831
  .noir-icon-button,
3176
3832
  .noir-button-pill
3177
- ), [data-ui]:where([data-ui="technical-blueprint"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3833
+ ), [data-ui]:where([data-ui="technical-blueprint"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3178
3834
  box-sizing: border-box;
3179
3835
  display: inline-flex;
3180
3836
  align-items: center;
@@ -3186,7 +3842,7 @@
3186
3842
  vertical-align: middle;
3187
3843
  }
3188
3844
 
3189
- [data-ui][data-theme][data-mode] :where(
3845
+ [data-ui][data-mode] :where(
3190
3846
  .luxe-button-pill,
3191
3847
  .organic-button-pill,
3192
3848
  .utility-button-pill,
@@ -3207,7 +3863,8 @@
3207
3863
  font-weight: 850;
3208
3864
  text-align: center;
3209
3865
  text-decoration: none;
3210
- overflow-wrap: anywhere;
3866
+ overflow-wrap: break-word;
3867
+ word-break: normal;
3211
3868
  white-space: normal;
3212
3869
  cursor: pointer;
3213
3870
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
@@ -3294,7 +3951,7 @@
3294
3951
  .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
3952
  .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
3953
 
3297
- [data-ui][data-theme][data-mode] :where(
3954
+ [data-ui][data-mode] :where(
3298
3955
  .luxe-button-pill:active,
3299
3956
  .luxe-button-pill[aria-pressed="true"],
3300
3957
  .organic-button-pill:active,
@@ -3315,7 +3972,7 @@
3315
3972
  .noir-button-pill[aria-pressed="true"]
3316
3973
  ) { transform: translateY(1px); }
3317
3974
 
3318
- [data-ui][data-theme][data-mode] :where(
3975
+ [data-ui][data-mode] :where(
3319
3976
  .luxe-button-pill:disabled,
3320
3977
  .luxe-button-pill[aria-disabled="true"],
3321
3978
  .organic-button-pill:disabled,
@@ -3336,7 +3993,7 @@
3336
3993
  .noir-button-pill[aria-disabled="true"]
3337
3994
  ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
3995
 
3339
- [data-ui][data-theme][data-mode] :where(
3996
+ [data-ui][data-mode] :where(
3340
3997
  .luxe-tooltip,
3341
3998
  .luxe-tooltip-top,
3342
3999
  .luxe-tooltip-right,
@@ -3382,9 +4039,9 @@
3382
4039
  .noir-tooltip-right,
3383
4040
  .noir-tooltip-bottom,
3384
4041
  .noir-tooltip-left
3385
- ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
4042
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
3386
4043
 
3387
- [data-ui][data-theme][data-mode] :where(
4044
+ [data-ui][data-mode] :where(
3388
4045
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
4046
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
4047
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
@@ -3423,10 +4080,10 @@
3423
4080
  [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
4081
  ) { position: absolute; z-index: 20; }
3425
4082
 
3426
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3427
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3428
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3429
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
4083
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
4084
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
4085
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
4086
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3430
4087
 
3431
4088
  :where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
3432
4089
  :where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
@@ -3434,7 +4091,7 @@
3434
4091
  :where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
3435
4092
  :where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
3436
4093
 
3437
- :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="technical-blueprint"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
4094
+ :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="technical-blueprint"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-primary-ink, var(--usk-native-primary)); background: transparent; border-color: var(--usk-native-border); }
3438
4095
 
3439
4096
  :where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="technical-blueprint"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
3440
4097
  display: inline-flex;
@@ -3512,6 +4169,29 @@
3512
4169
  --blueprint-font-heading: var(--blueprint-font-display);
3513
4170
  --blueprint-font-control: var(--blueprint-font-display);
3514
4171
  --blueprint-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
4172
+ --blueprint-fallback-bg-rgb: 3 30 48;
4173
+ --blueprint-fallback-surface-rgb: 4 39 62;
4174
+ --blueprint-fallback-surface-strong-rgb: 7 51 77;
4175
+ --blueprint-fallback-surface-soft-rgb: 7 46 70;
4176
+ --blueprint-fallback-text-rgb: 220 240 248;
4177
+ --blueprint-fallback-text-muted-rgb: 137 180 200;
4178
+ --blueprint-fallback-border-rgb: 69 142 175;
4179
+ --blueprint-fallback-primary-rgb: 0 183 235;
4180
+ --blueprint-fallback-primary-hover-rgb: 54 211 248;
4181
+ --blueprint-fallback-primary-text-rgb: 0 23 37;
4182
+ --blueprint-fallback-secondary-rgb: 157 216 235;
4183
+ --blueprint-fallback-secondary-hover-rgb: 206 241 250;
4184
+ --blueprint-fallback-secondary-text-rgb: 0 23 37;
4185
+ --blueprint-fallback-accent-rgb: 88 205 234;
4186
+ --blueprint-fallback-accent-text-rgb: 0 23 37;
4187
+ --blueprint-fallback-success-rgb: 63 185 111;
4188
+ --blueprint-fallback-success-text-rgb: 0 25 15;
4189
+ --blueprint-fallback-warning-rgb: 239 171 50;
4190
+ --blueprint-fallback-warning-text-rgb: 32 20 0;
4191
+ --blueprint-fallback-danger-rgb: 255 87 82;
4192
+ --blueprint-fallback-danger-text-rgb: 255 255 255;
4193
+ --blueprint-fallback-link-rgb: 107 218 242;
4194
+ --blueprint-fallback-focus-rgb: 110 214 255;
3515
4195
  --blueprint-radius-xs: .25rem;
3516
4196
  --blueprint-radius-sm: .5rem;
3517
4197
  --blueprint-radius-md: .75rem;
@@ -3533,6 +4213,29 @@
3533
4213
  --lightningcss-light: initial;
3534
4214
  --lightningcss-dark: ;
3535
4215
  color-scheme: light;
4216
+ --blueprint-fallback-bg-rgb: 250 248 240;
4217
+ --blueprint-fallback-surface-rgb: 255 254 248;
4218
+ --blueprint-fallback-surface-strong-rgb: 247 245 236;
4219
+ --blueprint-fallback-surface-soft-rgb: 235 241 242;
4220
+ --blueprint-fallback-text-rgb: 13 63 104;
4221
+ --blueprint-fallback-text-muted-rgb: 60 91 116;
4222
+ --blueprint-fallback-border-rgb: 82 135 172;
4223
+ --blueprint-fallback-primary-rgb: 0 118 184;
4224
+ --blueprint-fallback-primary-hover-rgb: 0 92 148;
4225
+ --blueprint-fallback-primary-text-rgb: 255 255 255;
4226
+ --blueprint-fallback-secondary-rgb: 8 83 139;
4227
+ --blueprint-fallback-secondary-hover-rgb: 6 65 109;
4228
+ --blueprint-fallback-secondary-text-rgb: 255 255 255;
4229
+ --blueprint-fallback-accent-rgb: 31 166 204;
4230
+ --blueprint-fallback-accent-text-rgb: 0 29 44;
4231
+ --blueprint-fallback-success-rgb: 24 111 64;
4232
+ --blueprint-fallback-success-text-rgb: 255 255 255;
4233
+ --blueprint-fallback-warning-rgb: 132 76 0;
4234
+ --blueprint-fallback-warning-text-rgb: 255 255 255;
4235
+ --blueprint-fallback-danger-rgb: 209 58 54;
4236
+ --blueprint-fallback-danger-text-rgb: 255 255 255;
4237
+ --blueprint-fallback-link-rgb: 0 92 148;
4238
+ --blueprint-fallback-focus-rgb: 0 145 205;
3536
4239
  --blueprint-panel-alpha: .98;
3537
4240
  --blueprint-panel-soft-alpha: .78;
3538
4241
  --blueprint-border-alpha: .58;
@@ -3544,6 +4247,29 @@
3544
4247
  --lightningcss-light: ;
3545
4248
  --lightningcss-dark: initial;
3546
4249
  color-scheme: dark;
4250
+ --blueprint-fallback-bg-rgb: 3 30 48;
4251
+ --blueprint-fallback-surface-rgb: 4 39 62;
4252
+ --blueprint-fallback-surface-strong-rgb: 7 51 77;
4253
+ --blueprint-fallback-surface-soft-rgb: 7 46 70;
4254
+ --blueprint-fallback-text-rgb: 220 240 248;
4255
+ --blueprint-fallback-text-muted-rgb: 137 180 200;
4256
+ --blueprint-fallback-border-rgb: 69 142 175;
4257
+ --blueprint-fallback-primary-rgb: 0 183 235;
4258
+ --blueprint-fallback-primary-hover-rgb: 54 211 248;
4259
+ --blueprint-fallback-primary-text-rgb: 0 23 37;
4260
+ --blueprint-fallback-secondary-rgb: 157 216 235;
4261
+ --blueprint-fallback-secondary-hover-rgb: 206 241 250;
4262
+ --blueprint-fallback-secondary-text-rgb: 0 23 37;
4263
+ --blueprint-fallback-accent-rgb: 88 205 234;
4264
+ --blueprint-fallback-accent-text-rgb: 0 23 37;
4265
+ --blueprint-fallback-success-rgb: 63 185 111;
4266
+ --blueprint-fallback-success-text-rgb: 0 25 15;
4267
+ --blueprint-fallback-warning-rgb: 239 171 50;
4268
+ --blueprint-fallback-warning-text-rgb: 32 20 0;
4269
+ --blueprint-fallback-danger-rgb: 255 87 82;
4270
+ --blueprint-fallback-danger-text-rgb: 0 0 0;
4271
+ --blueprint-fallback-link-rgb: 107 218 242;
4272
+ --blueprint-fallback-focus-rgb: 110 214 255;
3547
4273
  --blueprint-panel-alpha: .92;
3548
4274
  --blueprint-panel-soft-alpha: .64;
3549
4275
  --blueprint-border-alpha: .52;
@@ -3555,6 +4281,29 @@
3555
4281
  --lightningcss-light: ;
3556
4282
  --lightningcss-dark: initial;
3557
4283
  color-scheme: dark;
4284
+ --blueprint-fallback-bg-rgb: 0 0 0;
4285
+ --blueprint-fallback-surface-rgb: 0 16 28;
4286
+ --blueprint-fallback-surface-strong-rgb: 0 28 44;
4287
+ --blueprint-fallback-surface-soft-rgb: 0 20 34;
4288
+ --blueprint-fallback-text-rgb: 255 255 255;
4289
+ --blueprint-fallback-text-muted-rgb: 200 225 235;
4290
+ --blueprint-fallback-border-rgb: 121 222 255;
4291
+ --blueprint-fallback-primary-rgb: 0 229 255;
4292
+ --blueprint-fallback-primary-hover-rgb: 102 238 255;
4293
+ --blueprint-fallback-primary-text-rgb: 0 0 0;
4294
+ --blueprint-fallback-secondary-rgb: 255 255 255;
4295
+ --blueprint-fallback-secondary-hover-rgb: 210 236 245;
4296
+ --blueprint-fallback-secondary-text-rgb: 0 0 0;
4297
+ --blueprint-fallback-accent-rgb: 255 255 0;
4298
+ --blueprint-fallback-accent-text-rgb: 0 0 0;
4299
+ --blueprint-fallback-success-rgb: 64 255 128;
4300
+ --blueprint-fallback-success-text-rgb: 0 0 0;
4301
+ --blueprint-fallback-warning-rgb: 255 217 0;
4302
+ --blueprint-fallback-warning-text-rgb: 0 0 0;
4303
+ --blueprint-fallback-danger-rgb: 255 72 72;
4304
+ --blueprint-fallback-danger-text-rgb: 0 0 0;
4305
+ --blueprint-fallback-link-rgb: 102 238 255;
4306
+ --blueprint-fallback-focus-rgb: 255 255 0;
3558
4307
  --blueprint-panel-alpha: 1;
3559
4308
  --blueprint-panel-soft-alpha: .92;
3560
4309
  --blueprint-border-alpha: 1;
@@ -3577,14 +4326,14 @@
3577
4326
  --blueprint-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
4327
  --blueprint-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
4328
  --blueprint-accent-rgb: var(--usk-accent-rgb);
3580
- --blueprint-success-rgb: var(--usk-success-rgb);
3581
- --blueprint-warning-rgb: var(--usk-warning-rgb);
3582
- --blueprint-danger-rgb: var(--usk-danger-rgb);
3583
- --blueprint-link-rgb: var(--usk-link-rgb);
3584
4329
  --blueprint-accent-text-rgb: var(--usk-accent-text-rgb);
4330
+ --blueprint-success-rgb: var(--usk-success-rgb);
3585
4331
  --blueprint-success-text-rgb: var(--usk-success-text-rgb);
4332
+ --blueprint-warning-rgb: var(--usk-warning-rgb);
3586
4333
  --blueprint-warning-text-rgb: var(--usk-warning-text-rgb);
4334
+ --blueprint-danger-rgb: var(--usk-danger-rgb);
3587
4335
  --blueprint-danger-text-rgb: var(--usk-danger-text-rgb);
4336
+ --blueprint-link-rgb: var(--usk-link-rgb);
3588
4337
  --blueprint-focus-rgb: var(--usk-focus-rgb);
3589
4338
  --usk-native-surface: var(--blueprint-surface);
3590
4339
  --usk-native-surface-strong: var(--blueprint-surface-strong);
@@ -3604,6 +4353,114 @@
3604
4353
  --usk-native-link: var(--blueprint-link);
3605
4354
  --usk-native-font-body: var(--blueprint-font-body);
3606
4355
  --usk-native-font-heading: var(--blueprint-font-heading);
4356
+ --usk-native-font-control: "Arial Narrow", Bahnschrift, ui-monospace, monospace;
4357
+ --usk-native-font-mono: var(--blueprint-font-mono);
4358
+ --usk-native-radius-sm: 0;
4359
+ --usk-native-radius: 0;
4360
+ --usk-native-radius-lg: 0;
4361
+ --usk-native-shadow: none;
4362
+ --usk-native-shadow-md: none;
4363
+ --usk-native-focus-ring: 0 0 0 1px var(--blueprint-surface), 0 0 0 3px var(--blueprint-focus);
4364
+ --usk-native-border-width: 1px;
4365
+ --usk-native-field-gap: .5rem;
4366
+ --usk-native-panel-padding: var(--blueprint-space-5);
4367
+ --usk-native-control-min-block-size: 2.75rem;
4368
+ --usk-native-control-padding-block: .48rem;
4369
+ --usk-native-control-padding-inline: .74rem;
4370
+ --usk-native-subcontrol-padding-block: .34rem;
4371
+ --usk-native-subcontrol-padding-inline: .54rem;
4372
+ --usk-native-choice-size: 1.08rem;
4373
+ --usk-native-choice-background: linear-gradient(90deg, transparent 46%, rgb(var(--blueprint-primary-rgb) / .12) 46% 54%, transparent 54%), var(--blueprint-control-bg);
4374
+ --usk-native-choice-border: 1px solid var(--blueprint-primary);
4375
+ --usk-native-checkbox-radius: 0;
4376
+ --usk-native-radio-radius: 50%;
4377
+ --usk-native-choice-shadow: 0 0 0 1px var(--blueprint-surface-strong);
4378
+ --usk-native-choice-checked-background: linear-gradient(135deg, var(--blueprint-primary) 0 46%, var(--blueprint-surface) 46% 54%, var(--blueprint-primary) 54%);
4379
+ --usk-native-choice-mark-color: var(--blueprint-on-primary);
4380
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%), linear-gradient(135deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%);
4381
+ --usk-native-select-indicator-size: .62rem .62rem, .62rem .62rem;
4382
+ --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .64rem) 50%;
4383
+ --usk-native-select-padding-inline-end: 2.15rem;
4384
+ --usk-native-range-track-size: .22rem;
4385
+ --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--blueprint-primary) 0 1px, transparent 1px .62rem), var(--blueprint-surface-soft);
4386
+ --usk-native-range-track-border: 1px solid var(--blueprint-primary);
4387
+ --usk-native-range-track-radius: 0;
4388
+ --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
4389
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
4390
+ --usk-native-range-thumb-size: 1.02rem;
4391
+ --usk-native-range-thumb-background: var(--blueprint-surface);
4392
+ --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
4393
+ --usk-native-range-thumb-radius: 0;
4394
+ --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);
4395
+ --usk-native-progress-size: .46rem;
4396
+ --usk-native-progress-track-background: repeating-linear-gradient(90deg, transparent 0 24%, rgb(var(--blueprint-primary-rgb) / .18) 24% 25%), var(--blueprint-surface-soft);
4397
+ --usk-native-progress-track-border: 1px solid var(--blueprint-primary);
4398
+ --usk-native-progress-track-radius: 0;
4399
+ --usk-native-progress-track-shadow: .14rem .14rem 0 rgb(var(--blueprint-primary-rgb) / .18);
4400
+ --usk-native-progress-value-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
4401
+ --usk-native-progress-value-radius: 0;
4402
+ --usk-native-progress-value-shadow: none;
4403
+ --usk-native-meter-optimum-background: var(--blueprint-success);
4404
+ --usk-native-meter-suboptimum-background: var(--blueprint-warning);
4405
+ --usk-native-meter-critical-background: var(--blueprint-danger);
4406
+ --usk-native-file-button-background: var(--blueprint-primary);
4407
+ --usk-native-file-button-border: 1px solid var(--blueprint-border);
4408
+ --usk-native-file-button-radius: 0;
4409
+ --usk-native-file-button-shadow: 0 0 0 1px var(--blueprint-primary);
4410
+ --usk-native-color-swatch-border: 1px solid var(--blueprint-border);
4411
+ --usk-native-color-swatch-radius: 0;
4412
+ --usk-native-indicator-opacity: .92;
4413
+ --usk-native-indicator-filter: none;
4414
+ --usk-native-scrollbar-size: .7rem;
4415
+ --usk-native-scrollbar-track: repeating-linear-gradient(45deg, var(--blueprint-surface) 0 .18rem, var(--blueprint-surface-soft) .18rem .36rem);
4416
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, transparent 35%, var(--blueprint-primary) 35% 65%, transparent 65%);
4417
+ --usk-native-scrollbar-radius: 0;
4418
+ --blueprint-bg: rgb(var(--blueprint-bg-rgb));
4419
+ }
4420
+
4421
+ [data-ui="technical-blueprint"][data-mode] {
4422
+ --usk-native-bg: var(--blueprint-bg);
4423
+ --blueprint-bg-rgb: var(--usk-bg-rgb, var(--blueprint-fallback-bg-rgb));
4424
+ --blueprint-surface-rgb: var(--usk-surface-rgb, var(--blueprint-fallback-surface-rgb));
4425
+ --blueprint-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--blueprint-fallback-surface-strong-rgb));
4426
+ --blueprint-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--blueprint-fallback-surface-soft-rgb));
4427
+ --blueprint-text-rgb: var(--usk-text-rgb, var(--blueprint-fallback-text-rgb));
4428
+ --blueprint-text-muted-rgb: var(--usk-text-muted-rgb, var(--blueprint-fallback-text-muted-rgb));
4429
+ --blueprint-border-rgb: var(--usk-border-rgb, var(--blueprint-fallback-border-rgb));
4430
+ --blueprint-primary-rgb: var(--usk-primary-rgb, var(--blueprint-fallback-primary-rgb));
4431
+ --blueprint-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--blueprint-fallback-primary-hover-rgb));
4432
+ --blueprint-primary-text-rgb: var(--usk-primary-text-rgb, var(--blueprint-fallback-primary-text-rgb));
4433
+ --blueprint-secondary-rgb: var(--usk-secondary-rgb, var(--blueprint-fallback-secondary-rgb));
4434
+ --blueprint-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--blueprint-fallback-secondary-hover-rgb));
4435
+ --blueprint-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--blueprint-fallback-secondary-text-rgb));
4436
+ --blueprint-accent-rgb: var(--usk-accent-rgb, var(--blueprint-fallback-accent-rgb));
4437
+ --blueprint-success-rgb: var(--usk-success-rgb, var(--blueprint-fallback-success-rgb));
4438
+ --blueprint-warning-rgb: var(--usk-warning-rgb, var(--blueprint-fallback-warning-rgb));
4439
+ --blueprint-danger-rgb: var(--usk-danger-rgb, var(--blueprint-fallback-danger-rgb));
4440
+ --blueprint-link-rgb: var(--usk-link-rgb, var(--blueprint-fallback-link-rgb));
4441
+ --blueprint-accent-text-rgb: var(--usk-accent-text-rgb, var(--blueprint-fallback-accent-text-rgb));
4442
+ --blueprint-success-text-rgb: var(--usk-success-text-rgb, var(--blueprint-fallback-success-text-rgb));
4443
+ --blueprint-warning-text-rgb: var(--usk-warning-text-rgb, var(--blueprint-fallback-warning-text-rgb));
4444
+ --blueprint-danger-text-rgb: var(--usk-danger-text-rgb, var(--blueprint-fallback-danger-text-rgb));
4445
+ --blueprint-focus-rgb: var(--usk-focus-rgb, var(--blueprint-fallback-focus-rgb));
4446
+ --usk-native-surface: var(--blueprint-surface);
4447
+ --usk-native-surface-strong: var(--blueprint-surface-strong);
4448
+ --usk-native-surface-soft: var(--blueprint-surface-soft);
4449
+ --usk-native-card-bg: var(--blueprint-card-bg);
4450
+ --usk-native-control-bg: var(--blueprint-control-bg);
4451
+ --usk-native-text: var(--blueprint-text);
4452
+ --usk-native-text-muted: var(--blueprint-text-muted);
4453
+ --usk-native-border: var(--blueprint-border);
4454
+ --usk-native-primary: var(--blueprint-primary);
4455
+ --usk-native-primary-hover: var(--blueprint-primary-hover);
4456
+ --usk-native-on-primary: var(--blueprint-on-primary);
4457
+ --usk-native-focus: var(--blueprint-focus);
4458
+ --usk-native-success: var(--blueprint-success);
4459
+ --usk-native-warning: var(--blueprint-warning);
4460
+ --usk-native-danger: var(--blueprint-danger);
4461
+ --usk-native-link: var(--blueprint-link);
4462
+ --usk-native-font-body: var(--blueprint-font-body);
4463
+ --usk-native-font-heading: var(--blueprint-font-heading);
3607
4464
  --usk-native-font-control: var(--blueprint-font-control);
3608
4465
  --usk-native-font-mono: var(--blueprint-font-mono);
3609
4466
  --usk-native-radius-sm: var(--blueprint-radius-sm);
@@ -3615,6 +4472,57 @@
3615
4472
  --usk-native-border-width: 1px;
3616
4473
  --usk-native-field-gap: .5rem;
3617
4474
  --usk-native-panel-padding: var(--blueprint-space-5);
4475
+ --usk-native-control-min-block-size: 2.75rem;
4476
+ --usk-native-control-padding-block: .74rem;
4477
+ --usk-native-control-padding-inline: .95rem;
4478
+ --usk-native-subcontrol-padding-block: .58rem;
4479
+ --usk-native-subcontrol-padding-inline: .72rem;
4480
+ --usk-native-choice-size: 1.35rem;
4481
+ --usk-native-choice-background: var(--blueprint-control-bg);
4482
+ --usk-native-choice-border: 1px solid var(--blueprint-border);
4483
+ --usk-native-checkbox-radius: 0;
4484
+ --usk-native-radio-radius: 50%;
4485
+ --usk-native-choice-shadow: 0 0 0 1px var(--blueprint-primary);
4486
+ --usk-native-choice-checked-background: var(--blueprint-primary);
4487
+ --usk-native-choice-mark-color: var(--blueprint-on-primary);
4488
+ --usk-native-select-indicator-image: linear-gradient(69deg, transparent 50%, var(--blueprint-primary) 50%), linear-gradient(111deg, var(--blueprint-primary) 50%, transparent 50%);
4489
+ --usk-native-select-indicator-size: .5rem .5rem, .5rem .5rem;
4490
+ --usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - .84rem) 50%;
4491
+ --usk-native-select-padding-inline-end: 2.55rem;
4492
+ --usk-native-range-track-size: .34rem;
4493
+ --usk-native-range-track-background: var(--blueprint-surface-soft);
4494
+ --usk-native-range-track-border: 1px solid var(--blueprint-border);
4495
+ --usk-native-range-track-radius: 0;
4496
+ --usk-native-range-track-shadow: 0 0 0 1px var(--blueprint-primary);
4497
+ --usk-native-range-progress-background: var(--blueprint-primary);
4498
+ --usk-native-range-thumb-size: 1.2rem;
4499
+ --usk-native-range-thumb-background: var(--blueprint-surface-strong);
4500
+ --usk-native-range-thumb-border: 1px solid var(--blueprint-border);
4501
+ --usk-native-range-thumb-radius: 50%;
4502
+ --usk-native-range-thumb-shadow: 0 0 0 1px var(--blueprint-primary);
4503
+ --usk-native-progress-size: .55rem;
4504
+ --usk-native-progress-track-background: var(--blueprint-surface-soft);
4505
+ --usk-native-progress-track-border: 1px solid var(--blueprint-border);
4506
+ --usk-native-progress-track-radius: 0;
4507
+ --usk-native-progress-track-shadow: 0 0 0 1px var(--blueprint-primary);
4508
+ --usk-native-progress-value-background: var(--blueprint-primary);
4509
+ --usk-native-progress-value-radius: 0;
4510
+ --usk-native-progress-value-shadow: 0 0 0 1px var(--blueprint-primary);
4511
+ --usk-native-meter-optimum-background: var(--blueprint-success);
4512
+ --usk-native-meter-suboptimum-background: var(--blueprint-warning);
4513
+ --usk-native-meter-critical-background: var(--blueprint-danger);
4514
+ --usk-native-file-button-background: var(--blueprint-primary);
4515
+ --usk-native-file-button-border: 1px solid var(--blueprint-border);
4516
+ --usk-native-file-button-radius: 0;
4517
+ --usk-native-file-button-shadow: 0 0 0 1px var(--blueprint-primary);
4518
+ --usk-native-color-swatch-border: 1px solid var(--blueprint-border);
4519
+ --usk-native-color-swatch-radius: 0;
4520
+ --usk-native-indicator-opacity: .92;
4521
+ --usk-native-indicator-filter: none;
4522
+ --usk-native-scrollbar-size: .65rem;
4523
+ --usk-native-scrollbar-track: var(--blueprint-surface-soft);
4524
+ --usk-native-scrollbar-thumb: var(--blueprint-primary);
4525
+ --usk-native-scrollbar-radius: 0;
3618
4526
  --blueprint-bg: rgb(var(--blueprint-bg-rgb));
3619
4527
  --blueprint-surface: rgb(var(--blueprint-surface-rgb) / var(--blueprint-panel-alpha));
3620
4528
  --blueprint-surface-strong: rgb(var(--blueprint-surface-strong-rgb) / var(--blueprint-panel-alpha));
@@ -3655,7 +4563,7 @@
3655
4563
  }
3656
4564
 
3657
4565
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="technical-blueprint"][data-theme][data-mode] {
4566
+ [data-ui="technical-blueprint"][data-mode] {
3659
4567
  --blueprint-border: color-mix(in srgb, rgb(var(--blueprint-border-rgb) / max(var(--blueprint-border-alpha), var(--usk-border-min-alpha))), var(--blueprint-text) var(--usk-border-text-mix));
3660
4568
  }
3661
4569
  }
@@ -3674,7 +4582,7 @@
3674
4582
  box-sizing: border-box;
3675
4583
  }
3676
4584
 
3677
- [data-ui="technical-blueprint"][data-theme][data-mode] {
4585
+ [data-ui="technical-blueprint"][data-theme][data-mode], [data-ui="technical-blueprint"][data-mode]:not([data-theme]) {
3678
4586
  background: var(--blueprint-theme-bg);
3679
4587
  background-size: var(--blueprint-theme-bg-size);
3680
4588
  }
@@ -3700,7 +4608,7 @@
3700
4608
  }
3701
4609
 
3702
4610
  .blueprint-kicker {
3703
- color: var(--blueprint-primary);
4611
+ color: var(--usk-primary-ink, var(--blueprint-primary));
3704
4612
  letter-spacing: .12em;
3705
4613
  text-transform: uppercase;
3706
4614
  margin: 0;
@@ -3805,12 +4713,6 @@
3805
4713
  box-shadow: inset 0 3px 10px #0000002e;
3806
4714
  }
3807
4715
 
3808
- .blueprint-button-primary, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="primary"]) {
3809
- background: var(--blueprint-primary);
3810
- color: var(--blueprint-on-primary);
3811
- border-color: var(--blueprint-primary);
3812
- }
3813
-
3814
4716
  .blueprint-button-primary:hover, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="primary"]):hover {
3815
4717
  background: var(--blueprint-primary-hover);
3816
4718
  border-color: var(--blueprint-primary-hover);
@@ -3855,7 +4757,7 @@
3855
4757
  background: var(--blueprint-card-bg);
3856
4758
  }
3857
4759
 
3858
- .blueprint-toolbar, .blueprint-table-wrap, .blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-ghost), .blueprint-icon-button, :where([data-ui="technical-blueprint"]) .ui-toolbar, :where([data-ui="technical-blueprint"]) .ui-table-wrap, :where([data-ui="technical-blueprint"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="technical-blueprint"]) .ui-icon-button {
4760
+ .blueprint-toolbar, .blueprint-table-wrap, .blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning):not(.blueprint-button-ghost), .blueprint-icon-button, :where([data-ui="technical-blueprint"]) .ui-toolbar, :where([data-ui="technical-blueprint"]) .ui-table-wrap, :where([data-ui="technical-blueprint"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="warning"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="technical-blueprint"]) .ui-icon-button {
3859
4761
  background: var(--blueprint-control-bg);
3860
4762
  }
3861
4763
 
@@ -3893,11 +4795,6 @@
3893
4795
  min-height: 8rem;
3894
4796
  }
3895
4797
 
3896
- .blueprint-input::placeholder, .blueprint-textarea::placeholder, :where([data-ui="technical-blueprint"]) .ui-input::placeholder, :where([data-ui="technical-blueprint"]) .ui-textarea::placeholder {
3897
- color: var(--blueprint-text-muted);
3898
- opacity: .82;
3899
- }
3900
-
3901
4798
  .blueprint-input:hover, .blueprint-textarea:hover, .blueprint-select:hover, :where([data-ui="technical-blueprint"]) .ui-input:hover, :where([data-ui="technical-blueprint"]) .ui-textarea:hover, :where([data-ui="technical-blueprint"]) .ui-select:hover {
3902
4799
  border-color: rgb(var(--blueprint-primary-rgb)/.58);
3903
4800
  }
@@ -4040,12 +4937,6 @@
4040
4937
  border-color: var(--blueprint-secondary);
4041
4938
  }
4042
4939
 
4043
- .blueprint-badge-success, :where([data-ui="technical-blueprint"]) .ui-badge:where([data-ui-variant="success"]) {
4044
- background: var(--blueprint-success);
4045
- color: var(--blueprint-on-success);
4046
- border-color: var(--blueprint-success);
4047
- }
4048
-
4049
4940
  .blueprint-badge-warning, :where([data-ui="technical-blueprint"]) .ui-badge:where([data-ui-variant="warning"]) {
4050
4941
  background: var(--blueprint-warning);
4051
4942
  color: var(--blueprint-on-warning);
@@ -4202,7 +5093,7 @@
4202
5093
  }
4203
5094
 
4204
5095
  .blueprint-text-primary {
4205
- color: var(--blueprint-primary);
5096
+ color: var(--usk-primary-ink, var(--blueprint-primary));
4206
5097
  }
4207
5098
 
4208
5099
  .blueprint-text-secondary {
@@ -4210,7 +5101,7 @@
4210
5101
  }
4211
5102
 
4212
5103
  .blueprint-text-accent {
4213
- color: var(--blueprint-accent);
5104
+ color: var(--usk-accent-ink, var(--blueprint-accent));
4214
5105
  }
4215
5106
 
4216
5107
  .blueprint-text-success {
@@ -4435,7 +5326,7 @@
4435
5326
  }
4436
5327
 
4437
5328
  .blueprint-button.blueprint-button-outline-heavy, .blueprint-button-outline-heavy, :where([data-ui="technical-blueprint"]) .ui-button.blueprint-button-outline-heavy {
4438
- color: var(--blueprint-primary);
5329
+ color: var(--usk-primary-ink, var(--blueprint-primary));
4439
5330
  border-style: solid;
4440
5331
  border-width: 2px;
4441
5332
  border-color: var(--blueprint-primary);
@@ -4476,7 +5367,6 @@
4476
5367
  border-radius: var(--blueprint-radius-lg);
4477
5368
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4478
5369
  display: grid;
4479
- overflow: hidden;
4480
5370
  }
4481
5371
 
4482
5372
  .blueprint-feature-item {
@@ -4519,7 +5409,7 @@
4519
5409
  }
4520
5410
 
4521
5411
  .blueprint-eyebrow {
4522
- color: var(--blueprint-primary);
5412
+ color: var(--usk-primary-ink, var(--blueprint-primary));
4523
5413
  font-family: var(--blueprint-font-heading);
4524
5414
  letter-spacing: .14em;
4525
5415
  text-transform: uppercase;
@@ -4594,8 +5484,8 @@
4594
5484
  }
4595
5485
 
4596
5486
  :root {
4597
- --blueprint-font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
4598
- --blueprint-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
5487
+ --blueprint-font-display: "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
5488
+ --blueprint-font-body: Bahnschrift, "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
4599
5489
  --blueprint-font-heading: var(--blueprint-font-display);
4600
5490
  --blueprint-font-control: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
4601
5491
  --blueprint-radius-xs: 0;
@@ -4605,7 +5495,7 @@
4605
5495
  --blueprint-radius-xl: .24rem;
4606
5496
  }
4607
5497
 
4608
- [data-ui="technical-blueprint"][data-theme][data-mode] {
5498
+ [data-ui="technical-blueprint"][data-mode] {
4609
5499
  --blueprint-theme-bg: linear-gradient(90deg, rgb(var(--blueprint-border-rgb) / .13) 1px, transparent 1px), linear-gradient(rgb(var(--blueprint-border-rgb) / .13) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--blueprint-primary-rgb) / .09) 1px, transparent 1px), linear-gradient(rgb(var(--blueprint-primary-rgb) / .09) 1px, transparent 1px), var(--blueprint-bg);
4610
5500
  --blueprint-theme-bg-size: 1.5rem 1.5rem, 1.5rem 1.5rem, .3rem .3rem, .3rem .3rem, auto;
4611
5501
  --blueprint-card-bg: rgb(var(--blueprint-surface-rgb) / calc(var(--blueprint-panel-alpha) * .86));
@@ -4616,6 +5506,7 @@
4616
5506
  text-transform: uppercase;
4617
5507
  letter-spacing: .025em;
4618
5508
  font-weight: 800;
5509
+ font-stretch: condensed;
4619
5510
  }
4620
5511
 
4621
5512
  .blueprint-title {
@@ -4646,7 +5537,7 @@
4646
5537
  border-radius: 0;
4647
5538
  }
4648
5539
 
4649
- .blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger), :where([data-ui="technical-blueprint"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])) {
5540
+ .blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning), :where([data-ui="technical-blueprint"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="warning"])) {
4650
5541
  background: none;
4651
5542
  }
4652
5543
 
@@ -4676,7 +5567,7 @@
4676
5567
  }
4677
5568
 
4678
5569
  .blueprint-icon-medallion {
4679
- color: var(--blueprint-primary);
5570
+ color: var(--usk-primary-ink, var(--blueprint-primary));
4680
5571
  box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb)/.35);
4681
5572
  background: none;
4682
5573
  border-radius: 0;
@@ -4697,6 +5588,7 @@
4697
5588
  clip-path: polygon(.55rem 0, 42% 0, 42% .18rem, 58% .18rem, 58% 0, calc(100% - .55rem) 0, 100% .55rem, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, .55rem 100%, 0 calc(100% - .55rem), 0 .55rem);
4698
5589
  justify-content: center;
4699
5590
  justify-self: start;
5591
+ min-block-size: 2.75rem;
4700
5592
  min-inline-size: 6rem;
4701
5593
  max-inline-size: 100%;
4702
5594
  }
@@ -4714,15 +5606,9 @@
4714
5606
  border-radius: 0;
4715
5607
  }
4716
5608
 
4717
- [data-ui="technical-blueprint"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4718
- border: 1px solid var(--blueprint-primary);
4719
- box-shadow: inset 0 0 0 1px rgb(var(--blueprint-surface-strong-rgb)/.72),.18rem .18rem 0 rgb(var(--blueprint-primary-rgb)/.24);
4720
- border-radius: 0;
4721
- }
4722
-
4723
- [data-ui="technical-blueprint"][data-theme][data-mode] :where(dialog) {
5609
+ [data-ui="technical-blueprint"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])), [data-ui="technical-blueprint"][data-mode]:not([data-theme]) :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])), [data-ui="technical-blueprint"][data-theme][data-mode] :where(dialog), [data-ui="technical-blueprint"][data-mode]:not([data-theme]) :where(dialog) {
4724
5610
  border: 1px solid var(--blueprint-primary);
4725
- box-shadow: inset 0 0 0 1px rgb(var(--blueprint-surface-strong-rgb)/.72),.28rem .28rem 0 rgb(var(--blueprint-primary-rgb)/.26),0 1rem 2rem rgb(var(--blueprint-text-rgb)/.16);
5611
+ box-shadow: none;
4726
5612
  border-radius: 0;
4727
5613
  }
4728
5614
 
@@ -4744,6 +5630,208 @@
4744
5630
  animation: 1s steps(12, end) infinite blueprint-spin;
4745
5631
  }
4746
5632
 
5633
+ [data-ui="technical-blueprint"][data-mode] {
5634
+ --blueprint-card-bg: var(--blueprint-surface);
5635
+ --blueprint-control-bg: var(--blueprint-surface-soft);
5636
+ --usk-native-card-bg: var(--blueprint-card-bg);
5637
+ --usk-native-control-bg: var(--blueprint-control-bg);
5638
+ --usk-native-font-control: "Arial Narrow", Bahnschrift, ui-monospace, monospace;
5639
+ --usk-native-control-min-block-size: 2.75rem;
5640
+ --usk-native-control-padding-block: .48rem;
5641
+ --usk-native-control-padding-inline: .74rem;
5642
+ --usk-native-border-width: 1px;
5643
+ --usk-native-radius-sm: 0;
5644
+ --usk-native-radius: 0;
5645
+ --usk-native-radius-lg: 0;
5646
+ --usk-native-shadow: none;
5647
+ --usk-native-shadow-md: none;
5648
+ --usk-native-focus-ring: 0 0 0 1px var(--blueprint-surface), 0 0 0 3px var(--blueprint-focus);
5649
+ --usk-native-subcontrol-padding-block: .34rem;
5650
+ --usk-native-subcontrol-padding-inline: .54rem;
5651
+ --usk-native-choice-size: 1.08rem;
5652
+ --usk-native-choice-background: linear-gradient(90deg, transparent 46%, rgb(var(--blueprint-primary-rgb) / .12) 46% 54%, transparent 54%), var(--blueprint-control-bg);
5653
+ --usk-native-choice-border: 1px solid var(--blueprint-primary);
5654
+ --usk-native-checkbox-radius: 0;
5655
+ --usk-native-radio-radius: 50%;
5656
+ --usk-native-choice-shadow: 0 0 0 1px var(--blueprint-surface-strong);
5657
+ --usk-native-choice-checked-background: linear-gradient(135deg, var(--blueprint-primary) 0 46%, var(--blueprint-surface) 46% 54%, var(--blueprint-primary) 54%);
5658
+ --usk-native-choice-mark-color: var(--blueprint-on-primary);
5659
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%), linear-gradient(135deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%);
5660
+ --usk-native-select-indicator-size: .62rem .62rem, .62rem .62rem;
5661
+ --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .64rem) 50%;
5662
+ --usk-native-select-padding-inline-end: 2.15rem;
5663
+ --usk-native-range-track-size: .22rem;
5664
+ --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--blueprint-primary) 0 1px, transparent 1px .62rem), var(--blueprint-surface-soft);
5665
+ --usk-native-range-track-border: 1px solid var(--blueprint-primary);
5666
+ --usk-native-range-track-radius: 0;
5667
+ --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
5668
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
5669
+ --usk-native-range-thumb-size: 1.02rem;
5670
+ --usk-native-range-thumb-background: var(--blueprint-surface);
5671
+ --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
5672
+ --usk-native-range-thumb-radius: 0;
5673
+ --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);
5674
+ --usk-native-progress-size: .46rem;
5675
+ --usk-native-progress-track-background: repeating-linear-gradient(90deg, transparent 0 24%, rgb(var(--blueprint-primary-rgb) / .18) 24% 25%), var(--blueprint-surface-soft);
5676
+ --usk-native-progress-track-border: 1px solid var(--blueprint-primary);
5677
+ --usk-native-progress-track-radius: 0;
5678
+ --usk-native-progress-track-shadow: .14rem .14rem 0 rgb(var(--blueprint-primary-rgb) / .18);
5679
+ --usk-native-progress-value-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
5680
+ --usk-native-progress-value-radius: 0;
5681
+ --usk-native-progress-value-shadow: none;
5682
+ --usk-native-scrollbar-size: .7rem;
5683
+ --usk-native-scrollbar-track: repeating-linear-gradient(45deg, var(--blueprint-surface) 0 .18rem, var(--blueprint-surface-soft) .18rem .36rem);
5684
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, transparent 35%, var(--blueprint-primary) 35% 65%, transparent 65%);
5685
+ --usk-native-scrollbar-radius: 0;
5686
+ }
5687
+
5688
+ .blueprint-title {
5689
+ letter-spacing: max(.045em, .5px);
5690
+ margin-block: .75rem;
5691
+ font-weight: 800;
5692
+ }
5693
+
5694
+ .blueprint-label, :where([data-ui="technical-blueprint"]) .ui-label {
5695
+ font-size: .71rem;
5696
+ font-weight: 700;
5697
+ }
5698
+
5699
+ [data-ui="technical-blueprint"] :where(h1, h2, h3, h4, h5, h6) {
5700
+ font-family: var(--blueprint-font-display);
5701
+ text-transform: uppercase;
5702
+ letter-spacing: .025em;
5703
+ font-stretch: condensed;
5704
+ }
5705
+
5706
+ .blueprint-card, .blueprint-panel, :where([data-ui="technical-blueprint"]) .ui-card {
5707
+ background: var(--blueprint-card-bg);
5708
+ border: 1px solid var(--blueprint-primary);
5709
+ box-shadow: none;
5710
+ background-image: none;
5711
+ border-radius: 0;
5712
+ padding: .94rem;
5713
+ }
5714
+
5715
+ .blueprint-well, .blueprint-inset {
5716
+ background: repeating-linear-gradient(0deg,transparent 0 .28rem,rgb(var(--blueprint-primary-rgb)/.08) .28rem calc(.28rem + 1px)),var(--blueprint-surface);
5717
+ border: 1px dashed var(--blueprint-primary);
5718
+ box-shadow: inset 0 0 0 1px var(--blueprint-surface-strong);
5719
+ border-radius: 0;
5720
+ padding: .7rem;
5721
+ }
5722
+
5723
+ .blueprint-button, .blueprint-icon-button, :where([data-ui="technical-blueprint"]) .ui-button, :where([data-ui="technical-blueprint"]) .ui-icon-button {
5724
+ border: 1px solid var(--blueprint-primary);
5725
+ min-height: 2.75rem;
5726
+ box-shadow: none;
5727
+ background: none;
5728
+ border-radius: 0;
5729
+ padding: .48rem .74rem;
5730
+ font-weight: 700;
5731
+ }
5732
+
5733
+ .blueprint-button:active, .blueprint-button[aria-pressed="true"], .blueprint-button.is-active, :where([data-ui="technical-blueprint"]) .ui-button:active, :where([data-ui="technical-blueprint"]) .ui-button[aria-pressed="true"], :where([data-ui="technical-blueprint"]) .ui-button.is-active {
5734
+ box-shadow: none;
5735
+ transform: translate(.12rem, .12rem);
5736
+ }
5737
+
5738
+ .blueprint-switch-track, .blueprint-switch-thumb, :where([data-ui="technical-blueprint"]) .ui-switch-track, :where([data-ui="technical-blueprint"]) .ui-switch-thumb {
5739
+ box-shadow: none;
5740
+ border-radius: 0;
5741
+ }
5742
+
5743
+ .blueprint-input, .blueprint-textarea, .blueprint-select, :where([data-ui="technical-blueprint"]) .ui-input, :where([data-ui="technical-blueprint"]) .ui-textarea, :where([data-ui="technical-blueprint"]) .ui-select {
5744
+ background: var(--blueprint-control-bg);
5745
+ border: 1px solid var(--blueprint-primary);
5746
+ min-height: 2.75rem;
5747
+ box-shadow: none;
5748
+ border-radius: 0;
5749
+ padding: .42rem .62rem;
5750
+ }
5751
+
5752
+ .blueprint-nav, .blueprint-toolbar, :where([data-ui="technical-blueprint"]) .ui-nav, :where([data-ui="technical-blueprint"]) .ui-toolbar {
5753
+ border: 1px solid var(--blueprint-primary);
5754
+ box-shadow: none;
5755
+ border-radius: 0;
5756
+ }
5757
+
5758
+ .blueprint-nav-link, :where([data-ui="technical-blueprint"]) .ui-nav-link {
5759
+ border-inline-end: 1px solid var(--blueprint-primary);
5760
+ border-radius: 0;
5761
+ }
5762
+
5763
+ .blueprint-badge, :where([data-ui="technical-blueprint"]) .ui-badge {
5764
+ min-height: 1.42rem;
5765
+ box-shadow: none;
5766
+ border: 1px solid;
5767
+ border-radius: 0;
5768
+ padding: .22rem .46rem;
5769
+ }
5770
+
5771
+ .blueprint-alert, :where([data-ui="technical-blueprint"]) .ui-alert {
5772
+ background: repeating-linear-gradient(135deg,transparent 0 .35rem,rgb(var(--blueprint-primary-rgb)/.06) .35rem .42rem),var(--blueprint-surface);
5773
+ box-shadow: none;
5774
+ border: 1px dashed;
5775
+ border-radius: 0;
5776
+ padding: .68rem .8rem;
5777
+ }
5778
+
5779
+ .blueprint-progress, :where([data-ui="technical-blueprint"]) .ui-progress {
5780
+ background: repeating-linear-gradient(90deg,transparent 0 24%,rgb(var(--blueprint-primary-rgb)/.18) 24% 25%),var(--blueprint-surface-soft);
5781
+ border-radius: 0;
5782
+ height: .46rem;
5783
+ }
5784
+
5785
+ .blueprint-progress-bar, :where([data-ui="technical-blueprint"]) .ui-progress-bar {
5786
+ background: linear-gradient(90deg,var(--blueprint-primary),var(--blueprint-focus));
5787
+ box-shadow: none;
5788
+ border-radius: 0;
5789
+ }
5790
+
5791
+ .blueprint-table-wrap, :where([data-ui="technical-blueprint"]) .ui-table-wrap {
5792
+ background: repeating-linear-gradient(90deg,transparent 0 calc(1rem - 1px),rgb(var(--blueprint-primary-rgb)/.08) calc(1rem - 1px) 1rem),var(--blueprint-surface);
5793
+ border: 1px solid var(--blueprint-primary);
5794
+ box-shadow: none;
5795
+ border-radius: 0;
5796
+ }
5797
+
5798
+ .blueprint-table, :where([data-ui="technical-blueprint"]) .ui-table {
5799
+ border-collapse: collapse;
5800
+ font-variant-numeric: tabular-nums;
5801
+ }
5802
+
5803
+ .blueprint-table th, :where([data-ui="technical-blueprint"]) .ui-table th {
5804
+ background: repeating-linear-gradient(135deg,rgb(var(--blueprint-primary-rgb)/.12)0 1px,transparent 1px .3rem);
5805
+ border: 1px solid var(--blueprint-primary);
5806
+ padding: .48rem .58rem;
5807
+ font-weight: 700;
5808
+ }
5809
+
5810
+ .blueprint-table td, :where([data-ui="technical-blueprint"]) .ui-table td {
5811
+ border: 1px solid var(--blueprint-primary);
5812
+ padding: .5rem .58rem;
5813
+ }
5814
+
5815
+ .blueprint-tooltip, [data-ui="technical-blueprint"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5816
+ border: 1px solid var(--blueprint-primary);
5817
+ box-shadow: none;
5818
+ border-radius: 0;
5819
+ }
5820
+
5821
+ .blueprint-card-service, .blueprint-card-feature, .blueprint-media-scrim, .blueprint-feature-strip, .blueprint-callout-bar, .blueprint-metric, .blueprint-icon-medallion {
5822
+ box-shadow: none;
5823
+ background-image: none;
5824
+ border-radius: 0;
5825
+ }
5826
+
5827
+ [data-ui="technical-blueprint"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), dialog) {
5828
+ box-shadow: none;
5829
+ }
5830
+
5831
+ .blueprint-input, .blueprint-alert, :where([data-ui="technical-blueprint"]) .ui-input, :where([data-ui="technical-blueprint"]) .ui-alert {
5832
+ border-radius: 0;
5833
+ }
5834
+
4747
5835
  @media (prefers-reduced-motion: reduce) {
4748
5836
  [data-ui="technical-blueprint"] *, [data-ui="technical-blueprint"] :before, [data-ui="technical-blueprint"] :after {
4749
5837
  scroll-behavior: auto !important;
@@ -4788,4 +5876,1248 @@
4788
5876
  color: #000 !important;
4789
5877
  }
4790
5878
  }
5879
+
5880
+ .blueprint-input[aria-invalid="true"], .blueprint-textarea[aria-invalid="true"], .blueprint-select[aria-invalid="true"], :where([data-ui="technical-blueprint"]) .ui-input[aria-invalid="true"], :where([data-ui="technical-blueprint"]) .ui-textarea[aria-invalid="true"], :where([data-ui="technical-blueprint"]) .ui-select[aria-invalid="true"] {
5881
+ border-color: var(--blueprint-danger);
5882
+ box-shadow: 0 0 0 2px rgb(var(--blueprint-danger-rgb)/.2);
5883
+ }
5884
+
5885
+ .blueprint-input[readonly], .blueprint-textarea[readonly], :where([data-ui="technical-blueprint"]) .ui-input[readonly], :where([data-ui="technical-blueprint"]) .ui-textarea[readonly] {
5886
+ filter: saturate(.72);
5887
+ opacity: .78;
5888
+ border-style: dashed;
5889
+ }
5890
+
5891
+ .blueprint-button-danger, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="danger"]) {
5892
+ color: var(--blueprint-danger);
5893
+ border-color: var(--blueprint-danger);
5894
+ background: none;
5895
+ }
5896
+
5897
+ .blueprint-button-ghost, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="ghost"]) {
5898
+ color: var(--usk-primary-ink, var(--blueprint-primary));
5899
+ background: none;
5900
+ border-color: #0000;
5901
+ }
5902
+
5903
+ .blueprint-feature-item > .blueprint-icon-medallion {
5904
+ font-size: 1.5rem;
5905
+ line-height: 1;
5906
+ }
5907
+
5908
+ .blueprint-callout-bar > .blueprint-icon-medallion {
5909
+ min-block-size: 4.5rem;
5910
+ min-inline-size: 4.5rem;
5911
+ font-size: 2rem;
5912
+ font-weight: 800;
5913
+ line-height: 1;
5914
+ }
5915
+
5916
+ .blueprint-sheet {
5917
+ border: 3px double var(--blueprint-line-strong);
5918
+ padding: 16px;
5919
+ position: relative;
5920
+ }
5921
+
5922
+ .blueprint-datum {
5923
+ block-size: 52px;
5924
+ inline-size: 52px;
5925
+ color: var(--usk-primary-ink, var(--blueprint-primary));
5926
+ font: 700 16px/1 var(--blueprint-font-mono);
5927
+ border: 1.5px solid;
5928
+ border-radius: 50%;
5929
+ flex: 0 0 52px;
5930
+ place-items: center;
5931
+ display: inline-grid;
5932
+ position: relative;
5933
+ }
5934
+
5935
+ .blueprint-datum:before {
5936
+ content: "";
5937
+ border-top: 1px solid;
5938
+ position: absolute;
5939
+ inset: 50% -5px auto;
5940
+ }
5941
+
5942
+ .blueprint-datum:after {
5943
+ content: "";
5944
+ border-left: 1px solid;
5945
+ position: absolute;
5946
+ inset: -5px auto -5px 50%;
5947
+ }
5948
+
5949
+ .blueprint-line-swatch {
5950
+ border-top: var(--blueprint-line-weight, 1px) solid var(--blueprint-primary);
5951
+ inline-size: 58px;
5952
+ display: inline-block;
5953
+ }
5954
+
5955
+ [data-ui="technical-blueprint"][data-mode="dark"] {
5956
+ --blueprint-fallback-bg-rgb: 6 31 53;
5957
+ --blueprint-fallback-surface-rgb: 8 35 58;
5958
+ --blueprint-fallback-surface-strong-rgb: 11 44 72;
5959
+ --blueprint-fallback-surface-soft-rgb: 12 48 78;
5960
+ --blueprint-fallback-text-rgb: 217 239 255;
5961
+ --blueprint-fallback-text-muted-rgb: 175 209 230;
5962
+ --blueprint-fallback-border-rgb: 120 184 223;
5963
+ --blueprint-fallback-primary-rgb: 75 188 255;
5964
+ --blueprint-fallback-primary-text-rgb: 0 23 37;
5965
+ --blueprint-fallback-danger-rgb: 255 90 84;
5966
+ --blueprint-fallback-success-rgb: 99 215 124;
5967
+ --blueprint-fallback-warning-rgb: 255 208 87;
5968
+ --blueprint-fallback-link-rgb: 75 188 255;
5969
+ --blueprint-fallback-focus-rgb: 121 204 255;
5970
+ --blueprint-fill-fallback-rgb: 8 122 194;
5971
+ --blueprint-input-fallback-rgb: 7 28 48;
5972
+ }
5973
+
5974
+ [data-ui="technical-blueprint"][data-mode="light"] {
5975
+ --blueprint-fallback-bg-rgb: 237 236 232;
5976
+ --blueprint-fallback-surface-rgb: 247 245 239;
5977
+ --blueprint-fallback-surface-strong-rgb: 248 246 240;
5978
+ --blueprint-fallback-surface-soft-rgb: 229 231 229;
5979
+ --blueprint-fallback-text-rgb: 21 61 95;
5980
+ --blueprint-fallback-text-muted-rgb: 49 93 121;
5981
+ --blueprint-fallback-border-rgb: 20 95 147;
5982
+ --blueprint-fallback-primary-rgb: 7 95 157;
5983
+ --blueprint-fallback-primary-hover-rgb: 6 76 124;
5984
+ --blueprint-fallback-danger-rgb: 201 49 44;
5985
+ --blueprint-fallback-success-rgb: 24 111 64;
5986
+ --blueprint-fallback-warning-rgb: 132 76 0;
5987
+ --blueprint-fallback-warning-text-rgb: 255 255 255;
5988
+ --blueprint-fallback-link-rgb: 7 95 157;
5989
+ --blueprint-fallback-focus-rgb: 0 109 181;
5990
+ --blueprint-fill-fallback-rgb: 10 103 165;
5991
+ --blueprint-input-fallback-rgb: 250 248 242;
5992
+ }
5993
+
5994
+ [data-ui="technical-blueprint"][data-mode="contrast"] {
5995
+ --blueprint-fill-fallback-rgb: 0 229 255;
5996
+ --blueprint-fill-ink-fallback-rgb: 0 0 0;
5997
+ --blueprint-input-fallback-rgb: 0 16 28;
5998
+ }
5999
+
6000
+ [data-ui="technical-blueprint"][data-mode] {
6001
+ --blueprint-font-display: "DejaVu Sans Condensed", "Arial Narrow", Arial, sans-serif;
6002
+ --blueprint-font-body: "DejaVu Sans Condensed", Arial, sans-serif;
6003
+ --blueprint-font-control: var(--blueprint-font-display);
6004
+ --blueprint-font-mono: "DejaVu Sans Mono", Consolas, monospace;
6005
+ --blueprint-radius-sm: 0;
6006
+ --blueprint-radius-md: 0;
6007
+ --blueprint-radius-lg: 0;
6008
+ --blueprint-control-height: 44px;
6009
+ --blueprint-grid-size: 16px;
6010
+ --blueprint-line-heavy: 2px;
6011
+ --blueprint-space-5: 24px;
6012
+ --blueprint-space-6: 32px;
6013
+ --blueprint-line-color: rgb(var(--blueprint-border-rgb) / .65);
6014
+ --blueprint-line-strong: var(--blueprint-border);
6015
+ --blueprint-text-soft: var(--blueprint-text-muted);
6016
+ --blueprint-surface-input: rgb(var(--usk-surface-strong-rgb, var(--blueprint-input-fallback-rgb)));
6017
+ --blueprint-fill: rgb(var(--usk-primary-rgb, var(--blueprint-fill-fallback-rgb)));
6018
+ --blueprint-fill-ink: rgb(var(--usk-primary-text-rgb, var(--blueprint-fill-ink-fallback-rgb, 255 255 255)));
6019
+ --blueprint-grid: rgb(var(--blueprint-primary-rgb) / .025);
6020
+ --blueprint-grid-image: linear-gradient(var(--blueprint-grid) 1px, transparent 1px), linear-gradient(90deg, var(--blueprint-grid) 1px, transparent 1px);
6021
+ --blueprint-theme-bg: var(--blueprint-grid-image), var(--blueprint-bg);
6022
+ --blueprint-theme-bg-size: 16px 16px, 16px 16px, auto;
6023
+ --blueprint-control-bg: var(--blueprint-surface-input);
6024
+ --usk-native-control-min-block-size: 44px;
6025
+ --usk-native-font-body: var(--blueprint-font-body);
6026
+ --usk-native-font-heading: var(--blueprint-font-display);
6027
+ --usk-native-font-control: var(--blueprint-font-control);
6028
+ --usk-native-range-thumb-radius: 50%;
6029
+ --usk-native-range-thumb-shadow: none;
6030
+ }
6031
+
6032
+ [data-ui="technical-blueprint"] :where(a) {
6033
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6034
+ }
6035
+
6036
+ [data-ui="technical-blueprint"] :where(h1, h2, h3, h4, h5, h6) {
6037
+ letter-spacing: 0;
6038
+ }
6039
+
6040
+ .blueprint-title {
6041
+ letter-spacing: 0;
6042
+ font-size: 32px;
6043
+ line-height: 1.15;
6044
+ }
6045
+
6046
+ .blueprint-overline, .blueprint-label, :where([data-ui="technical-blueprint"]) .ui-label {
6047
+ color: var(--blueprint-text-soft);
6048
+ font: 700 12px/1.3 var(--blueprint-font-mono);
6049
+ letter-spacing: 0;
6050
+ text-transform: uppercase;
6051
+ margin: 0 0 6px;
6052
+ display: block;
6053
+ }
6054
+
6055
+ .blueprint-section-title {
6056
+ color: var(--blueprint-text);
6057
+ font: 800 14px/1.3 var(--blueprint-font-display);
6058
+ letter-spacing: 0;
6059
+ text-transform: uppercase;
6060
+ align-items: center;
6061
+ gap: 8px;
6062
+ margin: 0 0 16px;
6063
+ display: flex;
6064
+ }
6065
+
6066
+ .blueprint-section-title:before {
6067
+ content: "";
6068
+ border: 1px solid var(--blueprint-primary);
6069
+ background: linear-gradient(var(--blueprint-primary),var(--blueprint-primary)) center/100% 1px no-repeat,linear-gradient(90deg,var(--blueprint-primary),var(--blueprint-primary)) center/1px 100%no-repeat;
6070
+ border-radius: 50%;
6071
+ flex: 0 0 12px;
6072
+ block-size: 12px;
6073
+ inline-size: 12px;
6074
+ }
6075
+
6076
+ .blueprint-section-title:after {
6077
+ content: "";
6078
+ background: repeating-linear-gradient(90deg,var(--blueprint-line-strong)0 9px,transparent 9px 14px);
6079
+ flex: 0 0 45px;
6080
+ block-size: 1px;
6081
+ margin-inline-start: auto;
6082
+ }
6083
+
6084
+ .blueprint-card, .blueprint-panel, .blueprint-toolbar, :where([data-ui="technical-blueprint"]) .ui-card, :where([data-ui="technical-blueprint"]) .ui-toolbar {
6085
+ background: rgb(var(--blueprint-surface-rgb));
6086
+ border: 1px solid var(--blueprint-line-color);
6087
+ box-shadow: none;
6088
+ clip-path: none;
6089
+ background-image: none;
6090
+ border-radius: 0;
6091
+ position: relative;
6092
+ }
6093
+
6094
+ .blueprint-card:before, .blueprint-panel:before, :where([data-ui="technical-blueprint"]) .ui-card:before {
6095
+ content: none;
6096
+ }
6097
+
6098
+ .blueprint-panel:before {
6099
+ content: "";
6100
+ border: 0;
6101
+ border-right: 2px solid var(--blueprint-primary);
6102
+ border-bottom: 2px solid var(--blueprint-primary);
6103
+ pointer-events: none;
6104
+ background: none;
6105
+ block-size: 12px;
6106
+ inline-size: 12px;
6107
+ position: absolute;
6108
+ inset: auto -1px -1px auto;
6109
+ }
6110
+
6111
+ .blueprint-panel:after {
6112
+ content: "";
6113
+ border-top: 2px solid var(--blueprint-primary);
6114
+ border-left: 2px solid var(--blueprint-primary);
6115
+ pointer-events: none;
6116
+ block-size: 12px;
6117
+ inline-size: 12px;
6118
+ position: absolute;
6119
+ inset: -1px auto auto -1px;
6120
+ }
6121
+
6122
+ .blueprint-divider {
6123
+ border: 0;
6124
+ border-top: 1px solid var(--blueprint-line-color);
6125
+ margin-block: 16px;
6126
+ }
6127
+
6128
+ .blueprint-button, .blueprint-icon-button, .blueprint-segment, .blueprint-pagination-page, .blueprint-tab, :where([data-ui="technical-blueprint"]) .ui-button, :where([data-ui="technical-blueprint"]) .ui-icon-button {
6129
+ min-height: var(--blueprint-control-height);
6130
+ min-block-size: var(--blueprint-control-height);
6131
+ color: var(--blueprint-text);
6132
+ border: 1px solid var(--blueprint-line-strong);
6133
+ box-shadow: none;
6134
+ font: 700 14px/1.2 var(--blueprint-font-control);
6135
+ letter-spacing: 0;
6136
+ text-shadow: none;
6137
+ text-transform: uppercase;
6138
+ cursor: pointer;
6139
+ clip-path: none;
6140
+ background: none;
6141
+ border-radius: 0;
6142
+ justify-content: center;
6143
+ align-items: center;
6144
+ gap: 8px;
6145
+ padding: 8px 12px;
6146
+ text-decoration: none;
6147
+ transition: background .15s, border-color .15s, transform 80ms;
6148
+ display: inline-flex;
6149
+ }
6150
+
6151
+ .blueprint-icon-button, :where([data-ui="technical-blueprint"]) .ui-icon-button {
6152
+ aspect-ratio: 1;
6153
+ inline-size: 36px;
6154
+ padding: 8px;
6155
+ }
6156
+
6157
+ .blueprint-button-primary, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="primary"]) {
6158
+ background: var(--blueprint-fill);
6159
+ color: var(--blueprint-fill-ink);
6160
+ border-color: var(--blueprint-primary);
6161
+ }
6162
+
6163
+ .blueprint-button-secondary, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="secondary"]) {
6164
+ color: var(--blueprint-secondary);
6165
+ border-color: var(--blueprint-secondary);
6166
+ background: none;
6167
+ }
6168
+
6169
+ .blueprint-button-ghost, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="ghost"]) {
6170
+ color: var(--blueprint-text-soft);
6171
+ border-style: dashed;
6172
+ }
6173
+
6174
+ .blueprint-button-danger, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="danger"]) {
6175
+ border-color: var(--blueprint-danger);
6176
+ color: var(--blueprint-danger);
6177
+ background: none;
6178
+ }
6179
+
6180
+ .blueprint-button:hover, .blueprint-icon-button:hover, .blueprint-button.is-hover, .blueprint-segment:hover, .blueprint-pagination-page:hover, :where([data-ui="technical-blueprint"]) .ui-button:hover, :where([data-ui="technical-blueprint"]) .ui-icon-button:hover, :where([data-ui="technical-blueprint"]) .ui-button.is-hover {
6181
+ border-color: var(--blueprint-focus);
6182
+ box-shadow: 0 0 0 1px var(--blueprint-focus);
6183
+ transform: none;
6184
+ }
6185
+
6186
+ .blueprint-button-danger:hover, .blueprint-button-danger.is-hover, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="danger"]):hover, :where([data-ui="technical-blueprint"]) .ui-button:where([data-ui-variant="danger"]).is-hover {
6187
+ border-color: var(--blueprint-danger);
6188
+ color: var(--blueprint-danger);
6189
+ box-shadow: 0 0 0 1px var(--blueprint-danger);
6190
+ }
6191
+
6192
+ .blueprint-button:active, .blueprint-icon-button:active, .blueprint-button.is-pressed, .blueprint-button[aria-pressed="true"], :where([data-ui="technical-blueprint"]) .ui-button:active, :where([data-ui="technical-blueprint"]) .ui-icon-button:active, :where([data-ui="technical-blueprint"]) .ui-button.is-pressed, :where([data-ui="technical-blueprint"]) .ui-button[aria-pressed="true"] {
6193
+ background-image: repeating-linear-gradient(135deg,transparent 0 5px,rgb(var(--blueprint-primary-rgb)/.18) 5px 6px);
6194
+ box-shadow: inset 0-2px 0 var(--blueprint-primary);
6195
+ transform: translateY(1px);
6196
+ }
6197
+
6198
+ .blueprint-button:disabled, .blueprint-icon-button:disabled, .blueprint-button.is-disabled, :where([data-ui="technical-blueprint"]) .ui-button:disabled, :where([data-ui="technical-blueprint"]) .ui-icon-button:disabled, :where([data-ui="technical-blueprint"]) .ui-button.is-disabled {
6199
+ opacity: .48;
6200
+ cursor: not-allowed;
6201
+ filter: saturate(.5);
6202
+ }
6203
+
6204
+ .blueprint-field, :where([data-ui="technical-blueprint"]) .ui-field {
6205
+ min-inline-size: 0;
6206
+ display: block;
6207
+ }
6208
+
6209
+ .blueprint-input, .blueprint-select, .blueprint-textarea, :where([data-ui="technical-blueprint"]) .ui-input, :where([data-ui="technical-blueprint"]) .ui-select, :where([data-ui="technical-blueprint"]) .ui-textarea {
6210
+ inline-size: 100%;
6211
+ min-height: var(--blueprint-control-height);
6212
+ min-block-size: var(--blueprint-control-height);
6213
+ background: var(--blueprint-surface-input);
6214
+ color: var(--blueprint-text);
6215
+ border: 1px solid var(--blueprint-line-strong);
6216
+ box-shadow: none;
6217
+ font: 14px/1.3 var(--blueprint-font-body);
6218
+ background-image: none;
6219
+ border-radius: 0;
6220
+ padding: 8px 11px;
6221
+ }
6222
+
6223
+ .blueprint-select, :where([data-ui="technical-blueprint"]) .ui-select {
6224
+ appearance: none;
6225
+ background-image: var(--usk-native-select-indicator-image);
6226
+ background-size: var(--usk-native-select-indicator-size);
6227
+ background-position: var(--usk-native-select-indicator-position);
6228
+ background-repeat: no-repeat;
6229
+ padding-inline-end: 32px;
6230
+ }
6231
+
6232
+ .blueprint-textarea, :where([data-ui="technical-blueprint"]) .ui-textarea {
6233
+ resize: vertical;
6234
+ min-block-size: 64px;
6235
+ }
6236
+
6237
+ .blueprint-input::placeholder, .blueprint-textarea::placeholder, :where([data-ui="technical-blueprint"]) .ui-input::placeholder, :where([data-ui="technical-blueprint"]) .ui-textarea::placeholder {
6238
+ color: var(--blueprint-text-soft);
6239
+ opacity: 1;
6240
+ }
6241
+
6242
+ .blueprint-input-wrap {
6243
+ align-items: center;
6244
+ display: flex;
6245
+ position: relative;
6246
+ }
6247
+
6248
+ .blueprint-input-wrap .blueprint-input, :where([data-ui="technical-blueprint"]) .blueprint-input-wrap .ui-input {
6249
+ padding-inline-end: 36px;
6250
+ }
6251
+
6252
+ .blueprint-input-icon {
6253
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6254
+ pointer-events: none;
6255
+ position: absolute;
6256
+ inset-inline-end: 11px;
6257
+ }
6258
+
6259
+ .blueprint-helper, .blueprint-error-text {
6260
+ color: var(--blueprint-text-soft);
6261
+ font: 12px/1.4 var(--blueprint-font-mono);
6262
+ margin-block-start: 4px;
6263
+ display: block;
6264
+ }
6265
+
6266
+ .blueprint-error-text {
6267
+ border-inline-start: 2px solid var(--blueprint-danger);
6268
+ padding-inline-start: 6px;
6269
+ }
6270
+
6271
+ .blueprint-input.is-error, .blueprint-input[aria-invalid="true"], .blueprint-select[aria-invalid="true"], .blueprint-textarea[aria-invalid="true"], :where([data-ui="technical-blueprint"]) .ui-input.is-error, :where([data-ui="technical-blueprint"]) .ui-input[aria-invalid="true"], :where([data-ui="technical-blueprint"]) .ui-select[aria-invalid="true"], :where([data-ui="technical-blueprint"]) .ui-textarea[aria-invalid="true"] {
6272
+ border-color: var(--blueprint-danger);
6273
+ box-shadow: 0 0 0 1px var(--blueprint-danger);
6274
+ }
6275
+
6276
+ .blueprint-input.is-hover, :where([data-ui="technical-blueprint"]) .ui-input.is-hover {
6277
+ border-color: var(--blueprint-primary);
6278
+ }
6279
+
6280
+ .blueprint-input.is-focus, :where([data-ui="technical-blueprint"]) .ui-input.is-focus {
6281
+ outline: 2px solid var(--blueprint-focus);
6282
+ outline-offset: 1px;
6283
+ }
6284
+
6285
+ .blueprint-dropdown, .blueprint-popover, .blueprint-modal {
6286
+ color: var(--blueprint-text);
6287
+ background: var(--blueprint-grid-image),var(--blueprint-surface-strong);
6288
+ border: 1px solid var(--blueprint-line-strong);
6289
+ box-shadow: none;
6290
+ font: 14px/1.4 var(--blueprint-font-body);
6291
+ background-size: 16px 16px;
6292
+ border-radius: 0;
6293
+ padding: 12px;
6294
+ }
6295
+
6296
+ .blueprint-dropdown {
6297
+ border-color: var(--blueprint-primary);
6298
+ padding: 6px;
6299
+ }
6300
+
6301
+ .blueprint-option {
6302
+ min-block-size: 32px;
6303
+ inline-size: 100%;
6304
+ color: var(--blueprint-text-soft);
6305
+ font: 14px/1.3 var(--blueprint-font-body);
6306
+ text-align: start;
6307
+ cursor: pointer;
6308
+ background: none;
6309
+ border: 1px solid #0000;
6310
+ border-radius: 0;
6311
+ justify-content: space-between;
6312
+ align-items: center;
6313
+ padding: 6px 8px;
6314
+ display: flex;
6315
+ }
6316
+
6317
+ .blueprint-option:hover, .blueprint-option.is-selected, .blueprint-option[aria-selected="true"] {
6318
+ background: var(--blueprint-fill);
6319
+ color: var(--blueprint-fill-ink);
6320
+ border-color: var(--blueprint-primary);
6321
+ }
6322
+
6323
+ .blueprint-option:disabled {
6324
+ opacity: .5;
6325
+ cursor: not-allowed;
6326
+ }
6327
+
6328
+ .blueprint-tags {
6329
+ background: var(--blueprint-surface-input);
6330
+ border: 1px solid var(--blueprint-line-color);
6331
+ flex-wrap: wrap;
6332
+ align-items: center;
6333
+ gap: 6px;
6334
+ min-block-size: 48px;
6335
+ padding: 8px;
6336
+ display: flex;
6337
+ }
6338
+
6339
+ .blueprint-chip, .blueprint-badge, :where([data-ui="technical-blueprint"]) .ui-badge {
6340
+ border: 1px solid var(--blueprint-line-strong);
6341
+ min-block-size: 24px;
6342
+ color: var(--blueprint-text);
6343
+ box-shadow: none;
6344
+ font: 700 12px/1.2 var(--blueprint-font-body);
6345
+ letter-spacing: 0;
6346
+ text-transform: uppercase;
6347
+ background: none;
6348
+ border-radius: 0;
6349
+ align-items: center;
6350
+ gap: 6px;
6351
+ padding: 4px 10px;
6352
+ display: inline-flex;
6353
+ }
6354
+
6355
+ .blueprint-chip, .blueprint-badge-primary, :where([data-ui="technical-blueprint"]) .ui-badge:where([data-ui-variant="primary"]) {
6356
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6357
+ border-color: var(--blueprint-primary);
6358
+ }
6359
+
6360
+ .blueprint-chip-danger, .blueprint-badge-danger, :where([data-ui="technical-blueprint"]) .ui-badge:where([data-ui-variant="danger"]) {
6361
+ background: rgb(var(--blueprint-danger-rgb)/.04);
6362
+ color: var(--blueprint-danger);
6363
+ border-color: var(--blueprint-danger);
6364
+ }
6365
+
6366
+ .blueprint-chip-warning, .blueprint-badge-warning, :where([data-ui="technical-blueprint"]) .ui-badge:where([data-ui-variant="warning"]) {
6367
+ background: rgb(var(--blueprint-warning-rgb)/.08);
6368
+ color: var(--blueprint-warning);
6369
+ border-color: var(--blueprint-warning);
6370
+ }
6371
+
6372
+ .blueprint-badge-success, :where([data-ui="technical-blueprint"]) .ui-badge:where([data-ui-variant="success"]) {
6373
+ background: rgb(var(--blueprint-success-rgb)/.08);
6374
+ color: var(--blueprint-success);
6375
+ border-color: var(--blueprint-success);
6376
+ }
6377
+
6378
+ .blueprint-chip {
6379
+ cursor: pointer;
6380
+ }
6381
+
6382
+ .blueprint-file {
6383
+ border: 1px dashed var(--blueprint-line-strong);
6384
+ background: var(--blueprint-grid-image),var(--blueprint-surface-input);
6385
+ min-block-size: 112px;
6386
+ color: var(--blueprint-text-soft);
6387
+ text-align: center;
6388
+ font: 14px/1.4 var(--blueprint-font-body);
6389
+ cursor: pointer;
6390
+ background-size: 16px 16px;
6391
+ flex-direction: column;
6392
+ justify-content: center;
6393
+ align-items: center;
6394
+ gap: 8px;
6395
+ padding: 16px;
6396
+ display: flex;
6397
+ position: relative;
6398
+ }
6399
+
6400
+ .blueprint-file strong {
6401
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6402
+ }
6403
+
6404
+ .blueprint-file input[type="file"] {
6405
+ opacity: 0;
6406
+ cursor: pointer;
6407
+ block-size: 100%;
6408
+ inline-size: 100%;
6409
+ position: absolute;
6410
+ inset: 0;
6411
+ }
6412
+
6413
+ .blueprint-file:focus-within {
6414
+ outline: 2px solid var(--blueprint-focus);
6415
+ outline-offset: 2px;
6416
+ }
6417
+
6418
+ .blueprint-choice, .blueprint-switch, :where([data-ui="technical-blueprint"]) .ui-switch {
6419
+ min-block-size: 32px;
6420
+ color: var(--blueprint-text-soft);
6421
+ font: 14px/1.3 var(--blueprint-font-body);
6422
+ cursor: pointer;
6423
+ align-items: center;
6424
+ gap: 8px;
6425
+ display: inline-flex;
6426
+ position: relative;
6427
+ }
6428
+
6429
+ .blueprint-choice input {
6430
+ appearance: none;
6431
+ border: 1px solid var(--blueprint-line-strong);
6432
+ block-size: 18px;
6433
+ inline-size: 18px;
6434
+ box-shadow: none;
6435
+ background: none;
6436
+ border-radius: 0;
6437
+ flex: 0 0 18px;
6438
+ place-content: center;
6439
+ margin: 0;
6440
+ display: grid;
6441
+ }
6442
+
6443
+ .blueprint-choice input:before {
6444
+ content: "";
6445
+ background: var(--blueprint-primary);
6446
+ block-size: 10px;
6447
+ inline-size: 10px;
6448
+ transform: scale(0);
6449
+ }
6450
+
6451
+ .blueprint-choice input:checked:before {
6452
+ transform: scale(1);
6453
+ }
6454
+
6455
+ .blueprint-choice input[type="checkbox"]:before {
6456
+ clip-path: polygon(0 45%, 20% 30%, 40% 55%, 85% 0, 100% 15%, 40% 100%);
6457
+ }
6458
+
6459
+ .blueprint-choice input[type="radio"], .blueprint-choice input[type="radio"]:before {
6460
+ border-radius: 50%;
6461
+ }
6462
+
6463
+ .blueprint-choice:has(:disabled), .blueprint-switch:has(:disabled), :where([data-ui="technical-blueprint"]) .ui-switch:has(:disabled) {
6464
+ cursor: not-allowed;
6465
+ }
6466
+
6467
+ .blueprint-choice input:disabled {
6468
+ opacity: .6;
6469
+ border-style: dashed;
6470
+ }
6471
+
6472
+ .blueprint-switch input, :where([data-ui="technical-blueprint"]) .ui-switch input {
6473
+ opacity: 0;
6474
+ z-index: 1;
6475
+ block-size: 100%;
6476
+ inline-size: 100%;
6477
+ cursor: inherit;
6478
+ position: absolute;
6479
+ inset: 0;
6480
+ }
6481
+
6482
+ .blueprint-switch-track, :where([data-ui="technical-blueprint"]) .ui-switch-track {
6483
+ border: 1px solid var(--blueprint-line-strong);
6484
+ block-size: 22px;
6485
+ inline-size: 42px;
6486
+ box-shadow: none;
6487
+ background: none;
6488
+ border-radius: 0;
6489
+ align-items: center;
6490
+ padding: 3px;
6491
+ display: inline-flex;
6492
+ }
6493
+
6494
+ .blueprint-switch-thumb, :where([data-ui="technical-blueprint"]) .ui-switch-thumb {
6495
+ border: 1px solid var(--blueprint-line-strong);
6496
+ block-size: 14px;
6497
+ inline-size: 14px;
6498
+ box-shadow: none;
6499
+ background: none;
6500
+ border-radius: 0;
6501
+ flex: 0 0 14px;
6502
+ transition: transform .15s;
6503
+ position: static;
6504
+ }
6505
+
6506
+ .blueprint-switch input:checked + .blueprint-switch-track, :where([data-ui="technical-blueprint"]) .ui-switch input:checked+.ui-switch-track {
6507
+ border-color: var(--blueprint-primary);
6508
+ background: none;
6509
+ }
6510
+
6511
+ .blueprint-switch input:checked + .blueprint-switch-track .blueprint-switch-thumb, :where([data-ui="technical-blueprint"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
6512
+ background: var(--blueprint-fill);
6513
+ transform: translateX(20px);
6514
+ }
6515
+
6516
+ .blueprint-switch input:disabled + .blueprint-switch-track, :where([data-ui="technical-blueprint"]) .ui-switch input:disabled+.ui-switch-track {
6517
+ opacity: .6;
6518
+ border-style: dashed;
6519
+ }
6520
+
6521
+ .blueprint-switch input:focus-visible + .blueprint-switch-track, :where([data-ui="technical-blueprint"]) .ui-switch input:focus-visible+.ui-switch-track {
6522
+ outline: 2px solid var(--blueprint-focus);
6523
+ outline-offset: 2px;
6524
+ }
6525
+
6526
+ .blueprint-segmented {
6527
+ flex-wrap: wrap;
6528
+ gap: 4px;
6529
+ display: inline-flex;
6530
+ }
6531
+
6532
+ .blueprint-segment {
6533
+ font-size: 12px;
6534
+ }
6535
+
6536
+ .blueprint-segment.is-active, .blueprint-segment[aria-pressed="true"], .blueprint-pagination-page[aria-current="page"], .blueprint-tab.is-active, .blueprint-tab[aria-selected="true"] {
6537
+ background: var(--blueprint-fill);
6538
+ color: var(--blueprint-fill-ink);
6539
+ border-color: var(--blueprint-primary);
6540
+ }
6541
+
6542
+ .blueprint-range {
6543
+ --blueprint-range-fill: linear-gradient(90deg, var(--blueprint-primary) 0 var(--blueprint-value, 58%), var(--blueprint-line-color) var(--blueprint-value, 58%) 100%);
6544
+ appearance: none;
6545
+ background: repeating-linear-gradient(90deg,transparent 0 20px,var(--blueprint-line-color) 20px 21px) center/100% 12px no-repeat;
6546
+ border: 0;
6547
+ min-block-size: 32px;
6548
+ inline-size: 100%;
6549
+ margin: 0;
6550
+ padding: 0;
6551
+ }
6552
+
6553
+ .blueprint-range-critical {
6554
+ --blueprint-range-fill: linear-gradient(90deg, var(--blueprint-success) 0 45%, var(--blueprint-warning) 45% 72%, var(--blueprint-danger) 72% 100%);
6555
+ }
6556
+
6557
+ .blueprint-range::-webkit-slider-runnable-track {
6558
+ background: var(--blueprint-range-fill);
6559
+ height: 3px;
6560
+ box-shadow: none;
6561
+ border: 0;
6562
+ }
6563
+
6564
+ .blueprint-range::-moz-range-track {
6565
+ background: var(--blueprint-range-fill);
6566
+ height: 3px;
6567
+ box-shadow: none;
6568
+ border: 0;
6569
+ }
6570
+
6571
+ .blueprint-range::-moz-range-progress {
6572
+ background: none;
6573
+ }
6574
+
6575
+ .blueprint-range::-webkit-slider-thumb {
6576
+ appearance: none;
6577
+ border: 2px solid var(--blueprint-primary);
6578
+ background: radial-gradient(var(--blueprint-primary)0 2px,var(--blueprint-bg) 2px);
6579
+ block-size: 18px;
6580
+ inline-size: 18px;
6581
+ box-shadow: none;
6582
+ border-radius: 50%;
6583
+ margin-top: -7px;
6584
+ }
6585
+
6586
+ .blueprint-range::-moz-range-thumb {
6587
+ border: 2px solid var(--blueprint-primary);
6588
+ background: radial-gradient(var(--blueprint-primary)0 2px,var(--blueprint-bg) 2px);
6589
+ block-size: 18px;
6590
+ inline-size: 18px;
6591
+ box-shadow: none;
6592
+ border-radius: 50%;
6593
+ }
6594
+
6595
+ .blueprint-progress, :where([data-ui="technical-blueprint"]) .ui-progress {
6596
+ block-size: 12px;
6597
+ border: 0;
6598
+ border-bottom: 1px solid var(--blueprint-line-color);
6599
+ background: none;
6600
+ border-radius: 0;
6601
+ height: 12px;
6602
+ padding: 0;
6603
+ position: relative;
6604
+ overflow: visible;
6605
+ }
6606
+
6607
+ .blueprint-progress-bar, :where([data-ui="technical-blueprint"]) .ui-progress-bar {
6608
+ block-size: 3px;
6609
+ inline-size: var(--blueprint-progress-value, 64%);
6610
+ background: var(--blueprint-primary);
6611
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6612
+ box-shadow: none;
6613
+ border-radius: 0;
6614
+ display: block;
6615
+ position: absolute;
6616
+ inset-block-end: 0;
6617
+ }
6618
+
6619
+ .blueprint-progress-bar:after, :where([data-ui="technical-blueprint"]) .ui-progress-bar:after {
6620
+ content: "";
6621
+ border-top: 6px solid;
6622
+ border-left: 4px solid #0000;
6623
+ border-right: 4px solid #0000;
6624
+ position: absolute;
6625
+ inset: auto -4px 3px auto;
6626
+ }
6627
+
6628
+ .blueprint-progress-danger .blueprint-progress-bar, :where([data-ui="technical-blueprint"]) .blueprint-progress-danger .ui-progress-bar {
6629
+ background: var(--blueprint-danger);
6630
+ color: var(--blueprint-danger);
6631
+ }
6632
+
6633
+ .blueprint-meter {
6634
+ background: linear-gradient(90deg,var(--blueprint-success)0 46%,var(--blueprint-warning) 46% 72%,var(--blueprint-danger) 72% 100%);
6635
+ block-size: 3px;
6636
+ margin-block: 16px;
6637
+ position: relative;
6638
+ }
6639
+
6640
+ .blueprint-meter:after {
6641
+ content: "";
6642
+ background: var(--blueprint-text);
6643
+ block-size: 20px;
6644
+ inline-size: 3px;
6645
+ position: absolute;
6646
+ inset-block-start: 50%;
6647
+ inset-inline-start: clamp(0%,var(--blueprint-value, 72%),100%);
6648
+ transform: translate(-50%, -50%);
6649
+ }
6650
+
6651
+ .blueprint-stepper {
6652
+ justify-content: space-between;
6653
+ align-items: start;
6654
+ margin: 16px 0 0;
6655
+ padding: 0;
6656
+ list-style: none;
6657
+ display: flex;
6658
+ position: relative;
6659
+ }
6660
+
6661
+ .blueprint-stepper:before {
6662
+ content: "";
6663
+ background: var(--blueprint-line-strong);
6664
+ block-size: 1px;
6665
+ position: absolute;
6666
+ inset-block-start: 12px;
6667
+ inset-inline: 12%;
6668
+ }
6669
+
6670
+ .blueprint-step {
6671
+ color: var(--blueprint-text-soft);
6672
+ text-align: center;
6673
+ font: 12px/1.4 var(--blueprint-font-mono);
6674
+ flex: 1;
6675
+ margin-block: 0;
6676
+ position: relative;
6677
+ }
6678
+
6679
+ .blueprint-step b {
6680
+ background: var(--blueprint-bg);
6681
+ border: 1px solid var(--blueprint-line-strong);
6682
+ justify-content: center;
6683
+ align-items: center;
6684
+ block-size: 24px;
6685
+ inline-size: 24px;
6686
+ margin: 0 auto 8px;
6687
+ display: flex;
6688
+ }
6689
+
6690
+ .blueprint-step.is-complete b {
6691
+ background: var(--blueprint-fill);
6692
+ color: var(--blueprint-fill-ink);
6693
+ border-color: var(--blueprint-primary);
6694
+ }
6695
+
6696
+ .blueprint-step.is-active b {
6697
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6698
+ border: 2px solid var(--blueprint-primary);
6699
+ }
6700
+
6701
+ .blueprint-alert, :where([data-ui="technical-blueprint"]) .ui-alert {
6702
+ border: 1px solid var(--blueprint-primary);
6703
+ min-block-size: 40px;
6704
+ color: var(--blueprint-text-soft);
6705
+ box-shadow: none;
6706
+ font: 14px/1.4 var(--blueprint-font-body);
6707
+ background: none;
6708
+ border-radius: 0;
6709
+ align-items: center;
6710
+ gap: 8px;
6711
+ padding: 8px;
6712
+ display: flex;
6713
+ }
6714
+
6715
+ .blueprint-alert-success, :where([data-ui="technical-blueprint"]) .ui-alert:where([data-ui-variant="success"]) {
6716
+ border-color: var(--blueprint-success);
6717
+ }
6718
+
6719
+ .blueprint-alert-warning, :where([data-ui="technical-blueprint"]) .ui-alert:where([data-ui-variant="warning"]) {
6720
+ border-color: var(--blueprint-warning);
6721
+ }
6722
+
6723
+ .blueprint-alert-danger, :where([data-ui="technical-blueprint"]) .ui-alert:where([data-ui-variant="danger"]) {
6724
+ border-color: var(--blueprint-danger);
6725
+ }
6726
+
6727
+ .blueprint-alert > :first-child, :where([data-ui="technical-blueprint"]) .ui-alert>:first-child {
6728
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6729
+ }
6730
+
6731
+ .blueprint-alert-success > :first-child, .blueprint-toast > :first-child, :where([data-ui="technical-blueprint"]) .ui-alert:where([data-ui-variant="success"])>:first-child {
6732
+ color: var(--blueprint-success);
6733
+ }
6734
+
6735
+ .blueprint-alert-warning > :first-child, :where([data-ui="technical-blueprint"]) .ui-alert:where([data-ui-variant="warning"])>:first-child {
6736
+ color: var(--blueprint-warning);
6737
+ }
6738
+
6739
+ .blueprint-alert-danger > :first-child, :where([data-ui="technical-blueprint"]) .ui-alert:where([data-ui-variant="danger"])>:first-child {
6740
+ color: var(--blueprint-danger);
6741
+ }
6742
+
6743
+ .blueprint-toast {
6744
+ border: 1px solid var(--blueprint-line-color);
6745
+ background: repeating-linear-gradient(135deg,transparent 0 10px,var(--blueprint-grid) 10px 11px),var(--blueprint-surface-strong);
6746
+ color: var(--blueprint-text);
6747
+ align-items: center;
6748
+ gap: 12px;
6749
+ padding: 12px;
6750
+ display: flex;
6751
+ }
6752
+
6753
+ .blueprint-toast strong {
6754
+ font: 700 14px/1.4 var(--blueprint-font-mono);
6755
+ display: block;
6756
+ }
6757
+
6758
+ .blueprint-toast p {
6759
+ color: var(--blueprint-text-soft);
6760
+ font: 14px/1.4 var(--blueprint-font-body);
6761
+ margin: 4px 0 0;
6762
+ }
6763
+
6764
+ .blueprint-skeleton {
6765
+ background: repeating-linear-gradient(90deg,var(--blueprint-line-strong)0 8px,transparent 8px 12px);
6766
+ block-size: 2px;
6767
+ inline-size: 100%;
6768
+ display: block;
6769
+ }
6770
+
6771
+ .blueprint-breadcrumb, .blueprint-tabs, .blueprint-pagination {
6772
+ flex-wrap: wrap;
6773
+ align-items: center;
6774
+ gap: 6px;
6775
+ display: flex;
6776
+ }
6777
+
6778
+ .blueprint-breadcrumb {
6779
+ color: var(--blueprint-text-soft);
6780
+ font: 12px/1.4 var(--blueprint-font-mono);
6781
+ }
6782
+
6783
+ .blueprint-breadcrumb a {
6784
+ color: var(--blueprint-text-soft);
6785
+ }
6786
+
6787
+ .blueprint-breadcrumb [aria-current] {
6788
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6789
+ font-weight: 700;
6790
+ }
6791
+
6792
+ .blueprint-tab {
6793
+ font: 700 12px/1.4 var(--blueprint-font-mono);
6794
+ }
6795
+
6796
+ .blueprint-pagination-page {
6797
+ min-inline-size: 36px;
6798
+ padding: 8px;
6799
+ font-size: 12px;
6800
+ }
6801
+
6802
+ .blueprint-nav, :where([data-ui="technical-blueprint"]) .ui-nav {
6803
+ box-shadow: none;
6804
+ background: none;
6805
+ border: 0;
6806
+ gap: 6px;
6807
+ padding: 0;
6808
+ }
6809
+
6810
+ .blueprint-nav-link, :where([data-ui="technical-blueprint"]) .ui-nav-link {
6811
+ border: 1px solid var(--blueprint-line-strong);
6812
+ min-block-size: 36px;
6813
+ color: var(--blueprint-text-soft);
6814
+ text-shadow: none;
6815
+ letter-spacing: 0;
6816
+ background: none;
6817
+ border-radius: 0;
6818
+ padding: 8px 12px;
6819
+ }
6820
+
6821
+ .blueprint-nav-link.is-active, .blueprint-nav-link[aria-current="page"], :where([data-ui="technical-blueprint"]) .ui-nav-link.is-active, :where([data-ui="technical-blueprint"]) .ui-nav-link[aria-current="page"] {
6822
+ background: var(--blueprint-fill);
6823
+ color: var(--blueprint-fill-ink);
6824
+ box-shadow: none;
6825
+ }
6826
+
6827
+ .blueprint-avatar {
6828
+ background: var(--blueprint-fill);
6829
+ border: 2px solid var(--blueprint-primary);
6830
+ block-size: 34px;
6831
+ inline-size: 34px;
6832
+ color: var(--blueprint-fill-ink);
6833
+ font: 700 12px/1 var(--blueprint-font-mono);
6834
+ border-radius: 50%;
6835
+ flex: 0 0 34px;
6836
+ justify-content: center;
6837
+ align-items: center;
6838
+ display: inline-flex;
6839
+ }
6840
+
6841
+ .blueprint-avatar-danger {
6842
+ background: var(--blueprint-bg);
6843
+ border-color: var(--blueprint-danger);
6844
+ color: var(--blueprint-danger);
6845
+ }
6846
+
6847
+ .blueprint-avatar-neutral {
6848
+ background: var(--blueprint-bg);
6849
+ color: var(--blueprint-text-soft);
6850
+ }
6851
+
6852
+ .blueprint-avatar-group {
6853
+ display: flex;
6854
+ }
6855
+
6856
+ .blueprint-avatar-group .blueprint-avatar + .blueprint-avatar {
6857
+ margin-inline-start: -6px;
6858
+ }
6859
+
6860
+ .blueprint-table, :where([data-ui="technical-blueprint"]) .ui-table {
6861
+ border-collapse: collapse;
6862
+ font: 14px/1.4 var(--blueprint-font-body);
6863
+ }
6864
+
6865
+ .blueprint-table th, .blueprint-table td, :where([data-ui="technical-blueprint"]) .ui-table th, :where([data-ui="technical-blueprint"]) .ui-table td {
6866
+ border: 0;
6867
+ border-bottom: 1px solid var(--blueprint-line-color);
6868
+ color: var(--blueprint-text-soft);
6869
+ background: none;
6870
+ padding: 8px;
6871
+ }
6872
+
6873
+ .blueprint-table th, :where([data-ui="technical-blueprint"]) .ui-table th {
6874
+ font-family: var(--blueprint-font-mono);
6875
+ }
6876
+
6877
+ .blueprint-list {
6878
+ color: var(--blueprint-text-soft);
6879
+ font: 14px/1.5 var(--blueprint-font-body);
6880
+ margin: 0;
6881
+ padding-inline-start: 20px;
6882
+ }
6883
+
6884
+ .blueprint-list li + li {
6885
+ margin-top: 8px;
6886
+ }
6887
+
6888
+ .blueprint-list li::marker {
6889
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6890
+ }
6891
+
6892
+ .blueprint-tooltip, [data-ui="technical-blueprint"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
6893
+ background: var(--blueprint-surface-strong);
6894
+ max-inline-size: 100%;
6895
+ color: var(--blueprint-text);
6896
+ border: 1px solid var(--blueprint-primary);
6897
+ box-shadow: none;
6898
+ font: 700 12px/1.4 var(--blueprint-font-mono);
6899
+ letter-spacing: 0;
6900
+ border-radius: 0;
6901
+ padding: 12px;
6902
+ position: relative;
6903
+ }
6904
+
6905
+ .blueprint-tooltip:after {
6906
+ content: "";
6907
+ border-left: 1px solid var(--blueprint-primary);
6908
+ transform-origin: top;
6909
+ block-size: 16px;
6910
+ position: absolute;
6911
+ inset: 100% auto auto 50%;
6912
+ transform: rotate(45deg);
6913
+ }
6914
+
6915
+ .blueprint-modal {
6916
+ max-inline-size: min(440px, 100vw - 32px);
6917
+ }
6918
+
6919
+ .blueprint-modal::backdrop {
6920
+ background: rgb(var(--blueprint-bg-rgb)/.7);
6921
+ }
6922
+
6923
+ .blueprint-modal h3, .blueprint-popover strong {
6924
+ color: var(--blueprint-text);
6925
+ font: 700 14px/1.4 var(--blueprint-font-mono);
6926
+ margin: 0 0 8px;
6927
+ }
6928
+
6929
+ .blueprint-modal p, .blueprint-popover p {
6930
+ color: var(--blueprint-text-soft);
6931
+ margin: 0 0 12px;
6932
+ }
6933
+
6934
+ .blueprint-modal-actions {
6935
+ flex-wrap: wrap;
6936
+ justify-content: end;
6937
+ gap: 8px;
6938
+ display: flex;
6939
+ }
6940
+
6941
+ .blueprint-accordion {
6942
+ background: var(--blueprint-surface-input);
6943
+ border: 1px solid var(--blueprint-line-color);
6944
+ color: var(--blueprint-text);
6945
+ margin: 0;
6946
+ padding: 0;
6947
+ }
6948
+
6949
+ .blueprint-accordion summary {
6950
+ min-block-size: 36px;
6951
+ font: 700 12px/1.4 var(--blueprint-font-mono);
6952
+ cursor: pointer;
6953
+ padding: 10px 12px;
6954
+ list-style: none;
6955
+ }
6956
+
6957
+ .blueprint-accordion summary::-webkit-details-marker {
6958
+ display: none;
6959
+ }
6960
+
6961
+ .blueprint-accordion summary:after {
6962
+ content: "+";
6963
+ float: right;
6964
+ color: var(--usk-primary-ink, var(--blueprint-primary));
6965
+ }
6966
+
6967
+ .blueprint-accordion[open] summary:after {
6968
+ content: "-";
6969
+ }
6970
+
6971
+ .blueprint-accordion p {
6972
+ color: var(--blueprint-text-soft);
6973
+ font: 14px/1.4 var(--blueprint-font-body);
6974
+ margin: 0;
6975
+ padding: 4px 12px 12px;
6976
+ }
6977
+
6978
+ .blueprint-code {
6979
+ border-inline-start: 2px solid var(--blueprint-primary);
6980
+ background: var(--blueprint-surface-input);
6981
+ color: var(--blueprint-text-soft);
6982
+ white-space: pre-wrap;
6983
+ overflow-wrap: break-word;
6984
+ font: 12px/1.5 var(--blueprint-font-mono);
6985
+ margin: 0;
6986
+ padding: 12px;
6987
+ display: block;
6988
+ }
6989
+
6990
+ .blueprint-quote {
6991
+ border-inline-start: 2px solid var(--blueprint-primary);
6992
+ color: var(--blueprint-text-soft);
6993
+ font: italic 14px/1.5 var(--blueprint-font-body);
6994
+ margin: 0;
6995
+ padding: 8px 12px;
6996
+ }
6997
+
6998
+ .blueprint-token-swatch {
6999
+ min-inline-size: 46px;
7000
+ color: var(--blueprint-text-soft);
7001
+ font: 12px/1.3 var(--blueprint-font-mono);
7002
+ flex-direction: column;
7003
+ gap: 6px;
7004
+ display: inline-flex;
7005
+ }
7006
+
7007
+ .blueprint-token-swatch i {
7008
+ border: 1px solid var(--blueprint-line-strong);
7009
+ background: var(--blueprint-token-swatch-color, var(--blueprint-primary));
7010
+ block-size: 28px;
7011
+ inline-size: 46px;
7012
+ display: block;
7013
+ }
7014
+
7015
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .blueprint-button[aria-busy="true"]:after, .blueprint-icon-button[aria-busy="true"]:after, [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="technical-blueprint"]) .ui-button[aria-busy="true"]:after, :where([data-ui="technical-blueprint"]) .ui-icon-button[aria-busy="true"]:after {
7016
+ box-sizing: border-box;
7017
+ border: 2px solid var(--blueprint-line-color);
7018
+ box-shadow: none;
7019
+ clip-path: none;
7020
+ background: none;
7021
+ border-top-color: currentColor;
7022
+ border-radius: 50%;
7023
+ flex-shrink: 0;
7024
+ padding: 0;
7025
+ animation: .85s linear infinite blueprint-spin;
7026
+ }
7027
+
7028
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
7029
+ color: var(--usk-primary-ink, var(--blueprint-primary));
7030
+ }
7031
+
7032
+ .blueprint-button[aria-busy="true"]:after, .blueprint-icon-button[aria-busy="true"]:after, [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="technical-blueprint"]) .ui-button[aria-busy="true"]:after, :where([data-ui="technical-blueprint"]) .ui-icon-button[aria-busy="true"]:after {
7033
+ content: "";
7034
+ flex: 0 0 16px;
7035
+ block-size: 16px;
7036
+ inline-size: 16px;
7037
+ display: inline-block;
7038
+ }
7039
+
7040
+ .blueprint-spinner:before, .blueprint-spinner:after {
7041
+ content: none;
7042
+ }
7043
+
7044
+ [data-ui="technical-blueprint"] :focus-visible {
7045
+ outline: 2px solid var(--blueprint-focus);
7046
+ outline-offset: 3px;
7047
+ }
7048
+
7049
+ @media (any-pointer: coarse) {
7050
+ .blueprint-button, .blueprint-icon-button, .blueprint-segment, .blueprint-pagination-page, .blueprint-option, .blueprint-tab, .blueprint-choice, .blueprint-switch, .blueprint-range, .blueprint-chip, :where([data-ui="technical-blueprint"]) .ui-button, :where([data-ui="technical-blueprint"]) .ui-icon-button, :where([data-ui="technical-blueprint"]) .ui-switch {
7051
+ min-block-size: 44px;
7052
+ }
7053
+
7054
+ .blueprint-icon-button, .blueprint-pagination-page, :where([data-ui="technical-blueprint"]) .ui-icon-button {
7055
+ min-inline-size: 44px;
7056
+ }
7057
+
7058
+ .blueprint-accordion summary {
7059
+ min-block-size: 44px;
7060
+ }
7061
+ }
7062
+
7063
+ @media (prefers-reduced-motion: reduce) {
7064
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .blueprint-button[aria-busy="true"]:after, .blueprint-icon-button[aria-busy="true"]:after, [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="technical-blueprint"]) .ui-button[aria-busy="true"]:after, :where([data-ui="technical-blueprint"]) .ui-icon-button[aria-busy="true"]:after {
7065
+ animation: none;
7066
+ }
7067
+ }
7068
+
7069
+ @media (forced-colors: active) {
7070
+ .blueprint-choice input {
7071
+ appearance: auto;
7072
+ }
7073
+
7074
+ .blueprint-choice input:before {
7075
+ content: none;
7076
+ }
7077
+
7078
+ .blueprint-switch input, :where([data-ui="technical-blueprint"]) .ui-switch input {
7079
+ opacity: 1;
7080
+ block-size: 20px;
7081
+ inline-size: 20px;
7082
+ position: static;
7083
+ }
7084
+
7085
+ .blueprint-switch-track, :where([data-ui="technical-blueprint"]) .ui-switch-track {
7086
+ display: none;
7087
+ }
7088
+
7089
+ .blueprint-range {
7090
+ appearance: auto;
7091
+ }
7092
+
7093
+ .blueprint-step.is-complete b, .blueprint-progress-bar, :where([data-ui="technical-blueprint"]) .ui-progress-bar {
7094
+ color: highlighttext;
7095
+ background: highlight;
7096
+ }
7097
+ }
7098
+
7099
+ [data-ui="technical-blueprint"][data-mode] .blueprint-button.blueprint-button-warning, :where([data-ui="technical-blueprint"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
7100
+ background: var(--blueprint-warning);
7101
+ color: var(--blueprint-on-warning);
7102
+ border-color: var(--blueprint-warning);
7103
+ text-shadow: none;
7104
+ }
7105
+ }
7106
+
7107
+ [data-ui="technical-blueprint"][data-mode] .blueprint-title {
7108
+ letter-spacing: max(.045em, .5px);
7109
+ margin-block: max(.75rem, 12px);
7110
+ }
7111
+
7112
+ [data-ui="technical-blueprint"][data-mode] .blueprint-feature-item > .blueprint-icon-medallion {
7113
+ font-size: 1.5rem;
7114
+ line-height: 1;
7115
+ }
7116
+
7117
+ [data-ui="technical-blueprint"][data-mode] .blueprint-callout-bar > .blueprint-icon-medallion {
7118
+ min-block-size: 4.5rem;
7119
+ min-inline-size: 4.5rem;
7120
+ font-size: 2rem;
7121
+ font-weight: 800;
7122
+ line-height: 1;
4791
7123
  }