ui-style-kit-css 2.3.0 → 2.4.0

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 (120) hide show
  1. package/CHANGELOG.md +40 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +91 -42
  4. package/STYLE-MAP.md +9 -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 +47483 -15117
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47344 -15106
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47510 -15134
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +2821 -279
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +812 -224
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2238 -267
  37. package/dist/visual/data-terminal.css +1671 -293
  38. package/dist/visual/editorial-luxe.css +1889 -243
  39. package/dist/visual/industrial-utility.css +2717 -255
  40. package/dist/visual/maximalist.css +1768 -447
  41. package/dist/visual/minimal-saas.css +1076 -382
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1266 -388
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2551 -276
  46. package/dist/visual/retro-glass.css +2235 -319
  47. package/dist/visual/retrofuturism.css +1460 -382
  48. package/dist/visual/tactile.css +2251 -443
  49. package/dist/visual/technical-blueprint.css +2207 -285
  50. package/dist/visual/y2k.css +1481 -294
  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/DEMO-SHOWCASE.md +65 -0
  56. package/docs/ECOSYSTEM.md +4 -4
  57. package/docs/EDITORIAL-LUX.md +75 -0
  58. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  59. package/docs/NATIVE-ELEMENTS.md +23 -17
  60. package/docs/NEO-NOIR.md +94 -0
  61. package/docs/ORGANIC-MODERN.md +91 -0
  62. package/docs/PAPER-EDITORIAL.md +63 -0
  63. package/docs/PUBLISHING.md +31 -10
  64. package/docs/RELEASE-2.4.0.md +88 -0
  65. package/docs/RETRO-GLASS.md +105 -0
  66. package/docs/STYLE-GUIDE.md +40 -25
  67. package/docs/TACTILE.md +38 -0
  68. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  69. package/docs/TOKENS.md +80 -3
  70. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  71. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  72. package/manifest.json +618 -27
  73. package/package.json +18 -10
  74. package/styles/art-deco.css +1397 -12
  75. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  76. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  77. package/styles/assets/bauhaus-barlow.ttf +0 -0
  78. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  79. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  81. package/styles/assets/bento-manrope-OFL.txt +93 -0
  82. package/styles/assets/bento-manrope.ttf +0 -0
  83. package/styles/assets/clay-grain.png +0 -0
  84. package/styles/assets/clay-rounded-OFL.txt +93 -0
  85. package/styles/assets/clay-rounded.ttf +0 -0
  86. package/styles/assets/neo-noir-corner-dark.png +0 -0
  87. package/styles/assets/neo-noir-corner-light.png +0 -0
  88. package/styles/assets/neo-noir-texture-dark.png +0 -0
  89. package/styles/assets/neo-noir-texture-light.png +0 -0
  90. package/styles/assets/organic-display-OFL.txt +93 -0
  91. package/styles/assets/organic-display.ttf +0 -0
  92. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  93. package/styles/assets/organic-sans-OFL.txt +93 -0
  94. package/styles/assets/organic-sans.ttf +0 -0
  95. package/styles/bauhaus.css +878 -107
  96. package/styles/bento.css +1176 -108
  97. package/styles/brutalism.css +262 -11
  98. package/styles/clay.css +1303 -68
  99. package/styles/compat-layout.css +1 -2
  100. package/styles/components.css +105 -34
  101. package/styles/content-overflow.css +11 -5
  102. package/styles/cyberpunk.css +1852 -47
  103. package/styles/data-terminal.css +1116 -12
  104. package/styles/editorial-luxe.css +576 -12
  105. package/styles/industrial-utility.css +1771 -12
  106. package/styles/interactive-surface-bridge.css +30 -20
  107. package/styles/interactive-surface-theme.css +21 -11
  108. package/styles/maximalist.css +1214 -132
  109. package/styles/minimal-saas.css +459 -88
  110. package/styles/native-elements.css +347 -171
  111. package/styles/neo-noir.css +656 -14
  112. package/styles/neumorphism.css +1018 -146
  113. package/styles/organic-modern.css +688 -18
  114. package/styles/paper-editorial.css +1048 -12
  115. package/styles/retro-glass.css +635 -46
  116. package/styles/retrofuturism.css +944 -56
  117. package/styles/tactile.css +1810 -108
  118. package/styles/technical-blueprint.css +668 -17
  119. package/styles/theme-colors.css +2 -2
  120. package/styles/y2k.css +950 -42
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.3.0
2
+ * UI Style Kit CSS v2.4.0
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -14,12 +14,12 @@
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
16
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
- :where([data-ui][data-theme][data-mode="light"]) {
17
+ :where([data-ui][data-mode="light"]) {
18
18
  --usk-border-text-mix: 45%;
19
19
  --usk-border-min-alpha: 1;
20
20
  }
21
21
 
22
- :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
22
+ :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
23
23
  --usk-border-text-mix: 0%;
24
24
  --usk-border-min-alpha: 0;
25
25
  }
@@ -1597,7 +1597,8 @@
1597
1597
  ========================================================= */
1598
1598
 
