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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"]) .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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"])[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="cyberpunk"]) :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="cyberpunk"]) :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="cyberpunk"]) :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;
@@ -3506,12 +4163,14 @@
3506
4163
  /* styles/cyberpunk.css (visual paint) */
3507
4164
  @layer ui-style-kit.presets {
3508
4165
  :root {
3509
- --cyber-radius-xs: .25rem;
3510
- --cyber-radius-sm: .5rem;
4166
+ --cyber-radius-xs: .125rem;
4167
+ --cyber-radius-sm: .4375rem;
3511
4168
  --cyber-radius-md: .75rem;
3512
- --cyber-radius-lg: 1rem;
3513
- --cyber-radius-xl: 1.5rem;
4169
+ --cyber-radius-lg: .75rem;
4170
+ --cyber-radius-xl: .75rem;
3514
4171
  --cyber-radius-pill: 999px;
4172
+ --cyber-cut-sm: .4375rem;
4173
+ --cyber-cut-md: .75rem;
3515
4174
  --cyber-space-1: .25rem;
3516
4175
  --cyber-space-2: .5rem;
3517
4176
  --cyber-space-3: .75rem;
@@ -3519,47 +4178,116 @@
3519
4178
  --cyber-space-5: 1.25rem;
3520
4179
  --cyber-space-6: 1.5rem;
3521
4180
  --cyber-space-8: 2rem;
3522
- --cyber-transition-fast: .14s ease;
3523
- --cyber-transition-base: .22s ease;
3524
- --cyber-transition-slow: .36s ease;
3525
- --cyber-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
3526
- --cyber-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--cyber-font-sans);
4181
+ --cyber-transition-fast: .15s cubic-bezier(.2, .8, .2, 1);
4182
+ --cyber-transition-base: .15s cubic-bezier(.2, .8, .2, 1);
4183
+ --cyber-transition-slow: .24s cubic-bezier(.2, .8, .2, 1);
4184
+ --cyber-font-sans: "DejaVu Sans", Arial, sans-serif;
4185
+ --cyber-font-display: "Arial Narrow", "DejaVu Sans", Arial, sans-serif;
3527
4186
  --cyber-font-body: var(--cyber-font-sans);
3528
4187
  --cyber-font-heading: var(--cyber-font-display);
3529
- --cyber-font-control: var(--cyber-font-display);
3530
- --cyber-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
4188
+ --cyber-font-mono: "DejaVu Sans Mono", Consolas, monospace;
4189
+ --cyber-font-control: var(--cyber-font-mono);
3531
4190
  }
3532
4191
 
3533
4192
  [data-ui="cyberpunk"][data-mode="light"] {
3534
4193
  --lightningcss-light: initial;
3535
4194
  --lightningcss-dark: ;
3536
4195
  color-scheme: light;
3537
- --cyber-panel-alpha: .92;
3538
- --cyber-panel-strong-alpha: .98;
3539
- --cyber-panel-soft-alpha: .74;
3540
- --cyber-border-alpha: .7;
3541
- --cyber-glow-alpha: .24;
3542
- --cyber-shadow-alpha: .18;
3543
- --cyber-grid-alpha: .075;
4196
+ --cyber-fallback-bg-rgb: 230 241 243;
4197
+ --cyber-fallback-surface-rgb: 248 252 252;
4198
+ --cyber-fallback-surface-strong-rgb: 255 255 255;
4199
+ --cyber-fallback-surface-soft-rgb: 220 235 238;
4200
+ --cyber-fallback-text-rgb: 16 40 50;
4201
+ --cyber-fallback-text-muted-rgb: 54 87 98;
4202
+ --cyber-fallback-border-rgb: 138 177 186;
4203
+ --cyber-fallback-primary-rgb: 0 127 157;
4204
+ --cyber-fallback-primary-hover-rgb: 0 111 139;
4205
+ --cyber-fallback-primary-text-rgb: 255 255 255;
4206
+ --cyber-fallback-secondary-rgb: 54 87 98;
4207
+ --cyber-fallback-secondary-hover-rgb: 39 70 84;
4208
+ --cyber-fallback-secondary-text-rgb: 255 255 255;
4209
+ --cyber-fallback-accent-rgb: 195 19 90;
4210
+ --cyber-fallback-accent-text-rgb: 255 255 255;
4211
+ --cyber-fallback-success-rgb: 8 124 73;
4212
+ --cyber-fallback-success-text-rgb: 255 255 255;
4213
+ --cyber-fallback-warning-rgb: 170 112 0;
4214
+ --cyber-fallback-warning-text-rgb: 0 0 0;
4215
+ --cyber-fallback-danger-rgb: 195 19 90;
4216
+ --cyber-fallback-danger-text-rgb: 255 255 255;
4217
+ --cyber-fallback-link-rgb: 0 111 139;
4218
+ --cyber-fallback-focus-rgb: 0 111 139;
4219
+ --cyber-panel-alpha: .98;
4220
+ --cyber-panel-strong-alpha: 1;
4221
+ --cyber-panel-soft-alpha: .94;
4222
+ --cyber-border-alpha: .82;
4223
+ --cyber-glow-alpha: .16;
4224
+ --cyber-shadow-alpha: .14;
4225
+ --cyber-grid-alpha: .13;
3544
4226
  }
3545
4227
 
3546
4228
  [data-ui="cyberpunk"][data-mode="dark"] {
3547
4229
  --lightningcss-light: ;
3548
4230
  --lightningcss-dark: initial;
3549
4231
  color-scheme: dark;
3550
- --cyber-panel-alpha: .82;
3551
- --cyber-panel-strong-alpha: .94;
3552
- --cyber-panel-soft-alpha: .58;
3553
- --cyber-border-alpha: .64;
3554
- --cyber-glow-alpha: .42;
3555
- --cyber-shadow-alpha: .42;
3556
- --cyber-grid-alpha: .12;
4232
+ --cyber-fallback-bg-rgb: 5 10 16;
4233
+ --cyber-fallback-surface-rgb: 7 19 28;
4234
+ --cyber-fallback-surface-strong-rgb: 10 28 39;
4235
+ --cyber-fallback-surface-soft-rgb: 13 36 48;
4236
+ --cyber-fallback-text-rgb: 232 250 255;
4237
+ --cyber-fallback-text-muted-rgb: 168 193 202;
4238
+ --cyber-fallback-border-rgb: 36 70 84;
4239
+ --cyber-fallback-primary-rgb: 0 221 255;
4240
+ --cyber-fallback-primary-hover-rgb: 88 234 255;
4241
+ --cyber-fallback-primary-text-rgb: 0 27 35;
4242
+ --cyber-fallback-secondary-rgb: 70 116 130;
4243
+ --cyber-fallback-secondary-hover-rgb: 36 70 84;
4244
+ --cyber-fallback-secondary-text-rgb: 232 250 255;
4245
+ --cyber-fallback-accent-rgb: 255 31 120;
4246
+ --cyber-fallback-accent-text-rgb: 0 27 35;
4247
+ --cyber-fallback-success-rgb: 53 228 125;
4248
+ --cyber-fallback-success-text-rgb: 0 27 35;
4249
+ --cyber-fallback-warning-rgb: 255 189 22;
4250
+ --cyber-fallback-warning-text-rgb: 0 27 35;
4251
+ --cyber-fallback-danger-rgb: 255 31 120;
4252
+ --cyber-fallback-danger-text-rgb: 0 27 35;
4253
+ --cyber-fallback-link-rgb: 0 221 255;
4254
+ --cyber-fallback-focus-rgb: 88 234 255;
4255
+ --cyber-panel-alpha: .94;
4256
+ --cyber-panel-strong-alpha: .98;
4257
+ --cyber-panel-soft-alpha: .86;
4258
+ --cyber-border-alpha: .72;
4259
+ --cyber-glow-alpha: .24;
4260
+ --cyber-shadow-alpha: .38;
4261
+ --cyber-grid-alpha: .14;
3557
4262
  }
3558
4263
 
3559
4264
  [data-ui="cyberpunk"][data-mode="contrast"] {
3560
4265
  --lightningcss-light: ;
3561
4266
  --lightningcss-dark: initial;
3562
4267
  color-scheme: dark;
4268
+ --cyber-fallback-bg-rgb: 0 0 0;
4269
+ --cyber-fallback-surface-rgb: 5 10 16;
4270
+ --cyber-fallback-surface-strong-rgb: 0 0 0;
4271
+ --cyber-fallback-surface-soft-rgb: 0 0 0;
4272
+ --cyber-fallback-text-rgb: 255 255 255;
4273
+ --cyber-fallback-text-muted-rgb: 248 248 248;
4274
+ --cyber-fallback-border-rgb: 255 255 255;
4275
+ --cyber-fallback-primary-rgb: 0 229 255;
4276
+ --cyber-fallback-primary-hover-rgb: 255 255 255;
4277
+ --cyber-fallback-primary-text-rgb: 0 0 0;
4278
+ --cyber-fallback-secondary-rgb: 255 255 255;
4279
+ --cyber-fallback-secondary-hover-rgb: 0 229 255;
4280
+ --cyber-fallback-secondary-text-rgb: 0 0 0;
4281
+ --cyber-fallback-accent-rgb: 255 31 120;
4282
+ --cyber-fallback-accent-text-rgb: 0 0 0;
4283
+ --cyber-fallback-success-rgb: 0 255 144;
4284
+ --cyber-fallback-success-text-rgb: 0 0 0;
4285
+ --cyber-fallback-warning-rgb: 255 212 0;
4286
+ --cyber-fallback-warning-text-rgb: 0 0 0;
4287
+ --cyber-fallback-danger-rgb: 255 77 135;
4288
+ --cyber-fallback-danger-text-rgb: 0 0 0;
4289
+ --cyber-fallback-link-rgb: 0 229 255;
4290
+ --cyber-fallback-focus-rgb: 255 255 255;
3563
4291
  --cyber-panel-alpha: 1;
3564
4292
  --cyber-panel-strong-alpha: 1;
3565
4293
  --cyber-panel-soft-alpha: .92;
@@ -3584,15 +4312,42 @@
3584
4312
  --cyber-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3585
4313
  --cyber-secondary-text-rgb: var(--usk-secondary-text-rgb);
3586
4314
  --cyber-accent-rgb: var(--usk-accent-rgb);
3587
- --cyber-success-rgb: var(--usk-success-rgb);
3588
- --cyber-warning-rgb: var(--usk-warning-rgb);
3589
- --cyber-danger-rgb: var(--usk-danger-rgb);
3590
- --cyber-link-rgb: var(--usk-link-rgb);
3591
4315
  --cyber-accent-text-rgb: var(--usk-accent-text-rgb);
4316
+ --cyber-success-rgb: var(--usk-success-rgb);
3592
4317
  --cyber-success-text-rgb: var(--usk-success-text-rgb);
4318
+ --cyber-warning-rgb: var(--usk-warning-rgb);
3593
4319
  --cyber-warning-text-rgb: var(--usk-warning-text-rgb);
4320
+ --cyber-danger-rgb: var(--usk-danger-rgb);
3594
4321
  --cyber-danger-text-rgb: var(--usk-danger-text-rgb);
4322
+ --cyber-link-rgb: var(--usk-link-rgb);
3595
4323
  --cyber-focus-rgb: var(--usk-focus-rgb);
4324
+ }
4325
+
4326
+ [data-ui="cyberpunk"][data-mode] {
4327
+ --usk-native-bg: var(--cyber-bg);
4328
+ --cyber-bg-rgb: var(--usk-bg-rgb, var(--cyber-fallback-bg-rgb));
4329
+ --cyber-surface-rgb: var(--usk-surface-rgb, var(--cyber-fallback-surface-rgb));
4330
+ --cyber-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--cyber-fallback-surface-strong-rgb));
4331
+ --cyber-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--cyber-fallback-surface-soft-rgb));
4332
+ --cyber-text-rgb: var(--usk-text-rgb, var(--cyber-fallback-text-rgb));
4333
+ --cyber-text-muted-rgb: var(--usk-text-muted-rgb, var(--cyber-fallback-text-muted-rgb));
4334
+ --cyber-border-rgb: var(--usk-border-rgb, var(--cyber-fallback-border-rgb));
4335
+ --cyber-primary-rgb: var(--usk-primary-rgb, var(--cyber-fallback-primary-rgb));
4336
+ --cyber-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--cyber-fallback-primary-hover-rgb));
4337
+ --cyber-primary-text-rgb: var(--usk-primary-text-rgb, var(--cyber-fallback-primary-text-rgb));
4338
+ --cyber-secondary-rgb: var(--usk-secondary-rgb, var(--cyber-fallback-secondary-rgb));
4339
+ --cyber-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--cyber-fallback-secondary-hover-rgb));
4340
+ --cyber-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--cyber-fallback-secondary-text-rgb));
4341
+ --cyber-accent-rgb: var(--usk-accent-rgb, var(--cyber-fallback-accent-rgb));
4342
+ --cyber-accent-text-rgb: var(--usk-accent-text-rgb, var(--cyber-fallback-accent-text-rgb));
4343
+ --cyber-success-rgb: var(--usk-success-rgb, var(--cyber-fallback-success-rgb));
4344
+ --cyber-success-text-rgb: var(--usk-success-text-rgb, var(--cyber-fallback-success-text-rgb));
4345
+ --cyber-warning-rgb: var(--usk-warning-rgb, var(--cyber-fallback-warning-rgb));
4346
+ --cyber-warning-text-rgb: var(--usk-warning-text-rgb, var(--cyber-fallback-warning-text-rgb));
4347
+ --cyber-danger-rgb: var(--usk-danger-rgb, var(--cyber-fallback-danger-rgb));
4348
+ --cyber-danger-text-rgb: var(--usk-danger-text-rgb, var(--cyber-fallback-danger-text-rgb));
4349
+ --cyber-link-rgb: var(--usk-link-rgb, var(--cyber-fallback-link-rgb));
4350
+ --cyber-focus-rgb: var(--usk-focus-rgb, var(--cyber-fallback-focus-rgb));
3596
4351
  --usk-native-surface: var(--cyber-surface);
