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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"]) .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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"])[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="retro-glass"]) :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="retro-glass"]) :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="retro-glass"]) :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;
@@ -3522,18 +4179,41 @@
3522
4179
  --rg-transition-fast: .14s ease;
3523
4180
  --rg-transition-base: .22s ease;
3524
4181
  --rg-transition-slow: .36s ease;
3525
- --rg-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
3526
- --rg-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--rg-font-sans);
4182
+ --rg-font-sans: "DejaVu Sans", Arial, sans-serif;
4183
+ --rg-font-display: var(--rg-font-sans);
3527
4184
  --rg-font-body: var(--rg-font-sans);
3528
4185
  --rg-font-heading: var(--rg-font-display);
3529
4186
  --rg-font-control: var(--rg-font-display);
3530
- --rg-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
4187
+ --rg-font-mono: "DejaVu Sans Mono", Consolas, monospace;
3531
4188
  }
3532
4189
 
3533
4190
  [data-ui="retro-glass"][data-mode="light"] {
3534
4191
  --lightningcss-light: initial;
3535
4192
  --lightningcss-dark: ;
3536
4193
  color-scheme: light;
4194
+ --rg-fallback-bg-rgb: 216 222 229;
4195
+ --rg-fallback-surface-rgb: 246 249 252;
4196
+ --rg-fallback-surface-strong-rgb: 255 255 255;
4197
+ --rg-fallback-surface-soft-rgb: 223 229 235;
4198
+ --rg-fallback-text-rgb: 28 39 49;
4199
+ --rg-fallback-text-muted-rgb: 68 81 94;
4200
+ --rg-fallback-border-rgb: 110 120 130;
4201
+ --rg-fallback-primary-rgb: 11 99 216;
4202
+ --rg-fallback-primary-hover-rgb: 8 85 190;
4203
+ --rg-fallback-primary-text-rgb: 255 255 255;
4204
+ --rg-fallback-secondary-rgb: 223 229 235;
4205
+ --rg-fallback-secondary-hover-rgb: 207 216 224;
4206
+ --rg-fallback-secondary-text-rgb: 28 39 49;
4207
+ --rg-fallback-accent-rgb: 216 137 0;
4208
+ --rg-fallback-accent-text-rgb: 0 0 0;
4209
+ --rg-fallback-success-rgb: 76 147 0;
4210
+ --rg-fallback-success-text-rgb: 0 0 0;
4211
+ --rg-fallback-warning-rgb: 216 137 0;
4212
+ --rg-fallback-warning-text-rgb: 0 0 0;
4213
+ --rg-fallback-danger-rgb: 216 61 50;
4214
+ --rg-fallback-danger-text-rgb: 0 0 0;
4215
+ --rg-fallback-link-rgb: 8 75 158;
4216
+ --rg-fallback-focus-rgb: 20 120 233;
3537
4217
  --rg-panel-alpha: .92;
3538
4218
  --rg-panel-strong-alpha: .98;
3539
4219
  --rg-panel-soft-alpha: .74;
@@ -3541,12 +4221,43 @@
3541
4221
  --rg-glow-alpha: .24;
3542
4222
  --rg-shadow-alpha: .18;
3543
4223
  --rg-grid-alpha: .075;
4224
+ --rg-brush-line: rgb(var(--rg-text-rgb) / .035);
4225
+ --rg-glass-highlight: #ffffffe0;
4226
+ --rg-glass-midlight: #ffffff5c;
4227
+ --rg-material-shadow: rgb(var(--rg-text-rgb) / .2);
4228
+ --rg-control-text-shadow: 0 1px 0 #ffffffeb;
4229
+ --rg-dock-top: rgb(var(--rg-text-rgb) / .88);
4230
+ --rg-dock-bottom: rgb(var(--rg-text-rgb) / .98);
4231
+ --rg-dock-text: #f8fafc;
3544
4232
  }
3545
4233
 
3546
4234
  [data-ui="retro-glass"][data-mode="dark"] {
3547
4235
  --lightningcss-light: ;
3548
4236
  --lightningcss-dark: initial;
3549
4237
  color-scheme: dark;
4238
+ --rg-fallback-bg-rgb: 6 16 23;
4239
+ --rg-fallback-surface-rgb: 8 23 31;
4240
+ --rg-fallback-surface-strong-rgb: 18 38 48;
4241
+ --rg-fallback-surface-soft-rgb: 39 52 60;
4242
+ --rg-fallback-text-rgb: 240 244 246;
4243
+ --rg-fallback-text-muted-rgb: 192 203 209;
4244
+ --rg-fallback-border-rgb: 110 126 135;
4245
+ --rg-fallback-primary-rgb: 22 119 232;
4246
+ --rg-fallback-primary-hover-rgb: 39 136 243;
4247
+ --rg-fallback-primary-text-rgb: 0 0 0;
4248
+ --rg-fallback-secondary-rgb: 39 52 60;
4249
+ --rg-fallback-secondary-hover-rgb: 53 67 77;
4250
+ --rg-fallback-secondary-text-rgb: 240 244 246;
4251
+ --rg-fallback-accent-rgb: 255 173 0;
4252
+ --rg-fallback-accent-text-rgb: 0 0 0;
4253
+ --rg-fallback-success-rgb: 114 201 15;
4254
+ --rg-fallback-success-text-rgb: 0 0 0;
4255
+ --rg-fallback-warning-rgb: 255 173 0;
4256
+ --rg-fallback-warning-text-rgb: 0 0 0;
4257
+ --rg-fallback-danger-rgb: 239 69 57;
4258
+ --rg-fallback-danger-text-rgb: 0 0 0;
4259
+ --rg-fallback-link-rgb: 133 194 255;
4260
+ --rg-fallback-focus-rgb: 59 156 255;
3550
4261
  --rg-panel-alpha: .82;
3551
4262
  --rg-panel-strong-alpha: .94;
3552
4263
  --rg-panel-soft-alpha: .58;
@@ -3554,12 +4265,43 @@
3554
4265
  --rg-glow-alpha: .42;
3555
4266
  --rg-shadow-alpha: .42;
3556
4267
  --rg-grid-alpha: .12;
4268
+ --rg-brush-line: #ffffff07;
4269
+ --rg-glass-highlight: #ffffff38;
4270
+ --rg-glass-midlight: #ffffff14;
4271
+ --rg-material-shadow: #0000009e;
4272
+ --rg-control-text-shadow: 0 -1px 0 #000000db;
4273
+ --rg-dock-top: rgb(var(--rg-bg-rgb) / .88);
4274
+ --rg-dock-bottom: #000000f5;
4275
+ --rg-dock-text: #e5ebf1;
3557
4276
  }
3558
4277
 
3559
4278
  [data-ui="retro-glass"][data-mode="contrast"] {
3560
4279
  --lightningcss-light: ;
3561
4280
  --lightningcss-dark: initial;
3562
4281
  color-scheme: dark;
4282
+ --rg-fallback-bg-rgb: 0 0 0;
4283
+ --rg-fallback-surface-rgb: 5 8 12;
4284
+ --rg-fallback-surface-strong-rgb: 10 19 32;
4285
+ --rg-fallback-surface-soft-rgb: 0 0 0;
4286
+ --rg-fallback-text-rgb: 255 255 255;
4287
+ --rg-fallback-text-muted-rgb: 242 247 255;
4288
+ --rg-fallback-border-rgb: 255 255 255;
4289
+ --rg-fallback-primary-rgb: 156 197 240;
4290
+ --rg-fallback-primary-hover-rgb: 255 255 255;
4291
+ --rg-fallback-primary-text-rgb: 0 0 0;
4292
+ --rg-fallback-secondary-rgb: 0 230 255;
4293
+ --rg-fallback-secondary-hover-rgb: 255 255 255;
4294
+ --rg-fallback-secondary-text-rgb: 0 0 0;
4295
+ --rg-fallback-accent-rgb: 230 240 255;
4296
+ --rg-fallback-accent-text-rgb: 0 0 0;
4297
+ --rg-fallback-success-rgb: 0 255 144;
4298
+ --rg-fallback-success-text-rgb: 0 0 0;
4299
+ --rg-fallback-warning-rgb: 255 212 0;
4300
+ --rg-fallback-warning-text-rgb: 0 0 0;
4301
+ --rg-fallback-danger-rgb: 255 92 92;
4302
+ --rg-fallback-danger-text-rgb: 0 0 0;
4303
+ --rg-fallback-link-rgb: 156 197 240;
4304
+ --rg-fallback-focus-rgb: 255 255 255;
3563
4305
  --rg-panel-alpha: 1;
3564
4306
  --rg-panel-strong-alpha: 1;
3565
4307
  --rg-panel-soft-alpha: .92;
@@ -3567,6 +4309,14 @@
3567
4309
  --rg-glow-alpha: .68;
3568
4310
  --rg-shadow-alpha: .56;
3569
4311
  --rg-grid-alpha: .18;
4312
+ --rg-brush-line: #ffffff14;
4313
+ --rg-glass-highlight: #ffffff4d;
4314
+ --rg-glass-midlight: #ffffff1f;
4315
+ --rg-material-shadow: #000000d1;
4316
+ --rg-control-text-shadow: 0 -1px 0 #000;
4317
+ --rg-dock-top: #111;
4318
+ --rg-dock-bottom: #000;
4319
+ --rg-dock-text: #fff;
3570
4320
  }
3571
4321
 
3572
4322
  [data-ui="retro-glass"][data-theme][data-mode] {
@@ -3584,15 +4334,42 @@
3584
4334
  --rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3585
4335
  --rg-secondary-text-rgb: var(--usk-secondary-text-rgb);
3586
4336
  --rg-accent-rgb: var(--usk-accent-rgb);
3587
- --rg-success-rgb: var(--usk-success-rgb);
3588
- --rg-warning-rgb: var(--usk-warning-rgb);
3589
- --rg-danger-rgb: var(--usk-danger-rgb);
3590
- --rg-link-rgb: var(--usk-link-rgb);
3591
4337
  --rg-accent-text-rgb: var(--usk-accent-text-rgb);
4338
+ --rg-success-rgb: var(--usk-success-rgb);
3592
4339
  --rg-success-text-rgb: var(--usk-success-text-rgb);
4340
+ --rg-warning-rgb: var(--usk-warning-rgb);
3593
4341
  --rg-warning-text-rgb: var(--usk-warning-text-rgb);
4342
+ --rg-danger-rgb: var(--usk-danger-rgb);
3594
4343
  --rg-danger-text-rgb: var(--usk-danger-text-rgb);
4344
+ --rg-link-rgb: var(--usk-link-rgb);
3595
4345
  --rg-focus-rgb: var(--usk-focus-rgb);
4346
+ }
4347
+
4348
+ [data-ui="retro-glass"][data-mode] {
4349
+ --usk-native-bg: var(--rg-bg);
4350
+ --rg-bg-rgb: var(--usk-bg-rgb, var(--rg-fallback-bg-rgb));
4351
+ --rg-surface-rgb: var(--usk-surface-rgb, var(--rg-fallback-surface-rgb));
4352
+ --rg-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--rg-fallback-surface-strong-rgb));
4353
+ --rg-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--rg-fallback-surface-soft-rgb));
4354
+ --rg-text-rgb: var(--usk-text-rgb, var(--rg-fallback-text-rgb));
4355
+ --rg-text-muted-rgb: var(--usk-text-muted-rgb, var(--rg-fallback-text-muted-rgb));
4356
+ --rg-border-rgb: var(--usk-border-rgb, var(--rg-fallback-border-rgb));
4357
+ --rg-primary-rgb: var(--usk-primary-rgb, var(--rg-fallback-primary-rgb));
4358
+ --rg-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--rg-fallback-primary-hover-rgb));
4359
+ --rg-primary-text-rgb: var(--usk-primary-text-rgb, var(--rg-fallback-primary-text-rgb));
4360
+ --rg-secondary-rgb: var(--usk-secondary-rgb, var(--rg-fallback-secondary-rgb));
4361
+ --rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--rg-fallback-secondary-hover-rgb));
4362
+ --rg-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--rg-fallback-secondary-text-rgb));
4363
+ --rg-accent-rgb: var(--usk-accent-rgb, var(--rg-fallback-accent-rgb));
4364
+ --rg-accent-text-rgb: var(--usk-accent-text-rgb, var(--rg-fallback-accent-text-rgb));
4365
+ --rg-success-rgb: var(--usk-success-rgb, var(--rg-fallback-success-rgb));
4366
+ --rg-success-text-rgb: var(--usk-success-text-rgb, var(--rg-fallback-success-text-rgb));
4367
+ --rg-warning-rgb: var(--usk-warning-rgb, var(--rg-fallback-warning-rgb));
4368
+ --rg-warning-text-rgb: var(--usk-warning-text-rgb, var(--rg-fallback-warning-text-rgb));
4369
+ --rg-danger-rgb: var(--usk-danger-rgb, var(--rg-fallback-danger-rgb));
4370
+ --rg-danger-text-rgb: var(--usk-danger-text-rgb, var(--rg-fallback-danger-text-rgb));
4371
+ --rg-link-rgb: var(--usk-link-rgb, var(--rg-fallback-link-rgb));
4372
+ --rg-focus-rgb: var(--usk-focus-rgb, var(--rg-fallback-focus-rgb));
3596
4373
  --usk-native-surface: var(--rg-surface);