1599
1599
  @layer ui-style-kit.native_elements {
1600
- [data-ui][data-theme][data-mode] {
1600
+ [data-ui][data-mode] {
1601
+ --usk-native-bg: rgb(var(--usk-bg-rgb));
1601
1602
  --usk-native-surface: rgb(var(--usk-surface-rgb));
1602
1603
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
1603
1604
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
@@ -1634,6 +1635,52 @@
1634
1635
  --usk-native-thumb: var(--usk-native-surface-strong);
1635
1636
  --usk-native-thumb-border: var(--usk-native-primary);
1636
1637
  --usk-native-indicator: var(--usk-native-primary);
1638
+ --usk-native-choice-size: 1.5rem;
1639
+ --usk-native-choice-background: var(--usk-native-control-bg);
1640
+ --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
1641
+ --usk-native-checkbox-radius: .3rem;
1642
+ --usk-native-radio-radius: 50%;
1643
+ --usk-native-choice-shadow: none;
1644
+ --usk-native-choice-checked-background: var(--usk-native-primary);
1645
+ --usk-native-choice-mark-color: var(--usk-native-on-primary);
1646
+ --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%);
1647
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
1648
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
1649
+ --usk-native-select-padding-inline-end: 2.5rem;
1650
+ --usk-native-range-track-size: .45rem;
1651
+ --usk-native-range-track-background: var(--usk-native-track);
1652
+ --usk-native-range-track-border: 0 solid transparent;
1653
+ --usk-native-range-track-radius: 999px;
1654
+ --usk-native-range-track-shadow: none;
1655
+ --usk-native-range-progress-background: var(--usk-native-track-fill);
1656
+ --usk-native-range-thumb-size: 1.2rem;
1657
+ --usk-native-range-thumb-background: var(--usk-native-thumb);
1658
+ --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1659
+ --usk-native-range-thumb-radius: 50%;
1660
+ --usk-native-range-thumb-shadow: var(--usk-native-shadow);
1661
+ --usk-native-progress-size: .9rem;
1662
+ --usk-native-progress-track-background: var(--usk-native-track);
1663
+ --usk-native-progress-track-border: 0 solid transparent;
1664
+ --usk-native-progress-track-radius: 999px;
1665
+ --usk-native-progress-track-shadow: none;
1666
+ --usk-native-progress-value-background: var(--usk-native-track-fill);
1667
+ --usk-native-progress-value-radius: inherit;
1668
+ --usk-native-progress-value-shadow: none;
1669
+ --usk-native-meter-optimum-background: var(--usk-native-success);
1670
+ --usk-native-meter-suboptimum-background: var(--usk-native-warning);
1671
+ --usk-native-meter-critical-background: var(--usk-native-danger);
1672
+ --usk-native-file-button-background: var(--usk-native-primary);
1673
+ --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
1674
+ --usk-native-file-button-radius: var(--usk-native-radius-sm);
1675
+ --usk-native-file-button-shadow: var(--usk-native-shadow);
1676
+ --usk-native-color-swatch-border: 0 solid transparent;
1677
+ --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
1678
+ --usk-native-indicator-opacity: .78;
1679
+ --usk-native-indicator-filter: none;
1680
+ --usk-native-scrollbar-size: .75rem;
1681
+ --usk-native-scrollbar-track: var(--usk-native-track);
1682
+ --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
1683
+ --usk-native-scrollbar-radius: 999px;
1637
1684
  --usk-native-shadow: none;
1638
1685
  --usk-native-shadow-md: var(--usk-native-shadow);
1639
1686
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -1641,7 +1688,7 @@
1641
1688
  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
1689
 
1643
1690
  /* 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));
1691
+ --ui-color-bg: var(--usk-native-bg);
1645
1692
  --ui-color-surface: var(--usk-native-surface-strong);
1646
1693
  --ui-color-text: var(--usk-native-text);
1647
1694
  --ui-color-muted: var(--usk-native-text-muted);
@@ -1655,7 +1702,7 @@
1655
1702
  --ui-motion-easing: var(--usk-motion-easing);
1656
1703
  }
1657
1704
 
1658
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1705
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1659
1706
  color: var(--usk-native-text);
1660
1707
  font-family: var(--usk-native-font-heading);
1661
1708
  line-height: 1.15;
@@ -1663,42 +1710,42 @@
1663
1710
  }
1664
1711
 
1665
1712
  @supports (text-wrap: balance) {
1666
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1713
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1667
1714
  }
1668
1715
 
1669
- [data-ui][data-theme][data-mode] :where(hgroup) {
1716
+ [data-ui][data-mode] :where(hgroup) {
1670
1717
  display: grid;
1671
1718
  gap: .35rem;
1672
1719
  margin-block: 0 1rem;
1673
1720
  }
1674
1721
 
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); }
1722
+ [data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1723
+ [data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1724
+ [data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1678
1725
 
1679
- [data-ui][data-theme][data-mode] :where(p) {
1726
+ [data-ui][data-mode] :where(p) {
1680
1727
  margin: 0 0 1rem;
1681
1728
  color: var(--usk-native-text-muted);
1682
1729
  line-height: 1.7;
1683
1730
  }
1684
1731
 
1685
- [data-ui][data-theme][data-mode] :where(a) {
1732
+ [data-ui][data-mode] :where(a) {
1686
1733
  color: var(--usk-native-link);
1687
1734
  text-decoration-thickness: .08em;
1688
1735
  text-underline-offset: .18em;
1689
1736
  }
1690
1737
 
1691
- [data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1738
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
1692
1739
 
1693
- [data-ui][data-theme][data-mode] :where(ul, ol, menu) {
1740
+ [data-ui][data-mode] :where(ul, ol, menu) {
1694
1741
  margin: 0 0 1rem;
1695
1742
  padding-left: 1.35rem;
1696
1743
  color: var(--usk-native-text-muted);
1697
1744
  }
1698
1745
 
1699
- [data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }
1746
+ [data-ui][data-mode] :where(li) { margin-block: .25rem; }
1700
1747
 
1701
- [data-ui][data-theme][data-mode] :where(blockquote) {
1748
+ [data-ui][data-mode] :where(blockquote) {
1702
1749
  margin: 1.25rem 0;
1703
1750
  padding: 1rem 1.25rem;
1704
1751
  color: var(--usk-native-text);
@@ -1707,7 +1754,7 @@
1707
1754
  border-radius: var(--usk-native-radius);
1708
1755
  }
1709
1756
 
1710
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
1757
+ [data-ui][data-mode] :where(code, kbd, samp) {
1711
1758
  padding: .15em .35em;
1712
1759
  color: var(--usk-native-text);
1713
1760
  background: var(--usk-native-surface-soft);
@@ -1717,7 +1764,7 @@
1717
1764
  font-size: .92em;
1718
1765
  }
1719
1766
 
1720
- [data-ui][data-theme][data-mode] :where(pre) {
1767
+ [data-ui][data-mode] :where(pre) {
1721
1768
  overflow: auto;
1722
1769
  margin: 1rem 0;
1723
1770
  padding: 1rem;
@@ -1727,57 +1774,88 @@
1727
1774
  border-radius: var(--usk-native-radius);
1728
1775
  }
1729
1776
 
1730
- [data-ui][data-theme][data-mode] :where(pre code) {
1777
+ [data-ui][data-mode] :where(pre code) {
1731
1778
  display: block;
1732
1779
  padding: 0;
1733
1780
  background: transparent;
1734
1781
  border: 0;
1735
1782
  }
1736
1783
 
1737
- [data-ui][data-theme][data-mode] :where(hr) {
1784
+ [data-ui][data-mode] :where(hr) {
1738
1785
  height: 1px;
1739
1786
  margin: 2rem 0;
1740
1787
  background: var(--usk-native-border);
1741
1788
  border: 0;
1742
1789
  }
1743
1790
 
1744
- [data-ui][data-theme][data-mode] :where(mark) {
1791
+ [data-ui][data-mode] :where(mark) {
1745
1792
  padding-inline: .15em;
1746
1793
  color: var(--usk-native-text);
1747
1794
  background: rgb(var(--usk-warning-rgb) / .32);
1748
1795
  border-radius: .2em;
1749
1796
  }
1750
1797
 
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; }
1798
+ [data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1799
+ [data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
1753
1800
 
1754
- [data-ui][data-theme][data-mode] :where(abbr[title]) {
1801
+ [data-ui][data-mode] :where(abbr[title]) {
1755
1802
  text-decoration: underline dotted var(--usk-native-primary);
1756
1803
  text-underline-offset: .18em;
1757
1804
  cursor: help;
1758
1805
  }
1759
1806
 
1760
- [data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1807
+ [data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1761
1808
  max-width: 100%;
1762
1809
  }
1763
1810
 
1764
- [data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1811
+ [data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
1765
1812
 
1766
- [data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }
1813
+ /** Native playback retains browser accessibility while inheriting preset material and geometry. */
1814
+ [data-ui][data-mode] audio[controls] {
1815
+ display: block;
1816
+ box-sizing: border-box;
1817
+ inline-size: 100%;
1818
+ min-inline-size: 0;
1819
+ block-size: 60px;
1820
+ padding: 3px;
1821
+ background: var(--usk-native-control-bg);
1822
+ color: var(--usk-native-text);
1823
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
1824
+ border-radius: var(--usk-native-radius);
1825
+ box-shadow: var(--usk-native-shadow);
1826
+ accent-color: var(--usk-native-primary);
1827
+ color-scheme: light;
1828
+ }
1829
+ [data-ui][data-mode="dark"] audio[controls],
1830
+ [data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
1831
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
1832
+ border-radius: var(--usk-native-radius);
1833
+ background: transparent;
1834
+ }
1835
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
1836
+ background: var(--usk-native-control-bg);
1837
+ color: var(--usk-native-text);
1838
+ }
1839
+ [data-ui][data-mode] audio[controls]:focus-visible {
1840
+ outline: 2px solid var(--usk-native-focus);
1841
+ outline-offset: 2px;
1842
+ }
1843
+
1844
+ [data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
1767
1845
 
1768
- [data-ui][data-theme][data-mode] :where(figcaption) {
1846
+ [data-ui][data-mode] :where(figcaption) {
1769
1847
  margin-top: .5rem;
1770
1848
  color: var(--usk-native-text-muted);
1771
1849
  font-size: .9rem;
1772
1850
  }
1773
1851
 
1774
- [data-ui][data-theme][data-mode] :where(form) {
1852
+ [data-ui][data-mode] :where(form) {
1775
1853
  display: grid;
1776
1854
  gap: var(--usk-native-field-gap);
1777
1855
  min-inline-size: 0;
1778
1856
  }
1779
1857
 
1780
- [data-ui][data-theme][data-mode] :where(fieldset) {
1858
+ [data-ui][data-mode] :where(fieldset) {
1781
1859
  display: grid;
1782
1860
  gap: .9rem;
1783
1861
  min-inline-size: 0;
@@ -1788,30 +1866,30 @@
1788
1866
  border-radius: var(--usk-native-radius);
1789
1867
  }
1790
1868
 
1791
- [data-ui][data-theme][data-mode] :where(legend) {
1869
+ [data-ui][data-mode] :where(legend) {
1792
1870
  padding-inline: .35rem;
1793
1871
  color: var(--usk-native-text);
1794
1872
  font-weight: 900;
1795
1873
  }
1796
1874
 
1797
- [data-ui][data-theme][data-mode] :where(label) {
1875
+ [data-ui][data-mode] :where(label) {
1798
1876
  color: var(--usk-native-text);
1799
1877
  font-weight: 750;
1800
1878
  }
1801
1879
 
1802
- [data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1880
+ [data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1803
1881
  display: grid;
1804
1882
  gap: var(--usk-native-field-gap);
1805
1883
  align-content: start;
1806
1884
  }
1807
1885
 
1808
- [data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1886
+ [data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1809
1887
  display: inline-flex;
1810
1888
  gap: var(--usk-native-field-gap);
1811
1889
  align-items: center;
1812
1890
  }
1813
1891
 
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) {
1892
+ [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
1893
  width: 100%;
1816
1894
  min-block-size: var(--usk-native-control-min-block-size);
1817
1895
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1822,24 +1900,44 @@
1822
1900
  font: inherit;
1823
1901
  }
1824
1902
 
1825
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
1903
+ [data-ui][data-mode] :where(input, textarea, select, button) {
1826
1904
  color-scheme: inherit;
1827
1905
  accent-color: var(--usk-native-primary);
1828
1906
  }
1829
1907
 
1830
- [data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
1908
+ [data-ui][data-mode] :where(input, textarea)::placeholder {
1831
1909
  color: var(--usk-native-text-muted);
1832
1910
  opacity: .78;
1833
1911
  }
1834
1912
 
1835
- [data-ui][data-theme][data-mode] :where(textarea) {
1913
+ [data-ui][data-mode] :where(textarea) {
1836
1914
  min-height: 7rem;
1837
1915
  resize: vertical;
1838
1916
  }
1839
1917
 
1840
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1918
+ [data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
1919
+
1920
+ [data-ui][data-mode] :where(select:not([multiple])) {
1921
+ -webkit-appearance: none;
1922
+ appearance: none;
1923
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
1924
+ background-image: var(--usk-native-select-indicator-image);
1925
+ background-repeat: no-repeat;
1926
+ background-position: var(--usk-native-select-indicator-position);
1927
+ background-size: var(--usk-native-select-indicator-size);
1928
+ }
1929
+
1930
+ [data-ui][data-mode] :where(select[multiple]) {
1931
+ padding-inline-end: var(--usk-native-control-padding-inline);
1932
+ background-image: none;
1933
+ }
1934
+
1935
+ [dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
1936
+ [data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
1937
+ --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
1938
+ }
1841
1939
 
1842
- [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1940
+ [data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
1941
  -webkit-appearance: none;
1844
1942
  appearance: none;
1845
1943
  box-sizing: border-box;
@@ -1848,7 +1946,7 @@
1848
1946
  font: inherit;
1849
1947
  }
1850
1948
 
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])) {
1949
+ [data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1852
1950
  color: var(--usk-native-on-primary);
1853
1951
  background: var(--usk-native-primary);
1854
1952
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1859,29 +1957,56 @@
1859
1957
  }
1860
1958
 
1861
1959
  /* 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"]) {
1960
+ [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
1961
  display: inline-flex;
1864
1962
  align-items: center;
1865
1963
  justify-content: center;
1866
1964
  gap: .55rem;
1867
1965
  }
1868
1966
 
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 {
1967
+ [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
1968
  flex: 0 0 1em;
1871
1969
  }
1872
1970
 
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) {
1971
+ [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
1972
  background: var(--usk-native-primary-hover);
1875
1973
  border-color: var(--usk-native-primary-hover);
1876
1974
  }
1877
1975
 
1878
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1879
- inline-size: 1.5rem;
1880
- block-size: 1.5rem;
1976
+ [data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1977
+ -webkit-appearance: none;
1978
+ appearance: none;
1979
+ inline-size: var(--usk-native-choice-size);
1980
+ block-size: var(--usk-native-choice-size);
1981
+ background: var(--usk-native-choice-background);
1982
+ border: var(--usk-native-choice-border);
1983
+ box-shadow: var(--usk-native-choice-shadow);
1881
1984
  accent-color: var(--usk-native-primary);
1882
1985
  }
1883
1986
 
1884
- [data-ui][data-theme][data-mode] :where(input[type="range"]) {
1987
+ [data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
1988
+ [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
1989
+
1990
+ [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
1991
+ background-color: var(--usk-native-choice-checked-background);
1992
+ 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%);
1993
+ }
1994
+
1995
+ [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
1996
+ border-color: var(--usk-native-primary);
1997
+ filter: brightness(1.04);
1998
+ }
1999
+
2000
+ [data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
2001
+ filter: brightness(.94);
2002
+ transform: scale(.94);
2003
+ }
2004
+
2005
+ [data-ui][data-mode] :where(input[type="radio"]:checked) {
2006
+ background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
2007
+ }
2008
+
2009
+ [data-ui][data-mode] :where(input[type="range"]) {
1885
2010
  -webkit-appearance: none;
1886
2011
  appearance: none;
1887
2012
  width: 100%;
@@ -1890,40 +2015,50 @@
1890
2015
  accent-color: var(--usk-native-primary);
1891
2016
  }
1892
2017
 
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;
2018
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
2019
+ block-size: var(--usk-native-range-track-size);
2020
+ background: var(--usk-native-range-track-background);
2021
+ border: var(--usk-native-range-track-border);
2022
+ border-radius: var(--usk-native-range-track-radius);
2023
+ box-shadow: var(--usk-native-range-track-shadow);
1897
2024
  }
1898
2025
 
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;
2026
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
2027
+ block-size: var(--usk-native-range-track-size);
2028
+ background: var(--usk-native-range-track-background);
2029
+ border: var(--usk-native-range-track-border);
2030
+ border-radius: var(--usk-native-range-track-radius);
2031
+ box-shadow: var(--usk-native-range-track-shadow);
2032
+ }
2033
+
2034
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
2035
+ block-size: var(--usk-native-range-track-size);
2036
+ background: var(--usk-native-range-progress-background);
2037
+ border-radius: var(--usk-native-range-track-radius);
1903
2038
  }
1904
2039
 
1905
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
2040
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
1906
2041
  -webkit-appearance: none;
1907
2042
  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);
2043
+ inline-size: var(--usk-native-range-thumb-size);
2044
+ block-size: var(--usk-native-range-thumb-size);
2045
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
2046
+ background: var(--usk-native-range-thumb-background);
2047
+ border: var(--usk-native-range-thumb-border);
2048
+ border-radius: var(--usk-native-range-thumb-radius);
2049
+ box-shadow: var(--usk-native-range-thumb-shadow);
1915
2050
  }
1916
2051
 
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);
2052
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
2053
+ inline-size: var(--usk-native-range-thumb-size);
2054
+ block-size: var(--usk-native-range-thumb-size);
2055
+ background: var(--usk-native-range-thumb-background);
2056
+ border: var(--usk-native-range-thumb-border);
2057
+ border-radius: var(--usk-native-range-thumb-radius);
2058
+ box-shadow: var(--usk-native-range-thumb-shadow);
1924
2059
  }
1925
2060
 
1926
- [data-ui][data-theme][data-mode] :where(input[type="color"]) {
2061
+ [data-ui][data-mode] :where(input[type="color"]) {
1927
2062
  inline-size: 3rem;
1928
2063
  block-size: 2.4rem;
1929
2064
  padding: .2rem;
@@ -1932,84 +2067,86 @@
1932
2067
  border-radius: var(--usk-native-radius-sm);
1933
2068
  }
1934
2069
 
1935
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
2070
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
1936
2071
  padding: 0;
1937
2072
  }
1938
2073
 
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);
2074
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
2075
+ border: var(--usk-native-color-swatch-border);
2076
+ border-radius: var(--usk-native-color-swatch-radius);
1942
2077
  }
1943
2078
 
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);
2079
+ [data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
2080
+ border: var(--usk-native-color-swatch-border);
2081
+ border-radius: var(--usk-native-color-swatch-radius);
1947
2082
  }
1948
2083
 
1949
- [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
2084
+ [data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
1950
2085
 
1951
2086
  /* 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 {
2087
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2088
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
1954
2089
  margin-inline-end: .75rem;
1955
2090
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
1956
2091
  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);
2092
+ background: var(--usk-native-file-button-background);
2093
+ border: var(--usk-native-file-button-border);
2094
+ border-radius: var(--usk-native-file-button-radius);
2095
+ box-shadow: var(--usk-native-file-button-shadow);
1960
2096
  font-weight: 800;
1961
2097
  cursor: pointer;
1962
2098
  }
1963
2099
 
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 {
2100
+ [data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
2101
+ [data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
1966
2102
  background: var(--usk-native-primary-hover);
1967
2103
  border-color: var(--usk-native-primary-hover);
1968
2104
  }
1969
2105
 
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 {
2106
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
2107
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
1972
2108
  box-shadow: var(--usk-native-focus-ring);
1973
2109
  }
1974
2110
 
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 {
2111
+ [data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
2112
+ [data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
1977
2113
  filter: brightness(.96);
1978
2114
  }
1979
2115
 
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 {
2116
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
2117
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
1982
2118
  color: var(--usk-native-text-muted);
1983
2119
  background: var(--usk-native-surface-soft);
1984
2120
  border-color: var(--usk-native-border);
1985
2121
  cursor: not-allowed;
1986
2122
  }
1987
2123
 
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) {
2124
+ [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
2125
  background: var(--usk-native-surface-soft);
1990
2126
  }
1991
2127
 
1992
- [data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
2128
+ [data-ui][data-mode] :where(input:required, textarea:required, select:required) {
1993
2129
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
1994
2130
  }
1995
2131
 
1996
- [data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
2132
+ [data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
1997
2133
  border-color: var(--usk-native-success);
1998
2134
  }
1999
2135
 
2000
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2136
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2001
2137
  border-color: var(--usk-native-danger);
2002
2138
  }
2003
2139
 
2004
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2140
+ [data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2141
+ 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
2142
  accent-color: var(--usk-native-warning);
2006
2143
  }
2007
2144
 
2008
- [data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2145
+ [data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2009
2146
  filter: brightness(.96);
2010
2147
  }
2011
2148
 
2012
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2149
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2013
2150
  color: var(--usk-native-text-muted);
2014
2151
  background: var(--usk-native-surface-soft);
2015
2152
  border-color: var(--usk-native-border);
@@ -2018,37 +2155,36 @@
2018
2155
  cursor: not-allowed;
2019
2156
  }
2020
2157
 
2021
- [data-ui][data-theme][data-mode] :where(table) {
2158
+ [data-ui][data-mode] :where(table) {
2022
2159
  width: 100%;
2023
2160
  margin: 1rem 0;
2024
- overflow: hidden;
2025
2161
  background: var(--usk-native-surface);
2026
2162
  border: var(--usk-native-border-width) solid var(--usk-native-border);
2027
2163
  border-radius: var(--usk-native-radius);
2028
2164
  border-collapse: collapse;
2029
2165
  }
2030
2166
 
2031
- [data-ui][data-theme][data-mode] :where(caption) {
2167
+ [data-ui][data-mode] :where(caption) {
2032
2168
  caption-side: bottom;
2033
2169
  padding: .75rem;
2034
2170
  color: var(--usk-native-text-muted);
2035
2171
  font-size: .9rem;
2036
2172
  }
2037
2173
 
2038
- [data-ui][data-theme][data-mode] :where(th, td) {
2174
+ [data-ui][data-mode] :where(th, td) {
2039
2175
  padding: .8rem .9rem;
2040
2176
  text-align: left;
2041
2177
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
2042
2178
  }
2043
2179
 
2044
- [data-ui][data-theme][data-mode] :where(th) {
2180
+ [data-ui][data-mode] :where(th) {
2045
2181
  color: var(--usk-native-text);
2046
2182
  background: var(--usk-native-surface-soft);
2047
2183
  }
2048
2184
 
2049
- [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2185
+ [data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2050
2186
 
2051
- [data-ui][data-theme][data-mode] :where(details) {
2187
+ [data-ui][data-mode] :where(details) {
2052
2188
  margin: 1rem 0;
2053
2189
  padding: .9rem 1rem;
2054
2190
  color: var(--usk-native-text);
@@ -2057,13 +2193,13 @@
2057
2193
  border-radius: var(--usk-native-radius);
2058
2194
  }
2059
2195
 
2060
- [data-ui][data-theme][data-mode] :where(summary) {
2196
+ [data-ui][data-mode] :where(summary) {
2061
2197
  color: var(--usk-native-text);
2062
2198
  font-weight: 900;
2063
2199
  cursor: pointer;
2064
2200
  }
2065
2201
 
2066
- [data-ui][data-theme][data-mode] :where(dialog) {
2202
+ [data-ui][data-mode] :where(dialog) {
2067
2203
  max-width: min(92vw, 42rem);
2068
2204
  padding: 0;
2069
2205
  color: var(--usk-native-text);
@@ -2073,47 +2209,68 @@
2073
2209
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
2074
2210
  }
2075
2211
 
2076
- [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2212
+ [data-ui][data-mode] :where(dialog p) { color: inherit; }
2077
2213
 
2078
- [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2214
+ [data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2079
2215
 
2080
- [data-ui][data-theme][data-mode] :where(progress, meter) {
2216
+ [data-ui][data-mode] :where(progress, meter) {
2217
+ -webkit-appearance: none;
2218
+ appearance: none;
2081
2219
  width: 100%;
2082
- min-height: .9rem;
2220
+ min-height: var(--usk-native-progress-size);
2083
2221
  accent-color: var(--usk-native-primary);
2084
2222
  }
2085
2223
 
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;
2224
+ [data-ui][data-mode] :where(progress:not([value])) {
2225
+ background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
2226
+ background-size: 200% 100%;
2227
+ border: var(--usk-native-progress-track-border);
2228
+ border-radius: var(--usk-native-progress-track-radius);
2229
+ box-shadow: var(--usk-native-progress-track-shadow);
2230
+ animation: usk-native-progress-indeterminate 1.2s linear infinite;
2090
2231
  }
2091
2232
 
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;
2233
+ @keyframes usk-native-progress-indeterminate {
2234
+ to { background-position: -2rem 0; }
2096
2235
  }
2097
2236
 
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;
2237
+ [data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
2238
+ [data-ui][data-mode] :where(meter)::-webkit-meter-bar {
2239
+ background: var(--usk-native-progress-track-background);
2240
+ border: var(--usk-native-progress-track-border);
2241
+ border-radius: var(--usk-native-progress-track-radius);
2242
+ box-shadow: var(--usk-native-progress-track-shadow);
2243
+ }
2244
+
2245
+ [data-ui][data-mode] :where(progress)::-webkit-progress-value,
2246
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
2247
+ background: var(--usk-native-progress-value-background);
2248
+ border-radius: var(--usk-native-progress-value-radius);
2249
+ box-shadow: var(--usk-native-progress-value-shadow);
2250
+ }
2251
+
2252
+ [data-ui][data-mode] :where(progress)::-moz-progress-bar,
2253
+ [data-ui][data-mode] :where(meter)::-moz-meter-bar {
2254
+ background: var(--usk-native-progress-value-background);
2255
+ border-radius: var(--usk-native-progress-value-radius);
2256
+ box-shadow: var(--usk-native-progress-value-shadow);
2102
2257
  }
2103
2258
 
2104
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2105
- background: var(--usk-native-warning);
2259
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
2260
+
2261
+ [data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2262
+ background: var(--usk-native-meter-suboptimum-background);
2106
2263
  }
2107
2264
 
2108
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2109
- background: var(--usk-native-danger);
2265
+ [data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2266
+ background: var(--usk-native-meter-critical-background);
2110
2267
  }
2111
2268
 
2112
- [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2269
+ [data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2113
2270
  color: var(--usk-native-text);
2114
2271
  }
2115
2272
 
2116
- [data-ui][data-theme][data-mode] :where(article, aside) {
2273
+ [data-ui][data-mode] :where(article, aside) {
2117
2274
  padding: var(--usk-native-panel-padding);
2118
2275
  color: var(--usk-native-text);
2119
2276
  background: var(--usk-native-card-bg);
@@ -2122,113 +2279,132 @@
2122
2279
  box-shadow: var(--usk-native-shadow);
2123
2280
  }
2124
2281
 
2125
- [data-ui][data-theme][data-mode] :where(dl) {
2282
+ [data-ui][data-mode] :where(dl) {
2126
2283
  margin: 0 0 1rem;
2127
2284
  color: var(--usk-native-text-muted);
2128
2285
  }
2129
2286
 
2130
- [data-ui][data-theme][data-mode] :where(dt) {
2287
+ [data-ui][data-mode] :where(dt) {
2131
2288
  color: var(--usk-native-text);
2132
2289
  font-weight: 900;
2133
2290
  }
2134
2291
 
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 {
2292
+ [data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2293
+ [data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2294
+ [data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2295
+ [data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2296
+ [data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2297
+ [data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2298
+ [data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2299
+ [data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2300
+ [data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2301
+ [data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2302
+ [data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2303
+ [data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2304
+ [data-ui][data-mode] :where(datalist) { display: none; }
2305
+
2306
+ [data-ui][data-mode] :where(summary, li)::marker {
2150
2307
  color: var(--usk-native-indicator);
2151
2308
  }
2152
2309
 
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;
2310
+ [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 {
2311
+ opacity: var(--usk-native-indicator-opacity);
2312
+ filter: var(--usk-native-indicator-filter);
2155
2313
  accent-color: var(--usk-native-indicator);
2156
2314
  }
2157
2315
 
2158
- [data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2316
+ [data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2159
2317
  accent-color: var(--usk-native-indicator);
2160
2318
  }
2161
2319
 
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 {
2320
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2321
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2164
2322
  opacity: .72;
2165
2323
  }
2166
2324
 
2167
- [data-ui][data-theme][data-mode] :where(select)::picker-icon {
2325
+ [data-ui][data-mode] :where(select)::picker-icon {
2168
2326
  color: var(--usk-native-indicator);
2327
+ opacity: var(--usk-native-indicator-opacity);
2328
+ filter: var(--usk-native-indicator-filter);
2169
2329
  }
2170
2330
 
2171
- [data-ui][data-theme][data-mode] :where(:focus-visible) {
2331
+ [data-ui][data-mode] :where(:focus-visible) {
2172
2332
  outline: 3px solid var(--usk-native-focus);
2173
2333
  outline-offset: 3px;
2174
2334
  box-shadow: var(--usk-native-focus-ring);
2175
2335
  }
2176
2336
 
2177
- [data-ui][data-theme][data-mode] :where(:target) {
2337
+ [data-ui][data-mode] :where(:target) {
2178
2338
  scroll-margin-top: 6rem;
2179
2339
  outline: 3px solid var(--usk-native-focus);
2180
2340
  outline-offset: .35rem;
2181
2341
  }
2182
2342
 
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; }
2343
+ [data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2344
+ [data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2345
+ [data-ui][data-mode] :where([hidden]) { display: none !important; }
2346
+ [data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2347
+ [data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
2348
+ [data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
2349
+ [data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
2190
2350
 
2191
2351
  @supports (color: color-mix(in srgb, black, white)) {
2192
- [data-ui][data-theme][data-mode] {
2352
+ [data-ui][data-mode] {
2193
2353
  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
2354
  }
2195
2355
 
2196
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2356
+ [data-ui][data-mode] :where(code, kbd, samp) {
2197
2357
  border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
2358
  }
2199
2359
 
2200
- [data-ui][data-theme][data-mode] :where(mark) {
2360
+ [data-ui][data-mode] :where(mark) {
2201
2361
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
2362
  }
2203
2363
 
2204
- [data-ui][data-theme][data-mode] :where(fieldset) {
2364
+ [data-ui][data-mode] :where(fieldset) {
2205
2365
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
2366
  }
2207
2367
 
2208
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2368
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
2369
  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
2370
  }
2211
2371
 
2212
- [data-ui][data-theme][data-mode] :where(th) {
2372
+ [data-ui][data-mode] :where(th) {
2213
2373
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
2374
  }
2215
2375
  }
2216
2376
 
2217
2377
  @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 {
2378
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2379
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2220
2380
  transition-duration: 1ms !important;
2221
2381
  }
2382
+
2383
+ [data-ui][data-mode] :where(progress:not([value])) {
2384
+ animation: none;
2385
+ }
2386
+ }
2387
+
2388
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
2389
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
2390
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
2391
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
2392
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
2393
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
2394
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
2395
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
2396
+ box-shadow: none;
2397
+ filter: none;
2222
2398
  }
2223
2399
 
2224
2400
  @media (forced-colors: active) {
2225
2401
  @supports (forced-color-adjust: auto) {
2226
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2402
+ [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
2403
  forced-color-adjust: auto;
2228
2404
  }
2229
2405
  }
2230
2406
 
2231
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2407
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2232
2408
  border-color: Mark;
2233
2409
  }
2234
2410
  }
@@ -2244,7 +2420,7 @@
2244
2420
  ========================================================= */
2245
2421
 
2246
2422
  @layer ui-style-kit.components {
2247
- [data-ui][data-theme][data-mode] :where(
2423
+ [data-ui][data-mode] :where(
2248
2424
  h1,
2249
2425
  h2,
2250
2426
  h3,
@@ -2261,6 +2437,9 @@
2261
2437
  label,
2262
2438
  legend,
2263
2439
  summary,
2440
+ strong,
2441
+ small,
2442
+ em,
2264
2443
  code,
2265
2444
  kbd,
2266
2445
  samp,
@@ -2270,10 +2449,11 @@
2270
2449
  ) {
2271
2450
  max-inline-size: 100%;
2272
2451
  min-inline-size: 0;
2273
- overflow-wrap: anywhere;
2452
+ overflow-wrap: break-word;
2453
+ word-break: normal;
2274
2454
  }
2275
2455
 
2276
- [data-ui][data-theme][data-mode] :where(
2456
+ [data-ui][data-mode] :where(
2277
2457
  [class~="saas-surface"],
2278
2458
  [class~="saas-surface-sm"],
2279
2459
  [class~="saas-surface-lg"],
@@ -2395,13 +2575,12 @@
2395
2575
  [class~="rg-alert"],
2396
2576
  [class~="rg-table-wrap"],
2397
2577
  [class~="rg-nav"]
2398
- ), [data-ui]:where([data-ui="retro-glass"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2578
+ ), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2399
2579
  max-inline-size: 100%;
2400
2580
  min-inline-size: 0;
2401
- overflow-wrap: anywhere;
2402
2581
  }
2403
2582
 
2404
- [data-ui][data-theme][data-mode] :where(
2583
+ [data-ui][data-mode] :where(
2405
2584
  [class~="saas-button"],
2406
2585
  [class~="saas-icon-button"],
2407
2586
  [class~="saas-badge"],
@@ -2446,13 +2625,15 @@
2446
2625
  [class~="rg-icon-button"],
2447
2626
  [class~="rg-badge"],
2448
2627
  [class~="rg-nav-link"]
2449
- ), [data-ui]:where([data-ui="retro-glass"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2628
+ ), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2450
2629
  max-inline-size: 100%;
2451
2630
  min-inline-size: 0;
2631
+ overflow-wrap: break-word;
2632
+ word-break: normal;
2452
2633
  white-space: normal;
2453
2634
  }
2454
2635
 
2455
- [data-ui][data-theme][data-mode] :where(
2636
+ [data-ui][data-mode] :where(
2456
2637
  .saas-button,
2457
2638
  .saas-icon-button,
2458
2639
  .saas-button-pill,
@@ -2486,7 +2667,7 @@
2486
2667
  .rg-button,
2487
2668
  .rg-icon-button,
2488
2669
  .rg-button-pill
2489
- ), [data-ui]:where([data-ui="retro-glass"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2670
+ ), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2490
2671
  box-sizing: border-box;
2491
2672
  display: inline-flex;
2492
2673
  align-items: center;
@@ -2498,7 +2679,7 @@
2498
2679
  vertical-align: middle;
2499
2680
  }
2500
2681
 
2501
- [data-ui][data-theme][data-mode] :where(
2682
+ [data-ui][data-mode] :where(
2502
2683
  .saas-button-pill,
2503
2684
  .bento-button-pill,
2504
2685
  .max-button-pill,
@@ -2521,7 +2702,8 @@
2521
2702
  font-weight: 850;
2522
2703
  text-align: center;
2523
2704
  text-decoration: none;
2524
- overflow-wrap: anywhere;
2705
+ overflow-wrap: break-word;
2706
+ word-break: normal;
2525
2707
  white-space: normal;
2526
2708
  cursor: pointer;
2527
2709
  transition:
@@ -2555,7 +2737,7 @@
2555
2737
  .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
2556
2738
  .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
2557
2739
 
2558
- [data-ui][data-theme][data-mode] :where(
2740
+ [data-ui][data-mode] :where(
2559
2741
  .saas-button-pill:active,
2560
2742
  .saas-button-pill[aria-pressed="true"],
2561
2743
  .bento-button-pill:active,
@@ -2594,7 +2776,7 @@
2594
2776
  .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
2595
2777
  .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
2596
2778
 
2597
- [data-ui][data-theme][data-mode] :where(
2779
+ [data-ui][data-mode] :where(
2598
2780
  .saas-button-pill:disabled,
2599
2781
  .saas-button-pill[aria-disabled="true"],
2600
2782
  .bento-button-pill:disabled,
@@ -2624,7 +2806,7 @@
2624
2806
  transform: none;
2625
2807
  }
2626
2808
 
2627
- [data-ui][data-theme][data-mode] :where(
2809
+ [data-ui][data-mode] :where(
2628
2810
  .saas-tooltip,
2629
2811
  .saas-tooltip-top,
2630
2812
  .saas-tooltip-right,
@@ -2683,16 +2865,17 @@
2683
2865
  ) {
2684
2866
  max-inline-size: min(18rem, calc(100vw - 2rem));
2685
2867
  text-align: start;
2686
- overflow-wrap: anywhere;
2868
+ overflow-wrap: break-word;
2869
+ word-break: normal;
2687
2870
  }
2688
2871
 
2689
2872
  /* 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]) {
2873
+ [data-ui][data-mode]:where([data-ui-tooltip-anchor]),
2874
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
2692
2875
  position: relative;
2693
2876
  }
2694
2877
 
2695
- [data-ui][data-theme][data-mode] :where(
2878
+ [data-ui][data-mode] :where(
2696
2879
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
2697
2880
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
2698
2881
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -2742,10 +2925,10 @@
2742
2925
  z-index: 20;
2743
2926
  }
2744
2927
 
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%); }
2928
+ [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%); }
2929
+ [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%); }
2930
+ [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%); }
2931
+ [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
2932
 
2750
2933
  .saas-pill { border-radius: var(--saas-radius-pill); }
2751
2934
  .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -2895,10 +3078,72 @@
2895
3078
  }
2896
3079
  }
2897
3080
 
3081
+ /**
3082
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
3083
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
3084
+ * The root attributes intentionally raise specificity within the preset layer
3085
+ * so later style-specific defaults cannot collapse the number and caption.
3086
+ */
3087
+ @layer ui-style-kit.presets {
3088
+ [data-ui][data-mode] :where(
3089
+ .saas-badge-seal,
3090
+ .bento-badge-seal,
3091
+ .max-badge-seal,
3092
+ .bau-badge-seal,
3093
+ .tactile-badge-seal,
3094
+ .neo-badge-seal,
3095
+ .retro-badge-seal,
3096
+ .brutal-badge-seal,
3097
+ .cyber-badge-seal,
3098
+ .y2k-badge-seal,
3099
+ .rg-badge-seal,
3100
+ .luxe-badge-seal,
3101
+ .organic-badge-seal,
3102
+ .utility-badge-seal,
3103
+ .blueprint-badge-seal,
3104
+ .deco-badge-seal,
3105
+ .clay-badge-seal,
3106
+ .terminal-badge-seal,
3107
+ .paper-badge-seal,
3108
+ .noir-badge-seal
3109
+ ) > strong {
3110
+ color: inherit;
3111
+ font-size: 1.5rem;
3112
+ line-height: .9;
3113
+ }
3114
+
3115
+ [data-ui][data-mode] :where(
3116
+ .saas-badge-seal,
3117
+ .bento-badge-seal,
3118
+ .max-badge-seal,
3119
+ .bau-badge-seal,
3120
+ .tactile-badge-seal,
3121
+ .neo-badge-seal,
3122
+ .retro-badge-seal,
3123
+ .brutal-badge-seal,
3124
+ .cyber-badge-seal,
3125
+ .y2k-badge-seal,
3126
+ .rg-badge-seal,
3127
+ .luxe-badge-seal,
3128
+ .organic-badge-seal,
3129
+ .utility-badge-seal,
3130
+ .blueprint-badge-seal,
3131
+ .deco-badge-seal,
3132
+ .clay-badge-seal,
3133
+ .terminal-badge-seal,
3134
+ .paper-badge-seal,
3135
+ .noir-badge-seal
3136
+ ) > small {
3137
+ color: inherit;
3138
+ font-size: .8125rem;
3139
+ line-height: 1;
3140
+ }
3141
+ }
3142
+
2898
3143
  /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
3144
  /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
3145
  @layer ui-style-kit.components {
2901
- [data-ui][data-theme][data-mode] :where(
3146
+ [data-ui][data-mode] :where(
2902
3147
  .luxe-surface,
2903
3148
  .luxe-surface-sm,
2904
3149
  .luxe-surface-lg,
@@ -3061,13 +3306,12 @@
3061
3306
  .noir-feature-item,
3062
3307
  .noir-callout-bar,
3063
3308
  .noir-media-scrim
3064
- ), [data-ui]:where([data-ui="retro-glass"])[data-theme][data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3309
+ ), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3065
3310
  max-inline-size: 100%;
3066
3311
  min-inline-size: 0;
3067
- overflow-wrap: anywhere;
3068
3312
  }
3069
3313
 
3070
- [data-ui][data-theme][data-mode] :where(
3314
+ [data-ui][data-mode] :where(
3071
3315
  .luxe-button,
3072
3316
  .luxe-icon-button,
3073
3317
  .luxe-button-cut,
@@ -3140,13 +3384,15 @@
3140
3384
  .noir-badge-seal,
3141
3385
  .noir-nav-link,
3142
3386
  .noir-icon-medallion
3143
- ), [data-ui]:where([data-ui="retro-glass"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3387
+ ), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3144
3388
  max-inline-size: 100%;
3145
3389
  min-inline-size: 0;
3390
+ overflow-wrap: break-word;
3391
+ word-break: normal;
3146
3392
  white-space: normal;
3147
3393
  }
3148
3394
 
3149
- [data-ui][data-theme][data-mode] :where(
3395
+ [data-ui][data-mode] :where(
3150
3396
  .luxe-button,
3151
3397
  .luxe-icon-button,
3152
3398
  .luxe-button-pill,
@@ -3174,7 +3420,7 @@
3174
3420
  .noir-button,
3175
3421
  .noir-icon-button,
3176
3422
  .noir-button-pill
3177
- ), [data-ui]:where([data-ui="retro-glass"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3423
+ ), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3178
3424
  box-sizing: border-box;
3179
3425
  display: inline-flex;
3180
3426
  align-items: center;
@@ -3186,7 +3432,7 @@
3186
3432
  vertical-align: middle;
3187
3433
  }
3188
3434
 
3189
- [data-ui][data-theme][data-mode] :where(
3435
+ [data-ui][data-mode] :where(
3190
3436
  .luxe-button-pill,
3191
3437
  .organic-button-pill,
3192
3438
  .utility-button-pill,
@@ -3207,7 +3453,8 @@
3207
3453
  font-weight: 850;
3208
3454
  text-align: center;
3209
3455
  text-decoration: none;
3210
- overflow-wrap: anywhere;
3456
+ overflow-wrap: break-word;
3457
+ word-break: normal;
3211
3458
  white-space: normal;
3212
3459
  cursor: pointer;
3213
3460
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
@@ -3294,7 +3541,7 @@
3294
3541
  .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
3542
  .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
3543
 
3297
- [data-ui][data-theme][data-mode] :where(
3544
+ [data-ui][data-mode] :where(
3298
3545
  .luxe-button-pill:active,
3299
3546
  .luxe-button-pill[aria-pressed="true"],
3300
3547
  .organic-button-pill:active,
@@ -3315,7 +3562,7 @@
3315
3562
  .noir-button-pill[aria-pressed="true"]
3316
3563
  ) { transform: translateY(1px); }
3317
3564
 
3318
- [data-ui][data-theme][data-mode] :where(
3565
+ [data-ui][data-mode] :where(
3319
3566
  .luxe-button-pill:disabled,
3320
3567
  .luxe-button-pill[aria-disabled="true"],
3321
3568
  .organic-button-pill:disabled,
@@ -3336,7 +3583,7 @@
3336
3583
  .noir-button-pill[aria-disabled="true"]
3337
3584
  ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
3585
 
3339
- [data-ui][data-theme][data-mode] :where(
3586
+ [data-ui][data-mode] :where(
3340
3587
  .luxe-tooltip,
3341
3588
  .luxe-tooltip-top,
3342
3589
  .luxe-tooltip-right,
@@ -3382,9 +3629,9 @@
3382
3629
  .noir-tooltip-right,
3383
3630
  .noir-tooltip-bottom,
3384
3631
  .noir-tooltip-left
3385
- ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
3632
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
3386
3633
 
3387
- [data-ui][data-theme][data-mode] :where(
3634
+ [data-ui][data-mode] :where(
3388
3635
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
3636
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
3637
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
@@ -3423,10 +3670,10 @@
3423
3670
  [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
3671
  ) { position: absolute; z-index: 20; }
3425
3672
 
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%); }
3673
+ [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%); }
3674
+ [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%); }
3675
+ [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%); }
3676
+ [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
3677
 
3431
3678
  :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
3679
  :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); }
@@ -3522,18 +3769,41 @@
3522
3769
  --rg-transition-fast: .14s ease;
3523
3770
  --rg-transition-base: .22s ease;
3524
3771
  --rg-transition-slow: .36s ease;
3525
- --rg-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
3526
- --rg-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--rg-font-sans);
3772
+ --rg-font-sans: "DejaVu Sans", Arial, sans-serif;
3773
+ --rg-font-display: var(--rg-font-sans);
3527
3774
  --rg-font-body: var(--rg-font-sans);
3528
3775
  --rg-font-heading: var(--rg-font-display);
3529
3776
  --rg-font-control: var(--rg-font-display);
3530
- --rg-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
3777
+ --rg-font-mono: "DejaVu Sans Mono", Consolas, monospace;
3531
3778
  }
3532
3779
 
3533
3780
  [data-ui="retro-glass"][data-mode="light"] {
3534
3781
  --lightningcss-light: initial;
3535
3782
  --lightningcss-dark: ;
3536
3783
  color-scheme: light;
3784
+ --rg-fallback-bg-rgb: 216 222 229;
3785
+ --rg-fallback-surface-rgb: 246 249 252;
3786
+ --rg-fallback-surface-strong-rgb: 255 255 255;
3787
+ --rg-fallback-surface-soft-rgb: 223 229 235;
3788
+ --rg-fallback-text-rgb: 28 39 49;
3789
+ --rg-fallback-text-muted-rgb: 68 81 94;
3790
+ --rg-fallback-border-rgb: 110 120 130;
3791
+ --rg-fallback-primary-rgb: 11 99 216;
3792
+ --rg-fallback-primary-hover-rgb: 8 85 190;
3793
+ --rg-fallback-primary-text-rgb: 255 255 255;
3794
+ --rg-fallback-secondary-rgb: 223 229 235;
3795
+ --rg-fallback-secondary-hover-rgb: 207 216 224;
3796
+ --rg-fallback-secondary-text-rgb: 28 39 49;
3797
+ --rg-fallback-accent-rgb: 216 137 0;
3798
+ --rg-fallback-accent-text-rgb: 0 0 0;
3799
+ --rg-fallback-success-rgb: 76 147 0;
3800
+ --rg-fallback-success-text-rgb: 0 0 0;
3801
+ --rg-fallback-warning-rgb: 216 137 0;
3802
+ --rg-fallback-warning-text-rgb: 0 0 0;
3803
+ --rg-fallback-danger-rgb: 216 61 50;
3804
+ --rg-fallback-danger-text-rgb: 0 0 0;
3805
+ --rg-fallback-link-rgb: 8 75 158;
3806
+ --rg-fallback-focus-rgb: 20 120 233;
3537
3807
  --rg-panel-alpha: .92;
3538
3808
  --rg-panel-strong-alpha: .98;
3539
3809
  --rg-panel-soft-alpha: .74;
@@ -3541,12 +3811,43 @@
3541
3811
  --rg-glow-alpha: .24;
3542
3812
  --rg-shadow-alpha: .18;
3543
3813
  --rg-grid-alpha: .075;
3814
+ --rg-brush-line: rgb(var(--rg-text-rgb) / .035);
3815
+ --rg-glass-highlight: #ffffffe0;
3816
+ --rg-glass-midlight: #ffffff5c;
3817
+ --rg-material-shadow: rgb(var(--rg-text-rgb) / .2);
3818
+ --rg-control-text-shadow: 0 1px 0 #ffffffeb;
3819
+ --rg-dock-top: rgb(var(--rg-text-rgb) / .88);
3820
+ --rg-dock-bottom: rgb(var(--rg-text-rgb) / .98);
3821
+ --rg-dock-text: #f8fafc;
3544
3822
  }
3545
3823
 
3546
3824
  [data-ui="retro-glass"][data-mode="dark"] {
3547
3825
  --lightningcss-light: ;
3548
3826
  --lightningcss-dark: initial;
3549
3827
  color-scheme: dark;
3828
+ --rg-fallback-bg-rgb: 6 16 23;
3829
+ --rg-fallback-surface-rgb: 8 23 31;
3830
+ --rg-fallback-surface-strong-rgb: 18 38 48;
3831
+ --rg-fallback-surface-soft-rgb: 39 52 60;
3832
+ --rg-fallback-text-rgb: 240 244 246;
3833
+ --rg-fallback-text-muted-rgb: 192 203 209;
3834
+ --rg-fallback-border-rgb: 110 126 135;
3835
+ --rg-fallback-primary-rgb: 22 119 232;
3836
+ --rg-fallback-primary-hover-rgb: 39 136 243;
3837
+ --rg-fallback-primary-text-rgb: 0 0 0;
3838
+ --rg-fallback-secondary-rgb: 39 52 60;
3839
+ --rg-fallback-secondary-hover-rgb: 53 67 77;
3840
+ --rg-fallback-secondary-text-rgb: 240 244 246;
3841
+ --rg-fallback-accent-rgb: 255 173 0;
3842
+ --rg-fallback-accent-text-rgb: 0 0 0;
3843
+ --rg-fallback-success-rgb: 114 201 15;
3844
+ --rg-fallback-success-text-rgb: 0 0 0;
3845
+ --rg-fallback-warning-rgb: 255 173 0;
3846
+ --rg-fallback-warning-text-rgb: 0 0 0;
3847
+ --rg-fallback-danger-rgb: 239 69 57;
3848
+ --rg-fallback-danger-text-rgb: 0 0 0;
3849
+ --rg-fallback-link-rgb: 133 194 255;
3850
+ --rg-fallback-focus-rgb: 59 156 255;
3550
3851
  --rg-panel-alpha: .82;
3551
3852
  --rg-panel-strong-alpha: .94;
3552
3853
  --rg-panel-soft-alpha: .58;
@@ -3554,12 +3855,43 @@
3554
3855
  --rg-glow-alpha: .42;
3555
3856
  --rg-shadow-alpha: .42;
3556
3857
  --rg-grid-alpha: .12;
3858
+ --rg-brush-line: #ffffff07;
3859
+ --rg-glass-highlight: #ffffff38;
3860
+ --rg-glass-midlight: #ffffff14;
3861
+ --rg-material-shadow: #0000009e;
3862
+ --rg-control-text-shadow: 0 -1px 0 #000000db;
3863
+ --rg-dock-top: rgb(var(--rg-bg-rgb) / .88);
3864
+ --rg-dock-bottom: #000000f5;
3865
+ --rg-dock-text: #e5ebf1;
3557
3866
  }
3558
3867
 
3559
3868
  [data-ui="retro-glass"][data-mode="contrast"] {
3560
3869
  --lightningcss-light: ;
3561
3870
  --lightningcss-dark: initial;
3562
3871
  color-scheme: dark;
3872
+ --rg-fallback-bg-rgb: 0 0 0;
3873
+ --rg-fallback-surface-rgb: 5 8 12;
3874
+ --rg-fallback-surface-strong-rgb: 10 19 32;
3875
+ --rg-fallback-surface-soft-rgb: 0 0 0;
3876
+ --rg-fallback-text-rgb: 255 255 255;
3877
+ --rg-fallback-text-muted-rgb: 242 247 255;
3878
+ --rg-fallback-border-rgb: 255 255 255;
3879
+ --rg-fallback-primary-rgb: 156 197 240;
3880
+ --rg-fallback-primary-hover-rgb: 255 255 255;
3881
+ --rg-fallback-primary-text-rgb: 0 0 0;
3882
+ --rg-fallback-secondary-rgb: 0 230 255;
3883
+ --rg-fallback-secondary-hover-rgb: 255 255 255;
3884
+ --rg-fallback-secondary-text-rgb: 0 0 0;
3885
+ --rg-fallback-accent-rgb: 230 240 255;
3886
+ --rg-fallback-accent-text-rgb: 0 0 0;
3887
+ --rg-fallback-success-rgb: 0 255 144;
3888
+ --rg-fallback-success-text-rgb: 0 0 0;
3889
+ --rg-fallback-warning-rgb: 255 212 0;
3890
+ --rg-fallback-warning-text-rgb: 0 0 0;
3891
+ --rg-fallback-danger-rgb: 255 92 92;
3892
+ --rg-fallback-danger-text-rgb: 0 0 0;
3893
+ --rg-fallback-link-rgb: 156 197 240;
3894
+ --rg-fallback-focus-rgb: 255 255 255;
3563
3895
  --rg-panel-alpha: 1;
3564
3896
  --rg-panel-strong-alpha: 1;
3565
3897
  --rg-panel-soft-alpha: .92;
@@ -3567,6 +3899,14 @@
3567
3899
  --rg-glow-alpha: .68;
3568
3900
  --rg-shadow-alpha: .56;
3569
3901
  --rg-grid-alpha: .18;
3902
+ --rg-brush-line: #ffffff14;
3903
+ --rg-glass-highlight: #ffffff4d;
3904
+ --rg-glass-midlight: #ffffff1f;
3905
+ --rg-material-shadow: #000000d1;
3906
+ --rg-control-text-shadow: 0 -1px 0 #000;
3907
+ --rg-dock-top: #111;
3908
+ --rg-dock-bottom: #000;
3909
+ --rg-dock-text: #fff;
3570
3910
  }
3571
3911
 
3572
3912
  [data-ui="retro-glass"][data-theme][data-mode] {
@@ -3584,15 +3924,42 @@
3584
3924
  --rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3585
3925
  --rg-secondary-text-rgb: var(--usk-secondary-text-rgb);
3586
3926
  --rg-accent-rgb: var(--usk-accent-rgb);
3587
- --rg-success-rgb: var(--usk-success-rgb);
3588
- --rg-warning-rgb: var(--usk-warning-rgb);
3589
- --rg-danger-rgb: var(--usk-danger-rgb);
3590
- --rg-link-rgb: var(--usk-link-rgb);
3591
3927
  --rg-accent-text-rgb: var(--usk-accent-text-rgb);
3928
+ --rg-success-rgb: var(--usk-success-rgb);
3592
3929
  --rg-success-text-rgb: var(--usk-success-text-rgb);
3930
+ --rg-warning-rgb: var(--usk-warning-rgb);
3593
3931
  --rg-warning-text-rgb: var(--usk-warning-text-rgb);
3932
+ --rg-danger-rgb: var(--usk-danger-rgb);
3594
3933
  --rg-danger-text-rgb: var(--usk-danger-text-rgb);
3934
+ --rg-link-rgb: var(--usk-link-rgb);
3595
3935
  --rg-focus-rgb: var(--usk-focus-rgb);
3936
+ }
3937
+
3938
+ [data-ui="retro-glass"][data-mode] {
3939
+ --usk-native-bg: var(--rg-bg);
3940
+ --rg-bg-rgb: var(--usk-bg-rgb, var(--rg-fallback-bg-rgb));
3941
+ --rg-surface-rgb: var(--usk-surface-rgb, var(--rg-fallback-surface-rgb));
3942
+ --rg-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--rg-fallback-surface-strong-rgb));
3943
+ --rg-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--rg-fallback-surface-soft-rgb));
3944
+ --rg-text-rgb: var(--usk-text-rgb, var(--rg-fallback-text-rgb));
3945
+ --rg-text-muted-rgb: var(--usk-text-muted-rgb, var(--rg-fallback-text-muted-rgb));
3946
+ --rg-border-rgb: var(--usk-border-rgb, var(--rg-fallback-border-rgb));
3947
+ --rg-primary-rgb: var(--usk-primary-rgb, var(--rg-fallback-primary-rgb));
3948
+ --rg-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--rg-fallback-primary-hover-rgb));
3949
+ --rg-primary-text-rgb: var(--usk-primary-text-rgb, var(--rg-fallback-primary-text-rgb));
3950
+ --rg-secondary-rgb: var(--usk-secondary-rgb, var(--rg-fallback-secondary-rgb));
3951
+ --rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--rg-fallback-secondary-hover-rgb));
3952
+ --rg-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--rg-fallback-secondary-text-rgb));
3953
+ --rg-accent-rgb: var(--usk-accent-rgb, var(--rg-fallback-accent-rgb));
3954
+ --rg-accent-text-rgb: var(--usk-accent-text-rgb, var(--rg-fallback-accent-text-rgb));
3955
+ --rg-success-rgb: var(--usk-success-rgb, var(--rg-fallback-success-rgb));
3956
+ --rg-success-text-rgb: var(--usk-success-text-rgb, var(--rg-fallback-success-text-rgb));
3957
+ --rg-warning-rgb: var(--usk-warning-rgb, var(--rg-fallback-warning-rgb));
3958
+ --rg-warning-text-rgb: var(--usk-warning-text-rgb, var(--rg-fallback-warning-text-rgb));
3959
+ --rg-danger-rgb: var(--usk-danger-rgb, var(--rg-fallback-danger-rgb));
3960
+ --rg-danger-text-rgb: var(--usk-danger-text-rgb, var(--rg-fallback-danger-text-rgb));
3961
+ --rg-link-rgb: var(--usk-link-rgb, var(--rg-fallback-link-rgb));
3962
+ --rg-focus-rgb: var(--usk-focus-rgb, var(--rg-fallback-focus-rgb));
3596
3963
  --usk-native-surface: var(--rg-surface);
3597
3964
  --usk-native-surface-strong: var(--rg-surface-strong);
3598
3965
  --usk-native-surface-soft: var(--rg-surface-soft);
@@ -3622,6 +3989,61 @@
3622
3989
  --usk-native-border-width: 1px;
3623
3990
  --usk-native-field-gap: .5rem;
3624
3991
  --usk-native-panel-padding: var(--rg-space-5);
3992
+ --usk-native-control-min-block-size: 3rem;
3993
+ --usk-native-control-padding-block: .74rem;
3994
+ --usk-native-control-padding-inline: .95rem;
3995
+ --usk-native-subcontrol-padding-block: .58rem;
3996
+ --usk-native-subcontrol-padding-inline: .72rem;
3997
+ --usk-native-choice-size: 1.5rem;
3998
+ --usk-native-choice-background: var(--rg-control-bg);
3999
+ --usk-native-choice-border: 1px solid var(--rg-border);
4000
+ --usk-native-checkbox-radius: .28rem;
4001
+ --usk-native-radio-radius: 50%;
4002
+ --usk-native-choice-shadow: inset 0 1px #ffffff8c;
4003
+ --usk-native-choice-checked-background: var(--rg-primary);
4004
+ --usk-native-choice-mark-color: var(--rg-on-primary);
4005
+ --usk-native-track: var(--rg-glass-inset);
4006
+ --usk-native-track-fill: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
4007
+ --usk-native-thumb: radial-gradient(circle at 42% 30%, var(--rg-glass-highlight), transparent 32%), var(--rg-control-material);
4008
+ --usk-native-thumb-border: var(--rg-border);
4009
+ --usk-native-select-indicator-image: linear-gradient(57deg, transparent 50%, var(--rg-primary) 50%), linear-gradient(123deg, var(--rg-primary) 50%, transparent 50%);
4010
+ --usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
4011
+ --usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - .84rem) 50%;
4012
+ --usk-native-select-padding-inline-end: 2.55rem;
4013
+ --usk-native-range-track-size: .54rem;
4014
+ --usk-native-range-track-background: var(--rg-surface-soft);
4015
+ --usk-native-range-track-border: 1px solid var(--rg-border);
4016
+ --usk-native-range-track-radius: .2rem;
4017
+ --usk-native-range-track-shadow: inset 0 1px #ffffff8c;
4018
+ --usk-native-range-progress-background: var(--rg-primary);
4019
+ --usk-native-range-thumb-size: 1.35rem;
4020
+ --usk-native-range-thumb-background: var(--rg-surface-strong);
4021
+ --usk-native-range-thumb-border: 1px solid var(--rg-border);
4022
+ --usk-native-range-thumb-radius: 50%;
4023
+ --usk-native-range-thumb-shadow: inset 0 1px #ffffff8c;
4024
+ --usk-native-progress-size: .72rem;
4025
+ --usk-native-progress-track-background: var(--rg-surface-soft);
4026
+ --usk-native-progress-track-border: 1px solid var(--rg-border);
4027
+ --usk-native-progress-track-radius: .2rem;
4028
+ --usk-native-progress-track-shadow: inset 0 1px #ffffff8c;
4029
+ --usk-native-progress-value-background: var(--rg-primary);
4030
+ --usk-native-progress-value-radius: .2rem;
4031
+ --usk-native-progress-value-shadow: inset 0 1px #ffffff8c;
4032
+ --usk-native-meter-optimum-background: var(--rg-success);
4033
+ --usk-native-meter-suboptimum-background: var(--rg-warning);
4034
+ --usk-native-meter-critical-background: var(--rg-danger);
4035
+ --usk-native-file-button-background: var(--rg-primary);
4036
+ --usk-native-file-button-border: 1px solid var(--rg-border);
4037
+ --usk-native-file-button-radius: .28rem;
4038
+ --usk-native-file-button-shadow: inset 0 1px #ffffff8c;
4039
+ --usk-native-color-swatch-border: 1px solid var(--rg-border);
4040
+ --usk-native-color-swatch-radius: .28rem;
4041
+ --usk-native-indicator-opacity: .72;
4042
+ --usk-native-indicator-filter: none;
4043
+ --usk-native-scrollbar-size: .72rem;
4044
+ --usk-native-scrollbar-track: var(--rg-surface-soft);
4045
+ --usk-native-scrollbar-thumb: var(--rg-primary);
4046
+ --usk-native-scrollbar-radius: .2rem;
3625
4047
  --rg-bg: rgb(var(--rg-bg-rgb));
3626
4048
  --rg-surface: rgb(var(--rg-surface-rgb) / var(--rg-panel-alpha));
3627
4049
  --rg-surface-strong: rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-strong-alpha));
@@ -3657,38 +4079,42 @@
3657
4079
  --rg-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--rg-shadow-alpha));
3658
4080
  --rg-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .05));
3659
4081
  --rg-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .12));
3660
- --rg-theme-bg-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
3661
- --rg-theme-bg: radial-gradient(circle at 15% 15%, rgb(var(--rg-primary-rgb) / .18), transparent 28rem), radial-gradient(circle at 85% 10%, rgb(var(--rg-secondary-rgb) / .16), transparent 26rem), radial-gradient(circle at 50% 110%, rgb(var(--rg-accent-rgb) / .14), transparent 34rem), linear-gradient(90deg, rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), var(--rg-bg);
3662
- --rg-card-bg: linear-gradient(135deg, rgb(var(--rg-primary-rgb) / .1), rgb(var(--rg-accent-rgb) / .055) 42%, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)) 100%), var(--rg-surface);
3663
- --rg-control-bg: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)), rgb(var(--rg-surface-soft-rgb) / var(--rg-panel-soft-alpha)));
4082
+ --rg-theme-bg-size: auto;
4083
+ --rg-theme-bg: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(90deg, rgb(var(--rg-primary-rgb) / .025), transparent 18%, transparent 82%, rgb(var(--rg-secondary-rgb) / .025)), var(--rg-bg);
4084
+ --rg-brushed-chrome: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 46%, rgb(var(--rg-surface-soft-rgb) / .54) 52%, rgb(var(--rg-surface-rgb) / .88));
4085
+ --rg-glass-pane: linear-gradient(180deg, var(--rg-glass-highlight), rgb(var(--rg-surface-strong-rgb) / .28) 10%, rgb(var(--rg-surface-rgb) / .82) 100%);
4086
+ --rg-glass-inset: linear-gradient(180deg, rgb(var(--rg-text-rgb) / .075), rgb(var(--rg-surface-rgb) / .7) 22%, rgb(var(--rg-surface-strong-rgb) / .68));
4087
+ --rg-control-material: linear-gradient(180deg, var(--rg-glass-highlight), rgb(var(--rg-surface-strong-rgb) / .9) 12%, rgb(var(--rg-surface-rgb) / .72) 52%, rgb(var(--rg-surface-soft-rgb) / .9));
4088
+ --rg-card-bg: var(--rg-glass-pane);
4089
+ --rg-control-bg: var(--rg-control-material);
3664
4090
  --rg-spinner-track: rgb(var(--rg-border-rgb) / max(.28, calc(var(--rg-border-alpha) * .7)));
3665
4091
  --rg-spinner-stroke: var(--rg-primary);
3666
4092
  --rg-spinner-accent: var(--rg-accent);
3667
4093
  }
3668
4094
 
3669
4095
  @supports (color: color-mix(in srgb,black,white)) {
3670
- [data-ui="retro-glass"][data-theme][data-mode] {
4096
+ [data-ui="retro-glass"][data-mode] {
3671
4097
  --rg-border: color-mix(in srgb, rgb(var(--rg-border-rgb) / max(var(--rg-border-alpha), var(--usk-border-min-alpha))), var(--rg-text) var(--usk-border-text-mix));
3672
4098
  }
3673
4099
  }
3674
4100
 
3675
4101
  [data-ui="retro-glass"] {
3676
- background: radial-gradient(circle at 15% 15%,rgb(var(--rg-primary-rgb)/.18),transparent 28rem),radial-gradient(circle at 85% 10%,rgb(var(--rg-secondary-rgb)/.16),transparent 26rem),radial-gradient(circle at 50% 110%,rgb(var(--rg-accent-rgb)/.14),transparent 34rem),linear-gradient(90deg,rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--rg-border-rgb)/var(--rg-grid-alpha)) 1px,transparent 1px),var(--rg-bg);
4102
+ background: var(--rg-theme-bg, var(--rg-bg));
4103
+ background-size: var(--rg-theme-bg-size, auto);
3677
4104
  color: var(--rg-text);
3678
4105
  font-family: var(--rg-font-body);
3679
- background-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
3680
4106
  }
3681
4107
 
3682
4108
  [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
3683
4109
  box-sizing: border-box;
3684
4110
  }
3685
4111
 
3686
- [data-ui="retro-glass"][data-theme][data-mode] {
4112
+ [data-ui="retro-glass"][data-mode] {
3687
4113
  background: var(--rg-theme-bg);
3688
4114
  background-size: var(--rg-theme-bg-size);
3689
4115
  }
3690
4116
 
3691
- [data-ui="retro-glass"] a {
4117
+ [data-ui="retro-glass"] :where(a) {
3692
4118
  color: var(--rg-link);
3693
4119
  text-underline-offset: .18em;
3694
4120
  }
@@ -3747,13 +4173,13 @@
3747
4173
  border-top-color: #ffffff47;
3748
4174
  border-left-color: #fff3;
3749
4175
  position: relative;
3750
- overflow: hidden;
3751
4176
  }
3752
4177
 
3753
4178
  .rg-card:before, .rg-panel:before, .rg-console:before, :where([data-ui="retro-glass"]) .ui-card:before {
3754
4179
  content: "";
3755
4180
  pointer-events: none;
3756
4181
  background: linear-gradient(180deg,#ffffff1a,transparent 30%),linear-gradient(90deg,transparent,rgb(var(--rg-accent-rgb)/.08),transparent);
4182
+ border-radius: inherit;
3757
4183
  position: absolute;
3758
4184
  inset: 0;
3759
4185
  }
@@ -3820,33 +4246,15 @@
3820
4246
  display: inline-flex;
3821
4247
  }
3822
4248
 
3823
- .rg-button:hover, .rg-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover {
3824
- border-color: rgb(var(--rg-primary-rgb)/.68);
3825
- box-shadow: var(--rg-shadow-md),0 0 24px var(--rg-glow-primary);
3826
- transform: translateY(-2px);
3827
- }
3828
-
3829
4249
  .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button.is-active, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"] {
3830
4250
  box-shadow: inset 0 8px 18px #0000002e,0 0 18px var(--rg-glow-primary);
3831
4251
  transform: translateY(1px);
3832
4252
  }
3833
4253
 
3834
- .rg-button-primary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]) {
3835
- background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-primary);
3836
- color: var(--rg-on-primary);
3837
- border-color: rgb(var(--rg-primary-rgb)/.72);
3838
- }
3839
-
3840
4254
  .rg-button-primary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]):hover {
3841
4255
  background: var(--rg-primary-hover);
3842
4256
  }