3597
4352
  --usk-native-surface-strong: var(--cyber-surface-strong);
3598
4353
  --usk-native-surface-soft: var(--cyber-surface-soft);
@@ -3616,12 +4371,63 @@
3616
4371
  --usk-native-radius-sm: var(--cyber-radius-sm);
3617
4372
  --usk-native-radius: var(--cyber-radius-md);
3618
4373
  --usk-native-radius-lg: var(--cyber-radius-lg);
3619
- --usk-native-shadow: 0 0 18px rgb(var(--cyber-primary-rgb) / .16);
4374
+ --usk-native-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .16);
3620
4375
  --usk-native-shadow-md: var(--cyber-shadow-md, var(--usk-native-shadow));
3621
- --usk-native-focus-ring: 0 0 0 2px rgb(var(--cyber-focus-rgb) / .24), 0 0 24px rgb(var(--cyber-focus-rgb) / .24);
4376
+ --usk-native-focus-ring: 0 0 0 2px var(--cyber-surface), 0 0 0 4px var(--cyber-focus), 0 0 .8rem rgb(var(--cyber-focus-rgb) / .2);
3622
4377
  --usk-native-border-width: 1px;
3623
4378
  --usk-native-field-gap: .5rem;
3624
4379
  --usk-native-panel-padding: var(--cyber-space-5);
4380
+ --usk-native-control-min-block-size: 2.75rem;
4381
+ --usk-native-control-padding-block: .55rem;
4382
+ --usk-native-control-padding-inline: .875rem;
4383
+ --usk-native-subcontrol-padding-block: .48rem;
4384
+ --usk-native-subcontrol-padding-inline: .68rem;
4385
+ --usk-native-choice-size: 1.25rem;
4386
+ --usk-native-choice-background: var(--cyber-control-bg);
4387
+ --usk-native-choice-border: 1px solid var(--cyber-border);
4388
+ --usk-native-checkbox-radius: .1rem;
4389
+ --usk-native-radio-radius: 50%;
4390
+ --usk-native-choice-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .18);
4391
+ --usk-native-choice-checked-background: var(--cyber-primary);
4392
+ --usk-native-choice-mark-color: var(--cyber-on-primary);
4393
+ --usk-native-select-indicator-image: linear-gradient(51deg, transparent 50%, var(--cyber-primary) 50%), linear-gradient(129deg, var(--cyber-primary) 50%, transparent 50%);
4394
+ --usk-native-select-indicator-size: .46rem .46rem, .46rem .46rem;
4395
+ --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .72rem) 50%;
4396
+ --usk-native-select-padding-inline-end: 2.25rem;
4397
+ --usk-native-range-track-size: .5rem;
4398
+ --usk-native-range-track-background: linear-gradient(90deg, var(--cyber-success), var(--cyber-warning) 62%, var(--cyber-danger));
4399
+ --usk-native-range-track-border: 1px solid var(--cyber-border);
4400
+ --usk-native-range-track-radius: .08rem;
4401
+ --usk-native-range-track-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .16);
4402
+ --usk-native-range-progress-background: var(--cyber-primary);
4403
+ --usk-native-range-thumb-size: 1.25rem;
4404
+ --usk-native-range-thumb-background: var(--cyber-surface-strong);
4405
+ --usk-native-range-thumb-border: 1px solid var(--cyber-border);
4406
+ --usk-native-range-thumb-radius: .1rem;
4407
+ --usk-native-range-thumb-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .22);
4408
+ --usk-native-progress-size: .72rem;
4409
+ --usk-native-progress-track-background: var(--cyber-surface-soft);
4410
+ --usk-native-progress-track-border: 1px solid var(--cyber-border);
4411
+ --usk-native-progress-track-radius: .08rem;
4412
+ --usk-native-progress-track-shadow: 0 0 .45rem rgb(var(--cyber-primary-rgb) / .14);
4413
+ --usk-native-progress-value-background: var(--cyber-primary);
4414
+ --usk-native-progress-value-radius: .08rem;
4415
+ --usk-native-progress-value-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .2);
4416
+ --usk-native-meter-optimum-background: var(--cyber-success);
4417
+ --usk-native-meter-suboptimum-background: var(--cyber-warning);
4418
+ --usk-native-meter-critical-background: var(--cyber-danger);
4419
+ --usk-native-file-button-background: var(--cyber-primary);
4420
+ --usk-native-file-button-border: 1px solid var(--cyber-border);
4421
+ --usk-native-file-button-radius: .1rem;
4422
+ --usk-native-file-button-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .18);
4423
+ --usk-native-color-swatch-border: 1px solid var(--cyber-border);
4424
+ --usk-native-color-swatch-radius: .1rem;
4425
+ --usk-native-indicator-opacity: .87;
4426
+ --usk-native-indicator-filter: none;
4427
+ --usk-native-scrollbar-size: .75rem;
4428
+ --usk-native-scrollbar-track: var(--cyber-surface-soft);
4429
+ --usk-native-scrollbar-thumb: var(--cyber-primary);
4430
+ --usk-native-scrollbar-radius: .08rem;
3625
4431
  --cyber-bg: rgb(var(--cyber-bg-rgb));
3626
4432
  --cyber-surface: rgb(var(--cyber-surface-rgb) / var(--cyber-panel-alpha));
3627
4433
  --cyber-surface-strong: rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-strong-alpha));
@@ -3657,9 +4463,9 @@
3657
4463
  --cyber-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--cyber-shadow-alpha));
3658
4464
  --cyber-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + .05));
3659
4465
  --cyber-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + .12));
3660
- --cyber-theme-bg-size: auto, auto, auto, 48px 48px, 48px 48px, auto;
3661
- --cyber-theme-bg: radial-gradient(circle at 10% 10%, rgb(var(--cyber-primary-rgb) / .18), transparent 24rem), radial-gradient(circle at 90% 0%, rgb(var(--cyber-secondary-rgb) / .16), transparent 28rem), radial-gradient(circle at 50% 100%, rgb(var(--cyber-accent-rgb) / .1), transparent 34rem), linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--cyber-secondary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), var(--cyber-bg);
3662
- --cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .1), rgb(var(--cyber-accent-rgb) / .055) 42%, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)) 100%), var(--cyber-surface);
4466
+ --cyber-theme-bg-size: 32px 32px, 32px 32px, auto;
4467
+ --cyber-theme-bg: linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--cyber-border-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), var(--cyber-bg);
4468
+ --cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .12), transparent 18%) top left / 3rem 3rem no-repeat, var(--cyber-surface);
3663
4469
  --cyber-control-bg: linear-gradient(180deg, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)), rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha)));
3664
4470
  --cyber-spinner-track: rgb(var(--cyber-border-rgb) / max(.28, calc(var(--cyber-border-alpha) * .7)));
3665
4471
  --cyber-spinner-stroke: var(--cyber-primary);
@@ -3667,23 +4473,23 @@
3667
4473
  }
3668
4474
 
3669
4475
  @supports (color: color-mix(in srgb,black,white)) {
3670
- [data-ui="cyberpunk"][data-theme][data-mode] {
4476
+ [data-ui="cyberpunk"][data-mode] {
3671
4477
  --cyber-border: color-mix(in srgb, rgb(var(--cyber-border-rgb) / max(var(--cyber-border-alpha), var(--usk-border-min-alpha))), var(--cyber-text) var(--usk-border-text-mix));
3672
4478
  }
3673
4479
  }
3674
4480
 
3675
4481
  [data-ui="cyberpunk"] {
3676
- background: radial-gradient(circle at 10% 10%,rgb(var(--cyber-primary-rgb)/.16),transparent 24rem),radial-gradient(circle at 90% 0%,rgb(var(--cyber-secondary-rgb)/.16),transparent 28rem),linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--cyber-secondary-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),var(--cyber-bg);
4482
+ background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--cyber-border-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),var(--cyber-bg);
3677
4483
  color: var(--cyber-text);
3678
4484
  font-family: var(--cyber-font-body);
3679
- background-size: auto, auto, 48px 48px, 48px 48px, auto;
4485
+ background-size: 32px 32px, 32px 32px, auto;
3680
4486
  }
3681
4487
 
3682
4488
  [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] :before, [data-ui="cyberpunk"] :after {
3683
4489
  box-sizing: border-box;
3684
4490
  }
3685
4491
 
3686
- [data-ui="cyberpunk"][data-theme][data-mode] {
4492
+ [data-ui="cyberpunk"][data-mode] {
3687
4493
  background: var(--cyber-theme-bg);
3688
4494
  background-size: var(--cyber-theme-bg-size);
3689
4495
  }
@@ -3721,7 +4527,7 @@
3721
4527
  }
3722
4528
 
3723
4529
  .cyber-kicker {
3724
- color: var(--cyber-primary);
4530
+ color: var(--usk-primary-ink, var(--cyber-primary));
3725
4531
  letter-spacing: .18em;
3726
4532
  margin: 0;
3727
4533
  font-size: .8rem;
@@ -3747,7 +4553,6 @@
3747
4553
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
3748
4554
  transition: transform var(--cyber-transition-base),box-shadow var(--cyber-transition-base),border-color var(--cyber-transition-base);
3749
4555
  position: relative;
3750
- overflow: hidden;
3751
4556
  }
3752
4557
 
3753
4558
  .cyber-card:before, .cyber-panel:before, .cyber-console:before, .cyber-toolbar:before, :where([data-ui="cyberpunk"]) .ui-card:before, :where([data-ui="cyberpunk"]) .ui-toolbar:before {
@@ -3835,12 +4640,6 @@
3835
4640
  background: var(--cyber-primary-hover);
3836
4641
  }
3837
4642
 
3838
- .cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
3839
- background: linear-gradient(135deg,#ffffff24,transparent),var(--cyber-secondary);
3840
- color: var(--cyber-on-secondary);
3841
- border-color: rgb(var(--cyber-secondary-rgb)/.7);
3842
- }
3843
-
3844
4643
  .cyber-button-secondary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3845
4644
  background: var(--cyber-secondary-hover);
3846
4645
  }
@@ -4069,16 +4868,12 @@
4069
4868
  letter-spacing: .1em;
4070
4869
  }
4071
4870
 
4072
- .cyber-table td, :where([data-ui="cyberpunk"]) .ui-table td {
4073
- color: var(--cyber-text-muted);
4074
- }
4075
-
4076
4871
  .cyber-table tr:hover td, :where([data-ui="cyberpunk"]) .ui-table tr:hover td {
4077
4872
  background: rgb(var(--cyber-primary-rgb)/.06);
4078
4873
  }
4079
4874
 
4080
4875
  .cyber-text-primary {
4081
- color: var(--cyber-primary);
4876
+ color: var(--usk-primary-ink, var(--cyber-primary));
4082
4877
  }
4083
4878
 
4084
4879
  .cyber-text-secondary {
@@ -4086,7 +4881,7 @@
4086
4881
  }
4087
4882
 
4088
4883
  .cyber-text-accent {
4089
- color: var(--cyber-accent);
4884
+ color: var(--usk-accent-ink, var(--cyber-accent));
4090
4885
  }
4091
4886
 
4092
4887
  .cyber-text-success {
@@ -4121,7 +4916,7 @@
4121
4916
  background: var(--cyber-card-bg);
4122
4917
  }
4123
4918
 
4124
- .cyber-toolbar, .cyber-table-wrap, .cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-ghost), .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap, :where([data-ui="cyberpunk"]) .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="cyberpunk"]) .ui-icon-button {
4919
+ .cyber-toolbar, .cyber-table-wrap, .cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-warning):not(.cyber-button-ghost), .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap, :where([data-ui="cyberpunk"]) .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="cyberpunk"]) .ui-icon-button {
4125
4920
  background: var(--cyber-control-bg);
4126
4921
  }
4127
4922
 
@@ -4248,7 +5043,7 @@
4248
5043
  }
4249
5044
 
4250
5045
  .cyber-button.cyber-button-outline-heavy, .cyber-button-outline-heavy, :where([data-ui="cyberpunk"]) .ui-button.cyber-button-outline-heavy {
4251
- color: var(--cyber-primary);
5046
+ color: var(--usk-primary-ink, var(--cyber-primary));
4252
5047
  border-style: solid;
4253
5048
  border-width: 2px;
4254
5049
  border-color: var(--cyber-primary);
@@ -4289,7 +5084,6 @@
4289
5084
  border-radius: var(--cyber-radius-lg);
4290
5085
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4291
5086
  display: grid;
4292
- overflow: hidden;
4293
5087
  }
4294
5088
 
4295
5089
  .cyber-feature-item {
@@ -4332,7 +5126,7 @@
4332
5126
  }
4333
5127
 
4334
5128
  .cyber-eyebrow {
4335
- color: var(--cyber-primary);
5129
+ color: var(--usk-primary-ink, var(--cyber-primary));
4336
5130
  font-family: var(--cyber-font-heading);
4337
5131
  letter-spacing: .14em;
4338
5132
  text-transform: uppercase;
@@ -4417,6 +5211,7 @@
4417
5211
  clip-path: polygon(.75rem 0, 78% 0, calc(78% + .35rem) .35rem, 100% .35rem, 100% calc(100% - .75rem), calc(100% - .75rem) 100%, 0 100%, 0 .75rem);
4418
5212
  justify-content: center;
4419
5213
  justify-self: end;
5214
+ min-block-size: 2.75rem;
4420
5215
  inline-size: min(100%, 18rem);
4421
5216
  min-inline-size: 6rem;
4422
5217
  max-inline-size: 100%;
@@ -4435,13 +5230,13 @@
4435
5230
  border-radius: 0;
4436
5231
  }