3597
4374
  --usk-native-surface-strong: var(--rg-surface-strong);
3598
4375
  --usk-native-surface-soft: var(--rg-surface-soft);
@@ -3622,6 +4399,61 @@
3622
4399
  --usk-native-border-width: 1px;
3623
4400
  --usk-native-field-gap: .5rem;
3624
4401
  --usk-native-panel-padding: var(--rg-space-5);
4402
+ --usk-native-control-min-block-size: 3rem;
4403
+ --usk-native-control-padding-block: .74rem;
4404
+ --usk-native-control-padding-inline: .95rem;
4405
+ --usk-native-subcontrol-padding-block: .58rem;
4406
+ --usk-native-subcontrol-padding-inline: .72rem;
4407
+ --usk-native-choice-size: 1.5rem;
4408
+ --usk-native-choice-background: var(--rg-control-bg);
4409
+ --usk-native-choice-border: 1px solid var(--rg-border);
4410
+ --usk-native-checkbox-radius: .28rem;
4411
+ --usk-native-radio-radius: 50%;
4412
+ --usk-native-choice-shadow: inset 0 1px #ffffff8c;
4413
+ --usk-native-choice-checked-background: var(--rg-primary);
4414
+ --usk-native-choice-mark-color: var(--rg-on-primary);
4415
+ --usk-native-track: var(--rg-glass-inset);
4416
+ --usk-native-track-fill: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
4417
+ --usk-native-thumb: radial-gradient(circle at 42% 30%, var(--rg-glass-highlight), transparent 32%), var(--rg-control-material);
4418
+ --usk-native-thumb-border: var(--rg-border);
4419
+ --usk-native-select-indicator-image: linear-gradient(57deg, transparent 50%, var(--rg-primary) 50%), linear-gradient(123deg, var(--rg-primary) 50%, transparent 50%);
4420
+ --usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
4421
+ --usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - .84rem) 50%;
4422
+ --usk-native-select-padding-inline-end: 2.55rem;
4423
+ --usk-native-range-track-size: .54rem;
4424
+ --usk-native-range-track-background: var(--rg-surface-soft);
4425
+ --usk-native-range-track-border: 1px solid var(--rg-border);
4426
+ --usk-native-range-track-radius: .2rem;
4427
+ --usk-native-range-track-shadow: inset 0 1px #ffffff8c;
4428
+ --usk-native-range-progress-background: var(--rg-primary);
4429
+ --usk-native-range-thumb-size: 1.35rem;
4430
+ --usk-native-range-thumb-background: var(--rg-surface-strong);
4431
+ --usk-native-range-thumb-border: 1px solid var(--rg-border);
4432
+ --usk-native-range-thumb-radius: 50%;
4433
+ --usk-native-range-thumb-shadow: inset 0 1px #ffffff8c;
4434
+ --usk-native-progress-size: .72rem;
4435
+ --usk-native-progress-track-background: var(--rg-surface-soft);
4436
+ --usk-native-progress-track-border: 1px solid var(--rg-border);
4437
+ --usk-native-progress-track-radius: .2rem;
4438
+ --usk-native-progress-track-shadow: inset 0 1px #ffffff8c;
4439
+ --usk-native-progress-value-background: var(--rg-primary);
4440
+ --usk-native-progress-value-radius: .2rem;
4441
+ --usk-native-progress-value-shadow: inset 0 1px #ffffff8c;
4442
+ --usk-native-meter-optimum-background: var(--rg-success);
4443
+ --usk-native-meter-suboptimum-background: var(--rg-warning);
4444
+ --usk-native-meter-critical-background: var(--rg-danger);
4445
+ --usk-native-file-button-background: var(--rg-primary);
4446
+ --usk-native-file-button-border: 1px solid var(--rg-border);
4447
+ --usk-native-file-button-radius: .28rem;
4448
+ --usk-native-file-button-shadow: inset 0 1px #ffffff8c;
4449
+ --usk-native-color-swatch-border: 1px solid var(--rg-border);
4450
+ --usk-native-color-swatch-radius: .28rem;
4451
+ --usk-native-indicator-opacity: .72;
4452
+ --usk-native-indicator-filter: none;
4453
+ --usk-native-scrollbar-size: .72rem;
4454
+ --usk-native-scrollbar-track: var(--rg-surface-soft);
4455
+ --usk-native-scrollbar-thumb: var(--rg-primary);
4456
+ --usk-native-scrollbar-radius: .2rem;
3625
4457
  --rg-bg: rgb(var(--rg-bg-rgb));
3626
4458
  --rg-surface: rgb(var(--rg-surface-rgb) / var(--rg-panel-alpha));
3627
4459
  --rg-surface-strong: rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-strong-alpha));
@@ -3657,38 +4489,42 @@
3657
4489
  --rg-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--rg-shadow-alpha));
3658
4490
  --rg-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .05));
3659
4491
  --rg-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .12));
3660
- --rg-theme-bg-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
3661
- --rg-theme-bg: radial-gradient(circle at 15% 15%, rgb(var(--rg-primary-rgb) / .18), transparent 28rem), radial-gradient(circle at 85% 10%, rgb(var(--rg-secondary-rgb) / .16), transparent 26rem), radial-gradient(circle at 50% 110%, rgb(var(--rg-accent-rgb) / .14), transparent 34rem), linear-gradient(90deg, rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), var(--rg-bg);
3662
- --rg-card-bg: linear-gradient(135deg, rgb(var(--rg-primary-rgb) / .1), rgb(var(--rg-accent-rgb) / .055) 42%, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)) 100%), var(--rg-surface);
3663
- --rg-control-bg: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)), rgb(var(--rg-surface-soft-rgb) / var(--rg-panel-soft-alpha)));
4492
+ --rg-theme-bg-size: auto;
4493
+ --rg-theme-bg: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(90deg, rgb(var(--rg-primary-rgb) / .025), transparent 18%, transparent 82%, rgb(var(--rg-secondary-rgb) / .025)), var(--rg-bg);
4494
+ --rg-brushed-chrome: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 46%, rgb(var(--rg-surface-soft-rgb) / .54) 52%, rgb(var(--rg-surface-rgb) / .88));
4495
+ --rg-glass-pane: linear-gradient(180deg, var(--rg-glass-highlight), rgb(var(--rg-surface-strong-rgb) / .28) 10%, rgb(var(--rg-surface-rgb) / .82) 100%);
4496
+ --rg-glass-inset: linear-gradient(180deg, rgb(var(--rg-text-rgb) / .075), rgb(var(--rg-surface-rgb) / .7) 22%, rgb(var(--rg-surface-strong-rgb) / .68));
4497
+ --rg-control-material: linear-gradient(180deg, var(--rg-glass-highlight), rgb(var(--rg-surface-strong-rgb) / .9) 12%, rgb(var(--rg-surface-rgb) / .72) 52%, rgb(var(--rg-surface-soft-rgb) / .9));
4498
+ --rg-card-bg: var(--rg-glass-pane);
4499
+ --rg-control-bg: var(--rg-control-material);
3664
4500
  --rg-spinner-track: rgb(var(--rg-border-rgb) / max(.28, calc(var(--rg-border-alpha) * .7)));
3665
4501
  --rg-spinner-stroke: var(--rg-primary);
3666
4502
  --rg-spinner-accent: var(--rg-accent);
3667
4503
  }
3668
4504
 
3669
4505
  @supports (color: color-mix(in srgb,black,white)) {
3670
- [data-ui="retro-glass"][data-theme][data-mode] {
4506
+ [data-ui="retro-glass"][data-mode] {
3671
4507
  --rg-border: color-mix(in srgb, rgb(var(--rg-border-rgb) / max(var(--rg-border-alpha), var(--usk-border-min-alpha))), var(--rg-text) var(--usk-border-text-mix));
3672
4508
  }
3673
4509
  }
3674
4510
 
3675
4511
  [data-ui="retro-glass"] {
3676
- background: radial-gradient(circle at 15% 15%,rgb(var(--rg-primary-rgb)/.18),transparent 28rem),radial-gradient(circle at 85% 10%,rgb(var(--rg-secondary-rgb)/.16),transparent 26rem),radial-gradient(circle at 50% 110%,rgb(var(--rg-accent-rgb)/.14),transparent 34rem),linear-gradient(90deg,rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),var(--rg-bg);
4512
+ background: var(--rg-theme-bg, var(--rg-bg));
4513
+ background-size: var(--rg-theme-bg-size, auto);
3677
4514
  color: var(--rg-text);
3678
4515
  font-family: var(--rg-font-body);
3679
- background-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
3680
4516
  }
3681
4517
 
3682
4518
  [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
3683
4519
  box-sizing: border-box;
3684
4520
  }
3685
4521
 
3686
- [data-ui="retro-glass"][data-theme][data-mode] {
4522
+ [data-ui="retro-glass"][data-mode] {
3687
4523
  background: var(--rg-theme-bg);
3688
4524
  background-size: var(--rg-theme-bg-size);
3689
4525
  }
3690
4526
 
3691
- [data-ui="retro-glass"] a {
4527
+ [data-ui="retro-glass"] :where(a) {
3692
4528
  color: var(--rg-link);
3693
4529
  text-underline-offset: .18em;
3694
4530
  }
@@ -3718,7 +4554,7 @@
3718
4554
  }
3719
4555
 
3720
4556
  .rg-kicker {
3721
- color: var(--rg-primary);
4557
+ color: var(--usk-primary-ink, var(--rg-primary));
3722
4558
  letter-spacing: .18em;
3723
4559
  margin: 0;
3724
4560
  font-size: .8rem;
@@ -3747,13 +4583,13 @@
3747
4583
  border-top-color: #ffffff47;
3748
4584
  border-left-color: #fff3;
3749
4585
  position: relative;
3750
- overflow: hidden;
3751
4586
  }
3752
4587
 
3753
4588
  .rg-card:before, .rg-panel:before, .rg-console:before, :where([data-ui="retro-glass"]) .ui-card:before {
3754
4589
  content: "";
3755
4590
  pointer-events: none;
3756
4591
  background: linear-gradient(180deg,#ffffff1a,transparent 30%),linear-gradient(90deg,transparent,rgb(var(--rg-accent-rgb)/.08),transparent);
4592
+ border-radius: inherit;
3757
4593
  position: absolute;
3758
4594
  inset: 0;
3759
4595
  }
@@ -3820,33 +4656,15 @@
3820
4656
  display: inline-flex;
3821
4657
  }
3822
4658
 
3823
- .rg-button:hover, .rg-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover {
3824
- border-color: rgb(var(--rg-primary-rgb)/.68);
3825
- box-shadow: var(--rg-shadow-md),0 0 24px var(--rg-glow-primary);
3826
- transform: translateY(-2px);
3827
- }
3828
-
3829
4659
  .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button.is-active, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"] {
3830
4660
  box-shadow: inset 0 8px 18px #0000002e,0 0 18px var(--rg-glow-primary);
3831
4661
  transform: translateY(1px);
3832
4662
  }
3833
4663
 
3834
- .rg-button-primary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]) {
3835
- background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-primary);
3836
- color: var(--rg-on-primary);
3837
- border-color: rgb(var(--rg-primary-rgb)/.72);
3838
- }
3839
-
3840
4664
  .rg-button-primary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]):hover {
3841
4665
  background: var(--rg-primary-hover);
3842
4666
  }
3843
4667
 
3844
- .rg-button-secondary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]) {
3845
- background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-secondary);
3846
- color: var(--rg-on-secondary);
3847
- border-color: rgb(var(--rg-secondary-rgb)/.72);
3848
- }
3849
-
3850
4668
  .rg-button-secondary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3851
4669
  background: var(--rg-secondary-hover);
3852
4670
  }
@@ -3979,12 +4797,6 @@
3979
4797
  background: #ffffff1a;
3980
4798
  }