3843
4257
 
3844
- .rg-button-secondary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]) {
3845
- background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-secondary);
3846
- color: var(--rg-on-secondary);
3847
- border-color: rgb(var(--rg-secondary-rgb)/.72);
3848
- }
3849
-
3850
4258
  .rg-button-secondary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3851
4259
  background: var(--rg-secondary-hover);
3852
4260
  }
@@ -3979,12 +4387,6 @@
3979
4387
  background: #ffffff1a;
3980
4388
  }
3981
4389
 
3982
- .rg-nav-link.is-active, .rg-nav-link[aria-current="page"], :where([data-ui="retro-glass"]) .ui-nav-link.is-active, :where([data-ui="retro-glass"]) .ui-nav-link[aria-current="page"] {
3983
- background: var(--rg-primary);
3984
- color: var(--rg-on-primary);
3985
- box-shadow: 0 0 22px var(--rg-glow-primary);
3986
- }
3987
-
3988
4390
  .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
3989
4391
  background: linear-gradient(135deg,#ffffff47,#ffffff0f),var(--rg-surface);
3990
4392
  max-inline-size: 16rem;
@@ -4123,11 +4525,6 @@
4123
4525
  }
4124
4526
  }
4125
4527
 
4126
- [data-ui="retro-glass"] :focus-visible {
4127
- outline: 3px solid var(--rg-focus);
4128
- outline-offset: 3px;
4129
- }
4130
-
4131
4528
  @media (prefers-reduced-motion: reduce) {
4132
4529
  [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
4133
4530
  transition-duration: 1ms !important;
@@ -4139,7 +4536,7 @@
4139
4536
  background: var(--rg-card-bg);
4140
4537
  }
4141
4538
 
4142
- .rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-ghost), .rg-icon-button, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap, :where([data-ui="retro-glass"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="retro-glass"]) .ui-icon-button {
4539
+ .rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-warning):not(.rg-button-ghost), .rg-icon-button, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap, :where([data-ui="retro-glass"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="warning"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="retro-glass"]) .ui-icon-button {
4143
4540
  background: var(--rg-control-bg);
4144
4541
  }