4437
5232
 
4438
- [data-ui="cyberpunk"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5233
+ [data-ui="cyberpunk"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4439
5234
  border: 2px solid var(--cyber-primary);
4440
5235
  box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.36),inset 0 0 .4rem rgb(var(--cyber-accent-rgb)/.14);
4441
5236
  border-radius: 0;
4442
5237
  }
4443
5238
 
4444
- [data-ui="cyberpunk"][data-theme][data-mode] :where(dialog) {
5239
+ [data-ui="cyberpunk"][data-mode] :where(dialog) {
4445
5240
  border: 2px solid var(--cyber-primary);
4446
5241
  box-shadow: 0 0 1.2rem rgb(var(--cyber-primary-rgb)/.34),0 1rem 2.4rem rgb(var(--cyber-text-rgb)/.28);
4447
5242
  border-radius: 0;
@@ -4456,6 +5251,202 @@
4456
5251
  box-shadow: 0 0 .45em;
4457
5252
  }
4458
5253
 
5254
+ [data-ui="cyberpunk"][data-mode] {
5255
+ --usk-native-font-control: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
5256
+ --usk-native-control-min-block-size: 2.85rem;
5257
+ --usk-native-control-padding-block: .66rem;
5258
+ --usk-native-control-padding-inline: 1.08rem;
5259
+ --usk-native-border-width: 2px;
5260
+ --usk-native-radius-sm: .06rem;
5261
+ --usk-native-radius: .1rem;
5262
+ --usk-native-radius-lg: .14rem;
5263
+ --usk-native-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .28);
5264
+ --usk-native-shadow-md: 0 0 1.4rem rgb(var(--cyber-primary-rgb) / .32), inset .22rem 0 0 rgb(var(--cyber-accent-rgb) / .24);
5265
+ --usk-native-focus-ring: 0 0 0 2px var(--cyber-surface), 0 0 0 4px var(--cyber-focus), 0 0 1rem var(--cyber-focus);
5266
+ --usk-native-subcontrol-padding-block: .5rem;
5267
+ --usk-native-subcontrol-padding-inline: .76rem;
5268
+ --usk-native-choice-size: 1.32rem;
5269
+ --usk-native-choice-background: linear-gradient(135deg, var(--cyber-control-bg), rgb(var(--cyber-primary-rgb) / .1));
5270
+ --usk-native-choice-border: 2px solid var(--cyber-primary);
5271
+ --usk-native-checkbox-radius: .04rem;
5272
+ --usk-native-radio-radius: 28%;
5273
+ --usk-native-choice-shadow: inset .16rem 0 0 rgb(var(--cyber-accent-rgb) / .34), 0 0 .55rem rgb(var(--cyber-primary-rgb) / .3);
5274
+ --usk-native-choice-checked-background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-accent));
5275
+ --usk-native-choice-mark-color: var(--cyber-on-primary);
5276
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 45%, var(--cyber-primary) 45% 56%, transparent 56%), linear-gradient(135deg, transparent 45%, var(--cyber-accent) 45% 56%, transparent 56%);
5277
+ --usk-native-select-indicator-size: .7rem .7rem, .7rem .7rem;
5278
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .78rem) 50%;
5279
+ --usk-native-select-padding-inline-end: 2.5rem;
5280
+ --usk-native-range-track-size: .46rem;
5281
+ --usk-native-range-track-background: linear-gradient(90deg, var(--cyber-success), var(--cyber-warning) 62%, var(--cyber-danger));
5282
+ --usk-native-range-track-border: 2px solid var(--cyber-primary);
5283
+ --usk-native-range-track-radius: .04rem;
5284
+ --usk-native-range-track-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .4);
5285
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--cyber-primary), var(--cyber-accent));
5286
+ --usk-native-range-thumb-size: 1.3rem;
5287
+ --usk-native-range-thumb-background: linear-gradient(135deg, var(--cyber-surface-strong), var(--cyber-primary));
5288
+ --usk-native-range-thumb-border: 2px solid var(--cyber-accent);
5289
+ --usk-native-range-thumb-radius: 28%;
5290
+ --usk-native-range-thumb-shadow: 0 0 .85rem rgb(var(--cyber-accent-rgb) / .5);
5291
+ --usk-native-progress-size: .7rem;
5292
+ --usk-native-progress-track-background: repeating-linear-gradient(110deg, var(--cyber-surface-soft) 0 .65rem, transparent .65rem .78rem);
5293
+ --usk-native-progress-track-border: 2px solid var(--cyber-primary);
5294
+ --usk-native-progress-track-radius: .04rem;
5295
+ --usk-native-progress-track-shadow: inset .2rem 0 0 rgb(var(--cyber-accent-rgb) / .3);
5296
+ --usk-native-progress-value-background: repeating-linear-gradient(110deg, var(--cyber-primary) 0 .65rem, var(--cyber-accent) .65rem .78rem);
5297
+ --usk-native-progress-value-radius: .04rem;
5298
+ --usk-native-progress-value-shadow: 0 0 .8rem rgb(var(--cyber-primary-rgb) / .5);
5299
+ --usk-native-scrollbar-size: .68rem;
5300
+ --usk-native-scrollbar-track: linear-gradient(90deg, var(--cyber-surface), var(--cyber-surface-soft));
5301
+ --usk-native-scrollbar-thumb: linear-gradient(180deg, var(--cyber-primary), var(--cyber-accent));
5302
+ --usk-native-scrollbar-radius: .04rem;
5303
+ }
5304
+
5305
+ .cyber-title {
5306
+ letter-spacing: max(.08em, .5px);
5307
+ margin-block: .75rem;
5308
+ font-weight: 900;
5309
+ }
5310
+
5311
+ .cyber-label, :where([data-ui="cyberpunk"]) .ui-label {
5312
+ font-size: .76rem;
5313
+ font-weight: 850;
5314
+ }
5315
+
5316
+ .cyber-card, .cyber-panel, :where([data-ui="cyberpunk"]) .ui-card {
5317
+ background: var(--cyber-card-bg);
5318
+ border: 2px solid var(--cyber-primary);
5319
+ box-shadow: inset .24rem 0 0 rgb(var(--cyber-accent-rgb)/.26),0 0 1.2rem rgb(var(--cyber-primary-rgb)/.24);
5320
+ clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
5321
+ border-radius: 0;
5322
+ padding: 1.08rem;
5323
+ }
5324
+
5325
+ .cyber-well, .cyber-inset {
5326
+ background: var(--cyber-control-bg);
5327
+ border: 1px solid var(--cyber-accent);
5328
+ box-shadow: inset 0 0 .8rem rgb(var(--cyber-primary-rgb)/.18);
5329
+ clip-path: polygon(.42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%, 0 .42rem);
5330
+ border-radius: 0;
5331
+ padding: .82rem;
5332
+ }
5333
+
5334
+ .cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
5335
+ background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.2),transparent),var(--cyber-control-bg);
5336
+ border: 2px solid var(--cyber-primary);
5337
+ min-height: 2.85rem;
5338
+ box-shadow: inset .2rem 0 0 rgb(var(--cyber-accent-rgb)/.38),0 0 .75rem rgb(var(--cyber-primary-rgb)/.32);
5339
+ clip-path: polygon(.5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%, 0 .5rem);
5340
+ border-radius: 0;
5341
+ padding: .66rem 1.08rem;
5342
+ font-weight: 850;
5343
+ }
5344
+
5345
+ .cyber-button:active, .cyber-button[aria-pressed="true"], .cyber-button.is-active, :where([data-ui="cyberpunk"]) .ui-button:active, :where([data-ui="cyberpunk"]) .ui-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-button.is-active {
5346
+ background: linear-gradient(135deg,var(--cyber-primary),var(--cyber-accent));
5347
+ box-shadow: inset 0 0 .6rem rgb(var(--cyber-text-rgb)/.24);
5348
+ transform: translateY(1px);
5349
+ }
5350
+
5351
+ .cyber-input, .cyber-textarea, .cyber-select, :where([data-ui="cyberpunk"]) .ui-input, :where([data-ui="cyberpunk"]) .ui-textarea, :where([data-ui="cyberpunk"]) .ui-select {
5352
+ background: var(--cyber-control-bg);
5353
+ border: 1px solid var(--cyber-primary);
5354
+ min-height: 2.55rem;
5355
+ box-shadow: inset .18rem 0 0 rgb(var(--cyber-accent-rgb)/.3);
5356
+ clip-path: polygon(.34rem 0, 100% 0, 100% calc(100% - .34rem), calc(100% - .34rem) 100%, 0 100%, 0 .34rem);
5357
+ border-radius: 0;
5358
+ padding: .54rem .82rem;
5359
+ }
5360
+
5361
+ .cyber-nav, .cyber-toolbar, :where([data-ui="cyberpunk"]) .ui-nav, :where([data-ui="cyberpunk"]) .ui-toolbar {
5362
+ border: 2px solid var(--cyber-primary);
5363
+ box-shadow: inset 0-.18rem 0 rgb(var(--cyber-accent-rgb)/.28);
5364
+ border-radius: 0;
5365
+ }
5366
+
5367
+ .cyber-nav-link, :where([data-ui="cyberpunk"]) .ui-nav-link {
5368
+ clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%);
5369
+ border-radius: 0;
5370
+ }
5371
+
5372
+ .cyber-badge, :where([data-ui="cyberpunk"]) .ui-badge {
5373
+ clip-path: polygon(.28rem 0, 100% 0, calc(100% - .28rem) 100%, 0 100%);
5374
+ border: 1px solid;
5375
+ border-radius: 0;
5376
+ min-height: 1.52rem;
5377
+ padding: .26rem .58rem;
5378
+ }
5379
+
5380
+ .cyber-alert, :where([data-ui="cyberpunk"]) .ui-alert {
5381
+ background: var(--cyber-card-bg);
5382
+ border: 2px solid var(--cyber-primary);
5383
+ box-shadow: inset .28rem 0 0 currentColor,0 0 .9rem rgb(var(--cyber-primary-rgb)/.22);
5384
+ clip-path: polygon(.45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%, 0 .45rem);
5385
+ border-radius: 0;
5386
+ padding: .78rem .92rem;
5387
+ }
5388
+
5389
+ .cyber-progress, :where([data-ui="cyberpunk"]) .ui-progress {
5390
+ background: repeating-linear-gradient(110deg,var(--cyber-surface-soft)0 .65rem,transparent .65rem .78rem);
5391
+ border-radius: 0;
5392
+ height: .7rem;
5393
+ }
5394
+
5395
+ .cyber-progress-bar, :where([data-ui="cyberpunk"]) .ui-progress-bar {
5396
+ background: repeating-linear-gradient(110deg,var(--cyber-primary)0 .65rem,var(--cyber-accent) .65rem .78rem);
5397
+ border-radius: 0;
5398
+ }
5399
+
5400
+ .cyber-table-wrap, :where([data-ui="cyberpunk"]) .ui-table-wrap {
5401
+ background: var(--cyber-card-bg);
5402
+ border: 2px solid var(--cyber-primary);
5403
+ box-shadow: inset .2rem 0 0 rgb(var(--cyber-accent-rgb)/.25);
5404
+ border-radius: 0;
5405
+ }
5406
+
5407
+ .cyber-table th, :where([data-ui="cyberpunk"]) .ui-table th {
5408
+ background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.2),transparent);
5409
+ padding: .58rem .72rem;
5410
+ font-weight: 850;
5411
+ }
5412
+
5413
+ .cyber-table td, :where([data-ui="cyberpunk"]) .ui-table td {
5414
+ padding: .62rem .72rem;
5415
+ }
5416
+
5417
+ .cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5418
+ border: 1px solid var(--cyber-accent);
5419
+ clip-path: polygon(.35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%, 0 .35rem);
5420
+ border-radius: 0;
5421
+ }
5422
+
5423
+ .cyber-card-service, .cyber-card-feature, .cyber-media-scrim, .cyber-feature-strip, .cyber-callout-bar {
5424
+ clip-path: polygon(.55rem 0, 100% 0, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, 0 100%, 0 .55rem);
5425
+ border-radius: 0;
5426
+ }
5427
+
5428
+ .cyber-button, :where([data-ui="cyberpunk"]) .ui-button {
5429
+ border-radius: .04rem;
5430
+ }
5431
+
5432
+ .cyber-input, :where([data-ui="cyberpunk"]) .ui-input {
5433
+ border-radius: .03rem;
5434
+ }
5435
+
5436
+ .cyber-card, :where([data-ui="cyberpunk"]) .ui-card {
5437
+ border-radius: .05rem;
5438
+ }
5439
+
5440
+ .cyber-alert, :where([data-ui="cyberpunk"]) .ui-alert {
5441
+ border-radius: .07rem;
5442
+ }
5443
+
5444
+ @supports (color: color-mix(in srgb,black,white)) {
5445
+ .cyber-panel, .cyber-card-service, .cyber-feature-strip, .cyber-callout-bar {
5446
+ background: linear-gradient(126deg,color-mix(in srgb,var(--cyber-surface) 62%,var(--cyber-primary)),transparent 64%),linear-gradient(24deg,transparent 44%,color-mix(in srgb,var(--cyber-surface) 68%,var(--cyber-accent))),var(--cyber-card-bg);
5447
+ }
5448
+ }
5449
+
4459
5450
  @media (prefers-reduced-motion: reduce) {
4460
5451
  [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] :before, [data-ui="cyberpunk"] :after {
4461
5452
  scroll-behavior: auto !important;
@@ -4500,4 +5491,1394 @@
4500
5491
  color: #000 !important;
4501
5492
  }
4502
5493
  }