3981
4799
 
3982
- .rg-nav-link.is-active, .rg-nav-link[aria-current="page"], :where([data-ui="retro-glass"]) .ui-nav-link.is-active, :where([data-ui="retro-glass"]) .ui-nav-link[aria-current="page"] {
3983
- background: var(--rg-primary);
3984
- color: var(--rg-on-primary);
3985
- box-shadow: 0 0 22px var(--rg-glow-primary);
3986
- }
3987
-
3988
4800
  .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
3989
4801
  background: linear-gradient(135deg,#ffffff47,#ffffff0f),var(--rg-surface);
3990
4802
  max-inline-size: 16rem;
@@ -4092,7 +4904,7 @@
4092
4904
  }
4093
4905
 
4094
4906
  .rg-text-primary {
4095
- color: var(--rg-primary);
4907
+ color: var(--usk-primary-ink, var(--rg-primary));
4096
4908
  }
4097
4909
 
4098
4910
  .rg-text-secondary {
@@ -4100,7 +4912,7 @@
4100
4912
  }
4101
4913
 
4102
4914
  .rg-text-accent {
4103
- color: var(--rg-accent);
4915
+ color: var(--usk-accent-ink, var(--rg-accent));
4104
4916
  }
4105
4917
 
4106
4918
  .rg-text-success {
@@ -4123,11 +4935,6 @@
4123
4935
  }
4124
4936
  }
4125
4937
 
4126
- [data-ui="retro-glass"] :focus-visible {
4127
- outline: 3px solid var(--rg-focus);
4128
- outline-offset: 3px;
4129
- }
4130
-
4131
4938
  @media (prefers-reduced-motion: reduce) {
4132
4939
  [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
4133
4940
  transition-duration: 1ms !important;
@@ -4139,7 +4946,7 @@
4139
4946
  background: var(--rg-card-bg);
4140
4947
  }
4141
4948
 
4142
- .rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-ghost), .rg-icon-button, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap, :where([data-ui="retro-glass"]) .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="retro-glass"]) .ui-icon-button {
4949
+ .rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-warning):not(.rg-button-ghost), .rg-icon-button, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap, :where([data-ui="retro-glass"]) .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="retro-glass"]) .ui-icon-button {
4143
4950
  background: var(--rg-control-bg);
4144
4951
  }
4145
4952
 
@@ -4148,18 +4955,21 @@
4148
4955
  }
4149
4956
 
4150
4957
  .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
4151
- border: .12rem solid #ffffff52;
4152
- border-block-start-color: var(--rg-spinner-stroke);
4153
- border-inline-end-color: var(--rg-spinner-accent);
4154
- background: linear-gradient(135deg,#ffffff52,transparent 46%),conic-gradient(from 35deg,var(--rg-spinner-stroke),transparent 40%,var(--rg-spinner-accent),var(--rg-spinner-track));
4958
+ box-sizing: border-box;
4155
4959
  block-size: 2rem;
4156
4960
  inline-size: 2rem;
4157
- box-shadow: 0 0 1.35rem var(--rg-glow-primary),inset 0 0 .85rem #ffffff2e;
4158
- -webkit-backdrop-filter: blur(.4rem);
4159
- backdrop-filter: blur(.4rem);
4961
+ color: var(--rg-spinner-stroke);
4962
+ border: 2px solid var(--rg-spinner-track);
4963
+ box-shadow: none;
4964
+ -webkit-backdrop-filter: none;
4965
+ backdrop-filter: none;
4160
4966
  vertical-align: -.2em;
4161
- border-radius: 38% 62% 48% 52%;
4162
- animation: .95s linear infinite rg-spin;
4967
+ background: none;
4968
+ border-block-start-color: currentColor;
4969
+ border-radius: 50%;
4970
+ flex-shrink: 0;
4971
+ padding: 0;
4972
+ animation: .85s linear infinite rg-spin;
4163
4973
  display: inline-block;
4164
4974
  }
4165
4975
 
@@ -4182,15 +4992,28 @@
4182
4992
 
4183
4993
  .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
4184
4994
  content: "";
4185
- border: .16em solid rgb(var(--rg-primary-text-rgb)/.42);
4995
+ box-sizing: border-box;
4996
+ border: 2px solid var(--rg-spinner-track);
4997
+ block-size: 16px;
4998
+ inline-size: 16px;
4999
+ box-shadow: none;
5000
+ clip-path: none;
5001
+ background: none;
4186
5002
  border-block-start-color: currentColor;
4187
5003
  border-radius: 50%;
4188
- block-size: 1em;
4189
- inline-size: 1em;
4190
- animation: .75s linear infinite rg-spin;
5004
+ flex: 0 0 16px;
5005
+ padding: 0;
5006
+ animation: .85s linear infinite rg-spin;
4191
5007
  display: inline-block;
4192
5008
  }
4193
5009
 
5010
+ @supports (color: color-mix(in srgb,black,white)) {
5011
+ .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
5012
+ border-color: color-mix(in srgb,currentColor 28%,transparent);
5013
+ border-block-start-color: currentColor;
5014
+ }
5015
+ }
5016
+
4194
5017
  @keyframes rg-spin {
4195
5018
  to {
4196
5019
  transform: rotate(360deg);
@@ -4267,7 +5090,7 @@
4267
5090
  }
4268
5091
 
4269
5092
  .rg-button.rg-button-outline-heavy, .rg-button-outline-heavy, :where([data-ui="retro-glass"]) .ui-button.rg-button-outline-heavy {
4270
- color: var(--rg-primary);
5093
+ color: var(--usk-primary-ink, var(--rg-primary));
4271
5094
  border-style: solid;
4272
5095
  border-width: 2px;
4273
5096
  border-color: var(--rg-primary);
@@ -4308,7 +5131,6 @@
4308
5131
  border-radius: var(--rg-radius-lg);
4309
5132
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4310
5133
  display: grid;
4311
- overflow: hidden;
4312
5134
  }
4313
5135
 
4314
5136
  .rg-feature-item {
@@ -4351,7 +5173,7 @@
4351
5173
  }
4352
5174
 
4353
5175
  .rg-eyebrow {
4354
- color: var(--rg-primary);
5176
+ color: var(--usk-primary-ink, var(--rg-primary));
4355
5177
  font-family: var(--rg-font-heading);
4356
5178
  letter-spacing: .14em;
4357
5179
  text-transform: uppercase;
@@ -4438,6 +5260,7 @@
4438
5260
  clip-path: polygon(.8rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .8rem) 100%, 0 100%, 0 .35rem);
4439
5261
  justify-content: center;
4440
5262
  justify-self: center;
5263
+ min-block-size: 2.75rem;
4441
5264
  inline-size: min(100%, 16rem);
4442
5265
  min-inline-size: 6rem;
4443
5266
  max-inline-size: 100%;
@@ -4460,7 +5283,7 @@
4460
5283
  border-radius: .75rem 1.35rem .75rem 1.15rem;
4461
5284
  }
4462
5285
 