4145
4542
 
@@ -4148,18 +4545,21 @@
4148
4545
  }
4149
4546
 
4150
4547
  .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
4151
- border: .12rem solid #ffffff52;
4152
- border-block-start-color: var(--rg-spinner-stroke);
4153
- border-inline-end-color: var(--rg-spinner-accent);
4154
- background: linear-gradient(135deg,#ffffff52,transparent 46%),conic-gradient(from 35deg,var(--rg-spinner-stroke),transparent 40%,var(--rg-spinner-accent),var(--rg-spinner-track));
4548
+ box-sizing: border-box;
4155
4549
  block-size: 2rem;
4156
4550
  inline-size: 2rem;
4157
- box-shadow: 0 0 1.35rem var(--rg-glow-primary),inset 0 0 .85rem #ffffff2e;
4158
- -webkit-backdrop-filter: blur(.4rem);
4159
- backdrop-filter: blur(.4rem);
4551
+ color: var(--rg-spinner-stroke);
4552
+ border: 2px solid var(--rg-spinner-track);
4553
+ box-shadow: none;
4554
+ -webkit-backdrop-filter: none;
4555
+ backdrop-filter: none;
4160
4556
  vertical-align: -.2em;
4161
- border-radius: 38% 62% 48% 52%;
4162
- animation: .95s linear infinite rg-spin;
4557
+ background: none;
4558
+ border-block-start-color: currentColor;
4559
+ border-radius: 50%;
4560
+ flex-shrink: 0;
4561
+ padding: 0;
4562
+ animation: .85s linear infinite rg-spin;
4163
4563
  display: inline-block;
4164
4564
  }