5494
+
5495
+ .cyber-input[readonly], .cyber-textarea[readonly], :where([data-ui="cyberpunk"]) .ui-input[readonly], :where([data-ui="cyberpunk"]) .ui-textarea[readonly] {
5496
+ filter: saturate(.72);
5497
+ opacity: .78;
5498
+ border-style: dashed;
5499
+ }
5500
+
5501
+ .cyber-button-primary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]) {
5502
+ background: linear-gradient(112deg,var(--cyber-primary),var(--cyber-accent));
5503
+ color: var(--cyber-on-primary);
5504
+ border-color: var(--cyber-primary);
5505
+ }
5506
+
5507
+ .cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
5508
+ background: linear-gradient(112deg,var(--cyber-secondary),rgb(var(--cyber-secondary-rgb)/.72));
5509
+ color: var(--cyber-on-secondary);
5510
+ border-color: var(--cyber-secondary);
5511
+ }
5512
+
5513
+ .cyber-button-danger, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]) {
5514
+ background: linear-gradient(112deg,var(--cyber-danger),rgb(var(--cyber-danger-rgb)/.66));
5515
+ color: var(--cyber-on-danger);
5516
+ border-color: var(--cyber-danger);
5517
+ }
5518
+
5519
+ .cyber-button-ghost, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="ghost"]) {
5520
+ color: var(--usk-primary-ink, var(--cyber-primary));
5521
+ background: none;
5522
+ border-color: #0000;
5523
+ }
5524
+
5525
+ .cyber-feature-item > .cyber-icon-medallion {
5526
+ font-size: 1.5rem;
5527
+ line-height: 1;
5528
+ }
5529
+
5530
+ .cyber-callout-bar > .cyber-icon-medallion {
5531
+ min-block-size: 4.5rem;
5532
+ min-inline-size: 4.5rem;
5533
+ font-size: 2rem;
5534
+ font-weight: 800;
5535
+ line-height: 1;
5536
+ }
5537
+
5538
+ [data-ui="cyberpunk"][data-mode] {
5539
+ --usk-native-font-control: var(--cyber-font-mono);
5540
+ --usk-native-control-min-block-size: 2.75rem;
5541
+ --usk-native-control-padding-block: .55rem;
5542
+ --usk-native-control-padding-inline: .875rem;
5543
+ --usk-native-border-width: 1px;
5544
+ --usk-native-radius-sm: .08rem;
5545
+ --usk-native-radius: .08rem;
5546
+ --usk-native-radius-lg: .08rem;
5547
+ --usk-native-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .14);
5548
+ --usk-native-shadow-md: 0 0 .9rem rgb(var(--cyber-primary-rgb) / .16);
5549
+ --usk-native-focus-ring: 0 0 0 2px var(--cyber-surface), 0 0 0 4px var(--cyber-focus), 0 0 .8rem rgb(var(--cyber-focus-rgb) / .22);
5550
+ --usk-native-subcontrol-padding-block: .48rem;
5551
+ --usk-native-subcontrol-padding-inline: .68rem;
5552
+ --usk-native-choice-size: 1.25rem;
5553
+ --usk-native-choice-background: var(--cyber-control-bg);
5554
+ --usk-native-choice-border: 1px solid var(--cyber-border);
5555
+ --usk-native-checkbox-radius: .08rem;
5556
+ --usk-native-radio-radius: 50%;
5557
+ --usk-native-choice-shadow: 0 0 .5rem rgb(var(--cyber-primary-rgb) / .18);
5558
+ --usk-native-choice-checked-background: var(--cyber-primary);
5559
+ --usk-native-choice-mark-color: var(--cyber-on-primary);
5560
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 46%, var(--cyber-primary) 46% 56%, transparent 56%), linear-gradient(135deg, transparent 46%, var(--cyber-primary) 46% 56%, transparent 56%);
5561
+ --usk-native-select-indicator-size: .62rem .62rem, .62rem .62rem;
5562
+ --usk-native-select-indicator-position: calc(100% - 1.08rem) 50%, calc(100% - .74rem) 50%;
5563
+ --usk-native-select-padding-inline-end: 2.45rem;
5564
+ --usk-native-range-track-size: .5rem;
5565
+ --usk-native-range-track-background: linear-gradient(90deg, var(--cyber-success), var(--cyber-warning) 62%, var(--cyber-danger));
5566
+ --usk-native-range-track-border: 1px solid var(--cyber-border);
5567
+ --usk-native-range-track-radius: .08rem;
5568
+ --usk-native-range-track-shadow: 0 0 .45rem rgb(var(--cyber-primary-rgb) / .16);
5569
+ --usk-native-range-progress-background: var(--cyber-primary);
5570
+ --usk-native-range-thumb-size: 1.25rem;
5571
+ --usk-native-range-thumb-background: var(--cyber-surface-strong);
5572
+ --usk-native-range-thumb-border: 1px solid var(--cyber-primary);
5573
+ --usk-native-range-thumb-radius: .08rem;
5574
+ --usk-native-range-thumb-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .24);
5575
+ --usk-native-progress-size: .7rem;
5576
+ --usk-native-progress-track-background: repeating-linear-gradient(110deg, var(--cyber-surface-soft) 0 .58rem, transparent .58rem .72rem);
5577
+ --usk-native-progress-track-border: 1px solid var(--cyber-border);
5578
+ --usk-native-progress-track-radius: .08rem;
5579
+ --usk-native-progress-track-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb) / .16);
5580
+ --usk-native-progress-value-background: repeating-linear-gradient(110deg, var(--cyber-primary) 0 .58rem, var(--cyber-primary-hover) .58rem .72rem);
5581
+ --usk-native-progress-value-radius: .08rem;
5582
+ --usk-native-progress-value-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .22);
5583
+ --usk-native-file-button-background: var(--cyber-primary);
5584
+ --usk-native-file-button-border: 1px solid var(--cyber-primary);
5585
+ --usk-native-file-button-radius: .08rem;
5586
+ --usk-native-file-button-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .18);
5587
+ --usk-native-scrollbar-size: .68rem;
5588
+ --usk-native-scrollbar-track: var(--cyber-surface-soft);
5589
+ --usk-native-scrollbar-thumb: var(--cyber-primary);
5590
+ --usk-native-scrollbar-radius: .08rem;
5591
+ --cyber-theme-bg-size: 32px 32px, 32px 32px, auto;
5592
+ --cyber-theme-bg: linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--cyber-border-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), var(--cyber-bg);
5593
+ --cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .12), transparent 18%) top left / 3rem 3rem no-repeat, var(--cyber-surface);
5594
+ --cyber-control-bg: linear-gradient(180deg, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)), rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha)));
5595
+ }
5596
+
5597
+ [data-ui="cyberpunk"] {
5598
+ background: var(--cyber-theme-bg);
5599
+ background-size: var(--cyber-theme-bg-size);
5600
+ }
5601
+
5602
+ .cyber-title, .cyber-heading {
5603
+ font-family: var(--cyber-font-heading);
5604
+ letter-spacing: .08em;
5605
+ }
5606
+
5607
+ .cyber-kicker, .cyber-label, .cyber-button, .cyber-badge, .cyber-nav-link, .cyber-table th, .cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), :where([data-ui="cyberpunk"]) .ui-label, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-badge, :where([data-ui="cyberpunk"]) .ui-nav-link, :where([data-ui="cyberpunk"]) .ui-table th {
5608
+ font-family: var(--cyber-font-mono);
5609
+ letter-spacing: .045em;
5610
+ }
5611
+
5612
+ .cyber-title {
5613
+ text-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.22);
5614
+ margin-block: .75rem;
5615
+ font-weight: 900;
5616
+ }
5617
+
5618
+ .cyber-card, .cyber-panel, .cyber-console, .cyber-toolbar, .cyber-table-wrap, .cyber-card-service, .cyber-media-scrim, .cyber-feature-strip, .cyber-callout-bar, :where([data-ui="cyberpunk"]) .ui-card, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap {
5619
+ background: var(--cyber-card-bg);
5620
+ color: var(--cyber-text);
5621
+ border: 1px solid var(--cyber-border);
5622
+ box-shadow: 0 .75rem 1.75rem rgb(0 0 0 / calc(var(--cyber-shadow-alpha)*.62)),0 0 .85rem rgb(var(--cyber-primary-rgb)/.12);
5623
+ clip-path: polygon(0 var(--cyber-cut-md),var(--cyber-cut-md)0,calc(100% - 1.125rem)0,100% 1.125rem,100% calc(100% - var(--cyber-cut-md)),calc(100% - var(--cyber-cut-md)) 100%,1rem 100%,0 calc(100% - 1rem));
5624
+ border-radius: .08rem;
5625
+ position: relative;
5626
+ }
5627
+
5628
+ .cyber-card:after, .cyber-panel:after, .cyber-console:after, .cyber-toolbar:after, .cyber-table-wrap:after, .cyber-card-service:after, .cyber-media-scrim:after, .cyber-feature-strip:after, .cyber-callout-bar:after, :where([data-ui="cyberpunk"]) .ui-card:after, :where([data-ui="cyberpunk"]) .ui-toolbar:after, :where([data-ui="cyberpunk"]) .ui-table-wrap:after {
5629
+ content: "";
5630
+ pointer-events: none;
5631
+ background: linear-gradient(90deg,var(--cyber-primary),var(--cyber-danger));
5632
+ opacity: .86;
5633
+ block-size: 2px;
5634
+ inline-size: 100%;
5635
+ position: absolute;
5636
+ inset: 0 auto auto 0;
5637
+ }
5638
+
5639
+ .cyber-panel, .cyber-console {
5640
+ padding: var(--cyber-space-5);
5641
+ }
5642
+
5643
+ .cyber-card, :where([data-ui="cyberpunk"]) .ui-card {
5644
+ padding: 1.08rem;
5645
+ }
5646
+
5647
+ .cyber-well, .cyber-inset {
5648
+ background: var(--cyber-control-bg);
5649
+ border: 1px solid var(--cyber-border);
5650
+ box-shadow: inset .18rem 0 0 rgb(var(--cyber-primary-rgb)/.12);
5651
+ clip-path: polygon(0 .42rem, .42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%);
5652
+ border-radius: .08rem;
5653
+ }
5654
+
5655
+ .cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
5656
+ min-block-size: 2.75rem;
5657
+ background-color: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
5658
+ background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.12),transparent 56%);
5659
+ min-height: 2.75rem;
5660
+ color: var(--cyber-text);
5661
+ border: 1px solid var(--cyber-border);
5662
+ box-shadow: none;
5663
+ font-family: var(--cyber-font-mono);
5664
+ letter-spacing: .045em;
5665
+ clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
5666
+ transition: transform var(--cyber-transition-fast),box-shadow var(--cyber-transition-fast),border-color var(--cyber-transition-fast),background-color var(--cyber-transition-fast);
5667
+ border-radius: .04rem;
5668
+ padding: .58rem .875rem;
5669
+ font-size: .75rem;
5670
+ font-weight: 800;
5671
+ }
5672
+
5673
+ .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
5674
+ inline-size: 2.75rem;
5675
+ min-inline-size: 2.75rem;
5676
+ padding: 0;
5677
+ }
5678
+
5679
+ .cyber-button:hover, .cyber-icon-button:hover, :where([data-ui="cyberpunk"]) .ui-button:hover, :where([data-ui="cyberpunk"]) .ui-icon-button:hover {
5680
+ border-color: var(--cyber-primary);
5681
+ color: var(--usk-primary-ink, var(--cyber-primary));
5682
+ box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.2);
5683
+ }
5684
+
5685
+ .cyber-button:active, .cyber-icon-button:active, .cyber-button.is-active, .cyber-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-button:active, :where([data-ui="cyberpunk"]) .ui-icon-button:active, :where([data-ui="cyberpunk"]) .ui-button.is-active, :where([data-ui="cyberpunk"]) .ui-button[aria-pressed="true"] {
5686
+ transform: translateY(1px);
5687
+ box-shadow: inset 0 0 .5rem #0000003d;
5688
+ }
5689
+
5690
+ .cyber-button-primary, .cyber-nav-link.is-active, .cyber-nav-link[aria-current="page"], :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="cyberpunk"]) .ui-nav-link.is-active, :where([data-ui="cyberpunk"]) .ui-nav-link[aria-current="page"] {
5691
+ background-color: var(--cyber-primary);
5692
+ color: var(--cyber-on-primary);
5693
+ border-color: var(--cyber-primary);
5694
+ box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.24);
5695
+ background-image: none;
5696
+ }
5697
+
5698
+ .cyber-button-primary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]):hover {
5699
+ background-color: var(--cyber-primary-hover);
5700
+ color: var(--cyber-on-primary);
5701
+ border-color: var(--cyber-primary-hover);
5702
+ }
5703
+
5704
+ .cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
5705
+ background-color: var(--cyber-secondary);
5706
+ color: var(--cyber-on-secondary);
5707
+ border-color: var(--cyber-secondary);
5708
+ background-image: none;
5709
+ }
5710
+
5711
+ .cyber-button-secondary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]):hover {
5712
+ background-color: var(--cyber-secondary-hover);
5713
+ color: var(--cyber-on-secondary);
5714
+ border-color: var(--cyber-secondary-hover);
5715
+ }
5716
+
5717
+ .cyber-button-danger, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]) {
5718
+ background-color: var(--cyber-danger);
5719
+ color: var(--cyber-on-danger);
5720
+ border-color: var(--cyber-danger);
5721
+ box-shadow: 0 0 .75rem rgb(var(--cyber-danger-rgb)/.2);
5722
+ background-image: none;
5723
+ }
5724
+
5725
+ .cyber-button-danger:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]):hover {
5726
+ background-color: var(--cyber-danger);
5727
+ color: var(--cyber-on-danger);
5728
+ border-color: var(--cyber-danger);
5729
+ }
5730
+
5731
+ .cyber-input, .cyber-textarea, .cyber-select, :where([data-ui="cyberpunk"]) .ui-input, :where([data-ui="cyberpunk"]) .ui-textarea, :where([data-ui="cyberpunk"]) .ui-select {
5732
+ min-block-size: 2.75rem;
5733
+ background-color: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
5734
+ background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%);
5735
+ min-height: 2.75rem;
5736
+ color: var(--cyber-text);
5737
+ border: 1px solid var(--cyber-primary);
5738
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
5739
+ clip-path: polygon(0 .4375rem, .4375rem 0, 100% 0, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
5740
+ border-radius: .03rem;
5741
+ padding: .55rem .875rem;
5742
+ }
5743
+
5744
+ .cyber-select, :where([data-ui="cyberpunk"]) .ui-select {
5745
+ appearance: none;
5746
+ background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%),var(--usk-native-select-indicator-image);
5747
+ background-position: 0 0,var(--usk-native-select-indicator-position);
5748
+ background-repeat: no-repeat;
5749
+ background-size: auto,var(--usk-native-select-indicator-size);
5750
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
5751
+ }
5752
+
5753
+ .cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus, .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-nav-link:focus-visible, :where([data-ui="cyberpunk"]) .ui-input:focus, :where([data-ui="cyberpunk"]) .ui-textarea:focus, :where([data-ui="cyberpunk"]) .ui-select:focus, :where([data-ui="cyberpunk"]) .ui-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-icon-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-nav-link:focus-visible {
5754
+ border-color: var(--cyber-focus);
5755
+ box-shadow: var(--usk-native-focus-ring);
5756
+ outline-offset: 2px;
5757
+ outline: 2px solid #0000;
5758
+ }
5759
+
5760
+ .cyber-input[aria-invalid="true"], .cyber-textarea[aria-invalid="true"], .cyber-select[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-input[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-textarea[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-select[aria-invalid="true"] {
5761
+ border-color: var(--cyber-danger);
5762
+ box-shadow: 0 0 0 2px rgb(var(--cyber-danger-rgb)/.2);
5763
+ }
5764
+
5765
+ .cyber-badge, :where([data-ui="cyberpunk"]) .ui-badge {
5766
+ min-block-size: 1.5rem;
5767
+ min-height: 1.5rem;
5768
+ box-shadow: none;
5769
+ font-family: var(--cyber-font-mono);
5770
+ letter-spacing: .045em;
5771
+ clip-path: polygon(0 .28rem, .28rem 0, calc(100% - .28rem) 0, 100% .28rem, calc(100% - .28rem) 100%, 0 100%);
5772
+ border: 1px solid;
5773
+ border-radius: .04rem;
5774
+ padding: .22rem .55rem;
5775
+ font-size: .68rem;
5776
+ font-weight: 800;
5777
+ }
5778
+
5779
+ .cyber-alert, :where([data-ui="cyberpunk"]) .ui-alert {
5780
+ background: var(--cyber-card-bg);
5781
+ color: var(--cyber-text);
5782
+ border: 1px solid var(--cyber-primary);
5783
+ box-shadow: inset .22rem 0 0 currentColor,0 0 .75rem rgb(var(--cyber-primary-rgb)/.14);
5784
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
5785
+ border-radius: .07rem;
5786
+ padding: .78rem .92rem;
5787
+ }
5788
+
5789
+ .cyber-alert-success, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="success"]) {
5790
+ border-color: var(--cyber-success);
5791
+ color: var(--cyber-success);
5792
+ }
5793
+
5794
+ .cyber-alert-warning, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="warning"]) {
5795
+ border-color: var(--cyber-warning);
5796
+ color: var(--cyber-warning);
5797
+ }
5798
+
5799
+ .cyber-alert-danger, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="danger"]) {
5800
+ border-color: var(--cyber-danger);
5801
+ color: var(--cyber-danger);
5802
+ }
5803
+
5804
+ .cyber-alert-body, :where([data-ui="cyberpunk"]) .ui-alert-body {
5805
+ color: var(--cyber-text-muted);
5806
+ }
5807
+
5808
+ .cyber-progress, :where([data-ui="cyberpunk"]) .ui-progress {
5809
+ block-size: .7rem;
5810
+ min-block-size: .7rem;
5811
+ background: repeating-linear-gradient(110deg,var(--cyber-surface-soft)0 .58rem,transparent .58rem .72rem);
5812
+ border: 1px solid var(--cyber-border);
5813
+ height: .7rem;
5814
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
5815
+ clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
5816
+ border-radius: .08rem;
5817
+ padding: .1rem;
5818
+ }
5819
+
5820
+ .cyber-progress-bar, :where([data-ui="cyberpunk"]) .ui-progress-bar {
5821
+ background: repeating-linear-gradient(110deg,var(--cyber-primary)0 .58rem,var(--cyber-primary-hover) .58rem .72rem);
5822
+ box-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb)/.22);
5823
+ border-radius: .04rem;
5824
+ }
5825
+
5826
+ .cyber-table th, .cyber-table td, :where([data-ui="cyberpunk"]) .ui-table th, :where([data-ui="cyberpunk"]) .ui-table td {
5827
+ border-bottom: 1px solid rgb(var(--cyber-border-rgb)/.46);
5828
+ padding: .5rem .65rem;
5829
+ }
5830
+
5831
+ .cyber-table th, :where([data-ui="cyberpunk"]) .ui-table th {
5832
+ background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.16),transparent);
5833
+ color: var(--cyber-text);
5834
+ font-family: var(--cyber-font-mono);
5835
+ letter-spacing: .045em;
5836
+ font-size: .68rem;
5837
+ font-weight: 800;
5838
+ }
5839
+
5840
+ .cyber-table td, :where([data-ui="cyberpunk"]) .ui-table td {
5841
+ color: var(--cyber-text-muted);
5842
+ }
5843
+
5844
+ .cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5845
+ background: var(--cyber-surface-strong);
5846
+ color: var(--cyber-text);
5847
+ border: 1px solid var(--cyber-primary);
5848
+ box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.16);
5849
+ clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%);
5850
+ border-radius: .04rem;
5851
+ }
5852
+
5853
+ .cyber-spinner, .cyber-loading-spinner, [data-ui="cyberpunk"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
5854
+ clip-path: none;
5855
+ box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.18);
5856
+ background: none;
5857
+ border-radius: 50%;
5858
+ }
5859
+
5860
+ .cyber-button[aria-busy="true"]:after, .cyber-icon-button[aria-busy="true"]:after, [data-ui="cyberpunk"] :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="cyberpunk"]) .ui-button[aria-busy="true"]:after, :where([data-ui="cyberpunk"]) .ui-icon-button[aria-busy="true"]:after {
5861
+ border: .14em solid rgb(var(--cyber-primary-rgb)/.32);
5862
+ box-shadow: none;
5863
+ clip-path: none;
5864
+ background: none;
5865
+ border-block-start-color: currentColor;
5866
+ border-radius: 50%;
5867
+ animation: .75s linear infinite cyber-spin;
5868
+ }
5869
+
5870
+ .cyber-icon-medallion, .cyber-badge-seal {
5871
+ border: 1px solid var(--cyber-primary);
5872
+ box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.18);
5873
+ clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
5874
+ border-radius: .04rem;
5875
+ }
5876
+
5877
+ .cyber-feature-item > .cyber-icon-medallion {
5878
+ block-size: 2.75rem;
5879
+ inline-size: 2.75rem;
5880
+ font-size: 1.1rem;
5881
+ }
5882
+
5883
+ .cyber-callout-bar > .cyber-icon-medallion {
5884
+ min-block-size: 3.25rem;
5885
+ min-inline-size: 3.25rem;
5886
+ font-size: 1.35rem;
5887
+ }
5888
+
5889
+ .cyber-button.cyber-button-cut, .cyber-button-cut, .cyber-button.cyber-button-outline-heavy, .cyber-button-outline-heavy, :where([data-ui="cyberpunk"]) .ui-button.cyber-button-cut, :where([data-ui="cyberpunk"]) .ui-button.cyber-button-outline-heavy {
5890
+ clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
5891
+ border-width: 1px;
5892
+ }
5893
+
5894
+ [data-ui="cyberpunk"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5895
+ min-block-size: 2.75rem;
5896
+ background-color: var(--cyber-primary);
5897
+ min-height: 2.75rem;
5898
+ color: var(--cyber-on-primary);
5899
+ border: 1px solid var(--cyber-primary);
5900
+ box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.18);
5901
+ clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
5902
+ background-image: none;
5903
+ border-radius: .04rem;
5904
+ }
5905
+
5906
+ [data-ui="cyberpunk"][data-mode] :where(input:not([type]):not([class]), input[type="text"]:not([class]), input[type="email"]:not([class]), input[type="search"]:not([class]), input[type="number"]:not([class]), input[type="date"]:not([class]), input[type="time"]:not([class]), textarea:not([class]), select:not([class])) {
5907
+ min-block-size: 2.75rem;
5908
+ background-color: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
5909
+ background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%);
5910
+ min-height: 2.75rem;
5911
+ color: var(--cyber-text);
5912
+ border: 1px solid var(--cyber-primary);
5913
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
5914
+ clip-path: polygon(0 .4375rem, .4375rem 0, 100% 0, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
5915
+ border-radius: .03rem;
5916
+ }
5917
+
5918
+ [data-ui="cyberpunk"][data-mode] :where(select:not([class])) {
5919
+ appearance: none;
5920
+ background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%),var(--usk-native-select-indicator-image);
5921
+ background-position: 0 0,var(--usk-native-select-indicator-position);
5922
+ background-repeat: no-repeat;
5923
+ background-size: auto,var(--usk-native-select-indicator-size);
5924
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
5925
+ }
5926
+
5927
+ [data-ui="cyberpunk"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
5928
+ border-color: var(--cyber-danger);
5929
+ box-shadow: 0 0 0 2px rgb(var(--cyber-danger-rgb)/.2),inset .16rem 0 0 rgb(var(--cyber-danger-rgb)/.22);
5930
+ }
5931
+
5932
+ [data-ui="cyberpunk"][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]) {
5933
+ filter: saturate(.72);
5934
+ opacity: .78;
5935
+ border-style: dashed;
5936
+ }
5937
+
5938
+ [data-ui="cyberpunk"][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
5939
+ inline-size: var(--usk-native-choice-size);
5940
+ block-size: var(--usk-native-choice-size);
5941
+ border: var(--usk-native-choice-border);
5942
+ box-shadow: var(--usk-native-choice-shadow);
5943
+ }
5944
+
5945
+ [data-ui="cyberpunk"][data-mode] :where(input[type="checkbox"]) {
5946
+ border-radius: var(--usk-native-checkbox-radius);
5947
+ }
5948
+
5949
+ [data-ui="cyberpunk"][data-mode] :where(input[type="radio"]) {
5950
+ border-radius: var(--usk-native-radio-radius);
5951
+ }
5952
+
5953
+ [data-ui="cyberpunk"][data-mode] :where(progress, meter) {
5954
+ min-block-size: var(--usk-native-progress-size);
5955
+ min-height: var(--usk-native-progress-size);
5956
+ block-size: var(--usk-native-progress-size);
5957
+ clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
5958
+ border-radius: .08rem;
5959
+ }
5960
+
5961
+ [data-ui="cyberpunk"][data-mode] :where(fieldset, dialog, details, article:not([class]), aside:not([class])) {
5962
+ background: var(--cyber-card-bg);
5963
+ color: var(--cyber-text);
5964
+ border: 1px solid var(--cyber-border);
5965
+ box-shadow: 0 .75rem 1.75rem rgb(0 0 0 / calc(var(--cyber-shadow-alpha)*.48)),0 0 .75rem rgb(var(--cyber-primary-rgb)/.1);
5966
+ clip-path: polygon(0 var(--cyber-cut-sm),var(--cyber-cut-sm)0,calc(100% - .875rem)0,100% .875rem,100% calc(100% - var(--cyber-cut-sm)),calc(100% - var(--cyber-cut-sm)) 100%,.75rem 100%,0 calc(100% - .75rem));
5967
+ border-radius: .08rem;
5968
+ }
5969
+
5970
+ .cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
5971
+ border-radius: .04rem;
5972
+ }
5973
+
5974
+ [data-ui="cyberpunk"][data-mode] {
5975
+ --cyber-template-line: rgb(var(--cyber-border-rgb) / max(.44, var(--cyber-border-alpha)));
5976
+ --cyber-template-line-strong: rgb(var(--cyber-primary-rgb) / max(.72, var(--cyber-border-alpha)));
5977
+ --cyber-template-surface: rgb(var(--cyber-surface-rgb) / var(--cyber-panel-alpha));
5978
+ --cyber-template-surface-strong: rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-strong-alpha));
5979
+ --cyber-template-surface-soft: rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha));
5980
+ --cyber-template-hatch: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .12) 0 1px, transparent 1px 8px);
5981
+ --cyber-template-signal-rail: linear-gradient(90deg, var(--cyber-primary) 0 58%, transparent 58% 82%, var(--cyber-danger) 82% 100%);
5982
+ --cyber-template-cut-sm: .4375rem;
5983
+ --cyber-template-cut-md: .75rem;
5984
+ --cyber-template-glow: 0 0 .85rem rgb(var(--cyber-primary-rgb) / .18);
5985
+ --cyber-template-danger-glow: 0 0 .85rem rgb(var(--cyber-danger-rgb) / .2);
5986
+ --cyber-template-warning-glow: 0 0 .85rem rgb(var(--cyber-warning-rgb) / .16);
5987
+ --cyber-template-focus-ring: 0 0 0 2px var(--cyber-bg), 0 0 0 4px var(--cyber-focus), 0 0 .85rem rgb(var(--cyber-focus-rgb) / .24);
5988
+ }
5989
+
5990
+ .cyber-overline, .cyber-section-title {
5991
+ color: var(--cyber-text);
5992
+ font-family: var(--cyber-font-mono);
5993
+ letter-spacing: .04em;
5994
+ text-transform: uppercase;
5995
+ font-weight: 900;
5996
+ }
5997
+
5998
+ .cyber-overline {
5999
+ min-block-size: 1.5rem;
6000
+ color: var(--usk-primary-ink, var(--cyber-primary));
6001
+ align-items: center;
6002
+ gap: .5rem;
6003
+ font-size: .6875rem;
6004
+ display: inline-flex;
6005
+ }
6006
+
6007
+ .cyber-overline:before {
6008
+ content: "";
6009
+ block-size: 1px;
6010
+ inline-size: 1.25rem;
6011
+ box-shadow: .5rem 0 0 rgb(var(--cyber-danger-rgb)/.78);
6012
+ background: currentColor;
6013
+ display: inline-block;
6014
+ }
6015
+
6016
+ .cyber-section-title {
6017
+ color: var(--cyber-text);
6018
+ align-items: center;
6019
+ gap: .75rem;
6020
+ margin: 0;
6021
+ padding-block: .25rem .35rem;
6022
+ font-size: clamp(1rem, 1rem + .35vw, 1.35rem);
6023
+ line-height: 1.12;
6024
+ display: flex;
6025
+ position: relative;
6026
+ }
6027
+
6028
+ .cyber-section-title:before {
6029
+ content: "";
6030
+ background: var(--cyber-primary);
6031
+ clip-path: polygon(0 32%, 32% 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
6032
+ block-size: .85rem;
6033
+ inline-size: .85rem;
6034
+ box-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.22);
6035
+ flex: 0 0 .85rem;
6036
+ }
6037
+
6038
+ .cyber-section-title:after {
6039
+ content: "";
6040
+ background: repeating-linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.56)0 .5rem,transparent .5rem .75rem);
6041
+ opacity: .72;
6042
+ flex: 4rem;
6043
+ block-size: .4rem;
6044
+ min-inline-size: 2rem;
6045
+ }
6046
+
6047
+ .cyber-panel, .cyber-card, .cyber-dropdown, .cyber-popover, .cyber-toast, .cyber-modal, :where([data-ui="cyberpunk"]) .ui-card {
6048
+ border: 1px solid var(--cyber-template-line);
6049
+ background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 22%) top left/4rem 4rem no-repeat,var(--cyber-template-surface);
6050
+ color: var(--cyber-text);
6051
+ box-shadow: 0 .9rem 2rem rgb(0 0 0 / calc(var(--cyber-shadow-alpha)*.62)),var(--cyber-template-glow);
6052
+ clip-path: polygon(0 var(--cyber-template-cut-md),var(--cyber-template-cut-md)0,calc(100% - 1rem)0,100% 1rem,100% calc(100% - var(--cyber-template-cut-md)),calc(100% - var(--cyber-template-cut-md)) 100%,.65rem 100%,0 calc(100% - .65rem));
6053
+ border-radius: .06rem;
6054
+ position: relative;
6055
+ }
6056
+
6057
+ .cyber-panel:before, .cyber-card:before, .cyber-dropdown:before, .cyber-popover:before, .cyber-toast:before, .cyber-modal:before, :where([data-ui="cyberpunk"]) .ui-card:before {
6058
+ content: "";
6059
+ background: var(--cyber-template-signal-rail);
6060
+ opacity: .78;
6061
+ pointer-events: none;
6062
+ block-size: 2px;
6063
+ position: absolute;
6064
+ inset-block-start: 0;
6065
+ inset-inline: .75rem 1rem;
6066
+ }
6067
+
6068
+ .cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
6069
+ min-block-size: 36px;
6070
+ border: 1px solid var(--cyber-template-line-strong);
6071
+ background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.12),transparent 58%),var(--cyber-template-surface-strong);
6072
+ min-height: 36px;
6073
+ color: var(--cyber-text);
6074
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.18);
6075
+ clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
6076
+ font-family: var(--cyber-font-control);
6077
+ letter-spacing: .035em;
6078
+ text-transform: uppercase;
6079
+ transition: background-color var(--cyber-transition-fast),border-color var(--cyber-transition-fast),box-shadow var(--cyber-transition-fast),color var(--cyber-transition-fast),transform var(--cyber-transition-fast);
6080
+ border-radius: .04rem;
6081
+ justify-content: center;
6082
+ align-items: center;
6083
+ gap: .5rem;
6084
+ padding: .46rem .875rem;
6085
+ font-size: .6875rem;
6086
+ font-weight: 800;
6087
+ line-height: 1;
6088
+ display: inline-flex;
6089
+ }
6090
+
6091
+ .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
6092
+ inline-size: 36px;
6093
+ min-inline-size: 36px;
6094
+ padding-inline: .45rem;
6095
+ }
6096
+
6097
+ .cyber-button:hover, .cyber-icon-button:hover, .cyber-button.is-hover, .cyber-icon-button.is-hover, :where([data-ui="cyberpunk"]) .ui-button:hover, :where([data-ui="cyberpunk"]) .ui-icon-button:hover, :where([data-ui="cyberpunk"]) .ui-button.is-hover, :where([data-ui="cyberpunk"]) .ui-icon-button.is-hover {
6098
+ border-color: var(--cyber-primary);
6099
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.32),var(--cyber-template-glow);
6100
+ }
6101
+
6102
+ .cyber-button:active, .cyber-icon-button:active, .cyber-button.is-pressed, .cyber-icon-button.is-pressed, .cyber-button[aria-pressed="true"], .cyber-icon-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-button:active, :where([data-ui="cyberpunk"]) .ui-icon-button:active, :where([data-ui="cyberpunk"]) .ui-button.is-pressed, :where([data-ui="cyberpunk"]) .ui-icon-button.is-pressed, :where([data-ui="cyberpunk"]) .ui-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-icon-button[aria-pressed="true"] {
6103
+ box-shadow: inset 0 0 0 1px rgb(var(--cyber-primary-rgb)/.48);
6104
+ transform: translateY(1px);
6105
+ }
6106
+
6107
+ .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-tab:focus-visible, .cyber-segment:focus-visible, .cyber-pagination-page:focus-visible, .cyber-choice:focus-within, .cyber-file:focus-within, :where([data-ui="cyberpunk"]) .ui-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-icon-button:focus-visible {
6108
+ outline-offset: 2px;
6109
+ box-shadow: var(--cyber-template-focus-ring);
6110
+ outline: 2px solid #0000;
6111
+ }
6112
+
6113
+ .cyber-button:disabled, .cyber-icon-button:disabled, .cyber-button.is-disabled, .cyber-icon-button.is-disabled, :where([data-ui="cyberpunk"]) .ui-button:disabled, :where([data-ui="cyberpunk"]) .ui-icon-button:disabled, :where([data-ui="cyberpunk"]) .ui-button.is-disabled, :where([data-ui="cyberpunk"]) .ui-icon-button.is-disabled {
6114
+ opacity: .55;
6115
+ filter: grayscale(.25);
6116
+ cursor: not-allowed;
6117
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-border-rgb)/.24);
6118
+ transform: none;
6119
+ }
6120
+
6121
+ .cyber-button[aria-busy="true"], .cyber-button.is-loading, .cyber-icon-button[aria-busy="true"], .cyber-icon-button.is-loading, :where([data-ui="cyberpunk"]) .ui-button[aria-busy="true"], :where([data-ui="cyberpunk"]) .ui-button.is-loading, :where([data-ui="cyberpunk"]) .ui-icon-button[aria-busy="true"], :where([data-ui="cyberpunk"]) .ui-icon-button.is-loading {
6122
+ color: var(--cyber-loading-text, var(--cyber-text));
6123
+ pointer-events: none;
6124
+ position: relative;
6125
+ }
6126
+
6127
+ .cyber-button.is-loading:before, .cyber-icon-button.is-loading:before, :where([data-ui="cyberpunk"]) .ui-button.is-loading:before, :where([data-ui="cyberpunk"]) .ui-icon-button.is-loading:before {
6128
+ content: "";
6129
+ border: 2px solid rgb(var(--cyber-primary-rgb)/.32);
6130
+ border-block-start-color: var(--cyber-on-primary);
6131
+ border-radius: 50%;
6132
+ flex: none;
6133
+ block-size: .95rem;
6134
+ inline-size: .95rem;
6135
+ animation: .75s linear infinite cyber-spin;
6136
+ position: relative;
6137
+ }
6138
+
6139
+ .cyber-button-primary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]) {
6140
+ --cyber-loading-text: var(--cyber-on-primary);
6141
+ border-color: var(--cyber-primary-action-color, var(--cyber-primary));
6142
+ background-color: var(--cyber-primary-action-color, var(--cyber-primary));
6143
+ color: var(--cyber-on-primary);
6144
+ box-shadow: 0 0 .85rem rgb(var(--cyber-primary-rgb)/.22);
6145
+ background-image: none;
6146
+ }
6147
+
6148
+ .cyber-button-primary:hover, .cyber-button-primary.is-hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]):hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]).is-hover {
6149
+ --cyber-primary-action-color: var(--cyber-primary-hover);
6150
+ }
6151
+
6152
+ .cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
6153
+ border-color: var(--cyber-template-line);
6154
+ background-color: var(--cyber-template-surface-strong);
6155
+ background-image: linear-gradient(135deg,rgb(var(--cyber-secondary-rgb)/.28),transparent 60%);
6156
+ color: var(--cyber-text);
6157
+ }
6158
+
6159
+ .cyber-button-ghost, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="ghost"]) {
6160
+ color: var(--usk-primary-ink, var(--cyber-primary));
6161
+ box-shadow: none;
6162
+ background-color: #0000;
6163
+ background-image: none;
6164
+ border-color: #0000;
6165
+ }
6166
+
6167
+ .cyber-button-danger, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]) {
6168
+ --cyber-loading-text: var(--cyber-danger);
6169
+ border-color: var(--cyber-danger);
6170
+ background-color: rgb(var(--cyber-danger-rgb)/.12);
6171
+ background-image: linear-gradient(135deg,rgb(var(--cyber-danger-rgb)/.16),transparent 62%);
6172
+ color: var(--cyber-danger);
6173
+ box-shadow: var(--cyber-template-danger-glow);
6174
+ }
6175
+
6176
+ [data-ui="cyberpunk"][data-mode][style*="--cyber-on-danger"] .cyber-button-danger, :where([data-ui="cyberpunk"])[data-mode][style*="--cyber-on-danger"] .ui-button:where([data-ui-variant="danger"]) {
6177
+ color: var(--cyber-on-danger);
6178
+ }
6179
+
6180
+ .cyber-input, .cyber-select, .cyber-textarea, .cyber-file, :where([data-ui="cyberpunk"]) .ui-input, :where([data-ui="cyberpunk"]) .ui-select, :where([data-ui="cyberpunk"]) .ui-textarea {
6181
+ width: 100%;
6182
+ min-block-size: 36px;
6183
+ border: 1px solid var(--cyber-field-border-color, var(--cyber-template-line));
6184
+ border-block-end-color: var(--cyber-field-border-end-color, var(--cyber-template-line-strong));
6185
+ background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%),var(--cyber-template-surface-soft);
6186
+ min-height: 36px;
6187
+ color: var(--cyber-text);
6188
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
6189
+ clip-path: polygon(0 .4375rem, .4375rem 0, 100% 0, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
6190
+ font: 700 .875rem/1.35 var(--cyber-font-body);
6191
+ border-radius: .03rem;
6192
+ padding: .5rem .75rem;
6193
+ }
6194
+
6195
+ .cyber-input:hover, .cyber-select:hover, .cyber-textarea:hover, .cyber-file:hover, .cyber-input.is-hover, .cyber-select.is-hover, .cyber-textarea.is-hover, .cyber-file.is-hover, :where([data-ui="cyberpunk"]) .ui-input:hover, :where([data-ui="cyberpunk"]) .ui-select:hover, :where([data-ui="cyberpunk"]) .ui-textarea:hover, :where([data-ui="cyberpunk"]) .ui-input.is-hover, :where([data-ui="cyberpunk"]) .ui-select.is-hover, :where([data-ui="cyberpunk"]) .ui-textarea.is-hover {
6196
+ --cyber-field-border-color: var(--cyber-template-line-strong);
6197
+ --cyber-field-border-end-color: var(--cyber-template-line-strong);
6198
+ }
6199
+
6200
+ [data-ui="cyberpunk"] .cyber-input:focus, [data-ui="cyberpunk"] .cyber-select:focus, [data-ui="cyberpunk"] .cyber-textarea:focus, [data-ui="cyberpunk"] .cyber-file:focus-within, [data-ui="cyberpunk"] .cyber-input.is-focus, [data-ui="cyberpunk"] .cyber-select.is-focus, [data-ui="cyberpunk"] .cyber-textarea.is-focus, [data-ui="cyberpunk"] .cyber-file.is-focus, :where([data-ui="cyberpunk"]) .ui-input:focus, :where([data-ui="cyberpunk"]) .ui-select:focus, :where([data-ui="cyberpunk"]) .ui-textarea:focus, :where([data-ui="cyberpunk"]) .ui-input.is-focus, :where([data-ui="cyberpunk"]) .ui-select.is-focus, :where([data-ui="cyberpunk"]) .ui-textarea.is-focus {
6201
+ --cyber-field-border-color: var(--cyber-primary);
6202
+ --cyber-field-border-end-color: var(--cyber-primary);
6203
+ outline-offset: 2px;
6204
+ box-shadow: var(--cyber-template-focus-ring);
6205
+ outline: 2px solid #0000;
6206
+ }
6207
+
6208
+ .cyber-input[aria-invalid="true"], .cyber-select[aria-invalid="true"], .cyber-textarea[aria-invalid="true"], .cyber-input.is-error, .cyber-select.is-error, .cyber-textarea.is-error, :where([data-ui="cyberpunk"]) .ui-input[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-select[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-textarea[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-input.is-error, :where([data-ui="cyberpunk"]) .ui-select.is-error, :where([data-ui="cyberpunk"]) .ui-textarea.is-error {
6209
+ --cyber-field-border-color: var(--cyber-danger);
6210
+ --cyber-field-border-end-color: var(--cyber-danger);
6211
+ box-shadow: var(--cyber-template-danger-glow);
6212
+ }
6213
+
6214
+ .cyber-file {
6215
+ cursor: pointer;
6216
+ align-content: center;
6217
+ gap: .15rem;
6218
+ display: grid;
6219
+ }
6220
+
6221
+ .cyber-file strong, .cyber-file span {
6222
+ min-width: 0;
6223
+ display: block;
6224
+ }
6225
+
6226
+ .cyber-file span span {
6227
+ color: var(--cyber-text-muted);
6228
+ font-size: .74rem;
6229
+ }
6230
+
6231
+ .cyber-textarea, :where([data-ui="cyberpunk"]) .ui-textarea {
6232
+ resize: vertical;
6233
+ min-block-size: 5.5rem;
6234
+ }
6235
+
6236
+ .cyber-input-wrap {
6237
+ align-items: center;
6238
+ inline-size: 100%;
6239
+ display: flex;
6240
+ position: relative;
6241
+ }
6242
+
6243
+ .cyber-input-wrap .cyber-input, .cyber-input-wrap .cyber-select, :where([data-ui="cyberpunk"]) .cyber-input-wrap .ui-input, :where([data-ui="cyberpunk"]) .cyber-input-wrap .ui-select {
6244
+ padding-inline-end: 2.45rem;
6245
+ }
6246
+
6247
+ .cyber-input-icon {
6248
+ z-index: 1;
6249
+ block-size: 1.1rem;
6250
+ inline-size: 1.1rem;
6251
+ color: var(--usk-primary-ink, var(--cyber-primary));
6252
+ font-family: var(--cyber-font-mono);
6253
+ pointer-events: none;
6254
+ place-items: center;
6255
+ font-size: .8rem;
6256
+ display: inline-grid;
6257
+ position: absolute;
6258
+ inset-inline-end: .75rem;
6259
+ }
6260
+
6261
+ .cyber-helper, .cyber-error-text {
6262
+ font-family: var(--cyber-font-mono);
6263
+ align-items: flex-start;
6264
+ gap: .4rem;
6265
+ margin-block-start: .35rem;
6266
+ font-size: .72rem;
6267
+ font-weight: 800;
6268
+ line-height: 1.35;
6269
+ display: flex;
6270
+ }
6271
+
6272
+ .cyber-helper {
6273
+ color: var(--cyber-text-muted);
6274
+ }
6275
+
6276
+ .cyber-error-text {
6277
+ color: var(--cyber-danger);
6278
+ }
6279
+
6280
+ .cyber-error-text:before {
6281
+ content: "!";
6282
+ color: var(--cyber-danger);
6283
+ flex: none;
6284
+ }
6285
+
6286
+ .cyber-dropdown {
6287
+ gap: .25rem;
6288
+ padding: .5rem;
6289
+ display: grid;
6290
+ }
6291
+
6292
+ .cyber-option {
6293
+ appearance: none;
6294
+ min-block-size: 36px;
6295
+ color: var(--cyber-text);
6296
+ box-shadow: none;
6297
+ clip-path: polygon(0 .32rem, .32rem 0, 100% 0, 100% calc(100% - .32rem), calc(100% - .32rem) 100%, 0 100%);
6298
+ font-family: var(--cyber-font-mono);
6299
+ background: none;
6300
+ border: 1px solid #0000;
6301
+ justify-content: space-between;
6302
+ align-items: center;
6303
+ gap: .75rem;
6304
+ padding: .45rem .65rem;
6305
+ font-size: .75rem;
6306
+ font-weight: 800;
6307
+ display: flex;
6308
+ }
6309
+
6310
+ .cyber-option:is(:hover, :focus-visible), .cyber-option[aria-selected="true"], .cyber-option.is-active {
6311
+ border-color: var(--cyber-primary);
6312
+ background: rgb(var(--cyber-primary-rgb)/.14);
6313
+ color: var(--usk-primary-ink, var(--cyber-primary));
6314
+ outline: 0;
6315
+ }
6316
+
6317
+ .cyber-tags {
6318
+ flex-wrap: wrap;
6319
+ align-items: center;
6320
+ gap: .5rem;
6321
+ display: flex;
6322
+ }
6323
+
6324
+ .cyber-chip {
6325
+ background: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
6326
+ min-block-size: 1.75rem;
6327
+ color: var(--cyber-chip-color, var(--usk-primary-ink, var(--cyber-primary)));
6328
+ clip-path: polygon(0 .28rem, .28rem 0, calc(100% - .28rem) 0, 100% .28rem, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
6329
+ font-family: var(--cyber-font-mono);
6330
+ text-transform: uppercase;
6331
+ border: 1px solid;
6332
+ border-radius: .04rem;
6333
+ align-items: center;
6334
+ gap: .35rem;
6335
+ padding: .28rem .55rem;
6336
+ font-size: .68rem;
6337
+ font-weight: 900;
6338
+ line-height: 1;
6339
+ display: inline-flex;
6340
+ }
6341
+
6342
+ .cyber-choice {
6343
+ border: 1px solid var(--cyber-template-line);
6344
+ background: var(--cyber-template-surface);
6345
+ min-block-size: 44px;
6346
+ color: var(--cyber-text);
6347
+ clip-path: polygon(0 .42rem, .42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%);
6348
+ border-radius: .04rem;
6349
+ align-items: flex-start;
6350
+ gap: .65rem;
6351
+ padding: .62rem .7rem;
6352
+ display: flex;
6353
+ }
6354
+
6355
+ .cyber-choice input {
6356
+ accent-color: var(--cyber-primary);
6357
+ margin-block-start: .15rem;
6358
+ }
6359
+
6360
+ .cyber-choice input[type="checkbox"], .cyber-choice input[type="radio"] {
6361
+ appearance: auto;
6362
+ block-size: 1rem;
6363
+ min-block-size: 1rem;
6364
+ inline-size: 1rem;
6365
+ box-shadow: none;
6366
+ clip-path: none;
6367
+ background: none;
6368
+ border: 0;
6369
+ flex: none;
6370
+ padding: 0;
6371
+ }
6372
+
6373
+ .cyber-choice strong, .cyber-choice span {
6374
+ display: block;
6375
+ }
6376
+
6377
+ .cyber-choice span {
6378
+ color: var(--cyber-text-muted);
6379
+ font-size: .78rem;
6380
+ line-height: 1.35;
6381
+ }
6382
+
6383
+ .cyber-switch, :where([data-ui="cyberpunk"]) .ui-switch {
6384
+ min-block-size: 44px;
6385
+ font-family: var(--cyber-font-mono);
6386
+ font-size: .75rem;
6387
+ font-weight: 800;
6388
+ }
6389
+
6390
+ .cyber-switch-track, :where([data-ui="cyberpunk"]) .ui-switch-track {
6391
+ border: 1px solid var(--cyber-template-line);
6392
+ background: var(--cyber-template-surface-soft);
6393
+ box-shadow: inset 0 0 0 1px rgb(var(--cyber-primary-rgb)/.12);
6394
+ clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%);
6395
+ border-radius: .12rem;
6396
+ }
6397
+
6398
+ .cyber-switch-thumb, :where([data-ui="cyberpunk"]) .ui-switch-thumb {
6399
+ background: var(--cyber-text-muted);
6400
+ border-color: var(--cyber-template-line);
6401
+ border-radius: .08rem;
6402
+ }
6403
+
6404
+ .cyber-switch:has(input:checked) .cyber-switch-track, :where([data-ui="cyberpunk"]) .ui-switch:has(input:checked) .ui-switch-track {
6405
+ background: var(--cyber-primary);
6406
+ border-color: var(--cyber-primary);
6407
+ box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.22);
6408
+ }
6409
+
6410
+ .cyber-switch:has(input:checked) .cyber-switch-thumb, :where([data-ui="cyberpunk"]) .ui-switch:has(input:checked) .ui-switch-thumb {
6411
+ background: var(--cyber-on-primary);
6412
+ border-color: var(--cyber-on-primary);
6413
+ }
6414
+
6415
+ .cyber-segmented {
6416
+ border: 1px solid var(--cyber-template-line);
6417
+ background: var(--cyber-template-surface-soft);
6418
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
6419
+ flex-wrap: wrap;
6420
+ gap: .25rem;
6421
+ padding: .25rem;
6422
+ display: inline-flex;
6423
+ }
6424
+
6425
+ .cyber-segment {
6426
+ min-block-size: 36px;
6427
+ color: var(--cyber-text-muted);
6428
+ clip-path: polygon(0 .32rem, .32rem 0, 100% 0, 100% calc(100% - .32rem), calc(100% - .32rem) 100%, 0 100%);
6429
+ font-family: var(--cyber-font-mono);
6430
+ text-transform: uppercase;
6431
+ background: none;
6432
+ border: 1px solid #0000;
6433
+ padding: .45rem .75rem;
6434
+ font-size: .72rem;
6435
+ font-weight: 900;
6436
+ }
6437
+
6438
+ .cyber-segment[aria-pressed="true"], .cyber-segment.is-active {
6439
+ border-color: var(--cyber-primary);
6440
+ background: var(--cyber-primary);
6441
+ color: var(--cyber-on-primary);
6442
+ box-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.22);
6443
+ }
6444
+
6445
+ .cyber-range {
6446
+ width: 100%;
6447
+ min-block-size: 36px;
6448
+ accent-color: var(--cyber-primary);
6449
+ background-image: linear-gradient(90deg,var(--cyber-success),var(--cyber-warning) 58%,var(--cyber-danger));
6450
+ background-position: center;
6451
+ background-repeat: no-repeat;
6452
+ background-size: 100% .5rem;
6453
+ }
6454
+
6455
+ .cyber-range-critical {
6456
+ accent-color: var(--cyber-danger);
6457
+ background-image: linear-gradient(90deg,var(--cyber-warning),var(--cyber-danger));
6458
+ }
6459
+
6460
+ .cyber-range::-webkit-slider-runnable-track {
6461
+ border: 1px solid var(--cyber-template-line);
6462
+ background: linear-gradient(90deg,var(--cyber-success),var(--cyber-warning) 58%,var(--cyber-danger));
6463
+ block-size: .5rem;
6464
+ box-shadow: var(--cyber-template-glow);
6465
+ border-radius: .08rem;
6466
+ }
6467
+
6468
+ .cyber-range-critical::-webkit-slider-runnable-track {
6469
+ background: linear-gradient(90deg,var(--cyber-warning),var(--cyber-danger));
6470
+ }
6471
+
6472
+ .cyber-range::-webkit-slider-thumb {
6473
+ border: 1px solid var(--cyber-template-line);
6474
+ background: var(--cyber-template-surface-strong);
6475
+ block-size: 1.25rem;
6476
+ inline-size: 1.25rem;
6477
+ box-shadow: 0 0 .6rem rgb(var(--cyber-primary-rgb)/.22);
6478
+ clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% calc(100% - .28rem), calc(100% - .28rem) 100%, 0 100%);
6479
+ border-radius: .08rem;
6480
+ margin-block-start: -.45rem;
6481
+ }
6482
+
6483
+ .cyber-range::-moz-range-track {
6484
+ border: 1px solid var(--cyber-template-line);
6485
+ background: linear-gradient(90deg,var(--cyber-success),var(--cyber-warning) 58%,var(--cyber-danger));
6486
+ block-size: .5rem;
6487
+ box-shadow: var(--cyber-template-glow);
6488
+ border-radius: .08rem;
6489
+ }
6490
+
6491
+ .cyber-range-critical::-moz-range-track {
6492
+ background: linear-gradient(90deg,var(--cyber-warning),var(--cyber-danger));
6493
+ }
6494
+
6495
+ .cyber-range::-moz-range-thumb {
6496
+ border: 1px solid var(--cyber-template-line);
6497
+ background: var(--cyber-template-surface-strong);
6498
+ block-size: 1.25rem;
6499
+ inline-size: 1.25rem;
6500
+ box-shadow: 0 0 .6rem rgb(var(--cyber-primary-rgb)/.22);
6501
+ clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% calc(100% - .28rem), calc(100% - .28rem) 100%, 0 100%);
6502
+ border-radius: .08rem;
6503
+ }
6504
+
6505
+ .cyber-progress-magenta .cyber-progress-bar, .cyber-progress-bar.cyber-progress-magenta, :where([data-ui="cyberpunk"]) .cyber-progress-magenta .ui-progress-bar, :where([data-ui="cyberpunk"]) .ui-progress-bar.cyber-progress-magenta {
6506
+ background: repeating-linear-gradient(110deg,var(--cyber-danger)0 .58rem,var(--cyber-accent) .58rem .72rem);
6507
+ box-shadow: 0 0 .6rem rgb(var(--cyber-danger-rgb)/.22);
6508
+ }
6509
+
6510
+ .cyber-meter {
6511
+ border: 1px solid var(--cyber-template-line);
6512
+ background: linear-gradient(90deg,var(--cyber-success)0 46%,var(--cyber-warning) 46% 72%,var(--cyber-danger) 72% 100%),var(--cyber-template-surface-soft);
6513
+ block-size: .85rem;
6514
+ min-block-size: .85rem;
6515
+ box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
6516
+ clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
6517
+ border-radius: .08rem;
6518
+ position: relative;
6519
+ }
6520
+
6521
+ .cyber-meter:after {
6522
+ content: "";
6523
+ background: var(--cyber-text);
6524
+ inline-size: 2px;
6525
+ box-shadow: 0 0 .5rem rgb(var(--cyber-text-rgb)/.35);
6526
+ position: absolute;
6527
+ inset-block: 0;
6528
+ inset-inline-start: var(--cyber-meter-value, 68%);
6529
+ }
6530
+
6531
+ .cyber-stepper {
6532
+ border: 1px solid var(--cyber-template-line);
6533
+ background: var(--cyber-template-surface);
6534
+ clip-path: polygon(0 .5rem, .5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%);
6535
+ justify-content: space-between;
6536
+ align-items: flex-start;
6537
+ gap: .5rem;
6538
+ padding: .75rem;
6539
+ list-style: none;
6540
+ display: flex;
6541
+ position: relative;
6542
+ }
6543
+
6544
+ .cyber-stepper:before {
6545
+ content: "";
6546
+ background: linear-gradient(90deg,var(--cyber-primary),var(--cyber-template-line-strong));
6547
+ block-size: 1px;
6548
+ position: absolute;
6549
+ inset-block-start: 1.625rem;
6550
+ inset-inline: 1.625rem;
6551
+ }
6552
+
6553
+ .cyber-step {
6554
+ z-index: 1;
6555
+ color: var(--cyber-text-muted);
6556
+ text-align: center;
6557
+ flex: 1 1 0;
6558
+ place-items: start center;
6559
+ gap: .6rem;
6560
+ display: grid;
6561
+ position: relative;
6562
+ }
6563
+
6564
+ .cyber-step:before {
6565
+ content: attr(data-step);
6566
+ border: 1px solid var(--cyber-template-line);
6567
+ background: var(--cyber-template-surface-soft);
6568
+ block-size: 1.75rem;
6569
+ inline-size: 1.75rem;
6570
+ color: var(--cyber-text);
6571
+ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
6572
+ font-family: var(--cyber-font-mono);
6573
+ place-items: center;
6574
+ font-size: .68rem;
6575
+ font-weight: 900;
6576
+ display: inline-grid;
6577
+ }
6578
+
6579
+ .cyber-step.is-active {
6580
+ color: var(--cyber-text);
6581
+ }
6582
+
6583
+ .cyber-step > span {
6584
+ justify-items: center;
6585
+ gap: .15rem;
6586
+ min-width: 0;
6587
+ display: grid;
6588
+ }
6589
+
6590
+ .cyber-step strong, .cyber-step .cyber-text-muted {
6591
+ display: block;
6592
+ }
6593
+
6594
+ .cyber-step.is-active:before {
6595
+ border-color: var(--cyber-primary);
6596
+ background: var(--cyber-primary);
6597
+ color: var(--cyber-on-primary);
6598
+ }
6599
+
6600
+ .cyber-toast {
6601
+ border-color: var(--cyber-primary);
6602
+ max-inline-size: 26rem;
6603
+ box-shadow: var(--cyber-template-glow);
6604
+ gap: .35rem;
6605
+ padding: .8rem .9rem;
6606
+ display: grid;
6607
+ }
6608
+
6609
+ .cyber-skeleton {
6610
+ border: 1px solid rgb(var(--cyber-border-rgb)/.42);
6611
+ background: linear-gradient(90deg,transparent,rgb(var(--cyber-primary-rgb)/.16),transparent),var(--cyber-template-surface-soft);
6612
+ clip-path: polygon(0 .3rem, .3rem 0, 100% 0, 100% calc(100% - .3rem), calc(100% - .3rem) 100%, 0 100%);
6613
+ background-size: 12rem 100%, auto;
6614
+ border-radius: .04rem;
6615
+ min-block-size: 1rem;
6616
+ inline-size: 100%;
6617
+ animation: 1.35s linear infinite cyber-skeleton-scan;
6618
+ display: block;
6619
+ }
6620
+
6621
+ .cyber-breadcrumb, .cyber-tabs, .cyber-pagination {
6622
+ flex-wrap: wrap;
6623
+ align-items: center;
6624
+ gap: .4rem;
6625
+ display: flex;
6626
+ }
6627
+
6628
+ .cyber-breadcrumb {
6629
+ color: var(--cyber-text-muted);
6630
+ font-family: var(--cyber-font-mono);
6631
+ font-size: .72rem;
6632
+ font-weight: 800;
6633
+ }
6634
+
6635
+ .cyber-breadcrumb a {
6636
+ color: var(--usk-primary-ink, var(--cyber-primary));
6637
+ }
6638
+
6639
+ .cyber-breadcrumb span + span:before, .cyber-breadcrumb a + span:before, .cyber-breadcrumb a + a:before, .cyber-breadcrumb span + a:before {
6640
+ content: "/";
6641
+ color: var(--cyber-danger);
6642
+ margin-inline: .15rem .45rem;
6643
+ }
6644
+
6645
+ .cyber-tabs, .cyber-pagination {
6646
+ border: 1px solid var(--cyber-template-line);
6647
+ background: var(--cyber-template-surface-soft);
6648
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
6649
+ padding: .3rem;
6650
+ }
6651
+
6652
+ .cyber-tab, .cyber-pagination-page {
6653
+ min-block-size: 36px;
6654
+ min-inline-size: 36px;
6655
+ color: var(--cyber-text-muted);
6656
+ clip-path: polygon(0 .32rem, .32rem 0, 100% 0, 100% calc(100% - .32rem), calc(100% - .32rem) 100%, 0 100%);
6657
+ font-family: var(--cyber-font-mono);
6658
+ text-transform: uppercase;
6659
+ background: none;
6660
+ border: 1px solid #0000;
6661
+ justify-content: center;
6662
+ align-items: center;
6663
+ padding: .45rem .7rem;
6664
+ font-size: .72rem;
6665
+ font-weight: 900;
6666
+ text-decoration: none;
6667
+ display: inline-flex;
6668
+ }
6669
+
6670
+ .cyber-tab[aria-selected="true"], .cyber-tab.is-active, .cyber-pagination-page[aria-current="page"], .cyber-pagination-page.is-active {
6671
+ border-color: var(--cyber-primary);
6672
+ background: var(--cyber-primary);
6673
+ color: var(--cyber-on-primary);
6674
+ box-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.2);
6675
+ }
6676
+
6677
+ .cyber-avatar-group {
6678
+ align-items: center;
6679
+ padding-inline-start: .35rem;
6680
+ display: flex;
6681
+ }
6682
+
6683
+ .cyber-avatar {
6684
+ border: 1px solid var(--cyber-template-line-strong);
6685
+ background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.24),rgb(var(--cyber-danger-rgb)/.18)),var(--cyber-template-surface-strong);
6686
+ block-size: 2.25rem;
6687
+ inline-size: 2.25rem;
6688
+ color: var(--cyber-text);
6689
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
6690
+ font-family: var(--cyber-font-mono);
6691
+ place-items: center;
6692
+ font-size: .72rem;
6693
+ font-weight: 900;
6694
+ display: inline-grid;
6695
+ }
6696
+
6697
+ .cyber-avatar-group .cyber-avatar + .cyber-avatar {
6698
+ margin-inline-start: -.45rem;
6699
+ }
6700
+
6701
+ .cyber-list {
6702
+ gap: .5rem;
6703
+ margin: 0;
6704
+ padding: 0;
6705
+ list-style: none;
6706
+ display: grid;
6707
+ }
6708
+
6709
+ .cyber-list li {
6710
+ border: 1px solid var(--cyber-template-line);
6711
+ background: var(--cyber-template-surface-soft);
6712
+ clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%);
6713
+ align-items: start;
6714
+ gap: .6rem;
6715
+ min-block-size: 36px;
6716
+ padding: .5rem .65rem;
6717
+ display: flex;
6718
+ }
6719
+
6720
+ .cyber-list li:before {
6721
+ content: "";
6722
+ background: var(--cyber-primary);
6723
+ clip-path: polygon(0 35%, 35% 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
6724
+ block-size: .55rem;
6725
+ inline-size: .55rem;
6726
+ margin-block-start: .3rem;
6727
+ }
6728
+
6729
+ .cyber-popover {
6730
+ max-inline-size: 18rem;
6731
+ padding: .85rem;
6732
+ }
6733
+
6734
+ .cyber-modal {
6735
+ max-inline-size: 34rem;
6736
+ padding: 1rem;
6737
+ }
6738
+
6739
+ .cyber-modal-actions {
6740
+ flex-wrap: wrap;
6741
+ justify-content: flex-end;
6742
+ gap: .5rem;
6743
+ margin-block-start: 1rem;
6744
+ display: flex;
6745
+ }
6746
+
6747
+ .cyber-accordion {
6748
+ border: 1px solid var(--cyber-template-line);
6749
+ background: var(--cyber-template-surface);
6750
+ clip-path: polygon(0 .5rem, .5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%);
6751
+ display: grid;
6752
+ }
6753
+
6754
+ .cyber-accordion summary {
6755
+ min-block-size: 44px;
6756
+ color: var(--cyber-text);
6757
+ cursor: pointer;
6758
+ font-family: var(--cyber-font-mono);
6759
+ text-transform: uppercase;
6760
+ padding: .75rem .85rem;
6761
+ font-size: .78rem;
6762
+ font-weight: 900;
6763
+ }
6764
+
6765
+ .cyber-accordion summary:focus-visible {
6766
+ outline-offset: 2px;
6767
+ box-shadow: var(--cyber-template-focus-ring);
6768
+ outline: 2px solid #0000;
6769
+ }
6770
+
6771
+ .cyber-accordion > div {
6772
+ color: var(--cyber-text-muted);
6773
+ padding: 0 .85rem .85rem;
6774
+ }
6775
+
6776
+ .cyber-code {
6777
+ border: 1px solid var(--cyber-template-line);
6778
+ background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.12) 1px,transparent 1px),var(--cyber-template-surface-strong);
6779
+ color: var(--cyber-text);
6780
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
6781
+ font-family: var(--cyber-font-mono);
6782
+ white-space: pre-wrap;
6783
+ background-size: .75rem .75rem, auto;
6784
+ margin: 0;
6785
+ padding: .85rem;
6786
+ font-size: .78rem;
6787
+ line-height: 1.55;
6788
+ display: block;
6789
+ overflow: auto;
6790
+ }
6791
+
6792
+ .cyber-code .token-key {
6793
+ color: var(--usk-primary-ink, var(--cyber-primary));
6794
+ }
6795
+
6796
+ .cyber-code .token-value {
6797
+ color: var(--cyber-warning);
6798
+ }
6799
+
6800
+ .cyber-quote {
6801
+ border-inline-start: .25rem solid var(--cyber-danger);
6802
+ background: linear-gradient(135deg,rgb(var(--cyber-danger-rgb)/.1),transparent 56%),var(--cyber-template-surface);
6803
+ color: var(--cyber-text);
6804
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
6805
+ font-family: var(--cyber-font-body);
6806
+ margin: 0;
6807
+ padding: .85rem 1rem;
6808
+ }
6809
+
6810
+ .cyber-token-swatch {
6811
+ border: 1px solid var(--cyber-template-line);
6812
+ background: var(--cyber-template-surface);
6813
+ min-block-size: 3rem;
6814
+ color: var(--cyber-text);
6815
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
6816
+ grid-template-columns: 2.5rem minmax(0, 1fr);
6817
+ align-items: center;
6818
+ gap: .65rem;
6819
+ padding: .45rem;
6820
+ display: grid;
6821
+ }
6822
+
6823
+ .cyber-token-swatch i {
6824
+ border: 1px solid var(--cyber-template-line);
6825
+ background: linear-gradient(135deg,var(--cyber-token-swatch-color, var(--cyber-primary)),rgb(var(--cyber-surface-strong-rgb)/.2)),var(--cyber-template-hatch);
6826
+ clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
6827
+ block-size: 2.15rem;
6828
+ inline-size: 2.15rem;
6829
+ display: block;
6830
+ }
6831
+
6832
+ .cyber-token-swatch strong, .cyber-token-swatch span {
6833
+ min-width: 0;
6834
+ display: block;
6835
+ }
6836
+
6837
+ .cyber-token-swatch span {
6838
+ color: var(--cyber-text-muted);
6839
+ font-family: var(--cyber-font-mono);
6840
+ overflow-wrap: break-word;
6841
+ font-size: .7rem;
6842
+ }
6843
+
6844
+ @keyframes cyber-skeleton-scan {
6845
+ from {
6846
+ background-position: -12rem 0, 0 0;
6847
+ }
6848
+
6849
+ to {
6850
+ background-position: 12rem 0, 0 0;
6851
+ }
6852
+ }
6853
+
6854
+ @media (prefers-reduced-motion: reduce) {
6855
+ .cyber-skeleton {
6856
+ animation: none;
6857
+ }
6858
+ }
6859
+
6860
+ [data-ui="cyberpunk"][data-mode] .cyber-button.cyber-button-warning, :where([data-ui="cyberpunk"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
6861
+ background: var(--cyber-warning);
6862
+ color: var(--cyber-on-warning);
6863
+ border-color: var(--cyber-warning);
6864
+ text-shadow: none;
6865
+ }
6866
+ }
6867
+
6868
+ [data-ui="cyberpunk"][data-mode] .cyber-title {
6869
+ letter-spacing: max(.08em, .5px);
6870
+ margin-block: max(.75rem, 12px);
6871
+ }
6872
+
6873
+ [data-ui="cyberpunk"][data-mode] .cyber-feature-item > .cyber-icon-medallion {
6874
+ font-size: 1.5rem;
6875
+ line-height: 1;
6876
+ }
6877
+
6878
+ [data-ui="cyberpunk"][data-mode] .cyber-callout-bar > .cyber-icon-medallion {
6879
+ min-block-size: 4.5rem;
6880
+ min-inline-size: 4.5rem;
6881
+ font-size: 2rem;
6882
+ font-weight: 800;
6883
+ line-height: 1;
4503
6884
  }