4463
- [data-ui="retro-glass"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5286
+ [data-ui="retro-glass"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4464
5287
  color: var(--rg-text);
4465
5288
  background: rgb(var(--rg-surface-strong-rgb)/.24);
4466
5289
  border: 1px solid var(--rg-primary);
@@ -4468,7 +5291,7 @@
4468
5291
  border-radius: .55rem .9rem .55rem .78rem;
4469
5292
  }
4470
5293
 
4471
- [data-ui="retro-glass"][data-theme][data-mode] :where(dialog) {
5294
+ [data-ui="retro-glass"][data-mode] :where(dialog) {
4472
5295
  background: rgb(var(--rg-surface-strong-rgb)/.72);
4473
5296
  border: 1px solid rgb(var(--rg-border-rgb)/.78);
4474
5297
  box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.8),0 1rem 2.2rem rgb(var(--rg-primary-rgb)/.18);
@@ -4477,14 +5300,316 @@
4477
5300
  border-radius: .85rem 1.45rem .85rem 1.2rem;
4478
5301
  }
4479
5302
 
4480
- .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
4481
- border: .09em solid #ffffff73;
5303
+ [data-ui="retro-glass"][data-mode] {
5304
+ --usk-native-font-control: "Segoe UI", Tahoma, Geneva, sans-serif;
5305
+ --usk-native-control-min-block-size: 2.5rem;
5306
+ --usk-native-control-padding-block: .52rem;
5307
+ --usk-native-control-padding-inline: .86rem;
5308
+ --usk-native-border-width: 1px;
5309
+ --usk-native-radius-sm: .34rem;
5310
+ --usk-native-radius: .52rem;
5311
+ --usk-native-radius-lg: .72rem;
5312
+ --usk-native-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .9), 0 .22rem .5rem rgb(var(--rg-text-rgb) / .18);
5313
+ --usk-native-shadow-md: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .92), 0 .7rem 1.35rem rgb(var(--rg-text-rgb) / .22);
5314
+ --usk-native-focus-ring: 0 0 0 1px var(--rg-surface-strong), 0 0 0 3px var(--rg-focus), 0 0 .65rem rgb(var(--rg-focus-rgb) / .34);
5315
+ --usk-native-subcontrol-padding-block: .4rem;
5316
+ --usk-native-subcontrol-padding-inline: .62rem;
5317
+ --usk-native-choice-size: 1.16rem;
5318
+ --usk-native-choice-background: var(--rg-control-material);
5319
+ --usk-native-choice-border: 1px solid var(--rg-border);
5320
+ --usk-native-checkbox-radius: .28rem;
5321
+ --usk-native-radio-radius: 50%;
5322
+ --usk-native-choice-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .9), 0 1px 3px rgb(var(--rg-text-rgb) / .22);
5323
+ --usk-native-choice-checked-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
5324
+ --usk-native-choice-mark-color: var(--rg-on-primary);
5325
+ --usk-native-select-indicator-image: linear-gradient(55deg, transparent 46%, var(--rg-text) 46% 56%, transparent 56%), linear-gradient(125deg, transparent 46%, var(--rg-text) 46% 56%, transparent 56%);
5326
+ --usk-native-select-indicator-size: .44rem .44rem, .44rem .44rem;
5327
+ --usk-native-select-indicator-position: calc(100% - 1.02rem) 50%, calc(100% - .72rem) 50%;
5328
+ --usk-native-select-padding-inline-end: 2.2rem;
5329
+ --usk-native-range-track-size: .42rem;
5330
+ --usk-native-range-track-background: var(--rg-glass-inset);
5331
+ --usk-native-range-track-border: 1px inset var(--rg-border);
5332
+ --usk-native-range-track-radius: .35rem;
5333
+ --usk-native-range-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .22);
5334
+ --usk-native-range-progress-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
5335
+ --usk-native-range-thumb-size: 1.2rem;
5336
+ --usk-native-range-thumb-background: radial-gradient(circle at 42% 32%, var(--rg-glass-highlight), transparent 28%), var(--rg-control-material);
5337
+ --usk-native-range-thumb-border: 1px solid var(--rg-border);
5338
+ --usk-native-range-thumb-radius: 50%;
5339
+ --usk-native-range-thumb-shadow: inset 0 1px 0 var(--rg-surface-strong), 0 2px 4px rgb(var(--rg-text-rgb) / .28);
5340
+ --usk-native-progress-size: .74rem;
5341
+ --usk-native-progress-track-background: var(--rg-glass-inset);
5342
+ --usk-native-progress-track-border: 1px inset var(--rg-border);
5343
+ --usk-native-progress-track-radius: .42rem;
5344
+ --usk-native-progress-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .25);
5345
+ --usk-native-progress-value-background: repeating-linear-gradient(120deg, var(--rg-primary) 0 .5rem, var(--rg-primary-hover) .5rem .7rem);
5346
+ --usk-native-progress-value-radius: .36rem;
5347
+ --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .7), 0 0 .45rem rgb(var(--rg-primary-rgb) / .35);
5348
+ --usk-native-scrollbar-size: .8rem;
5349
+ --usk-native-scrollbar-track: linear-gradient(90deg, var(--rg-surface-soft), var(--rg-surface));
5350
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, var(--rg-surface-strong), var(--rg-primary), var(--rg-surface-strong));
5351
+ --usk-native-scrollbar-radius: .48rem;
5352
+ }
5353
+
5354
+ .rg-title {
5355
+ font-family: var(--rg-font-display);
5356
+ letter-spacing: max(.06em, .5px);
5357
+ text-transform: none;
5358
+ text-shadow: 0 1px 0 var(--rg-glass-highlight),0 2px 2px rgb(var(--rg-text-rgb)/.28);
5359
+ margin-block: .75rem;
5360
+ font-weight: 800;
5361
+ }
5362
+
5363
+ .rg-heading {
5364
+ letter-spacing: .015em;
5365
+ text-shadow: var(--rg-control-text-shadow);
5366
+ font-size: clamp(1.16rem, 2.4vw, 1.72rem);
5367
+ font-weight: 700;
5368
+ }
5369
+
5370
+ .rg-kicker, .rg-label, :where([data-ui="retro-glass"]) .ui-label {
5371
+ letter-spacing: .055em;
5372
+ font-size: .76rem;
5373
+ font-weight: 700;
5374
+ }
5375
+
5376
+ .rg-copy, .rg-subtitle {
5377
+ line-height: 1.48;
5378
+ }
5379
+
5380
+ .rg-card, .rg-panel, :where([data-ui="retro-glass"]) .ui-card {
5381
+ background: var(--rg-glass-pane);
5382
+ border: 1px solid var(--rg-border);
5383
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .8rem var(--rg-material-shadow);
5384
+ -webkit-backdrop-filter: blur(14px) saturate(135%);
5385
+ backdrop-filter: blur(14px) saturate(135%);
5386
+ border-radius: .46rem;
5387
+ padding: 1rem;
5388
+ }
5389
+
5390
+ .rg-card:before, .rg-panel:before, .rg-console:before, :where([data-ui="retro-glass"]) .ui-card:before {
5391
+ background: linear-gradient(180deg,var(--rg-glass-midlight),transparent 24%);
5392
+ }
5393
+
5394
+ .rg-well, .rg-inset {
5395
+ background: var(--rg-glass-inset);
5396
+ border: 1px inset var(--rg-border);
5397
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),inset 0 1px 0 var(--rg-glass-midlight);
5398
+ -webkit-backdrop-filter: blur(8px);
5399
+ backdrop-filter: blur(8px);
5400
+ border-radius: .34rem;
5401
+ padding: .82rem;
5402
+ }
5403
+
5404
+ .rg-button, .rg-icon-button, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button {
5405
+ background: var(--rg-control-material);
5406
+ border: 1px solid var(--rg-border);
5407
+ min-height: 2.5rem;
5408
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.08),0 .16rem .38rem var(--rg-material-shadow);
5409
+ letter-spacing: .01em;
5410
+ text-shadow: var(--rg-control-text-shadow);
5411
+ text-transform: none;
5412
+ border-radius: .34rem;
5413
+ padding: .5rem .82rem;
5414
+ font-weight: 650;
5415
+ }
5416
+
5417
+ .rg-button:hover, .rg-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover {
5418
+ border-color: var(--rg-primary);
5419
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .2rem .48rem var(--rg-material-shadow),0 0 .5rem rgb(var(--rg-primary-rgb)/.24);
5420
+ transform: none;
5421
+ }
5422
+
5423
+ .rg-button:active, .rg-icon-button:active, .rg-button[aria-pressed="true"], .rg-button.is-active, :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button.is-active {
5424
+ background: var(--rg-glass-inset);
5425
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-midlight);
5426
+ transform: translateY(1px);
5427
+ }
5428
+
5429
+ .rg-input, .rg-textarea, .rg-select, :where([data-ui="retro-glass"]) .ui-input, :where([data-ui="retro-glass"]) .ui-textarea, :where([data-ui="retro-glass"]) .ui-select {
5430
+ background: var(--rg-glass-inset);
5431
+ border: 1px inset var(--rg-border);
5432
+ min-height: 2.32rem;
5433
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5434
+ border-radius: .28rem;
5435
+ padding: .44rem .64rem;
5436
+ }
5437
+
5438
+ .rg-nav, :where([data-ui="retro-glass"]) .ui-nav {
5439
+ background: linear-gradient(180deg,var(--rg-primary-hover),var(--rg-primary) 44%,rgb(var(--rg-primary-rgb)/.82) 50%,rgb(var(--rg-primary-rgb)/.68));
5440
+ border: 1px solid rgb(var(--rg-primary-rgb)/.92);
5441
+ box-shadow: inset 0 1px 0 #ffffff7a,inset 0-1px 0 #00000057,0 .24rem .54rem var(--rg-material-shadow);
5442
+ border-radius: .34rem;
5443
+ gap: 0;
5444
+ padding: .2rem;
5445
+ }
5446
+
5447
+ .rg-nav-link, :where([data-ui="retro-glass"]) .ui-nav-link {
5448
+ min-height: 2.7rem;
5449
+ color: var(--rg-on-primary);
5450
+ letter-spacing: .015em;
5451
+ text-shadow: 0 -1px #0000009e;
5452
+ border-inline-end: 1px solid #00000038;
5453
+ border-radius: .2rem;
5454
+ padding: .58rem .92rem;
5455
+ font-size: .82rem;
5456
+ }
5457
+
5458
+ .rg-nav-link:hover, :where([data-ui="retro-glass"]) .ui-nav-link:hover {
5459
+ color: var(--rg-on-primary);
5460
+ background: linear-gradient(#ffffff3d, #ffffff0a);
5461
+ border-color: #ffffff4d;
5462
+ }
5463
+
5464
+ .rg-toolbar, :where([data-ui="retro-glass"]) .ui-toolbar {
5465
+ background: var(--rg-brushed-chrome);
5466
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.18),0 .22rem .5rem var(--rg-material-shadow);
5467
+ border-radius: .34rem;
5468
+ }
5469
+
5470
+ .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
5471
+ border: 1px solid var(--rg-border);
5472
+ min-height: 1.46rem;
5473
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.85),0 1px 3px rgb(var(--rg-text-rgb)/.2);
5474
+ border-radius: .72rem;
5475
+ padding: .24rem .52rem;
5476
+ }
5477
+
5478
+ .rg-alert, :where([data-ui="retro-glass"]) .ui-alert {
5479
+ background: var(--rg-glass-pane);
5480
+ border: 1px solid var(--rg-border);
5481
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .28rem .6rem var(--rg-material-shadow);
5482
+ -webkit-backdrop-filter: blur(10px);
5483
+ backdrop-filter: blur(10px);
5484
+ border-radius: .38rem;
5485
+ padding: .7rem .86rem;
5486
+ }
5487
+
5488
+ .rg-alert-success, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"]) {
5489
+ background: linear-gradient(180deg,rgb(var(--rg-success-rgb)/.2),rgb(var(--rg-success-rgb)/.08)),var(--rg-glass-pane);
5490
+ }
5491
+
5492
+ .rg-alert-warning, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"]) {
5493
+ background: linear-gradient(180deg,rgb(var(--rg-warning-rgb)/.2),rgb(var(--rg-warning-rgb)/.08)),var(--rg-glass-pane);
5494
+ }
5495
+
5496
+ .rg-alert-danger, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"]) {
5497
+ background: linear-gradient(180deg,rgb(var(--rg-danger-rgb)/.2),rgb(var(--rg-danger-rgb)/.08)),var(--rg-glass-pane);
5498
+ }
5499
+
5500
+ .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
5501
+ background: var(--rg-glass-inset);
5502
+ height: .74rem;
5503
+ box-shadow: inset 0 2px 4px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5504
+ border-radius: .42rem;
5505
+ }
5506
+
5507
+ .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
5508
+ background: repeating-linear-gradient(120deg,var(--rg-primary)0 .5rem,var(--rg-primary-hover) .5rem .7rem);
5509
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.7),0 0 .45rem rgb(var(--rg-primary-rgb)/.35);
5510
+ border-radius: .36rem;
5511
+ }
5512
+
5513
+ .rg-table-wrap, :where([data-ui="retro-glass"]) .ui-table-wrap {
5514
+ background: var(--rg-glass-inset);
5515
+ border: 1px solid var(--rg-border);
5516
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .72rem var(--rg-material-shadow);
5517
+ -webkit-backdrop-filter: blur(10px);
5518
+ backdrop-filter: blur(10px);
5519
+ border-radius: .42rem;
5520
+ }
5521
+
5522
+ .rg-table, :where([data-ui="retro-glass"]) .ui-table {
5523
+ border-collapse: separate;
5524
+ border-spacing: 0;
5525
+ }
5526
+
5527
+ .rg-table th, :where([data-ui="retro-glass"]) .ui-table th {
5528
+ background: linear-gradient(180deg,rgb(var(--rg-primary-rgb)/.92),var(--rg-primary-hover) 48%,var(--rg-primary));
5529
+ color: var(--rg-on-primary);
5530
+ text-shadow: 0 -1px #00000085;
5531
+ padding: .58rem .72rem;
5532
+ font-weight: 700;
5533
+ }
5534
+
5535
+ .rg-table td, :where([data-ui="retro-glass"]) .ui-table td {
5536
+ padding: .64rem .76rem;
5537
+ }
5538
+
5539
+ .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5540
+ color: #f5f8fa;
5541
+ background: linear-gradient(#363d44f5, #080c0ffa);
5542
+ border: 1px solid #ffffff47;
5543
+ border-radius: .36rem;
5544
+ box-shadow: inset 0 1px #ffffff38, 0 .55rem 1rem #0000007a;
5545
+ }
5546
+
5547
+ .rg-card-service, .rg-card-feature, .rg-media-scrim, .rg-feature-strip, .rg-callout-bar {
5548
+ background: var(--rg-glass-pane);
5549
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .72rem var(--rg-material-shadow);
5550
+ -webkit-backdrop-filter: blur(12px) saturate(118%);
5551
+ backdrop-filter: blur(12px) saturate(118%);
4482
5552
  clip-path: none;
4483
- background: linear-gradient(135deg, #ffffff59, #0000 45%), conic-gradient(currentColor, #0000 44%, currentColor);
4484
- border-block-start-color: currentColor;
4485
- border-radius: 38% 62% 48% 52%;
4486
- animation: .96s linear infinite rg-spin;
4487
- box-shadow: 0 0 .42em, inset 0 0 .2em #ffffff42;
5553
+ border-radius: .46rem;
5554
+ }
5555
+
5556
+ .rg-callout-bar {
5557
+ background: linear-gradient(180deg,#ffffff29,transparent 12%),linear-gradient(180deg,rgb(var(--rg-text-rgb)/.88),rgb(var(--rg-bg-rgb)/.96));
5558
+ color: var(--rg-dock-text);
5559
+ box-shadow: inset 0 1px 0 #ffffff42,inset 0-1px 0 #000000b3,0 .45rem .92rem var(--rg-material-shadow);
5560
+ border-color: #ffffff2e;
5561
+ }
5562
+
5563
+ .rg-check-control, .rg-radio-control, .rg-switch-track, .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-check-control, :where([data-ui="retro-glass"]) .ui-radio-control, :where([data-ui="retro-glass"]) .ui-switch-track, :where([data-ui="retro-glass"]) .ui-switch-thumb {
5564
+ background: var(--rg-control-material);
5565
+ border: 1px solid var(--rg-border);
5566
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.12),0 1px 3px var(--rg-material-shadow);
5567
+ }
5568
+
5569
+ .rg-check-control, :where([data-ui="retro-glass"]) .ui-check-control {
5570
+ border-radius: .22rem;
5571
+ }
5572
+
5573
+ .rg-radio-control, :where([data-ui="retro-glass"]) .ui-radio-control {
5574
+ border-radius: 50%;
5575
+ }
5576
+
5577
+ .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
5578
+ background: var(--rg-glass-inset);
5579
+ border-radius: var(--rg-radius-pill);
5580
+ box-shadow: inset 0 2px 4px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5581
+ }
5582
+
5583
+ .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch-thumb {
5584
+ background: radial-gradient(circle at 42% 30%,var(--rg-glass-highlight),transparent 32%),var(--rg-control-material);
5585
+ border-radius: 50%;
5586
+ }
5587
+
5588
+ .rg-check:has(input:checked) .rg-check-control, .rg-radio:has(input:checked) .rg-radio-control, .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="retro-glass"]) .ui-check:has(input:checked) .ui-check-control, :where([data-ui="retro-glass"]) .ui-radio:has(input:checked) .ui-radio-control, :where([data-ui="retro-glass"]) .ui-switch:has(input:checked) .ui-switch-track {
5589
+ background: linear-gradient(180deg,var(--rg-primary-hover),var(--rg-primary));
5590
+ border-color: var(--rg-primary);
5591
+ }
5592
+
5593
+ [data-ui="retro-glass"][data-mode] :where(fieldset) {
5594
+ background: var(--rg-glass-pane);
5595
+ border: 1px solid var(--rg-border);
5596
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .32rem .7rem var(--rg-material-shadow);
5597
+ border-radius: .42rem;
5598
+ }
5599
+
5600
+ [data-ui="retro-glass"][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) {
5601
+ background: var(--rg-glass-inset);
5602
+ border: 1px inset var(--rg-border);
5603
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5604
+ border-radius: .28rem;
5605
+ }
5606
+
5607
+ [data-ui="retro-glass"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5608
+ background: var(--rg-control-material);
5609
+ border: 1px solid var(--rg-border);
5610
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.08),0 .16rem .38rem var(--rg-material-shadow);
5611
+ text-shadow: var(--rg-control-text-shadow);
5612
+ border-radius: .34rem;
4488
5613
  }