4165
4565
 
@@ -4182,15 +4582,28 @@
4182
4582
 
4183
4583
  .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
4184
4584
  content: "";
4185
- border: .16em solid rgb(var(--rg-primary-text-rgb)/.42);
4585
+ box-sizing: border-box;
4586
+ border: 2px solid var(--rg-spinner-track);
4587
+ block-size: 16px;
4588
+ inline-size: 16px;
4589
+ box-shadow: none;
4590
+ clip-path: none;
4591
+ background: none;
4186
4592
  border-block-start-color: currentColor;
4187
4593
  border-radius: 50%;
4188
- block-size: 1em;
4189
- inline-size: 1em;
4190
- animation: .75s linear infinite rg-spin;
4594
+ flex: 0 0 16px;
4595
+ padding: 0;
4596
+ animation: .85s linear infinite rg-spin;
4191
4597
  display: inline-block;
4192
4598
  }
4193
4599
 
4600
+ @supports (color: color-mix(in srgb,black,white)) {
4601
+ .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
4602
+ border-color: color-mix(in srgb,currentColor 28%,transparent);
4603
+ border-block-start-color: currentColor;
4604
+ }
4605
+ }
4606
+
4194
4607
  @keyframes rg-spin {
4195
4608
  to {
4196
4609
  transform: rotate(360deg);
@@ -4308,7 +4721,6 @@
4308
4721
  border-radius: var(--rg-radius-lg);
4309
4722
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4310
4723
  display: grid;
4311
- overflow: hidden;
4312
4724
  }
4313
4725
 
4314
4726
  .rg-feature-item {
@@ -4438,6 +4850,7 @@
4438
4850
  clip-path: polygon(.8rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .8rem) 100%, 0 100%, 0 .35rem);
4439
4851
  justify-content: center;
4440
4852
  justify-self: center;
4853
+ min-block-size: 2.75rem;
4441
4854
  inline-size: min(100%, 16rem);
4442
4855
  min-inline-size: 6rem;
4443
4856
  max-inline-size: 100%;
@@ -4460,7 +4873,7 @@
4460
4873
  border-radius: .75rem 1.35rem .75rem 1.15rem;
4461
4874
  }
4462
4875
 
4463
- [data-ui="retro-glass"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4876
+ [data-ui="retro-glass"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4464
4877
  color: var(--rg-text);
4465
4878
  background: rgb(var(--rg-surface-strong-rgb)/.24);
4466
4879
  border: 1px solid var(--rg-primary);
@@ -4468,7 +4881,7 @@
4468
4881
  border-radius: .55rem .9rem .55rem .78rem;
4469
4882
  }
4470
4883
 
4471
- [data-ui="retro-glass"][data-theme][data-mode] :where(dialog) {
4884
+ [data-ui="retro-glass"][data-mode] :where(dialog) {
4472
4885
  background: rgb(var(--rg-surface-strong-rgb)/.72);
4473
4886
  border: 1px solid rgb(var(--rg-border-rgb)/.78);
4474
4887
  box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.8),0 1rem 2.2rem rgb(var(--rg-primary-rgb)/.18);
@@ -4477,58 +4890,1561 @@
4477
4890
  border-radius: .85rem 1.45rem .85rem 1.2rem;
4478
4891
  }
4479
4892
 
4480
- .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
4481
- border: .09em solid #ffffff73;
4482
- clip-path: none;
4483
- background: linear-gradient(135deg, #ffffff59, #0000 45%), conic-gradient(currentColor, #0000 44%, currentColor);
4484
- border-block-start-color: currentColor;
4485
- border-radius: 38% 62% 48% 52%;
4486
- animation: .96s linear infinite rg-spin;
4487
- box-shadow: 0 0 .42em, inset 0 0 .2em #ffffff42;
4893
+ [data-ui="retro-glass"][data-mode] {
4894
+ --usk-native-font-control: "Segoe UI", Tahoma, Geneva, sans-serif;
4895
+ --usk-native-control-min-block-size: 2.5rem;
4896
+ --usk-native-control-padding-block: .52rem;
4897
+ --usk-native-control-padding-inline: .86rem;
4898
+ --usk-native-border-width: 1px;
4899
+ --usk-native-radius-sm: .34rem;
4900
+ --usk-native-radius: .52rem;
4901
+ --usk-native-radius-lg: .72rem;
4902
+ --usk-native-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .9), 0 .22rem .5rem rgb(var(--rg-text-rgb) / .18);
4903
+ --usk-native-shadow-md: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .92), 0 .7rem 1.35rem rgb(var(--rg-text-rgb) / .22);
4904
+ --usk-native-focus-ring: 0 0 0 1px var(--rg-surface-strong), 0 0 0 3px var(--rg-focus), 0 0 .65rem rgb(var(--rg-focus-rgb) / .34);
4905
+ --usk-native-subcontrol-padding-block: .4rem;
4906
+ --usk-native-subcontrol-padding-inline: .62rem;
4907
+ --usk-native-choice-size: 1.16rem;
4908
+ --usk-native-choice-background: var(--rg-control-material);
4909
+ --usk-native-choice-border: 1px solid var(--rg-border);
4910
+ --usk-native-checkbox-radius: .28rem;
4911
+ --usk-native-radio-radius: 50%;
4912
+ --usk-native-choice-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .9), 0 1px 3px rgb(var(--rg-text-rgb) / .22);
4913
+ --usk-native-choice-checked-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
4914
+ --usk-native-choice-mark-color: var(--rg-on-primary);
4915
+ --usk-native-select-indicator-image: linear-gradient(55deg, transparent 46%, var(--rg-text) 46% 56%, transparent 56%), linear-gradient(125deg, transparent 46%, var(--rg-text) 46% 56%, transparent 56%);
4916
+ --usk-native-select-indicator-size: .44rem .44rem, .44rem .44rem;
4917
+ --usk-native-select-indicator-position: calc(100% - 1.02rem) 50%, calc(100% - .72rem) 50%;
4918
+ --usk-native-select-padding-inline-end: 2.2rem;
4919
+ --usk-native-range-track-size: .42rem;
4920
+ --usk-native-range-track-background: var(--rg-glass-inset);
4921
+ --usk-native-range-track-border: 1px inset var(--rg-border);
4922
+ --usk-native-range-track-radius: .35rem;
4923
+ --usk-native-range-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .22);
4924
+ --usk-native-range-progress-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
4925
+ --usk-native-range-thumb-size: 1.2rem;
4926
+ --usk-native-range-thumb-background: radial-gradient(circle at 42% 32%, var(--rg-glass-highlight), transparent 28%), var(--rg-control-material);
4927
+ --usk-native-range-thumb-border: 1px solid var(--rg-border);
4928
+ --usk-native-range-thumb-radius: 50%;
4929
+ --usk-native-range-thumb-shadow: inset 0 1px 0 var(--rg-surface-strong), 0 2px 4px rgb(var(--rg-text-rgb) / .28);
4930
+ --usk-native-progress-size: .74rem;
4931
+ --usk-native-progress-track-background: var(--rg-glass-inset);
4932
+ --usk-native-progress-track-border: 1px inset var(--rg-border);
4933
+ --usk-native-progress-track-radius: .42rem;
4934
+ --usk-native-progress-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .25);
4935
+ --usk-native-progress-value-background: repeating-linear-gradient(120deg, var(--rg-primary) 0 .5rem, var(--rg-primary-hover) .5rem .7rem);
4936
+ --usk-native-progress-value-radius: .36rem;
4937
+ --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .7), 0 0 .45rem rgb(var(--rg-primary-rgb) / .35);
4938
+ --usk-native-scrollbar-size: .8rem;
4939
+ --usk-native-scrollbar-track: linear-gradient(90deg, var(--rg-surface-soft), var(--rg-surface));
4940
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, var(--rg-surface-strong), var(--rg-primary), var(--rg-surface-strong));
4941
+ --usk-native-scrollbar-radius: .48rem;
4488
4942
  }
4489
4943
 
4490
- @media (prefers-reduced-motion: reduce) {
4491
- [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
4492
- scroll-behavior: auto !important;
4493
- transition-duration: 1ms !important;
4494
- animation-duration: 1ms !important;
4495
- animation-iteration-count: 1 !important;
4496
- }
4944
+ .rg-title {
4945
+ font-family: var(--rg-font-display);
4946
+ letter-spacing: max(.06em, .5px);
4947
+ text-transform: none;
4948
+ text-shadow: 0 1px 0 var(--rg-glass-highlight),0 2px 2px rgb(var(--rg-text-rgb)/.28);
4949
+ margin-block: .75rem;
4950
+ font-weight: 800;
4497
4951
  }
4498
4952
 
4499
- @media (prefers-contrast: more) {
4500
- [data-ui="retro-glass"] {
4501
- --rg-border-alpha: 1;
4502
- }
4953
+ .rg-heading {
4954
+ letter-spacing: .015em;
4955
+ text-shadow: var(--rg-control-text-shadow);
4956
+ font-size: clamp(1.16rem, 2.4vw, 1.72rem);
4957
+ font-weight: 700;
4503
4958
  }
4504
4959
 
4505
- @media (forced-colors: active) {
4506
- @supports (forced-color-adjust: auto) {
4507
- [data-ui="retro-glass"] * {
4508
- forced-color-adjust: auto;
4509
- }
4510
- }
4960
+ .rg-kicker, .rg-label, :where([data-ui="retro-glass"]) .ui-label {
4961
+ letter-spacing: .055em;
4962
+ font-size: .76rem;
4963
+ font-weight: 700;
4964
+ }
4511
4965
 
4512
- [data-ui="retro-glass"] :where(:focus-visible) {
4513
- box-shadow: none;
4514
- outline: 3px solid canvastext;
4515
- }
4966
+ .rg-copy, .rg-subtitle {
4967
+ line-height: 1.48;
4516
4968
  }
4517
4969
 
4518
- @media print {
4519
- [data-ui="retro-glass"] {
4520
- color: #000 !important;
4521
- background: #fff !important;
4522
- }
4970
+ .rg-card, .rg-panel, :where([data-ui="retro-glass"]) .ui-card {
4971
+ background: var(--rg-glass-pane);
4972
+ border: 1px solid var(--rg-border);
4973
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .8rem var(--rg-material-shadow);
4974
+ -webkit-backdrop-filter: blur(14px) saturate(135%);
4975
+ backdrop-filter: blur(14px) saturate(135%);
4976
+ border-radius: .46rem;
4977
+ padding: 1rem;
4978
+ }
4523
4979
 
4524
- [data-ui="retro-glass"] * {
4525
- box-shadow: none !important;
4526
- text-shadow: none !important;
4527
- }
4980
+ .rg-card:before, .rg-panel:before, .rg-console:before, :where([data-ui="retro-glass"]) .ui-card:before {
4981
+ background: linear-gradient(180deg,var(--rg-glass-midlight),transparent 24%);
4982
+ }
4528
4983
 
4529
- [data-ui="retro-glass"] a {
4530
- text-decoration: underline;
4531
- color: #000 !important;
4532
- }
4984
+ .rg-well, .rg-inset {
4985
+ background: var(--rg-glass-inset);
4986
+ border: 1px inset var(--rg-border);
4987
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),inset 0 1px 0 var(--rg-glass-midlight);
4988
+ -webkit-backdrop-filter: blur(8px);
4989
+ backdrop-filter: blur(8px);
4990
+ border-radius: .34rem;
4991
+ padding: .82rem;
4992
+ }
4993
+
4994
+ .rg-button, .rg-icon-button, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button {
4995
+ background: var(--rg-control-material);
4996
+ border: 1px solid var(--rg-border);
4997
+ min-height: 2.5rem;
4998
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.08),0 .16rem .38rem var(--rg-material-shadow);
4999
+ letter-spacing: .01em;
5000
+ text-shadow: var(--rg-control-text-shadow);
5001
+ text-transform: none;
5002
+ border-radius: .34rem;
5003
+ padding: .5rem .82rem;
5004
+ font-weight: 650;
5005
+ }
5006
+
5007
+ .rg-button:hover, .rg-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover {
5008
+ border-color: var(--rg-primary);
5009
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .2rem .48rem var(--rg-material-shadow),0 0 .5rem rgb(var(--rg-primary-rgb)/.24);
5010
+ transform: none;
5011
+ }
5012
+
5013
+ .rg-button:active, .rg-icon-button:active, .rg-button[aria-pressed="true"], .rg-button.is-active, :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button.is-active {
5014
+ background: var(--rg-glass-inset);
5015
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-midlight);
5016
+ transform: translateY(1px);
5017
+ }
5018
+
5019
+ .rg-input, .rg-textarea, .rg-select, :where([data-ui="retro-glass"]) .ui-input, :where([data-ui="retro-glass"]) .ui-textarea, :where([data-ui="retro-glass"]) .ui-select {
5020
+ background: var(--rg-glass-inset);
5021
+ border: 1px inset var(--rg-border);
5022
+ min-height: 2.32rem;
5023
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5024
+ border-radius: .28rem;
5025
+ padding: .44rem .64rem;
5026
+ }
5027
+
5028
+ .rg-nav, :where([data-ui="retro-glass"]) .ui-nav {
5029
+ background: linear-gradient(180deg,var(--rg-primary-hover),var(--rg-primary) 44%,rgb(var(--rg-primary-rgb)/.82) 50%,rgb(var(--rg-primary-rgb)/.68));
5030
+ border: 1px solid rgb(var(--rg-primary-rgb)/.92);
5031
+ box-shadow: inset 0 1px 0 #ffffff7a,inset 0-1px 0 #00000057,0 .24rem .54rem var(--rg-material-shadow);
5032
+ border-radius: .34rem;
5033
+ gap: 0;
5034
+ padding: .2rem;
5035
+ }
5036
+
5037
+ .rg-nav-link, :where([data-ui="retro-glass"]) .ui-nav-link {
5038
+ min-height: 2.7rem;
5039
+ color: var(--rg-on-primary);
5040
+ letter-spacing: .015em;
5041
+ text-shadow: 0 -1px #0000009e;
5042
+ border-inline-end: 1px solid #00000038;
5043
+ border-radius: .2rem;
5044
+ padding: .58rem .92rem;
5045
+ font-size: .82rem;
5046
+ }
5047
+
5048
+ .rg-nav-link:hover, :where([data-ui="retro-glass"]) .ui-nav-link:hover {
5049
+ color: var(--rg-on-primary);
5050
+ background: linear-gradient(#ffffff3d, #ffffff0a);
5051
+ border-color: #ffffff4d;
5052
+ }
5053
+
5054
+ .rg-toolbar, :where([data-ui="retro-glass"]) .ui-toolbar {
5055
+ background: var(--rg-brushed-chrome);
5056
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.18),0 .22rem .5rem var(--rg-material-shadow);
5057
+ border-radius: .34rem;
5058
+ }
5059
+
5060
+ .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
5061
+ border: 1px solid var(--rg-border);
5062
+ min-height: 1.46rem;
5063
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.85),0 1px 3px rgb(var(--rg-text-rgb)/.2);
5064
+ border-radius: .72rem;
5065
+ padding: .24rem .52rem;
5066
+ }
5067
+
5068
+ .rg-alert, :where([data-ui="retro-glass"]) .ui-alert {
5069
+ background: var(--rg-glass-pane);
5070
+ border: 1px solid var(--rg-border);
5071
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .28rem .6rem var(--rg-material-shadow);
5072
+ -webkit-backdrop-filter: blur(10px);
5073
+ backdrop-filter: blur(10px);
5074
+ border-radius: .38rem;
5075
+ padding: .7rem .86rem;
5076
+ }
5077
+
5078
+ .rg-alert-success, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"]) {
5079
+ background: linear-gradient(180deg,rgb(var(--rg-success-rgb)/.2),rgb(var(--rg-success-rgb)/.08)),var(--rg-glass-pane);
5080
+ }
5081
+
5082
+ .rg-alert-warning, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"]) {
5083
+ background: linear-gradient(180deg,rgb(var(--rg-warning-rgb)/.2),rgb(var(--rg-warning-rgb)/.08)),var(--rg-glass-pane);
5084
+ }
5085
+
5086
+ .rg-alert-danger, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"]) {
5087
+ background: linear-gradient(180deg,rgb(var(--rg-danger-rgb)/.2),rgb(var(--rg-danger-rgb)/.08)),var(--rg-glass-pane);
5088
+ }
5089
+
5090
+ .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
5091
+ background: var(--rg-glass-inset);
5092
+ height: .74rem;
5093
+ box-shadow: inset 0 2px 4px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5094
+ border-radius: .42rem;
4533
5095
  }