4489
5614
 
4490
5615
  @media (prefers-reduced-motion: reduce) {
@@ -4531,4 +5656,1205 @@
4531
5656
  color: #000 !important;
4532
5657
  }
4533
5658
  }
5659
+
5660
+ .rg-input[aria-invalid="true"], .rg-textarea[aria-invalid="true"], .rg-select[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-input[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-textarea[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-select[aria-invalid="true"] {
5661
+ border-color: var(--rg-danger);
5662
+ box-shadow: 0 0 0 2px rgb(var(--rg-danger-rgb)/.2);
5663
+ }
5664
+
5665
+ .rg-input[readonly], .rg-textarea[readonly], :where([data-ui="retro-glass"]) .ui-input[readonly], :where([data-ui="retro-glass"]) .ui-textarea[readonly] {
5666
+ filter: saturate(.72);
5667
+ opacity: .78;
5668
+ border-style: dashed;
5669
+ }
5670
+
5671
+ .rg-button-ghost, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
5672
+ color: var(--usk-primary-ink, var(--rg-primary));
5673
+ background: none;
5674
+ border-color: #0000;
5675
+ }
5676
+
5677
+ .rg-feature-item > .rg-icon-medallion {
5678
+ font-size: 1.5rem;
5679
+ line-height: 1;
5680
+ }
5681
+
5682
+ .rg-callout-bar > .rg-icon-medallion {
5683
+ min-block-size: 4.5rem;
5684
+ min-inline-size: 4.5rem;
5685
+ font-size: 2rem;
5686
+ font-weight: 800;
5687
+ line-height: 1;
5688
+ }
5689
+
5690
+ [data-ui="retro-glass"][data-mode] {
5691
+ --rg-radius-sm: 6px;
5692
+ --rg-radius-md: 10px;
5693
+ --rg-radius-lg: 14px;
5694
+ --rg-space-5: 24px;
5695
+ --rg-space-6: 32px;
5696
+ --rg-control-height: 36px;
5697
+ --rg-line-color: rgb(var(--rg-border-rgb) / .65);
5698
+ --rg-line-strong: var(--rg-border);
5699
+ --rg-surface-input: rgb(var(--usk-surface-strong-rgb, var(--rg-input-fallback-rgb)));
5700
+ --rg-surface-raised: rgb(var(--rg-surface-strong-rgb));
5701
+ --rg-canvas: var(--rg-bg);
5702
+ --rg-text-soft: var(--rg-text-muted);
5703
+ --rg-muted: var(--rg-text-muted);
5704
+ --rg-highlight: var(--rg-glass-highlight);
5705
+ --rg-recess: var(--rg-material-shadow);
5706
+ --rg-glass-pane: linear-gradient(180deg, var(--rg-glass-midlight), transparent 18%), rgb(var(--rg-surface-rgb));
5707
+ --rg-brushed-chrome: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 48%, rgb(var(--rg-border-rgb) / .48) 52%, rgb(var(--rg-surface-soft-rgb) / .5));
5708
+ --rg-glass-inset: linear-gradient(180deg, #0000001f, transparent 18%), var(--rg-surface-input);
5709
+ --rg-control-material: linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 46%, #00000029 52%, transparent), var(--rg-surface-soft);
5710
+ --rg-gloss-rgb: var(--rg-primary-rgb);
5711
+ --rg-progress-stripe: #ffffff3d;
5712
+ --rg-gloss-ink: rgb(var(--usk-primary-text-rgb, 255 255 255));
5713
+ --rg-gloss: linear-gradient(180deg, #fff6, transparent 18%, #00000026 46%, #0000006b 52%, #00000038), rgb(var(--rg-gloss-rgb));
5714
+ --rg-danger-gloss: linear-gradient(180deg, #fff6, transparent 18%, #00000026 46%, #0000006b 52%, #00000038), var(--rg-danger);
5715
+ --rg-floating-shadow: inset 0 1px 0 var(--rg-highlight), 0 7px 18px #0000003d;
5716
+ --usk-native-font-control: var(--rg-font-body);
5717
+ --usk-native-control-min-block-size: var(--rg-control-height);
5718
+ --usk-native-radius-sm: var(--rg-radius-sm);
5719
+ --usk-native-radius: var(--rg-radius-md);
5720
+ --usk-native-card-bg: var(--rg-glass-pane);
5721
+ --usk-native-control-bg: var(--rg-glass-inset);
5722
+ }
5723
+
5724
+ [data-ui="retro-glass"][data-mode="light"] {
5725
+ --rg-input-fallback-rgb: 248 250 252;
5726
+ }
5727
+
5728
+ [data-ui="retro-glass"][data-mode="dark"] {
5729
+ --rg-input-fallback-rgb: 7 21 29;
5730
+ }
5731
+
5732
+ [data-ui="retro-glass"][data-mode="contrast"] {
5733
+ --rg-input-fallback-rgb: 0 0 0;
5734
+ --rg-gloss-ink: var(--rg-on-primary);
5735
+ --rg-gloss: rgb(var(--rg-gloss-rgb));
5736
+ --rg-line-color: var(--rg-border);
5737
+ }
5738
+
5739
+ [data-ui="retro-glass"][data-theme][data-mode] {
5740
+ --rg-gloss: linear-gradient(180deg, #ffffff4d, transparent 12%, transparent 48%, #0000000a 52%, transparent), rgb(var(--rg-gloss-rgb));
5741
+ --rg-danger-gloss: linear-gradient(180deg, #ffffff4d, transparent 12%, transparent 48%, #0000000a 52%, transparent), var(--rg-danger);
5742
+ }
5743
+
5744
+ .rg-title, .rg-heading {
5745
+ letter-spacing: 0;
5746
+ text-shadow: none;
5747
+ }
5748
+
5749
+ .rg-heading {
5750
+ font-size: 1.25rem;
5751
+ }
5752
+
5753
+ .rg-title {
5754
+ font-size: 2rem;
5755
+ }
5756
+
5757
+ .rg-kicker, .rg-label, .rg-overline, :where([data-ui="retro-glass"]) .ui-label {
5758
+ font: 700 12px/1.4 var(--rg-font-mono);
5759
+ letter-spacing: 0;
5760
+ text-transform: uppercase;
5761
+ color: var(--rg-text-soft);
5762
+ }
5763
+
5764
+ .rg-label, :where([data-ui="retro-glass"]) .ui-label {
5765
+ margin-block-end: 4px;
5766
+ display: block;
5767
+ }
5768
+
5769
+ .rg-overline {
5770
+ margin: 0 0 8px;
5771
+ display: block;
5772
+ }
5773
+
5774
+ .rg-section-title {
5775
+ color: var(--rg-text);
5776
+ font: 800 14px/1.3 var(--rg-font-body);
5777
+ letter-spacing: 0;
5778
+ text-transform: uppercase;
5779
+ align-items: center;
5780
+ gap: 8px;
5781
+ margin: 0 0 16px;
5782
+ display: flex;
5783
+ }
5784
+
5785
+ .rg-section-title:before {
5786
+ content: "";
5787
+ border: 1px solid var(--rg-primary);
5788
+ background: var(--rg-gloss);
5789
+ block-size: 10px;
5790
+ inline-size: 10px;
5791
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
5792
+ border-radius: 50%;
5793
+ flex: 0 0 10px;
5794
+ }
5795
+
5796
+ .rg-section-title:after {
5797
+ content: "";
5798
+ background: repeating-linear-gradient(90deg,var(--rg-line-color)0 9px,transparent 9px 13px);
5799
+ flex: 0 0 34px;
5800
+ block-size: 8px;
5801
+ inline-size: 34px;
5802
+ margin-inline-start: auto;
5803
+ }
5804
+
5805
+ .rg-card, .rg-panel, :where([data-ui="retro-glass"]) .ui-card {
5806
+ background: var(--rg-glass-pane);
5807
+ border: 1px solid var(--rg-line-color);
5808
+ border-radius: var(--rg-radius-md);
5809
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 4px 0 #0000001f;
5810
+ clip-path: none;
5811
+ }
5812
+
5813
+ .rg-card:before, .rg-panel:before, :where([data-ui="retro-glass"]) .ui-card:before {
5814
+ content: none;
5815
+ }
5816
+
5817
+ .rg-toolbar, :where([data-ui="retro-glass"]) .ui-toolbar {
5818
+ background: var(--rg-brushed-chrome),var(--rg-surface-soft);
5819
+ border-radius: var(--rg-radius-lg);
5820
+ }
5821
+
5822
+ .rg-button, .rg-icon-button, .rg-segment, .rg-pagination-page, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button {
5823
+ min-height: var(--rg-control-height);
5824
+ min-block-size: var(--rg-control-height);
5825
+ background: var(--rg-control-material);
5826
+ color: var(--rg-text);
5827
+ border: 1px solid var(--rg-line-strong);
5828
+ border-radius: var(--rg-radius-sm);
5829
+ box-shadow: inset 0 1px 0 var(--rg-highlight),inset 0-1px 0 #0000002e,0 1px 2px #00000038;
5830
+ font: 700 14px/1.2 var(--rg-font-body);
5831
+ letter-spacing: 0;
5832
+ text-shadow: none;
5833
+ cursor: pointer;
5834
+ clip-path: none;
5835
+ justify-content: center;
5836
+ align-items: center;
5837
+ gap: 8px;
5838
+ padding: 8px 12px;
5839
+ text-decoration: none;
5840
+ transition: background .15s, box-shadow .15s, transform 80ms;
5841
+ display: inline-flex;
5842
+ }
5843
+
5844
+ .rg-icon-button, :where([data-ui="retro-glass"]) .ui-icon-button {
5845
+ inline-size: var(--rg-control-height);
5846
+ aspect-ratio: 1;
5847
+ padding: 8px;
5848
+ }
5849
+
5850
+ .rg-button-primary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]) {
5851
+ background: var(--rg-gloss);
5852
+ color: var(--rg-gloss-ink);
5853
+ border-color: var(--rg-primary);
5854
+ }
5855
+
5856
+ .rg-button-secondary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]) {
5857
+ background: var(--rg-control-material);
5858
+ color: var(--rg-text);
5859
+ border-color: var(--rg-line-strong);
5860
+ }
5861
+
5862
+ .rg-button-danger, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="danger"]) {
5863
+ background: var(--rg-danger-gloss);
5864
+ color: rgb(var(--usk-danger-text-rgb, 255 255 255));
5865
+ border-color: var(--rg-danger);
5866
+ }
5867
+
5868
+ [data-ui="retro-glass"][data-mode][style*="--rg-on-danger"] .rg-button-danger, :where([data-ui="retro-glass"])[data-mode][style*="--rg-on-danger"] .ui-button:where([data-ui-variant="danger"]) {
5869
+ color: var(--rg-on-danger);
5870
+ }
5871
+
5872
+ .rg-button-ghost, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
5873
+ color: var(--rg-text-soft);
5874
+ border-color: var(--rg-line-color);
5875
+ box-shadow: none;
5876
+ background: none;
5877
+ }
5878
+
5879
+ .rg-button:hover, .rg-icon-button:hover, .rg-button.is-hover, .rg-segment:hover, .rg-pagination-page:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button.is-hover {
5880
+ border-color: var(--rg-focus);
5881
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 0 0 1px var(--rg-focus);
5882
+ transform: none;
5883
+ }
5884
+
5885
+ .rg-button:active, .rg-icon-button:active, .rg-button.is-pressed, .rg-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button.is-pressed, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"] {
5886
+ background: linear-gradient(180deg,#00000038,#ffffff1a),var(--rg-surface-soft);
5887
+ color: var(--rg-text);
5888
+ box-shadow: inset 0 2px 5px var(--rg-recess);
5889
+ transform: translateY(1px);
5890
+ }
5891
+
5892
+ .rg-button:disabled, .rg-icon-button:disabled, .rg-button.is-disabled, :where([data-ui="retro-glass"]) .ui-button:disabled, :where([data-ui="retro-glass"]) .ui-icon-button:disabled, :where([data-ui="retro-glass"]) .ui-button.is-disabled {
5893
+ opacity: .4;
5894
+ filter: saturate(.45);
5895
+ cursor: not-allowed;
5896
+ box-shadow: none;
5897
+ }
5898
+
5899
+ .rg-field, :where([data-ui="retro-glass"]) .ui-field {
5900
+ min-inline-size: 0;
5901
+ display: block;
5902
+ }
5903
+
5904
+ .rg-input, .rg-select, .rg-textarea, :where([data-ui="retro-glass"]) .ui-input, :where([data-ui="retro-glass"]) .ui-select, :where([data-ui="retro-glass"]) .ui-textarea {
5905
+ inline-size: 100%;
5906
+ min-block-size: var(--rg-control-height);
5907
+ background: var(--rg-glass-inset);
5908
+ color: var(--rg-text);
5909
+ border: 1px solid var(--rg-line-strong);
5910
+ border-radius: var(--rg-radius-sm);
5911
+ box-shadow: inset 0 1px 3px var(--rg-recess),0 1px 0 var(--rg-highlight);
5912
+ font: 14px/1.3 var(--rg-font-body);
5913
+ padding: 8px 11px;
5914
+ }
5915
+
5916
+ .rg-select, :where([data-ui="retro-glass"]) .ui-select {
5917
+ background-image: var(--usk-native-select-indicator-image),linear-gradient(180deg,#0000001f,transparent 18%);
5918
+ background-size: var(--usk-native-select-indicator-size),auto;
5919
+ background-position: var(--usk-native-select-indicator-position),center;
5920
+ background-repeat: no-repeat;
5921
+ padding-inline-end: 32px;
5922
+ }
5923
+
5924
+ .rg-textarea, :where([data-ui="retro-glass"]) .ui-textarea {
5925
+ resize: vertical;
5926
+ min-block-size: 64px;
5927
+ }
5928
+
5929
+ .rg-input::placeholder, .rg-textarea::placeholder, :where([data-ui="retro-glass"]) .ui-input::placeholder, :where([data-ui="retro-glass"]) .ui-textarea::placeholder {
5930
+ color: var(--rg-muted);
5931
+ opacity: 1;
5932
+ }
5933
+
5934
+ .rg-input-wrap {
5935
+ align-items: center;
5936
+ display: flex;
5937
+ position: relative;
5938
+ }
5939
+
5940
+ .rg-input-wrap .rg-input, :where([data-ui="retro-glass"]) .rg-input-wrap .ui-input {
5941
+ padding-inline-end: 36px;
5942
+ }
5943
+
5944
+ .rg-input-icon {
5945
+ color: var(--rg-link);
5946
+ pointer-events: none;
5947
+ position: absolute;
5948
+ inset-inline-end: 11px;
5949
+ }
5950
+
5951
+ .rg-helper, .rg-error-text {
5952
+ color: var(--rg-text-soft);
5953
+ font: 12px/1.4 var(--rg-font-mono);
5954
+ margin-block-start: 4px;
5955
+ display: block;
5956
+ }
5957
+
5958
+ .rg-error-text {
5959
+ border-inline-start: 3px solid var(--rg-danger);
5960
+ padding-inline-start: 6px;
5961
+ }
5962
+
5963
+ .rg-input.is-error, .rg-input[aria-invalid="true"], .rg-select[aria-invalid="true"], .rg-textarea[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-input.is-error, :where([data-ui="retro-glass"]) .ui-input[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-select[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-textarea[aria-invalid="true"] {
5964
+ border-color: var(--rg-danger);
5965
+ box-shadow: inset 0 1px 3px var(--rg-recess),0 0 0 1px var(--rg-danger);
5966
+ }
5967
+
5968
+ .rg-input.is-hover, :where([data-ui="retro-glass"]) .ui-input.is-hover {
5969
+ border-color: var(--rg-focus);
5970
+ }
5971
+
5972
+ .rg-input.is-focus, :where([data-ui="retro-glass"]) .ui-input.is-focus {
5973
+ outline: 2px solid var(--rg-focus);
5974
+ outline-offset: 2px;
5975
+ }
5976
+
5977
+ .rg-dropdown, .rg-popover, .rg-modal {
5978
+ color: var(--rg-text);
5979
+ background: var(--rg-glass-pane);
5980
+ border: 1px solid var(--rg-line-strong);
5981
+ border-radius: var(--rg-radius-md);
5982
+ box-shadow: var(--rg-floating-shadow);
5983
+ font: 14px/1.4 var(--rg-font-body);
5984
+ padding: 12px;
5985
+ }
5986
+
5987
+ .rg-dropdown {
5988
+ border-color: var(--rg-focus);
5989
+ border-radius: var(--rg-radius-sm);
5990
+ padding: 6px;
5991
+ }
5992
+
5993
+ .rg-option {
5994
+ min-block-size: 32px;
5995
+ inline-size: 100%;
5996
+ color: var(--rg-text-soft);
5997
+ font: 14px/1.3 var(--rg-font-body);
5998
+ text-align: start;
5999
+ cursor: pointer;
6000
+ background: none;
6001
+ border: 1px solid #0000;
6002
+ border-radius: 4px;
6003
+ justify-content: space-between;
6004
+ align-items: center;
6005
+ padding: 6px 8px;
6006
+ display: flex;
6007
+ }
6008
+
6009
+ .rg-option:hover, .rg-option.is-selected, .rg-option[aria-selected="true"] {
6010
+ background: var(--rg-gloss);
6011
+ color: var(--rg-gloss-ink);
6012
+ border-color: var(--rg-primary);
6013
+ }
6014
+
6015
+ .rg-option:disabled {
6016
+ opacity: .4;
6017
+ cursor: not-allowed;
6018
+ }
6019
+
6020
+ .rg-tags {
6021
+ background: var(--rg-glass-inset);
6022
+ border: 1px solid var(--rg-line-strong);
6023
+ border-radius: var(--rg-radius-sm);
6024
+ min-block-size: 48px;
6025
+ box-shadow: inset 0 1px 3px var(--rg-recess);
6026
+ flex-wrap: wrap;
6027
+ align-items: center;
6028
+ gap: 6px;
6029
+ padding: 8px;
6030
+ display: flex;
6031
+ }
6032
+
6033
+ .rg-chip, .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
6034
+ border: 1px solid var(--rg-line-strong);
6035
+ border-radius: var(--rg-radius-pill);
6036
+ background: var(--rg-surface-soft);
6037
+ min-block-size: 24px;
6038
+ color: var(--rg-text);
6039
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
6040
+ font: 700 12px/1.2 var(--rg-font-body);
6041
+ letter-spacing: 0;
6042
+ text-transform: none;
6043
+ align-items: center;
6044
+ gap: 6px;
6045
+ padding: 4px 10px;
6046
+ display: inline-flex;
6047
+ }
6048
+
6049
+ .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
6050
+ background: var(--rg-control-material);
6051
+ box-shadow: inset 0 1px 0 var(--rg-highlight),inset 0-1px 0 #0000002e,0 1px 2px #00000038;
6052
+ }
6053
+
6054
+ .rg-chip, .rg-badge-primary, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="primary"]) {
6055
+ background: var(--rg-gloss);
6056
+ border-color: var(--rg-primary);
6057
+ color: var(--rg-gloss-ink);
6058
+ }
6059
+
6060
+ .rg-chip-danger {
6061
+ background: linear-gradient(rgb(var(--rg-danger-rgb)/.18),rgb(var(--rg-danger-rgb)/.18)),var(--rg-surface-raised);
6062
+ border-color: var(--rg-danger);
6063
+ color: var(--rg-text);
6064
+ }
6065
+
6066
+ .rg-chip-warning {
6067
+ background: linear-gradient(rgb(var(--rg-warning-rgb)/.18),rgb(var(--rg-warning-rgb)/.18)),var(--rg-surface-raised);
6068
+ border-color: var(--rg-warning);
6069
+ color: var(--rg-text);
6070
+ }
6071
+
6072
+ .rg-badge-success, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="success"]) {
6073
+ background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-success);
6074
+ border-color: var(--rg-success);
6075
+ color: var(--rg-on-success);
6076
+ }
6077
+
6078
+ .rg-badge-warning, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="warning"]) {
6079
+ background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-warning);
6080
+ border-color: var(--rg-warning);
6081
+ color: var(--rg-on-warning);
6082
+ }
6083
+
6084
+ .rg-badge-danger, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="danger"]) {
6085
+ background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-danger);
6086
+ border-color: var(--rg-danger);
6087
+ color: var(--rg-on-danger);
6088
+ }
6089
+
6090
+ .rg-chip {
6091
+ cursor: pointer;
6092
+ }
6093
+
6094
+ .rg-file {
6095
+ border: 1px dashed var(--rg-line-strong);
6096
+ border-radius: var(--rg-radius-md);
6097
+ background: var(--rg-glass-inset);
6098
+ min-block-size: 112px;
6099
+ color: var(--rg-text-soft);
6100
+ box-shadow: inset 0 1px 3px var(--rg-recess);
6101
+ text-align: center;
6102
+ font: 14px/1.4 var(--rg-font-body);
6103
+ cursor: pointer;
6104
+ flex-direction: column;
6105
+ justify-content: center;
6106
+ align-items: center;
6107
+ gap: 8px;
6108
+ padding: 16px;
6109
+ display: flex;
6110
+ position: relative;
6111
+ }
6112
+
6113
+ .rg-file strong {
6114
+ color: var(--rg-link);
6115
+ }
6116
+
6117
+ .rg-file input[type="file"] {
6118
+ opacity: 0;
6119
+ cursor: pointer;
6120
+ block-size: 100%;
6121
+ inline-size: 100%;
6122
+ position: absolute;
6123
+ inset: 0;
6124
+ }
6125
+
6126
+ .rg-file:focus-within {
6127
+ outline: 2px solid var(--rg-focus);
6128
+ outline-offset: 2px;
6129
+ }
6130
+
6131
+ .rg-choice, .rg-switch, :where([data-ui="retro-glass"]) .ui-switch {
6132
+ min-block-size: 32px;
6133
+ color: var(--rg-text-soft);
6134
+ font: 14px/1.3 var(--rg-font-body);
6135
+ cursor: pointer;
6136
+ align-items: center;
6137
+ gap: 8px;
6138
+ display: inline-flex;
6139
+ position: relative;
6140
+ }
6141
+
6142
+ .rg-choice input {
6143
+ accent-color: var(--rg-primary);
6144
+ flex: 0 0 18px;
6145
+ block-size: 18px;
6146
+ inline-size: 18px;
6147
+ margin: 0;
6148
+ }
6149
+
6150
+ .rg-choice:has(:disabled), .rg-switch:has(:disabled), :where([data-ui="retro-glass"]) .ui-switch:has(:disabled) {
6151
+ opacity: 1;
6152
+ color: var(--rg-text-soft);
6153
+ cursor: not-allowed;
6154
+ }
6155
+
6156
+ .rg-choice input:disabled {
6157
+ opacity: 1;
6158
+ border: 1px dashed var(--rg-line-strong);
6159
+ background: var(--rg-surface-soft);
6160
+ box-shadow: none;
6161
+ }
6162
+
6163
+ .rg-choice input:disabled:not(:checked) {
6164
+ appearance: none;
6165
+ }
6166
+
6167
+ .rg-choice input.is-focus {
6168
+ outline: 2px solid var(--rg-focus);
6169
+ outline-offset: 2px;
6170
+ }
6171
+
6172
+ .rg-switch input, :where([data-ui="retro-glass"]) .ui-switch input {
6173
+ opacity: 0;
6174
+ z-index: 1;
6175
+ block-size: 100%;
6176
+ inline-size: 100%;
6177
+ cursor: inherit;
6178
+ position: absolute;
6179
+ inset: 0;
6180
+ }
6181
+
6182
+ .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
6183
+ border: 1px solid var(--rg-line-strong);
6184
+ border-radius: var(--rg-radius-pill);
6185
+ background: var(--rg-glass-inset);
6186
+ block-size: 22px;
6187
+ inline-size: 42px;
6188
+ box-shadow: inset 0 1px 3px var(--rg-recess);
6189
+ align-items: center;
6190
+ padding: 2px;
6191
+ display: inline-flex;
6192
+ }
6193
+
6194
+ .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch-thumb {
6195
+ border: 1px solid var(--rg-line-strong);
6196
+ background: var(--rg-control-material);
6197
+ block-size: 16px;
6198
+ inline-size: 16px;
6199
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 2px #00000059;
6200
+ border-radius: 50%;
6201
+ transition: transform .15s;
6202
+ }
6203
+
6204
+ .rg-switch input:checked + .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch input:checked+.ui-switch-track {
6205
+ background: var(--rg-gloss);
6206
+ border-color: var(--rg-primary);
6207
+ }
6208
+
6209
+ .rg-switch input:checked + .rg-switch-track .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
6210
+ transform: translateX(18px);
6211
+ }
6212
+
6213
+ .rg-switch:has(input:disabled) .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch:has(input:disabled) .ui-switch-track {
6214
+ background: var(--rg-surface-soft);
6215
+ border: 1px dashed var(--rg-line-strong);
6216
+ box-shadow: none;
6217
+ filter: saturate(.35);
6218
+ }
6219
+
6220
+ .rg-switch:has(input:disabled) .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch:has(input:disabled) .ui-switch-thumb {
6221
+ opacity: .58;
6222
+ box-shadow: none;
6223
+ }
6224
+
6225
+ .rg-switch input:focus-visible + .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch input:focus-visible+.ui-switch-track {
6226
+ outline: 2px solid var(--rg-focus);
6227
+ outline-offset: 2px;
6228
+ }
6229
+
6230
+ .rg-segmented {
6231
+ flex-wrap: wrap;
6232
+ gap: 4px;
6233
+ display: inline-flex;
6234
+ }
6235
+
6236
+ .rg-segment {
6237
+ font-size: 12px;
6238
+ }
6239
+
6240
+ .rg-segment.is-active, .rg-segment[aria-pressed="true"], .rg-pagination-page[aria-current="page"] {
6241
+ background: var(--rg-gloss);
6242
+ color: var(--rg-gloss-ink);
6243
+ border-color: var(--rg-primary);
6244
+ }
6245
+
6246
+ .rg-range {
6247
+ --usk-native-range-track-background: linear-gradient(90deg, var(--rg-primary) 0 var(--rg-value, 58%), var(--rg-surface-input) var(--rg-value, 58%) 100%);
6248
+ appearance: none;
6249
+ background: none;
6250
+ border: 0;
6251
+ min-block-size: 32px;
6252
+ inline-size: 100%;
6253
+ margin: 0;
6254
+ padding: 0;
6255
+ }
6256
+
6257
+ .rg-range-critical {
6258
+ --usk-native-range-track-background: linear-gradient(90deg, var(--rg-success) 0 45%, var(--rg-warning) 45% 72%, var(--rg-danger) 72% 100%);
6259
+ }
6260
+
6261
+ .rg-range::-webkit-slider-runnable-track {
6262
+ border: 1px solid var(--rg-line-strong);
6263
+ border-radius: var(--rg-radius-pill);
6264
+ background: var(--usk-native-range-track-background);
6265
+ height: 7px;
6266
+ box-shadow: inset 0 1px 2px var(--rg-recess);
6267
+ }
6268
+
6269
+ .rg-range::-moz-range-track {
6270
+ border: 1px solid var(--rg-line-strong);
6271
+ border-radius: var(--rg-radius-pill);
6272
+ background: var(--usk-native-range-track-background);
6273
+ height: 7px;
6274
+ box-shadow: inset 0 1px 2px var(--rg-recess);
6275
+ }
6276
+
6277
+ .rg-range::-moz-range-progress {
6278
+ background: none;
6279
+ }
6280
+
6281
+ .rg-range::-webkit-slider-thumb {
6282
+ appearance: none;
6283
+ border: 1px solid var(--rg-line-strong);
6284
+ background: var(--rg-control-material);
6285
+ block-size: 19px;
6286
+ inline-size: 19px;
6287
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
6288
+ border-radius: 50%;
6289
+ margin-top: -7px;
6290
+ }
6291
+
6292
+ .rg-range::-moz-range-thumb {
6293
+ border: 1px solid var(--rg-line-strong);
6294
+ background: var(--rg-control-material);
6295
+ block-size: 19px;
6296
+ inline-size: 19px;
6297
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
6298
+ border-radius: 50%;
6299
+ }
6300
+
6301
+ .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
6302
+ border: 1px solid var(--rg-line-strong);
6303
+ border-radius: var(--rg-radius-pill);
6304
+ background: var(--rg-glass-inset);
6305
+ block-size: 12px;
6306
+ box-shadow: inset 0 1px 3px var(--rg-recess);
6307
+ padding: 2px;
6308
+ overflow: hidden;
6309
+ }
6310
+
6311
+ .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
6312
+ block-size: 100%;
6313
+ inline-size: var(--rg-progress-value, 64%);
6314
+ border-radius: inherit;
6315
+ background: repeating-linear-gradient(125deg,var(--rg-progress-stripe)0 1px,transparent 1px 16px),var(--rg-progress-fill, var(--rg-gloss));
6316
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
6317
+ display: block;
6318
+ }
6319
+
6320
+ .rg-progress-danger {
6321
+ --rg-progress-fill: var(--rg-danger-gloss);
6322
+ }
6323
+
6324
+ .rg-meter {
6325
+ border: 1px solid var(--rg-line-strong);
6326
+ border-radius: var(--rg-radius-pill);
6327
+ background: linear-gradient(90deg,var(--rg-success)0 46%,var(--rg-warning) 46% 72%,var(--rg-danger) 72% 100%);
6328
+ block-size: 8px;
6329
+ margin-block: 12px;
6330
+ position: relative;
6331
+ }
6332
+
6333
+ .rg-meter:after {
6334
+ content: "";
6335
+ border: 1px solid var(--rg-line-strong);
6336
+ background: var(--rg-control-material);
6337
+ block-size: 18px;
6338
+ inline-size: 18px;
6339
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
6340
+ border-radius: 50%;
6341
+ position: absolute;
6342
+ inset-block-start: 50%;
6343
+ inset-inline-start: clamp(0%,var(--rg-value, 72%),100%);
6344
+ transform: translate(-50%, -50%);
6345
+ }
6346
+
6347
+ .rg-stepper {
6348
+ justify-content: space-between;
6349
+ align-items: start;
6350
+ margin: 16px 0 0;
6351
+ padding: 0;
6352
+ list-style: none;
6353
+ display: flex;
6354
+ position: relative;
6355
+ }
6356
+
6357
+ .rg-stepper:before {
6358
+ content: "";
6359
+ background: var(--rg-line-strong);
6360
+ block-size: 2px;
6361
+ position: absolute;
6362
+ inset-block-start: 15px;
6363
+ inset-inline: 12%;
6364
+ }
6365
+
6366
+ .rg-step {
6367
+ color: var(--rg-text-soft);
6368
+ text-align: center;
6369
+ font: 12px/1.4 var(--rg-font-mono);
6370
+ flex: 1;
6371
+ position: relative;
6372
+ }
6373
+
6374
+ .rg-step b {
6375
+ background: var(--rg-surface-soft);
6376
+ border: 1px solid var(--rg-line-strong);
6377
+ border-radius: 50%;
6378
+ justify-content: center;
6379
+ align-items: center;
6380
+ block-size: 24px;
6381
+ inline-size: 24px;
6382
+ margin: 0 auto 8px;
6383
+ display: flex;
6384
+ }
6385
+
6386
+ .rg-step.is-complete b {
6387
+ background: var(--rg-gloss);
6388
+ color: var(--rg-gloss-ink);
6389
+ border-color: var(--rg-primary);
6390
+ }
6391
+
6392
+ .rg-step.is-active b {
6393
+ background: var(--rg-surface-input);
6394
+ color: var(--rg-link);
6395
+ border: 2px solid var(--rg-primary);
6396
+ }
6397
+
6398
+ .rg-alert, :where([data-ui="retro-glass"]) .ui-alert {
6399
+ border: 1px solid var(--rg-primary);
6400
+ border-radius: var(--rg-radius-sm);
6401
+ background: var(--rg-glass-pane);
6402
+ min-block-size: 40px;
6403
+ color: var(--rg-text-soft);
6404
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
6405
+ font: 14px/1.4 var(--rg-font-body);
6406
+ align-items: center;
6407
+ gap: 8px;
6408
+ padding: 8px;
6409
+ display: flex;
6410
+ }
6411
+
6412
+ .rg-alert-body, :where([data-ui="retro-glass"]) .ui-alert-body {
6413
+ margin: 0;
6414
+ }
6415
+
6416
+ .rg-alert-success, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"]) {
6417
+ border-color: var(--rg-success);
6418
+ }
6419
+
6420
+ .rg-alert-warning, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"]) {
6421
+ border-color: var(--rg-warning);
6422
+ }
6423
+
6424
+ .rg-alert-danger, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"]) {
6425
+ border-color: var(--rg-danger);
6426
+ }
6427
+
6428
+ .rg-alert > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert>[aria-hidden="true"] {
6429
+ color: var(--usk-primary-ink, var(--rg-primary));
6430
+ }
6431
+
6432
+ .rg-alert-success > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"])>[aria-hidden="true"] {
6433
+ color: var(--rg-success);
6434
+ }
6435
+
6436
+ .rg-alert-warning > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"])>[aria-hidden="true"] {
6437
+ color: var(--rg-warning);
6438
+ }
6439
+
6440
+ .rg-alert-danger > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"])>[aria-hidden="true"] {
6441
+ color: var(--rg-danger);
6442
+ }
6443
+
6444
+ .rg-toast {
6445
+ border: 1px solid var(--rg-line-strong);
6446
+ border-radius: var(--rg-radius-md);
6447
+ background: var(--rg-glass-pane);
6448
+ color: var(--rg-text);
6449
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
6450
+ align-items: center;
6451
+ gap: 12px;
6452
+ padding: 12px;
6453
+ display: flex;
6454
+ }
6455
+
6456
+ .rg-toast strong {
6457
+ font: 700 14px/1.4 var(--rg-font-mono);
6458
+ display: block;
6459
+ }
6460
+
6461
+ .rg-toast p {
6462
+ color: var(--rg-text-soft);
6463
+ font: 14px/1.4 var(--rg-font-body);
6464
+ margin: 4px 0 0;
6465
+ }
6466
+
6467
+ .rg-skeleton {
6468
+ border-radius: var(--rg-radius-pill);
6469
+ background: linear-gradient(90deg,var(--rg-surface-soft),rgb(var(--rg-text-rgb)/.12),var(--rg-surface-soft));
6470
+ background-size: 200% 100%;
6471
+ block-size: 10px;
6472
+ inline-size: 100%;
6473
+ animation: 1.5s ease-in-out infinite rg-template-pulse;
6474
+ display: block;
6475
+ }
6476
+
6477
+ .rg-breadcrumb, .rg-tabs, .rg-pagination {
6478
+ flex-wrap: wrap;
6479
+ align-items: center;
6480
+ gap: 6px;
6481
+ display: flex;
6482
+ }
6483
+
6484
+ .rg-breadcrumb {
6485
+ color: var(--rg-text-soft);
6486
+ font: 12px/1.4 var(--rg-font-mono);
6487
+ }
6488
+
6489
+ .rg-breadcrumb a {
6490
+ color: var(--rg-text-soft);
6491
+ }
6492
+
6493
+ .rg-breadcrumb [aria-current] {
6494
+ color: var(--rg-link);
6495
+ font-weight: 700;
6496
+ }
6497
+
6498
+ .rg-tab {
6499
+ min-block-size: var(--rg-control-height);
6500
+ border: 0;
6501
+ border-bottom: 2px solid var(--rg-line-strong);
6502
+ color: var(--rg-text-soft);
6503
+ font: 700 12px/1.4 var(--rg-font-mono);
6504
+ cursor: pointer;
6505
+ background: none;
6506
+ border-radius: 6px 6px 0 0;
6507
+ padding: 8px 12px;
6508
+ }
6509
+
6510
+ .rg-tab:hover, .rg-tab.is-active, .rg-tab[aria-selected="true"] {
6511
+ background: linear-gradient(rgb(var(--rg-primary-rgb)/.2),rgb(var(--rg-primary-rgb)/.2)),var(--rg-surface-input);
6512
+ border-bottom-color: var(--rg-primary);
6513
+ color: var(--rg-text);
6514
+ }
6515
+
6516
+ .rg-pagination-page {
6517
+ min-inline-size: 36px;
6518
+ padding: 8px;
6519
+ font-size: 12px;
6520
+ }
6521
+
6522
+ .rg-nav, :where([data-ui="retro-glass"]) .ui-nav {
6523
+ box-shadow: none;
6524
+ background: none;
6525
+ border: 0;
6526
+ gap: 6px;
6527
+ padding: 0;
6528
+ }
6529
+
6530
+ .rg-nav-link, :where([data-ui="retro-glass"]) .ui-nav-link {
6531
+ min-block-size: var(--rg-control-height);
6532
+ background: var(--rg-control-material);
6533
+ border: 1px solid var(--rg-line-strong);
6534
+ border-radius: var(--rg-radius-sm);
6535
+ color: var(--rg-text-soft);
6536
+ text-shadow: none;
6537
+ letter-spacing: 0;
6538
+ padding: 8px 12px;
6539
+ }
6540
+
6541
+ .rg-nav-link:hover, :where([data-ui="retro-glass"]) .ui-nav-link:hover {
6542
+ color: var(--rg-text);
6543
+ background: var(--rg-control-material);
6544
+ }
6545
+
6546
+ .rg-nav-link.is-active, .rg-nav-link[aria-current="page"], :where([data-ui="retro-glass"]) .ui-nav-link.is-active, :where([data-ui="retro-glass"]) .ui-nav-link[aria-current="page"] {
6547
+ background: var(--rg-gloss);
6548
+ color: var(--rg-gloss-ink);
6549
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
6550
+ }
6551
+
6552
+ .rg-table-wrap, :where([data-ui="retro-glass"]) .ui-table-wrap {
6553
+ box-shadow: none;
6554
+ background: none;
6555
+ border: 0;
6556
+ }
6557
+
6558
+ .rg-table, :where([data-ui="retro-glass"]) .ui-table {
6559
+ border-collapse: collapse;
6560
+ color: var(--rg-text-soft);
6561
+ font: 14px/1.4 var(--rg-font-body);
6562
+ }
6563
+
6564
+ .rg-table th, :where([data-ui="retro-glass"]) .ui-table th {
6565
+ background: linear-gradient(180deg,rgb(var(--rg-surface-strong-rgb)/.15),transparent);
6566
+ color: var(--rg-text-soft);
6567
+ font: 700 12px/1.4 var(--rg-font-mono);
6568
+ text-shadow: none;
6569
+ padding: 8px;
6570
+ }
6571
+
6572
+ .rg-table td, :where([data-ui="retro-glass"]) .ui-table td {
6573
+ border-block-start: 1px solid var(--rg-line-color);
6574
+ padding: 8px;
6575
+ }
6576
+
6577
+ .rg-avatar {
6578
+ border: 2px solid var(--rg-surface-raised);
6579
+ background: var(--rg-gloss);
6580
+ block-size: 34px;
6581
+ inline-size: 34px;
6582
+ color: var(--rg-gloss-ink);
6583
+ font: 700 12px/1 var(--rg-font-body);
6584
+ border-radius: 50%;
6585
+ flex: 0 0 34px;
6586
+ justify-content: center;
6587
+ align-items: center;
6588
+ display: inline-flex;
6589
+ box-shadow: 0 1px 3px #0000004d;
6590
+ }
6591
+
6592
+ .rg-avatar-danger {
6593
+ background: var(--rg-danger-gloss);
6594
+ color: rgb(var(--usk-danger-text-rgb, 255 255 255));
6595
+ }
6596
+
6597
+ .rg-avatar-neutral {
6598
+ background: var(--rg-surface-soft);
6599
+ color: var(--rg-text);
6600
+ }
6601
+
6602
+ .rg-avatar-group {
6603
+ padding-inline-start: 7px;
6604
+ display: flex;
6605
+ }
6606
+
6607
+ .rg-avatar-group .rg-avatar {
6608
+ margin-inline-start: -7px;
6609
+ }
6610
+
6611
+ .rg-list {
6612
+ color: var(--rg-text-soft);
6613
+ font: 14px/1.5 var(--rg-font-body);
6614
+ margin: 0;
6615
+ padding-inline-start: 20px;
6616
+ }
6617
+
6618
+ .rg-list li {
6619
+ padding: 4px 0;
6620
+ }
6621
+
6622
+ .rg-list li::marker {
6623
+ color: var(--rg-link);
6624
+ }
6625
+
6626
+ .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
6627
+ background: var(--rg-text);
6628
+ max-inline-size: 100%;
6629
+ color: var(--rg-bg);
6630
+ border: 1px solid var(--rg-focus);
6631
+ border-radius: var(--rg-radius-sm);
6632
+ box-shadow: none;
6633
+ font: 700 12px/1.4 var(--rg-font-mono);
6634
+ letter-spacing: 0;
6635
+ padding: 12px;
6636
+ }
6637
+
6638
+ .rg-modal {
6639
+ max-inline-size: min(440px, 100vw - 32px);
6640
+ }
6641
+
6642
+ .rg-modal::backdrop {
6643
+ background: rgb(var(--rg-bg-rgb)/.7);
6644
+ }
6645
+
6646
+ .rg-modal h3, .rg-popover strong {
6647
+ color: var(--rg-text);
6648
+ font: 700 14px/1.4 var(--rg-font-mono);
6649
+ margin: 0 0 8px;
6650
+ }
6651
+
6652
+ .rg-modal p, .rg-popover p {
6653
+ color: var(--rg-text-soft);
6654
+ margin: 0 0 12px;
6655
+ }
6656
+
6657
+ .rg-modal-actions {
6658
+ flex-wrap: wrap;
6659
+ justify-content: end;
6660
+ gap: 8px;
6661
+ display: flex;
6662
+ }
6663
+
6664
+ .rg-accordion {
6665
+ background: var(--rg-glass-inset);
6666
+ border: 1px solid var(--rg-line-strong);
6667
+ border-radius: var(--rg-radius-sm);
6668
+ color: var(--rg-text);
6669
+ margin: 0;
6670
+ padding: 0;
6671
+ }
6672
+
6673
+ .rg-accordion summary {
6674
+ min-block-size: 36px;
6675
+ font: 700 12px/1.4 var(--rg-font-mono);
6676
+ cursor: pointer;
6677
+ padding: 10px 12px;
6678
+ }
6679
+
6680
+ .rg-accordion p {
6681
+ color: var(--rg-text-soft);
6682
+ font: 14px/1.4 var(--rg-font-body);
6683
+ margin: 0;
6684
+ padding: 4px 12px 12px;
6685
+ }
6686
+
6687
+ .rg-code {
6688
+ border-inline-start: 3px solid var(--rg-primary);
6689
+ border-radius: var(--rg-radius-sm);
6690
+ background: var(--rg-glass-inset);
6691
+ color: var(--rg-text-soft);
6692
+ white-space: pre-wrap;
6693
+ overflow-wrap: break-word;
6694
+ font: 12px/1.5 var(--rg-font-mono);
6695
+ margin: 0;
6696
+ padding: 12px;
6697
+ display: block;
6698
+ }
6699
+
6700
+ .rg-quote {
6701
+ border-inline-start: 3px solid var(--rg-primary);
6702
+ color: var(--rg-text-soft);
6703
+ font: italic 14px/1.5 var(--rg-font-body);
6704
+ margin: 0;
6705
+ padding: 8px 12px;
6706
+ }
6707
+
6708
+ .rg-token-swatch {
6709
+ min-inline-size: 46px;
6710
+ color: var(--rg-text-soft);
6711
+ font: 12px/1.3 var(--rg-font-mono);
6712
+ flex-direction: column;
6713
+ gap: 6px;
6714
+ display: inline-flex;
6715
+ }
6716
+
6717
+ .rg-token-swatch i {
6718
+ border: 1px solid var(--rg-line-strong);
6719
+ border-radius: var(--rg-radius-sm);
6720
+ background: var(--rg-token-swatch-color, var(--rg-primary));
6721
+ block-size: 28px;
6722
+ inline-size: 46px;
6723
+ display: block;
6724
+ box-shadow: inset 0 1px #ffffff80, 0 1px 3px #00000038;
6725
+ }
6726
+
6727
+ .rg-spinner:before, .rg-spinner:after, .rg-loading-spinner:before, .rg-loading-spinner:after {
6728
+ content: none;
6729
+ }
6730
+
6731
+ .rg-icon-medallion {
6732
+ background: var(--rg-gloss);
6733
+ color: var(--rg-gloss-ink);
6734
+ border-color: var(--rg-line-strong);
6735
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 2px 4px var(--rg-recess);
6736
+ }
6737
+
6738
+ .rg-card-service > .rg-icon-medallion {
6739
+ font-size: 32px;
6740
+ font-weight: 800;
6741
+ }
6742
+
6743
+ .rg-badge-seal {
6744
+ background: var(--rg-control-material);
6745
+ color: var(--rg-text);
6746
+ border-color: var(--rg-line-strong);
6747
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 2px 4px var(--rg-recess);
6748
+ font-size: .78rem;
6749
+ }
6750
+
6751
+ .rg-badge-seal > :where(strong, small) {
6752
+ color: inherit;
6753
+ opacity: 1;
6754
+ }
6755
+
6756
+ [data-ui="retro-glass"][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) {
6757
+ border-radius: var(--rg-radius-sm);
6758
+ }
6759
+
6760
+ [data-ui="retro-glass"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
6761
+ border-color: var(--rg-danger);
6762
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 0 0 1px var(--rg-danger);
6763
+ }
6764
+
6765
+ [data-ui="retro-glass"][data-mode] :where(input[readonly]:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea[readonly]) {
6766
+ filter: saturate(.72);
6767
+ opacity: .78;
6768
+ border-style: dashed;
6769
+ }
6770
+
6771
+ .rg-choice input[type="checkbox"] {
6772
+ appearance: auto;
6773
+ }
6774
+
6775
+ .rg-choice input[type="checkbox"]:before, .rg-choice input[type="checkbox"]:after {
6776
+ content: none;
6777
+ }
6778
+
6779
+ [data-ui="retro-glass"] :focus-visible {
6780
+ outline: 2px solid var(--rg-focus);
6781
+ outline-offset: 2px;
6782
+ }
6783
+
6784
+ @keyframes rg-template-pulse {
6785
+ 50% {
6786
+ background-position: -100% 0;
6787
+ }
6788
+ }
6789
+
6790
+ @media (any-pointer: coarse) {
6791
+ .rg-button, .rg-icon-button, .rg-segment, .rg-pagination-page, .rg-option, .rg-tab, .rg-choice, .rg-switch, .rg-range, .rg-chip, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button, :where([data-ui="retro-glass"]) .ui-switch {
6792
+ min-block-size: 44px;
6793
+ }
6794
+
6795
+ .rg-icon-button, .rg-pagination-page, :where([data-ui="retro-glass"]) .ui-icon-button {
6796
+ min-inline-size: 44px;
6797
+ }
6798
+
6799
+ .rg-accordion summary {
6800
+ min-block-size: 44px;
6801
+ }
6802
+ }
6803
+
6804
+ @media (prefers-reduced-motion: reduce) {
6805
+ .rg-skeleton, .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
6806
+ animation: none;
6807
+ }
6808
+ }
6809
+
6810
+ @media (forced-colors: active) {
6811
+ .rg-switch input, :where([data-ui="retro-glass"]) .ui-switch input {
6812
+ opacity: 1;
6813
+ block-size: 20px;
6814
+ inline-size: 20px;
6815
+ position: static;
6816
+ }
6817
+
6818
+ .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
6819
+ display: none;
6820
+ }
6821
+
6822
+ .rg-range {
6823
+ appearance: auto;
6824
+ }
6825
+
6826
+ .rg-step b, .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
6827
+ border-color: canvastext;
6828
+ }
6829
+
6830
+ .rg-step.is-complete b, .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
6831
+ color: highlighttext;
6832
+ background: highlight;
6833
+ }
6834
+ }
6835
+
6836
+ [data-ui="retro-glass"][data-mode] .rg-button.rg-button-warning, :where([data-ui="retro-glass"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
6837
+ background: var(--rg-warning);
6838
+ color: var(--rg-on-warning);
6839
+ border-color: var(--rg-warning);
6840
+ text-shadow: none;
6841
+ }
6842
+ }
6843
+
6844
+ [data-ui="retro-glass"][data-mode] .rg-title {
6845
+ letter-spacing: max(.06em, .5px);
6846
+ margin-block: max(.75rem, 12px);
6847
+ }
6848
+
6849
+ [data-ui="retro-glass"][data-mode] .rg-feature-item > .rg-icon-medallion {
6850
+ font-size: 1.5rem;
6851
+ line-height: 1;
6852
+ }
6853
+
6854
+ [data-ui="retro-glass"][data-mode] .rg-callout-bar > .rg-icon-medallion {
6855
+ min-block-size: 4.5rem;
6856
+ min-inline-size: 4.5rem;
6857
+ font-size: 2rem;
6858
+ font-weight: 800;
6859
+ line-height: 1;
4534
6860
  }