5096
+
5097
+ .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
5098
+ background: repeating-linear-gradient(120deg,var(--rg-primary)0 .5rem,var(--rg-primary-hover) .5rem .7rem);
5099
+ box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.7),0 0 .45rem rgb(var(--rg-primary-rgb)/.35);
5100
+ border-radius: .36rem;
5101
+ }
5102
+
5103
+ .rg-table-wrap, :where([data-ui="retro-glass"]) .ui-table-wrap {
5104
+ background: var(--rg-glass-inset);
5105
+ border: 1px solid var(--rg-border);
5106
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .72rem var(--rg-material-shadow);
5107
+ -webkit-backdrop-filter: blur(10px);
5108
+ backdrop-filter: blur(10px);
5109
+ border-radius: .42rem;
5110
+ }
5111
+
5112
+ .rg-table, :where([data-ui="retro-glass"]) .ui-table {
5113
+ border-collapse: separate;
5114
+ border-spacing: 0;
5115
+ }
5116
+
5117
+ .rg-table th, :where([data-ui="retro-glass"]) .ui-table th {
5118
+ background: linear-gradient(180deg,rgb(var(--rg-primary-rgb)/.92),var(--rg-primary-hover) 48%,var(--rg-primary));
5119
+ color: var(--rg-on-primary);
5120
+ text-shadow: 0 -1px #00000085;
5121
+ padding: .58rem .72rem;
5122
+ font-weight: 700;
5123
+ }
5124
+
5125
+ .rg-table td, :where([data-ui="retro-glass"]) .ui-table td {
5126
+ padding: .64rem .76rem;
5127
+ }
5128
+
5129
+ .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5130
+ color: #f5f8fa;
5131
+ background: linear-gradient(#363d44f5, #080c0ffa);
5132
+ border: 1px solid #ffffff47;
5133
+ border-radius: .36rem;
5134
+ box-shadow: inset 0 1px #ffffff38, 0 .55rem 1rem #0000007a;
5135
+ }
5136
+
5137
+ .rg-card-service, .rg-card-feature, .rg-media-scrim, .rg-feature-strip, .rg-callout-bar {
5138
+ background: var(--rg-glass-pane);
5139
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .72rem var(--rg-material-shadow);
5140
+ -webkit-backdrop-filter: blur(12px) saturate(118%);
5141
+ backdrop-filter: blur(12px) saturate(118%);
5142
+ clip-path: none;
5143
+ border-radius: .46rem;
5144
+ }
5145
+
5146
+ .rg-callout-bar {
5147
+ background: linear-gradient(180deg,#ffffff29,transparent 12%),linear-gradient(180deg,rgb(var(--rg-text-rgb)/.88),rgb(var(--rg-bg-rgb)/.96));
5148
+ color: var(--rg-dock-text);
5149
+ box-shadow: inset 0 1px 0 #ffffff42,inset 0-1px 0 #000000b3,0 .45rem .92rem var(--rg-material-shadow);
5150
+ border-color: #ffffff2e;
5151
+ }
5152
+
5153
+ .rg-check-control, .rg-radio-control, .rg-switch-track, .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-check-control, :where([data-ui="retro-glass"]) .ui-radio-control, :where([data-ui="retro-glass"]) .ui-switch-track, :where([data-ui="retro-glass"]) .ui-switch-thumb {
5154
+ background: var(--rg-control-material);
5155
+ border: 1px solid var(--rg-border);
5156
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.12),0 1px 3px var(--rg-material-shadow);
5157
+ }
5158
+
5159
+ .rg-check-control, :where([data-ui="retro-glass"]) .ui-check-control {
5160
+ border-radius: .22rem;
5161
+ }
5162
+
5163
+ .rg-radio-control, :where([data-ui="retro-glass"]) .ui-radio-control {
5164
+ border-radius: 50%;
5165
+ }
5166
+
5167
+ .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
5168
+ background: var(--rg-glass-inset);
5169
+ border-radius: var(--rg-radius-pill);
5170
+ box-shadow: inset 0 2px 4px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5171
+ }
5172
+
5173
+ .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch-thumb {
5174
+ background: radial-gradient(circle at 42% 30%,var(--rg-glass-highlight),transparent 32%),var(--rg-control-material);
5175
+ border-radius: 50%;
5176
+ }
5177
+
5178
+ .rg-check:has(input:checked) .rg-check-control, .rg-radio:has(input:checked) .rg-radio-control, .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="retro-glass"]) .ui-check:has(input:checked) .ui-check-control, :where([data-ui="retro-glass"]) .ui-radio:has(input:checked) .ui-radio-control, :where([data-ui="retro-glass"]) .ui-switch:has(input:checked) .ui-switch-track {
5179
+ background: linear-gradient(180deg,var(--rg-primary-hover),var(--rg-primary));
5180
+ border-color: var(--rg-primary);
5181
+ }
5182
+
5183
+ [data-ui="retro-glass"][data-mode] :where(fieldset) {
5184
+ background: var(--rg-glass-pane);
5185
+ border: 1px solid var(--rg-border);
5186
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .32rem .7rem var(--rg-material-shadow);
5187
+ border-radius: .42rem;
5188
+ }
5189
+
5190
+ [data-ui="retro-glass"][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
5191
+ background: var(--rg-glass-inset);
5192
+ border: 1px inset var(--rg-border);
5193
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
5194
+ border-radius: .28rem;
5195
+ }
5196
+
5197
+ [data-ui="retro-glass"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5198
+ background: var(--rg-control-material);
5199
+ border: 1px solid var(--rg-border);
5200
+ box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.08),0 .16rem .38rem var(--rg-material-shadow);
5201
+ text-shadow: var(--rg-control-text-shadow);
5202
+ border-radius: .34rem;
5203
+ }
5204
+
5205
+ @media (prefers-reduced-motion: reduce) {
5206
+ [data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
5207
+ scroll-behavior: auto !important;
5208
+ transition-duration: 1ms !important;
5209
+ animation-duration: 1ms !important;
5210
+ animation-iteration-count: 1 !important;
5211
+ }
5212
+ }
5213
+
5214
+ @media (prefers-contrast: more) {
5215
+ [data-ui="retro-glass"] {
5216
+ --rg-border-alpha: 1;
5217
+ }
5218
+ }
5219
+
5220
+ @media (forced-colors: active) {
5221
+ @supports (forced-color-adjust: auto) {
5222
+ [data-ui="retro-glass"] * {
5223
+ forced-color-adjust: auto;
5224
+ }
5225
+ }
5226
+
5227
+ [data-ui="retro-glass"] :where(:focus-visible) {
5228
+ box-shadow: none;
5229
+ outline: 3px solid canvastext;
5230
+ }
5231
+ }
5232
+
5233
+ @media print {
5234
+ [data-ui="retro-glass"] {
5235
+ color: #000 !important;
5236
+ background: #fff !important;
5237
+ }
5238
+
5239
+ [data-ui="retro-glass"] * {
5240
+ box-shadow: none !important;
5241
+ text-shadow: none !important;
5242
+ }
5243
+
5244
+ [data-ui="retro-glass"] a {
5245
+ text-decoration: underline;
5246
+ color: #000 !important;
5247
+ }
5248
+ }
5249
+
5250
+ .rg-input[aria-invalid="true"], .rg-textarea[aria-invalid="true"], .rg-select[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-input[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-textarea[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-select[aria-invalid="true"] {
5251
+ border-color: var(--rg-danger);
5252
+ box-shadow: 0 0 0 2px rgb(var(--rg-danger-rgb)/.2);
5253
+ }
5254
+
5255
+ .rg-input[readonly], .rg-textarea[readonly], :where([data-ui="retro-glass"]) .ui-input[readonly], :where([data-ui="retro-glass"]) .ui-textarea[readonly] {
5256
+ filter: saturate(.72);
5257
+ opacity: .78;
5258
+ border-style: dashed;
5259
+ }
5260
+
5261
+ .rg-button-ghost, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
5262
+ color: var(--rg-primary);
5263
+ background: none;
5264
+ border-color: #0000;
5265
+ }
5266
+
5267
+ .rg-feature-item > .rg-icon-medallion {
5268
+ font-size: 1.5rem;
5269
+ line-height: 1;
5270
+ }
5271
+
5272
+ .rg-callout-bar > .rg-icon-medallion {
5273
+ min-block-size: 4.5rem;
5274
+ min-inline-size: 4.5rem;
5275
+ font-size: 2rem;
5276
+ font-weight: 800;
5277
+ line-height: 1;
5278
+ }
5279
+
5280
+ [data-ui="retro-glass"][data-mode] {
5281
+ --rg-radius-sm: 6px;
5282
+ --rg-radius-md: 10px;
5283
+ --rg-radius-lg: 14px;
5284
+ --rg-space-5: 24px;
5285
+ --rg-space-6: 32px;
5286
+ --rg-control-height: 36px;
5287
+ --rg-line-color: rgb(var(--rg-border-rgb) / .65);
5288
+ --rg-line-strong: var(--rg-border);
5289
+ --rg-surface-input: rgb(var(--usk-surface-strong-rgb, var(--rg-input-fallback-rgb)));
5290
+ --rg-surface-raised: rgb(var(--rg-surface-strong-rgb));
5291
+ --rg-canvas: var(--rg-bg);
5292
+ --rg-text-soft: var(--rg-text-muted);
5293
+ --rg-muted: var(--rg-text-muted);
5294
+ --rg-highlight: var(--rg-glass-highlight);
5295
+ --rg-recess: var(--rg-material-shadow);
5296
+ --rg-glass-pane: linear-gradient(180deg, var(--rg-glass-midlight), transparent 18%), rgb(var(--rg-surface-rgb));
5297
+ --rg-brushed-chrome: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 48%, rgb(var(--rg-border-rgb) / .48) 52%, rgb(var(--rg-surface-soft-rgb) / .5));
5298
+ --rg-glass-inset: linear-gradient(180deg, #0000001f, transparent 18%), var(--rg-surface-input);
5299
+ --rg-control-material: linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 46%, #00000029 52%, transparent), var(--rg-surface-soft);
5300
+ --rg-gloss-rgb: var(--rg-primary-rgb);
5301
+ --rg-progress-stripe: #ffffff3d;
5302
+ --rg-gloss-ink: rgb(var(--usk-primary-text-rgb, 255 255 255));
5303
+ --rg-gloss: linear-gradient(180deg, #fff6, transparent 18%, #00000026 46%, #0000006b 52%, #00000038), rgb(var(--rg-gloss-rgb));
5304
+ --rg-danger-gloss: linear-gradient(180deg, #fff6, transparent 18%, #00000026 46%, #0000006b 52%, #00000038), var(--rg-danger);
5305
+ --rg-floating-shadow: inset 0 1px 0 var(--rg-highlight), 0 7px 18px #0000003d;
5306
+ --usk-native-font-control: var(--rg-font-body);
5307
+ --usk-native-control-min-block-size: var(--rg-control-height);
5308
+ --usk-native-radius-sm: var(--rg-radius-sm);
5309
+ --usk-native-radius: var(--rg-radius-md);
5310
+ --usk-native-card-bg: var(--rg-glass-pane);
5311
+ --usk-native-control-bg: var(--rg-glass-inset);
5312
+ }
5313
+
5314
+ [data-ui="retro-glass"][data-mode="light"] {
5315
+ --rg-input-fallback-rgb: 248 250 252;
5316
+ }
5317
+
5318
+ [data-ui="retro-glass"][data-mode="dark"] {
5319
+ --rg-input-fallback-rgb: 7 21 29;
5320
+ }
5321
+
5322
+ [data-ui="retro-glass"][data-mode="contrast"] {
5323
+ --rg-input-fallback-rgb: 0 0 0;
5324
+ --rg-gloss-ink: var(--rg-on-primary);
5325
+ --rg-gloss: rgb(var(--rg-gloss-rgb));
5326
+ --rg-line-color: var(--rg-border);
5327
+ }
5328
+
5329
+ [data-ui="retro-glass"][data-theme][data-mode] {
5330
+ --rg-gloss: linear-gradient(180deg, #ffffff4d, transparent 12%, transparent 48%, #0000000a 52%, transparent), rgb(var(--rg-gloss-rgb));
5331
+ --rg-danger-gloss: linear-gradient(180deg, #ffffff4d, transparent 12%, transparent 48%, #0000000a 52%, transparent), var(--rg-danger);
5332
+ }
5333
+
5334
+ .rg-title, .rg-heading {
5335
+ letter-spacing: 0;
5336
+ text-shadow: none;
5337
+ }
5338
+
5339
+ .rg-heading {
5340
+ font-size: 1.25rem;
5341
+ }
5342
+
5343
+ .rg-title {
5344
+ font-size: 2rem;
5345
+ }
5346
+
5347
+ .rg-kicker, .rg-label, .rg-overline, :where([data-ui="retro-glass"]) .ui-label {
5348
+ font: 700 12px/1.4 var(--rg-font-mono);
5349
+ letter-spacing: 0;
5350
+ text-transform: uppercase;
5351
+ color: var(--rg-text-soft);
5352
+ }
5353
+
5354
+ .rg-label, :where([data-ui="retro-glass"]) .ui-label {
5355
+ margin-block-end: 4px;
5356
+ display: block;
5357
+ }
5358
+
5359
+ .rg-overline {
5360
+ margin: 0 0 8px;
5361
+ display: block;
5362
+ }
5363
+
5364
+ .rg-section-title {
5365
+ color: var(--rg-text);
5366
+ font: 800 14px/1.3 var(--rg-font-body);
5367
+ letter-spacing: 0;
5368
+ text-transform: uppercase;
5369
+ align-items: center;
5370
+ gap: 8px;
5371
+ margin: 0 0 16px;
5372
+ display: flex;
5373
+ }
5374
+
5375
+ .rg-section-title:before {
5376
+ content: "";
5377
+ border: 1px solid var(--rg-primary);
5378
+ background: var(--rg-gloss);
5379
+ block-size: 10px;
5380
+ inline-size: 10px;
5381
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
5382
+ border-radius: 50%;
5383
+ flex: 0 0 10px;
5384
+ }
5385
+
5386
+ .rg-section-title:after {
5387
+ content: "";
5388
+ background: repeating-linear-gradient(90deg,var(--rg-line-color)0 9px,transparent 9px 13px);
5389
+ flex: 0 0 34px;
5390
+ block-size: 8px;
5391
+ inline-size: 34px;
5392
+ margin-inline-start: auto;
5393
+ }
5394
+
5395
+ .rg-card, .rg-panel, :where([data-ui="retro-glass"]) .ui-card {
5396
+ background: var(--rg-glass-pane);
5397
+ border: 1px solid var(--rg-line-color);
5398
+ border-radius: var(--rg-radius-md);
5399
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 4px 0 #0000001f;
5400
+ clip-path: none;
5401
+ }
5402
+
5403
+ .rg-card:before, .rg-panel:before, :where([data-ui="retro-glass"]) .ui-card:before {
5404
+ content: none;
5405
+ }
5406
+
5407
+ .rg-toolbar, :where([data-ui="retro-glass"]) .ui-toolbar {
5408
+ background: var(--rg-brushed-chrome),var(--rg-surface-soft);
5409
+ border-radius: var(--rg-radius-lg);
5410
+ }
5411
+
5412
+ .rg-button, .rg-icon-button, .rg-segment, .rg-pagination-page, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button {
5413
+ min-height: var(--rg-control-height);
5414
+ min-block-size: var(--rg-control-height);
5415
+ background: var(--rg-control-material);
5416
+ color: var(--rg-text);
5417
+ border: 1px solid var(--rg-line-strong);
5418
+ border-radius: var(--rg-radius-sm);
5419
+ box-shadow: inset 0 1px 0 var(--rg-highlight),inset 0-1px 0 #0000002e,0 1px 2px #00000038;
5420
+ font: 700 14px/1.2 var(--rg-font-body);
5421
+ letter-spacing: 0;
5422
+ text-shadow: none;
5423
+ cursor: pointer;
5424
+ clip-path: none;
5425
+ justify-content: center;
5426
+ align-items: center;
5427
+ gap: 8px;
5428
+ padding: 8px 12px;
5429
+ text-decoration: none;
5430
+ transition: background .15s, box-shadow .15s, transform 80ms;
5431
+ display: inline-flex;
5432
+ }
5433
+
5434
+ .rg-icon-button, :where([data-ui="retro-glass"]) .ui-icon-button {
5435
+ inline-size: var(--rg-control-height);
5436
+ aspect-ratio: 1;
5437
+ padding: 8px;
5438
+ }
5439
+
5440
+ .rg-button-primary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]) {
5441
+ background: var(--rg-gloss);
5442
+ color: var(--rg-gloss-ink);
5443
+ border-color: var(--rg-primary);
5444
+ }
5445
+
5446
+ .rg-button-secondary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]) {
5447
+ background: var(--rg-control-material);
5448
+ color: var(--rg-text);
5449
+ border-color: var(--rg-line-strong);
5450
+ }
5451
+
5452
+ .rg-button-danger, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="danger"]) {
5453
+ background: var(--rg-danger-gloss);
5454
+ color: rgb(var(--usk-danger-text-rgb, 255 255 255));
5455
+ border-color: var(--rg-danger);
5456
+ }
5457
+
5458
+ [data-ui="retro-glass"][data-mode][style*="--rg-on-danger"] .rg-button-danger, :where([data-ui="retro-glass"])[data-mode][style*="--rg-on-danger"] .ui-button:where([data-ui-variant="danger"]) {
5459
+ color: var(--rg-on-danger);
5460
+ }
5461
+
5462
+ .rg-button-ghost, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
5463
+ color: var(--rg-text-soft);
5464
+ border-color: var(--rg-line-color);
5465
+ box-shadow: none;
5466
+ background: none;
5467
+ }
5468
+
5469
+ .rg-button:hover, .rg-icon-button:hover, .rg-button.is-hover, .rg-segment:hover, .rg-pagination-page:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button.is-hover {
5470
+ border-color: var(--rg-focus);
5471
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 0 0 1px var(--rg-focus);
5472
+ transform: none;
5473
+ }
5474
+
5475
+ .rg-button:active, .rg-icon-button:active, .rg-button.is-pressed, .rg-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button.is-pressed, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"] {
5476
+ background: linear-gradient(180deg,#00000038,#ffffff1a),var(--rg-surface-soft);
5477
+ color: var(--rg-text);
5478
+ box-shadow: inset 0 2px 5px var(--rg-recess);
5479
+ transform: translateY(1px);
5480
+ }
5481
+
5482
+ .rg-button:disabled, .rg-icon-button:disabled, .rg-button.is-disabled, :where([data-ui="retro-glass"]) .ui-button:disabled, :where([data-ui="retro-glass"]) .ui-icon-button:disabled, :where([data-ui="retro-glass"]) .ui-button.is-disabled {
5483
+ opacity: .4;
5484
+ filter: saturate(.45);
5485
+ cursor: not-allowed;
5486
+ box-shadow: none;
5487
+ }
5488
+
5489
+ .rg-field, :where([data-ui="retro-glass"]) .ui-field {
5490
+ min-inline-size: 0;
5491
+ display: block;
5492
+ }
5493
+
5494
+ .rg-input, .rg-select, .rg-textarea, :where([data-ui="retro-glass"]) .ui-input, :where([data-ui="retro-glass"]) .ui-select, :where([data-ui="retro-glass"]) .ui-textarea {
5495
+ inline-size: 100%;
5496
+ min-block-size: var(--rg-control-height);
5497
+ background: var(--rg-glass-inset);
5498
+ color: var(--rg-text);
5499
+ border: 1px solid var(--rg-line-strong);
5500
+ border-radius: var(--rg-radius-sm);
5501
+ box-shadow: inset 0 1px 3px var(--rg-recess),0 1px 0 var(--rg-highlight);
5502
+ font: 14px/1.3 var(--rg-font-body);
5503
+ padding: 8px 11px;
5504
+ }
5505
+
5506
+ .rg-select, :where([data-ui="retro-glass"]) .ui-select {
5507
+ background-image: var(--usk-native-select-indicator-image),linear-gradient(180deg,#0000001f,transparent 18%);
5508
+ background-size: var(--usk-native-select-indicator-size),auto;
5509
+ background-position: var(--usk-native-select-indicator-position),center;
5510
+ background-repeat: no-repeat;
5511
+ padding-inline-end: 32px;
5512
+ }
5513
+
5514
+ .rg-textarea, :where([data-ui="retro-glass"]) .ui-textarea {
5515
+ resize: vertical;
5516
+ min-block-size: 64px;
5517
+ }
5518
+
5519
+ .rg-input::placeholder, .rg-textarea::placeholder, :where([data-ui="retro-glass"]) .ui-input::placeholder, :where([data-ui="retro-glass"]) .ui-textarea::placeholder {
5520
+ color: var(--rg-muted);
5521
+ opacity: 1;
5522
+ }
5523
+
5524
+ .rg-input-wrap {
5525
+ align-items: center;
5526
+ display: flex;
5527
+ position: relative;
5528
+ }
5529
+
5530
+ .rg-input-wrap .rg-input, :where([data-ui="retro-glass"]) .rg-input-wrap .ui-input {
5531
+ padding-inline-end: 36px;
5532
+ }
5533
+
5534
+ .rg-input-icon {
5535
+ color: var(--rg-link);
5536
+ pointer-events: none;
5537
+ position: absolute;
5538
+ inset-inline-end: 11px;
5539
+ }
5540
+
5541
+ .rg-helper, .rg-error-text {
5542
+ color: var(--rg-text-soft);
5543
+ font: 12px/1.4 var(--rg-font-mono);
5544
+ margin-block-start: 4px;
5545
+ display: block;
5546
+ }
5547
+
5548
+ .rg-error-text {
5549
+ border-inline-start: 3px solid var(--rg-danger);
5550
+ padding-inline-start: 6px;
5551
+ }
5552
+
5553
+ .rg-input.is-error, .rg-input[aria-invalid="true"], .rg-select[aria-invalid="true"], .rg-textarea[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-input.is-error, :where([data-ui="retro-glass"]) .ui-input[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-select[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-textarea[aria-invalid="true"] {
5554
+ border-color: var(--rg-danger);
5555
+ box-shadow: inset 0 1px 3px var(--rg-recess),0 0 0 1px var(--rg-danger);
5556
+ }
5557
+
5558
+ .rg-input.is-hover, :where([data-ui="retro-glass"]) .ui-input.is-hover {
5559
+ border-color: var(--rg-focus);
5560
+ }
5561
+
5562
+ .rg-input.is-focus, :where([data-ui="retro-glass"]) .ui-input.is-focus {
5563
+ outline: 2px solid var(--rg-focus);
5564
+ outline-offset: 2px;
5565
+ }
5566
+
5567
+ .rg-dropdown, .rg-popover, .rg-modal {
5568
+ color: var(--rg-text);
5569
+ background: var(--rg-glass-pane);
5570
+ border: 1px solid var(--rg-line-strong);
5571
+ border-radius: var(--rg-radius-md);
5572
+ box-shadow: var(--rg-floating-shadow);
5573
+ font: 14px/1.4 var(--rg-font-body);
5574
+ padding: 12px;
5575
+ }
5576
+
5577
+ .rg-dropdown {
5578
+ border-color: var(--rg-focus);
5579
+ border-radius: var(--rg-radius-sm);
5580
+ padding: 6px;
5581
+ }
5582
+
5583
+ .rg-option {
5584
+ min-block-size: 32px;
5585
+ inline-size: 100%;
5586
+ color: var(--rg-text-soft);
5587
+ font: 14px/1.3 var(--rg-font-body);
5588
+ text-align: start;
5589
+ cursor: pointer;
5590
+ background: none;
5591
+ border: 1px solid #0000;
5592
+ border-radius: 4px;
5593
+ justify-content: space-between;
5594
+ align-items: center;
5595
+ padding: 6px 8px;
5596
+ display: flex;
5597
+ }
5598
+
5599
+ .rg-option:hover, .rg-option.is-selected, .rg-option[aria-selected="true"] {
5600
+ background: var(--rg-gloss);
5601
+ color: var(--rg-gloss-ink);
5602
+ border-color: var(--rg-primary);
5603
+ }
5604
+
5605
+ .rg-option:disabled {
5606
+ opacity: .4;
5607
+ cursor: not-allowed;
5608
+ }
5609
+
5610
+ .rg-tags {
5611
+ background: var(--rg-glass-inset);
5612
+ border: 1px solid var(--rg-line-strong);
5613
+ border-radius: var(--rg-radius-sm);
5614
+ min-block-size: 48px;
5615
+ box-shadow: inset 0 1px 3px var(--rg-recess);
5616
+ flex-wrap: wrap;
5617
+ align-items: center;
5618
+ gap: 6px;
5619
+ padding: 8px;
5620
+ display: flex;
5621
+ }
5622
+
5623
+ .rg-chip, .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
5624
+ border: 1px solid var(--rg-line-strong);
5625
+ border-radius: var(--rg-radius-pill);
5626
+ background: var(--rg-surface-soft);
5627
+ min-block-size: 24px;
5628
+ color: var(--rg-text);
5629
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
5630
+ font: 700 12px/1.2 var(--rg-font-body);
5631
+ letter-spacing: 0;
5632
+ text-transform: none;
5633
+ align-items: center;
5634
+ gap: 6px;
5635
+ padding: 4px 10px;
5636
+ display: inline-flex;
5637
+ }
5638
+
5639
+ .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
5640
+ background: var(--rg-control-material);
5641
+ box-shadow: inset 0 1px 0 var(--rg-highlight),inset 0-1px 0 #0000002e,0 1px 2px #00000038;
5642
+ }
5643
+
5644
+ .rg-chip, .rg-badge-primary, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="primary"]) {
5645
+ background: var(--rg-gloss);
5646
+ border-color: var(--rg-primary);
5647
+ color: var(--rg-gloss-ink);
5648
+ }
5649
+
5650
+ .rg-chip-danger {
5651
+ background: linear-gradient(rgb(var(--rg-danger-rgb)/.18),rgb(var(--rg-danger-rgb)/.18)),var(--rg-surface-raised);
5652
+ border-color: var(--rg-danger);
5653
+ color: var(--rg-text);
5654
+ }
5655
+
5656
+ .rg-chip-warning {
5657
+ background: linear-gradient(rgb(var(--rg-warning-rgb)/.18),rgb(var(--rg-warning-rgb)/.18)),var(--rg-surface-raised);
5658
+ border-color: var(--rg-warning);
5659
+ color: var(--rg-text);
5660
+ }
5661
+
5662
+ .rg-badge-success, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="success"]) {
5663
+ background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-success);
5664
+ border-color: var(--rg-success);
5665
+ color: var(--rg-on-success);
5666
+ }
5667
+
5668
+ .rg-badge-warning, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="warning"]) {
5669
+ background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-warning);
5670
+ border-color: var(--rg-warning);
5671
+ color: var(--rg-on-warning);
5672
+ }
5673
+
5674
+ .rg-badge-danger, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="danger"]) {
5675
+ background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-danger);
5676
+ border-color: var(--rg-danger);
5677
+ color: var(--rg-on-danger);
5678
+ }
5679
+
5680
+ .rg-chip {
5681
+ cursor: pointer;
5682
+ }
5683
+
5684
+ .rg-file {
5685
+ border: 1px dashed var(--rg-line-strong);
5686
+ border-radius: var(--rg-radius-md);
5687
+ background: var(--rg-glass-inset);
5688
+ min-block-size: 112px;
5689
+ color: var(--rg-text-soft);
5690
+ box-shadow: inset 0 1px 3px var(--rg-recess);
5691
+ text-align: center;
5692
+ font: 14px/1.4 var(--rg-font-body);
5693
+ cursor: pointer;
5694
+ flex-direction: column;
5695
+ justify-content: center;
5696
+ align-items: center;
5697
+ gap: 8px;
5698
+ padding: 16px;
5699
+ display: flex;
5700
+ position: relative;
5701
+ }
5702
+
5703
+ .rg-file strong {
5704
+ color: var(--rg-link);
5705
+ }
5706
+
5707
+ .rg-file input[type="file"] {
5708
+ opacity: 0;
5709
+ cursor: pointer;
5710
+ block-size: 100%;
5711
+ inline-size: 100%;
5712
+ position: absolute;
5713
+ inset: 0;
5714
+ }
5715
+
5716
+ .rg-file:focus-within {
5717
+ outline: 2px solid var(--rg-focus);
5718
+ outline-offset: 2px;
5719
+ }
5720
+
5721
+ .rg-choice, .rg-switch, :where([data-ui="retro-glass"]) .ui-switch {
5722
+ min-block-size: 32px;
5723
+ color: var(--rg-text-soft);
5724
+ font: 14px/1.3 var(--rg-font-body);
5725
+ cursor: pointer;
5726
+ align-items: center;
5727
+ gap: 8px;
5728
+ display: inline-flex;
5729
+ position: relative;
5730
+ }
5731
+
5732
+ .rg-choice input {
5733
+ accent-color: var(--rg-primary);
5734
+ flex: 0 0 18px;
5735
+ block-size: 18px;
5736
+ inline-size: 18px;
5737
+ margin: 0;
5738
+ }
5739
+
5740
+ .rg-choice:has(:disabled), .rg-switch:has(:disabled), :where([data-ui="retro-glass"]) .ui-switch:has(:disabled) {
5741
+ opacity: 1;
5742
+ color: var(--rg-text-soft);
5743
+ cursor: not-allowed;
5744
+ }
5745
+
5746
+ .rg-choice input:disabled {
5747
+ opacity: 1;
5748
+ border: 1px dashed var(--rg-line-strong);
5749
+ background: var(--rg-surface-soft);
5750
+ box-shadow: none;
5751
+ }
5752
+
5753
+ .rg-choice input:disabled:not(:checked) {
5754
+ appearance: none;
5755
+ }
5756
+
5757
+ .rg-choice input.is-focus {
5758
+ outline: 2px solid var(--rg-focus);
5759
+ outline-offset: 2px;
5760
+ }
5761
+
5762
+ .rg-switch input, :where([data-ui="retro-glass"]) .ui-switch input {
5763
+ opacity: 0;
5764
+ z-index: 1;
5765
+ block-size: 100%;
5766
+ inline-size: 100%;
5767
+ cursor: inherit;
5768
+ position: absolute;
5769
+ inset: 0;
5770
+ }
5771
+
5772
+ .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
5773
+ border: 1px solid var(--rg-line-strong);
5774
+ border-radius: var(--rg-radius-pill);
5775
+ background: var(--rg-glass-inset);
5776
+ block-size: 22px;
5777
+ inline-size: 42px;
5778
+ box-shadow: inset 0 1px 3px var(--rg-recess);
5779
+ align-items: center;
5780
+ padding: 2px;
5781
+ display: inline-flex;
5782
+ }
5783
+
5784
+ .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch-thumb {
5785
+ border: 1px solid var(--rg-line-strong);
5786
+ background: var(--rg-control-material);
5787
+ block-size: 16px;
5788
+ inline-size: 16px;
5789
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 2px #00000059;
5790
+ border-radius: 50%;
5791
+ transition: transform .15s;
5792
+ }
5793
+
5794
+ .rg-switch input:checked + .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch input:checked+.ui-switch-track {
5795
+ background: var(--rg-gloss);
5796
+ border-color: var(--rg-primary);
5797
+ }
5798
+
5799
+ .rg-switch input:checked + .rg-switch-track .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
5800
+ transform: translateX(18px);
5801
+ }
5802
+
5803
+ .rg-switch:has(input:disabled) .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch:has(input:disabled) .ui-switch-track {
5804
+ background: var(--rg-surface-soft);
5805
+ border: 1px dashed var(--rg-line-strong);
5806
+ box-shadow: none;
5807
+ filter: saturate(.35);
5808
+ }
5809
+
5810
+ .rg-switch:has(input:disabled) .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch:has(input:disabled) .ui-switch-thumb {
5811
+ opacity: .58;
5812
+ box-shadow: none;
5813
+ }
5814
+
5815
+ .rg-switch input:focus-visible + .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch input:focus-visible+.ui-switch-track {
5816
+ outline: 2px solid var(--rg-focus);
5817
+ outline-offset: 2px;
5818
+ }
5819
+
5820
+ .rg-segmented {
5821
+ flex-wrap: wrap;
5822
+ gap: 4px;
5823
+ display: inline-flex;
5824
+ }
5825
+
5826
+ .rg-segment {
5827
+ font-size: 12px;
5828
+ }
5829
+
5830
+ .rg-segment.is-active, .rg-segment[aria-pressed="true"], .rg-pagination-page[aria-current="page"] {
5831
+ background: var(--rg-gloss);
5832
+ color: var(--rg-gloss-ink);
5833
+ border-color: var(--rg-primary);
5834
+ }
5835
+
5836
+ .rg-range {
5837
+ --usk-native-range-track-background: linear-gradient(90deg, var(--rg-primary) 0 var(--rg-value, 58%), var(--rg-surface-input) var(--rg-value, 58%) 100%);
5838
+ appearance: none;
5839
+ background: none;
5840
+ border: 0;
5841
+ min-block-size: 32px;
5842
+ inline-size: 100%;
5843
+ margin: 0;
5844
+ padding: 0;
5845
+ }
5846
+
5847
+ .rg-range-critical {
5848
+ --usk-native-range-track-background: linear-gradient(90deg, var(--rg-success) 0 45%, var(--rg-warning) 45% 72%, var(--rg-danger) 72% 100%);
5849
+ }
5850
+
5851
+ .rg-range::-webkit-slider-runnable-track {
5852
+ border: 1px solid var(--rg-line-strong);
5853
+ border-radius: var(--rg-radius-pill);
5854
+ background: var(--usk-native-range-track-background);
5855
+ height: 7px;
5856
+ box-shadow: inset 0 1px 2px var(--rg-recess);
5857
+ }
5858
+
5859
+ .rg-range::-moz-range-track {
5860
+ border: 1px solid var(--rg-line-strong);
5861
+ border-radius: var(--rg-radius-pill);
5862
+ background: var(--usk-native-range-track-background);
5863
+ height: 7px;
5864
+ box-shadow: inset 0 1px 2px var(--rg-recess);
5865
+ }
5866
+
5867
+ .rg-range::-moz-range-progress {
5868
+ background: none;
5869
+ }
5870
+
5871
+ .rg-range::-webkit-slider-thumb {
5872
+ appearance: none;
5873
+ border: 1px solid var(--rg-line-strong);
5874
+ background: var(--rg-control-material);
5875
+ block-size: 19px;
5876
+ inline-size: 19px;
5877
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
5878
+ border-radius: 50%;
5879
+ margin-top: -7px;
5880
+ }
5881
+
5882
+ .rg-range::-moz-range-thumb {
5883
+ border: 1px solid var(--rg-line-strong);
5884
+ background: var(--rg-control-material);
5885
+ block-size: 19px;
5886
+ inline-size: 19px;
5887
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
5888
+ border-radius: 50%;
5889
+ }
5890
+
5891
+ .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
5892
+ border: 1px solid var(--rg-line-strong);
5893
+ border-radius: var(--rg-radius-pill);
5894
+ background: var(--rg-glass-inset);
5895
+ block-size: 12px;
5896
+ box-shadow: inset 0 1px 3px var(--rg-recess);
5897
+ padding: 2px;
5898
+ overflow: hidden;
5899
+ }
5900
+
5901
+ .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
5902
+ block-size: 100%;
5903
+ inline-size: var(--rg-progress-value, 64%);
5904
+ border-radius: inherit;
5905
+ background: repeating-linear-gradient(125deg,var(--rg-progress-stripe)0 1px,transparent 1px 16px),var(--rg-progress-fill, var(--rg-gloss));
5906
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
5907
+ display: block;
5908
+ }
5909
+
5910
+ .rg-progress-danger {
5911
+ --rg-progress-fill: var(--rg-danger-gloss);
5912
+ }
5913
+
5914
+ .rg-meter {
5915
+ border: 1px solid var(--rg-line-strong);
5916
+ border-radius: var(--rg-radius-pill);
5917
+ background: linear-gradient(90deg,var(--rg-success)0 46%,var(--rg-warning) 46% 72%,var(--rg-danger) 72% 100%);
5918
+ block-size: 8px;
5919
+ margin-block: 12px;
5920
+ position: relative;
5921
+ }
5922
+
5923
+ .rg-meter:after {
5924
+ content: "";
5925
+ border: 1px solid var(--rg-line-strong);
5926
+ background: var(--rg-control-material);
5927
+ block-size: 18px;
5928
+ inline-size: 18px;
5929
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
5930
+ border-radius: 50%;
5931
+ position: absolute;
5932
+ inset-block-start: 50%;
5933
+ inset-inline-start: clamp(0%,var(--rg-value, 72%),100%);
5934
+ transform: translate(-50%, -50%);
5935
+ }
5936
+
5937
+ .rg-stepper {
5938
+ justify-content: space-between;
5939
+ align-items: start;
5940
+ margin: 16px 0 0;
5941
+ padding: 0;
5942
+ list-style: none;
5943
+ display: flex;
5944
+ position: relative;
5945
+ }
5946
+
5947
+ .rg-stepper:before {
5948
+ content: "";
5949
+ background: var(--rg-line-strong);
5950
+ block-size: 2px;
5951
+ position: absolute;
5952
+ inset-block-start: 15px;
5953
+ inset-inline: 12%;
5954
+ }
5955
+
5956
+ .rg-step {
5957
+ color: var(--rg-text-soft);
5958
+ text-align: center;
5959
+ font: 12px/1.4 var(--rg-font-mono);
5960
+ flex: 1;
5961
+ position: relative;
5962
+ }
5963
+
5964
+ .rg-step b {
5965
+ background: var(--rg-surface-soft);
5966
+ border: 1px solid var(--rg-line-strong);
5967
+ border-radius: 50%;
5968
+ justify-content: center;
5969
+ align-items: center;
5970
+ block-size: 24px;
5971
+ inline-size: 24px;
5972
+ margin: 0 auto 8px;
5973
+ display: flex;
5974
+ }
5975
+
5976
+ .rg-step.is-complete b {
5977
+ background: var(--rg-gloss);
5978
+ color: var(--rg-gloss-ink);
5979
+ border-color: var(--rg-primary);
5980
+ }
5981
+
5982
+ .rg-step.is-active b {
5983
+ background: var(--rg-surface-input);
5984
+ color: var(--rg-link);
5985
+ border: 2px solid var(--rg-primary);
5986
+ }
5987
+
5988
+ .rg-alert, :where([data-ui="retro-glass"]) .ui-alert {
5989
+ border: 1px solid var(--rg-primary);
5990
+ border-radius: var(--rg-radius-sm);
5991
+ background: var(--rg-glass-pane);
5992
+ min-block-size: 40px;
5993
+ color: var(--rg-text-soft);
5994
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
5995
+ font: 14px/1.4 var(--rg-font-body);
5996
+ align-items: center;
5997
+ gap: 8px;
5998
+ padding: 8px;
5999
+ display: flex;
6000
+ }
6001
+
6002
+ .rg-alert-body, :where([data-ui="retro-glass"]) .ui-alert-body {
6003
+ margin: 0;
6004
+ }
6005
+
6006
+ .rg-alert-success, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"]) {
6007
+ border-color: var(--rg-success);
6008
+ }
6009
+
6010
+ .rg-alert-warning, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"]) {
6011
+ border-color: var(--rg-warning);
6012
+ }
6013
+
6014
+ .rg-alert-danger, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"]) {
6015
+ border-color: var(--rg-danger);
6016
+ }
6017
+
6018
+ .rg-alert > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert>[aria-hidden="true"] {
6019
+ color: var(--rg-primary);
6020
+ }
6021
+
6022
+ .rg-alert-success > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"])>[aria-hidden="true"] {
6023
+ color: var(--rg-success);
6024
+ }
6025
+
6026
+ .rg-alert-warning > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"])>[aria-hidden="true"] {
6027
+ color: var(--rg-warning);
6028
+ }
6029
+
6030
+ .rg-alert-danger > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"])>[aria-hidden="true"] {
6031
+ color: var(--rg-danger);
6032
+ }
6033
+
6034
+ .rg-toast {
6035
+ border: 1px solid var(--rg-line-strong);
6036
+ border-radius: var(--rg-radius-md);
6037
+ background: var(--rg-glass-pane);
6038
+ color: var(--rg-text);
6039
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
6040
+ align-items: center;
6041
+ gap: 12px;
6042
+ padding: 12px;
6043
+ display: flex;
6044
+ }
6045
+
6046
+ .rg-toast strong {
6047
+ font: 700 14px/1.4 var(--rg-font-mono);
6048
+ display: block;
6049
+ }
6050
+
6051
+ .rg-toast p {
6052
+ color: var(--rg-text-soft);
6053
+ font: 14px/1.4 var(--rg-font-body);
6054
+ margin: 4px 0 0;
6055
+ }
6056
+
6057
+ .rg-skeleton {
6058
+ border-radius: var(--rg-radius-pill);
6059
+ background: linear-gradient(90deg,var(--rg-surface-soft),rgb(var(--rg-text-rgb)/.12),var(--rg-surface-soft));
6060
+ background-size: 200% 100%;
6061
+ block-size: 10px;
6062
+ inline-size: 100%;
6063
+ animation: 1.5s ease-in-out infinite rg-template-pulse;
6064
+ display: block;
6065
+ }
6066
+
6067
+ .rg-breadcrumb, .rg-tabs, .rg-pagination {
6068
+ flex-wrap: wrap;
6069
+ align-items: center;
6070
+ gap: 6px;
6071
+ display: flex;
6072
+ }
6073
+
6074
+ .rg-breadcrumb {
6075
+ color: var(--rg-text-soft);
6076
+ font: 12px/1.4 var(--rg-font-mono);
6077
+ }
6078
+
6079
+ .rg-breadcrumb a {
6080
+ color: var(--rg-text-soft);
6081
+ }
6082
+
6083
+ .rg-breadcrumb [aria-current] {
6084
+ color: var(--rg-link);
6085
+ font-weight: 700;
6086
+ }
6087
+
6088
+ .rg-tab {
6089
+ min-block-size: var(--rg-control-height);
6090
+ border: 0;
6091
+ border-bottom: 2px solid var(--rg-line-strong);
6092
+ color: var(--rg-text-soft);
6093
+ font: 700 12px/1.4 var(--rg-font-mono);
6094
+ cursor: pointer;
6095
+ background: none;
6096
+ border-radius: 6px 6px 0 0;
6097
+ padding: 8px 12px;
6098
+ }
6099
+
6100
+ .rg-tab:hover, .rg-tab.is-active, .rg-tab[aria-selected="true"] {
6101
+ background: linear-gradient(rgb(var(--rg-primary-rgb)/.2),rgb(var(--rg-primary-rgb)/.2)),var(--rg-surface-input);
6102
+ border-bottom-color: var(--rg-primary);
6103
+ color: var(--rg-text);
6104
+ }
6105
+
6106
+ .rg-pagination-page {
6107
+ min-inline-size: 36px;
6108
+ padding: 8px;
6109
+ font-size: 12px;
6110
+ }
6111
+
6112
+ .rg-nav, :where([data-ui="retro-glass"]) .ui-nav {
6113
+ box-shadow: none;
6114
+ background: none;
6115
+ border: 0;
6116
+ gap: 6px;
6117
+ padding: 0;
6118
+ }
6119
+
6120
+ .rg-nav-link, :where([data-ui="retro-glass"]) .ui-nav-link {
6121
+ min-block-size: var(--rg-control-height);
6122
+ background: var(--rg-control-material);
6123
+ border: 1px solid var(--rg-line-strong);
6124
+ border-radius: var(--rg-radius-sm);
6125
+ color: var(--rg-text-soft);
6126
+ text-shadow: none;
6127
+ letter-spacing: 0;
6128
+ padding: 8px 12px;
6129
+ }
6130
+
6131
+ .rg-nav-link:hover, :where([data-ui="retro-glass"]) .ui-nav-link:hover {
6132
+ color: var(--rg-text);
6133
+ background: var(--rg-control-material);
6134
+ }
6135
+
6136
+ .rg-nav-link.is-active, .rg-nav-link[aria-current="page"], :where([data-ui="retro-glass"]) .ui-nav-link.is-active, :where([data-ui="retro-glass"]) .ui-nav-link[aria-current="page"] {
6137
+ background: var(--rg-gloss);
6138
+ color: var(--rg-gloss-ink);
6139
+ box-shadow: inset 0 1px 0 var(--rg-highlight);
6140
+ }
6141
+
6142
+ .rg-table-wrap, :where([data-ui="retro-glass"]) .ui-table-wrap {
6143
+ box-shadow: none;
6144
+ background: none;
6145
+ border: 0;
6146
+ }
6147
+
6148
+ .rg-table, :where([data-ui="retro-glass"]) .ui-table {
6149
+ border-collapse: collapse;
6150
+ color: var(--rg-text-soft);
6151
+ font: 14px/1.4 var(--rg-font-body);
6152
+ }
6153
+
6154
+ .rg-table th, :where([data-ui="retro-glass"]) .ui-table th {
6155
+ background: linear-gradient(180deg,rgb(var(--rg-surface-strong-rgb)/.15),transparent);
6156
+ color: var(--rg-text-soft);
6157
+ font: 700 12px/1.4 var(--rg-font-mono);
6158
+ text-shadow: none;
6159
+ padding: 8px;
6160
+ }
6161
+
6162
+ .rg-table td, :where([data-ui="retro-glass"]) .ui-table td {
6163
+ border-block-start: 1px solid var(--rg-line-color);
6164
+ padding: 8px;
6165
+ }
6166
+
6167
+ .rg-avatar {
6168
+ border: 2px solid var(--rg-surface-raised);
6169
+ background: var(--rg-gloss);
6170
+ block-size: 34px;
6171
+ inline-size: 34px;
6172
+ color: var(--rg-gloss-ink);
6173
+ font: 700 12px/1 var(--rg-font-body);
6174
+ border-radius: 50%;
6175
+ flex: 0 0 34px;
6176
+ justify-content: center;
6177
+ align-items: center;
6178
+ display: inline-flex;
6179
+ box-shadow: 0 1px 3px #0000004d;
6180
+ }
6181
+
6182
+ .rg-avatar-danger {
6183
+ background: var(--rg-danger-gloss);
6184
+ color: rgb(var(--usk-danger-text-rgb, 255 255 255));
6185
+ }
6186
+
6187
+ .rg-avatar-neutral {
6188
+ background: var(--rg-surface-soft);
6189
+ color: var(--rg-text);
6190
+ }
6191
+
6192
+ .rg-avatar-group {
6193
+ padding-inline-start: 7px;
6194
+ display: flex;
6195
+ }
6196
+
6197
+ .rg-avatar-group .rg-avatar {
6198
+ margin-inline-start: -7px;
6199
+ }
6200
+
6201
+ .rg-list {
6202
+ color: var(--rg-text-soft);
6203
+ font: 14px/1.5 var(--rg-font-body);
6204
+ margin: 0;
6205
+ padding-inline-start: 20px;
6206
+ }
6207
+
6208
+ .rg-list li {
6209
+ padding: 4px 0;
6210
+ }
6211
+
6212
+ .rg-list li::marker {
6213
+ color: var(--rg-link);
6214
+ }
6215
+
6216
+ .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
6217
+ background: var(--rg-text);
6218
+ max-inline-size: 100%;
6219
+ color: var(--rg-bg);
6220
+ border: 1px solid var(--rg-focus);
6221
+ border-radius: var(--rg-radius-sm);
6222
+ box-shadow: none;
6223
+ font: 700 12px/1.4 var(--rg-font-mono);
6224
+ letter-spacing: 0;
6225
+ padding: 12px;
6226
+ }
6227
+
6228
+ .rg-modal {
6229
+ max-inline-size: min(440px, 100vw - 32px);
6230
+ }
6231
+
6232
+ .rg-modal::backdrop {
6233
+ background: rgb(var(--rg-bg-rgb)/.7);
6234
+ }
6235
+
6236
+ .rg-modal h3, .rg-popover strong {
6237
+ color: var(--rg-text);
6238
+ font: 700 14px/1.4 var(--rg-font-mono);
6239
+ margin: 0 0 8px;
6240
+ }
6241
+
6242
+ .rg-modal p, .rg-popover p {
6243
+ color: var(--rg-text-soft);
6244
+ margin: 0 0 12px;
6245
+ }
6246
+
6247
+ .rg-modal-actions {
6248
+ flex-wrap: wrap;
6249
+ justify-content: end;
6250
+ gap: 8px;
6251
+ display: flex;
6252
+ }
6253
+
6254
+ .rg-accordion {
6255
+ background: var(--rg-glass-inset);
6256
+ border: 1px solid var(--rg-line-strong);
6257
+ border-radius: var(--rg-radius-sm);
6258
+ color: var(--rg-text);
6259
+ margin: 0;
6260
+ padding: 0;
6261
+ }
6262
+
6263
+ .rg-accordion summary {
6264
+ min-block-size: 36px;
6265
+ font: 700 12px/1.4 var(--rg-font-mono);
6266
+ cursor: pointer;
6267
+ padding: 10px 12px;
6268
+ }
6269
+
6270
+ .rg-accordion p {
6271
+ color: var(--rg-text-soft);
6272
+ font: 14px/1.4 var(--rg-font-body);
6273
+ margin: 0;
6274
+ padding: 4px 12px 12px;
6275
+ }
6276
+
6277
+ .rg-code {
6278
+ border-inline-start: 3px solid var(--rg-primary);
6279
+ border-radius: var(--rg-radius-sm);
6280
+ background: var(--rg-glass-inset);
6281
+ color: var(--rg-text-soft);
6282
+ white-space: pre-wrap;
6283
+ overflow-wrap: break-word;
6284
+ font: 12px/1.5 var(--rg-font-mono);
6285
+ margin: 0;
6286
+ padding: 12px;
6287
+ display: block;
6288
+ }
6289
+
6290
+ .rg-quote {
6291
+ border-inline-start: 3px solid var(--rg-primary);
6292
+ color: var(--rg-text-soft);
6293
+ font: italic 14px/1.5 var(--rg-font-body);
6294
+ margin: 0;
6295
+ padding: 8px 12px;
6296
+ }
6297
+
6298
+ .rg-token-swatch {
6299
+ min-inline-size: 46px;
6300
+ color: var(--rg-text-soft);
6301
+ font: 12px/1.3 var(--rg-font-mono);
6302
+ flex-direction: column;
6303
+ gap: 6px;
6304
+ display: inline-flex;
6305
+ }
6306
+
6307
+ .rg-token-swatch i {
6308
+ border: 1px solid var(--rg-line-strong);
6309
+ border-radius: var(--rg-radius-sm);
6310
+ background: var(--rg-token-swatch-color, var(--rg-primary));
6311
+ block-size: 28px;
6312
+ inline-size: 46px;
6313
+ display: block;
6314
+ box-shadow: inset 0 1px #ffffff80, 0 1px 3px #00000038;
6315
+ }
6316
+
6317
+ .rg-spinner:before, .rg-spinner:after, .rg-loading-spinner:before, .rg-loading-spinner:after {
6318
+ content: none;
6319
+ }
6320
+
6321
+ .rg-icon-medallion {
6322
+ background: var(--rg-gloss);
6323
+ color: var(--rg-gloss-ink);
6324
+ border-color: var(--rg-line-strong);
6325
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 2px 4px var(--rg-recess);
6326
+ }
6327
+
6328
+ .rg-card-service > .rg-icon-medallion {
6329
+ font-size: 32px;
6330
+ font-weight: 800;
6331
+ }
6332
+
6333
+ .rg-badge-seal {
6334
+ background: var(--rg-control-material);
6335
+ color: var(--rg-text);
6336
+ border-color: var(--rg-line-strong);
6337
+ box-shadow: inset 0 1px 0 var(--rg-highlight),0 2px 4px var(--rg-recess);
6338
+ font-size: .78rem;
6339
+ }
6340
+
6341
+ .rg-badge-seal > :where(strong, small) {
6342
+ color: inherit;
6343
+ opacity: 1;
6344
+ }
6345
+
6346
+ [data-ui="retro-glass"][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
6347
+ border-radius: var(--rg-radius-sm);
6348
+ }
6349
+
6350
+ [data-ui="retro-glass"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
6351
+ border-color: var(--rg-danger);
6352
+ box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 0 0 1px var(--rg-danger);
6353
+ }
6354
+
6355
+ [data-ui="retro-glass"][data-mode] :where(input[readonly]:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea[readonly]) {
6356
+ filter: saturate(.72);
6357
+ opacity: .78;
6358
+ border-style: dashed;
6359
+ }
6360
+
6361
+ .rg-choice input[type="checkbox"] {
6362
+ appearance: auto;
6363
+ }
6364
+
6365
+ .rg-choice input[type="checkbox"]:before, .rg-choice input[type="checkbox"]:after {
6366
+ content: none;
6367
+ }
6368
+
6369
+ [data-ui="retro-glass"] :focus-visible {
6370
+ outline: 2px solid var(--rg-focus);
6371
+ outline-offset: 2px;
6372
+ }
6373
+
6374
+ @keyframes rg-template-pulse {
6375
+ 50% {
6376
+ background-position: -100% 0;
6377
+ }
6378
+ }
6379
+
6380
+ @media (any-pointer: coarse) {
6381
+ .rg-button, .rg-icon-button, .rg-segment, .rg-pagination-page, .rg-option, .rg-tab, .rg-choice, .rg-switch, .rg-range, .rg-chip, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button, :where([data-ui="retro-glass"]) .ui-switch {
6382
+ min-block-size: 44px;
6383
+ }
6384
+
6385
+ .rg-icon-button, .rg-pagination-page, :where([data-ui="retro-glass"]) .ui-icon-button {
6386
+ min-inline-size: 44px;
6387
+ }
6388
+
6389
+ .rg-accordion summary {
6390
+ min-block-size: 44px;
6391
+ }
6392
+ }
6393
+
6394
+ @media (prefers-reduced-motion: reduce) {
6395
+ .rg-skeleton, .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
6396
+ animation: none;
6397
+ }
6398
+ }
6399
+
6400
+ @media (forced-colors: active) {
6401
+ .rg-switch input, :where([data-ui="retro-glass"]) .ui-switch input {
6402
+ opacity: 1;
6403
+ block-size: 20px;
6404
+ inline-size: 20px;
6405
+ position: static;
6406
+ }
6407
+
6408
+ .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
6409
+ display: none;
6410
+ }
6411
+
6412
+ .rg-range {
6413
+ appearance: auto;
6414
+ }
6415
+
6416
+ .rg-step b, .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
6417
+ border-color: canvastext;
6418
+ }
6419
+
6420
+ .rg-step.is-complete b, .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
6421
+ color: highlighttext;
6422
+ background: highlight;
6423
+ }
6424
+ }
6425
+
6426
+ [data-ui="retro-glass"][data-mode] .rg-button.rg-button-warning, :where([data-ui="retro-glass"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
6427
+ background: var(--rg-warning);
6428
+ color: var(--rg-on-warning);
6429
+ border-color: var(--rg-warning);
6430
+ text-shadow: none;
6431
+ }
6432
+ }
6433
+
6434
+ [data-ui="retro-glass"][data-mode] .rg-title {
6435
+ letter-spacing: max(.06em, .5px);
6436
+ margin-block: max(.75rem, 12px);
6437
+ }
6438
+
6439
+ [data-ui="retro-glass"][data-mode] .rg-feature-item > .rg-icon-medallion {
6440
+ font-size: 1.5rem;
6441
+ line-height: 1;
6442
+ }
6443
+
6444
+ [data-ui="retro-glass"][data-mode] .rg-callout-bar > .rg-icon-medallion {
6445
+ min-block-size: 4.5rem;
6446
+ min-inline-size: 4.5rem;
6447
+ font-size: 2rem;
6448
+ font-weight: 800;
6449
+ line-height: 1;
4534
6450
  }