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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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="maximalist"])[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); }
@@ -3506,17 +3753,17 @@
3506
3753
  /* styles/maximalist.css (visual paint) */
3507
3754
  @layer ui-style-kit.presets {
3508
3755
  :root {
3509
- --max-font-sans: Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
3510
- --max-font-display: Cooper Black, Baloo 2, Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
3756
+ --max-font-sans: "Arial Narrow", "Roboto Condensed", "Bahnschrift Condensed", "Aptos Narrow", Arial, ui-sans-serif, system-ui, sans-serif;
3757
+ --max-font-display: "Arial Narrow", "Roboto Condensed", "Bahnschrift Condensed", "Aptos Narrow", Arial, ui-sans-serif, system-ui, sans-serif;
3511
3758
  --max-font-body: var(--max-font-sans);
3512
3759
  --max-font-heading: var(--max-font-display);
3513
3760
  --max-font-control: var(--max-font-display);
3514
3761
  --max-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
3515
- --max-radius-xs: .25rem;
3516
- --max-radius-sm: .5rem;
3517
- --max-radius-md: 1.2rem;
3518
- --max-radius-lg: 2rem;
3519
- --max-radius-xl: calc(2rem + .5rem);
3762
+ --max-radius-xs: 0;
3763
+ --max-radius-sm: 0;
3764
+ --max-radius-md: 0;
3765
+ --max-radius-lg: 0;
3766
+ --max-radius-xl: 0;
3520
3767
  --max-radius-pill: 999px;
3521
3768
  --max-space-1: .25rem;
3522
3769
  --max-space-2: .5rem;
@@ -3533,28 +3780,97 @@
3533
3780
  --lightningcss-light: initial;
3534
3781
  --lightningcss-dark: ;
3535
3782
  color-scheme: light;
3536
- --max-panel-alpha: .98;
3537
- --max-panel-soft-alpha: .78;
3538
- --max-border-alpha: .58;
3539
- --max-shadow-alpha: .12;
3540
- --max-focus-alpha: .34;
3783
+ --max-fallback-bg-rgb: 244 237 218;
3784
+ --max-fallback-surface-rgb: 255 250 238;
3785
+ --max-fallback-surface-strong-rgb: 255 250 240;
3786
+ --max-fallback-surface-soft-rgb: 239 228 202;
3787
+ --max-fallback-text-rgb: 9 9 11;
3788
+ --max-fallback-text-muted-rgb: 86 80 74;
3789
+ --max-fallback-border-rgb: 9 9 11;
3790
+ --max-fallback-primary-rgb: 240 45 22;
3791
+ --max-fallback-primary-hover-rgb: 240 45 22;
3792
+ --max-fallback-primary-text-rgb: 9 9 11;
3793
+ --max-fallback-secondary-rgb: 16 190 213;
3794
+ --max-fallback-secondary-hover-rgb: 0 151 173;
3795
+ --max-fallback-secondary-text-rgb: 9 9 11;
3796
+ --max-fallback-accent-rgb: 94 22 216;
3797
+ --max-fallback-accent-text-rgb: 255 250 240;
3798
+ --max-fallback-success-rgb: 18 155 120;
3799
+ --max-fallback-success-text-rgb: 9 9 11;
3800
+ --max-fallback-warning-rgb: 255 210 10;
3801
+ --max-fallback-warning-text-rgb: 9 9 11;
3802
+ --max-fallback-danger-rgb: 238 23 99;
3803
+ --max-fallback-danger-text-rgb: 9 9 11;
3804
+ --max-fallback-link-rgb: 94 22 216;
3805
+ --max-fallback-focus-rgb: 94 22 216;
3806
+ --max-panel-alpha: 1;
3807
+ --max-panel-soft-alpha: 1;
3808
+ --max-border-alpha: 1;
3809
+ --max-shadow-alpha: 1;
3810
+ --max-focus-alpha: .68;
3541
3811
  }
3542
3812
 
3543
3813
  [data-ui="maximalist"][data-mode="dark"] {
3544
3814
  --lightningcss-light: ;
3545
3815
  --lightningcss-dark: initial;
3546
3816
  color-scheme: dark;
3547
- --max-panel-alpha: .92;
3548
- --max-panel-soft-alpha: .64;
3549
- --max-border-alpha: .52;
3550
- --max-shadow-alpha: .34;
3551
- --max-focus-alpha: .42;
3817
+ --max-fallback-bg-rgb: 10 11 13;
3818
+ --max-fallback-surface-rgb: 14 15 18;
3819
+ --max-fallback-surface-strong-rgb: 16 17 20;
3820
+ --max-fallback-surface-soft-rgb: 29 27 34;
3821
+ --max-fallback-text-rgb: 245 234 214;
3822
+ --max-fallback-text-muted-rgb: 200 186 169;
3823
+ --max-fallback-border-rgb: 241 227 204;
3824
+ --max-fallback-primary-rgb: 255 53 31;
3825
+ --max-fallback-primary-hover-rgb: 255 103 84;
3826
+ --max-fallback-primary-text-rgb: 9 9 11;
3827
+ --max-fallback-secondary-rgb: 24 212 232;
3828
+ --max-fallback-secondary-hover-rgb: 81 228 241;
3829
+ --max-fallback-secondary-text-rgb: 9 9 11;
3830
+ --max-fallback-accent-rgb: 129 44 244;
3831
+ --max-fallback-accent-text-rgb: 245 234 214;
3832
+ --max-fallback-success-rgb: 25 184 139;
3833
+ --max-fallback-success-text-rgb: 9 9 11;
3834
+ --max-fallback-warning-rgb: 255 218 25;
3835
+ --max-fallback-warning-text-rgb: 9 9 11;
3836
+ --max-fallback-danger-rgb: 255 40 110;
3837
+ --max-fallback-danger-text-rgb: 9 9 11;
3838
+ --max-fallback-link-rgb: 24 212 232;
3839
+ --max-fallback-focus-rgb: 255 218 25;
3840
+ --max-panel-alpha: 1;
3841
+ --max-panel-soft-alpha: 1;
3842
+ --max-border-alpha: 1;
3843
+ --max-shadow-alpha: 1;
3844
+ --max-focus-alpha: .74;
3552
3845
  }
3553
3846
 
3554
3847
  [data-ui="maximalist"][data-mode="contrast"] {
3555
3848
  --lightningcss-light: ;
3556
3849
  --lightningcss-dark: initial;
3557
3850
  color-scheme: dark;
3851
+ --max-fallback-bg-rgb: 0 0 0;
3852
+ --max-fallback-surface-rgb: 5 11 0;
3853
+ --max-fallback-surface-strong-rgb: 11 22 0;
3854
+ --max-fallback-surface-soft-rgb: 0 0 0;
3855
+ --max-fallback-text-rgb: 255 255 255;
3856
+ --max-fallback-text-muted-rgb: 244 255 232;
3857
+ --max-fallback-border-rgb: 255 255 255;
3858
+ --max-fallback-primary-rgb: 170 255 0;
3859
+ --max-fallback-primary-hover-rgb: 255 255 255;
3860
+ --max-fallback-primary-text-rgb: 0 0 0;
3861
+ --max-fallback-secondary-rgb: 0 240 255;
3862
+ --max-fallback-secondary-hover-rgb: 255 255 255;
3863
+ --max-fallback-secondary-text-rgb: 0 0 0;
3864
+ --max-fallback-accent-rgb: 204 255 0;
3865
+ --max-fallback-accent-text-rgb: 0 0 0;
3866
+ --max-fallback-success-rgb: 0 255 117;
3867
+ --max-fallback-success-text-rgb: 0 0 0;
3868
+ --max-fallback-warning-rgb: 255 225 0;
3869
+ --max-fallback-warning-text-rgb: 0 0 0;
3870
+ --max-fallback-danger-rgb: 255 48 48;
3871
+ --max-fallback-danger-text-rgb: 0 0 0;
3872
+ --max-fallback-link-rgb: 170 255 0;
3873
+ --max-fallback-focus-rgb: 255 255 255;
3558
3874
  --max-panel-alpha: 1;
3559
3875
  --max-panel-soft-alpha: .92;
3560
3876
  --max-border-alpha: 1;
@@ -3577,15 +3893,42 @@
3577
3893
  --max-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
3894
  --max-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
3895
  --max-accent-rgb: var(--usk-accent-rgb);
3580
- --max-success-rgb: var(--usk-success-rgb);
3581
- --max-warning-rgb: var(--usk-warning-rgb);
3582
- --max-danger-rgb: var(--usk-danger-rgb);
3583
- --max-link-rgb: var(--usk-link-rgb);
3584
3896
  --max-accent-text-rgb: var(--usk-accent-text-rgb);
3897
+ --max-success-rgb: var(--usk-success-rgb);
3585
3898
  --max-success-text-rgb: var(--usk-success-text-rgb);
3899
+ --max-warning-rgb: var(--usk-warning-rgb);
3586
3900
  --max-warning-text-rgb: var(--usk-warning-text-rgb);
3901
+ --max-danger-rgb: var(--usk-danger-rgb);
3587
3902
  --max-danger-text-rgb: var(--usk-danger-text-rgb);
3903
+ --max-link-rgb: var(--usk-link-rgb);
3588
3904
  --max-focus-rgb: var(--usk-focus-rgb);
3905
+ }
3906
+
3907
+ [data-ui="maximalist"][data-mode] {
3908
+ --usk-native-bg: var(--max-bg);
3909
+ --max-bg-rgb: var(--usk-bg-rgb, var(--max-fallback-bg-rgb));
3910
+ --max-surface-rgb: var(--usk-surface-rgb, var(--max-fallback-surface-rgb));
3911
+ --max-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--max-fallback-surface-strong-rgb));
3912
+ --max-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--max-fallback-surface-soft-rgb));
3913
+ --max-text-rgb: var(--usk-text-rgb, var(--max-fallback-text-rgb));
3914
+ --max-text-muted-rgb: var(--usk-text-muted-rgb, var(--max-fallback-text-muted-rgb));
3915
+ --max-border-rgb: var(--usk-border-rgb, var(--max-fallback-border-rgb));
3916
+ --max-primary-rgb: var(--usk-primary-rgb, var(--max-fallback-primary-rgb));
3917
+ --max-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--max-fallback-primary-hover-rgb));
3918
+ --max-primary-text-rgb: var(--usk-primary-text-rgb, var(--max-fallback-primary-text-rgb));
3919
+ --max-secondary-rgb: var(--usk-secondary-rgb, var(--max-fallback-secondary-rgb));
3920
+ --max-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--max-fallback-secondary-hover-rgb));
3921
+ --max-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--max-fallback-secondary-text-rgb));
3922
+ --max-accent-rgb: var(--usk-accent-rgb, var(--max-fallback-accent-rgb));
3923
+ --max-accent-text-rgb: var(--usk-accent-text-rgb, var(--max-fallback-accent-text-rgb));
3924
+ --max-success-rgb: var(--usk-success-rgb, var(--max-fallback-success-rgb));
3925
+ --max-success-text-rgb: var(--usk-success-text-rgb, var(--max-fallback-success-text-rgb));
3926
+ --max-warning-rgb: var(--usk-warning-rgb, var(--max-fallback-warning-rgb));
3927
+ --max-warning-text-rgb: var(--usk-warning-text-rgb, var(--max-fallback-warning-text-rgb));
3928
+ --max-danger-rgb: var(--usk-danger-rgb, var(--max-fallback-danger-rgb));
3929
+ --max-danger-text-rgb: var(--usk-danger-text-rgb, var(--max-fallback-danger-text-rgb));
3930
+ --max-link-rgb: var(--usk-link-rgb, var(--max-fallback-link-rgb));
3931
+ --max-focus-rgb: var(--usk-focus-rgb, var(--max-fallback-focus-rgb));
3589
3932
  --usk-native-surface: var(--max-surface);
3590
3933
  --usk-native-surface-strong: var(--max-surface-strong);
3591
3934
  --usk-native-surface-soft: var(--max-surface-soft);
@@ -3612,9 +3955,60 @@
3612
3955
  --usk-native-shadow: var(--max-shadow-sm, none);
3613
3956
  --usk-native-shadow-md: var(--max-shadow-md, var(--usk-native-shadow));
3614
3957
  --usk-native-focus-ring: var(--max-focus-ring, 0 0 0 3px rgb(var(--max-focus-rgb) / .28));
3615
- --usk-native-border-width: 1px;
3616
- --usk-native-field-gap: .5rem;
3958
+ --usk-native-border-width: 2px;
3959
+ --usk-native-field-gap: .46rem;
3617
3960
  --usk-native-panel-padding: var(--max-space-5);
3961
+ --usk-native-control-min-block-size: 3rem;
3962
+ --usk-native-control-padding-block: .62rem;
3963
+ --usk-native-control-padding-inline: .9rem;
3964
+ --usk-native-subcontrol-padding-block: .52rem;
3965
+ --usk-native-subcontrol-padding-inline: .72rem;
3966
+ --usk-native-choice-size: 1.25rem;
3967
+ --usk-native-choice-background: var(--max-paper-bg);
3968
+ --usk-native-choice-border: 2px solid var(--max-ink);
3969
+ --usk-native-checkbox-radius: .08rem;
3970
+ --usk-native-radio-radius: 50%;
3971
+ --usk-native-choice-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .72);
3972
+ --usk-native-choice-checked-background: var(--max-primary);
3973
+ --usk-native-choice-mark-color: var(--max-on-primary);
3974
+ --usk-native-select-indicator-image: linear-gradient(33deg, transparent 50%, var(--max-primary) 50%), linear-gradient(147deg, var(--max-primary) 50%, transparent 50%);
3975
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
3976
+ --usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - .84rem) 50%;
3977
+ --usk-native-select-padding-inline-end: 2.55rem;
3978
+ --usk-native-range-track-size: .72rem;
3979
+ --usk-native-range-track-background: var(--max-paper-bg);
3980
+ --usk-native-range-track-border: 2px solid var(--max-ink);
3981
+ --usk-native-range-track-radius: 0;
3982
+ --usk-native-range-track-shadow: .22rem .22rem 0 var(--max-ink);
3983
+ --usk-native-range-progress-background: var(--max-warning);
3984
+ --usk-native-range-thumb-size: 1.62rem;
3985
+ --usk-native-range-thumb-background: var(--max-warning);
3986
+ --usk-native-range-thumb-border: 3px solid var(--max-ink);
3987
+ --usk-native-range-thumb-radius: 50%;
3988
+ --usk-native-range-thumb-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .8);
3989
+ --usk-native-progress-size: .95rem;
3990
+ --usk-native-progress-track-background: var(--max-paper-bg);
3991
+ --usk-native-progress-track-border: 2px solid var(--max-ink);
3992
+ --usk-native-progress-track-radius: 0;
3993
+ --usk-native-progress-track-shadow: .22rem .22rem 0 var(--max-ink);
3994
+ --usk-native-progress-value-background: repeating-linear-gradient(90deg, rgb(var(--max-text-rgb) / .28) 0 .08rem, transparent .08rem 2rem), linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary));
3995
+ --usk-native-progress-value-radius: 0;
3996
+ --usk-native-progress-value-shadow: .12rem 0 0 rgb(var(--max-text-rgb) / .36);
3997
+ --usk-native-meter-optimum-background: var(--max-success);
3998
+ --usk-native-meter-suboptimum-background: var(--max-warning);
3999
+ --usk-native-meter-critical-background: var(--max-danger);
4000
+ --usk-native-file-button-background: var(--max-primary);
4001
+ --usk-native-file-button-border: 2px solid var(--max-ink);
4002
+ --usk-native-file-button-radius: .12rem;
4003
+ --usk-native-file-button-shadow: .22rem .22rem 0 var(--max-ink);
4004
+ --usk-native-color-swatch-border: 2px solid var(--max-ink);
4005
+ --usk-native-color-swatch-radius: .12rem;
4006
+ --usk-native-indicator-opacity: .82;
4007
+ --usk-native-indicator-filter: none;
4008
+ --usk-native-scrollbar-size: 1rem;
4009
+ --usk-native-scrollbar-track: var(--max-surface-soft);
4010
+ --usk-native-scrollbar-thumb: var(--max-primary);
4011
+ --usk-native-scrollbar-radius: .12rem;
3618
4012
  --max-bg: rgb(var(--max-bg-rgb));
3619
4013
  --max-surface: rgb(var(--max-surface-rgb) / var(--max-panel-alpha));
3620
4014
  --max-surface-strong: rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha));
@@ -3645,23 +4039,35 @@
3645
4039
  --max-link: rgb(var(--max-link-rgb));
3646
4040
  --max-focus: rgb(var(--max-focus-rgb));
3647
4041
  --max-focus-ring: 0 0 0 3px rgb(var(--max-focus-rgb) / var(--max-focus-alpha));
3648
- --max-theme-bg-size: auto;
3649
- --max-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--max-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--max-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--max-secondary-rgb) / .1), transparent 34rem), var(--max-bg);
3650
- --max-card-bg: linear-gradient(135deg, rgb(var(--max-primary-rgb) / .1), rgb(var(--max-accent-rgb) / .055) 42%, rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha)) 100%), var(--max-surface);
3651
- --max-control-bg: linear-gradient(180deg, rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha)), rgb(var(--max-surface-soft-rgb) / var(--max-panel-soft-alpha)));
4042
+ --max-ink: rgb(var(--max-text-rgb));
4043
+ --max-on-ink: rgb(var(--max-bg-rgb));
4044
+ --max-paper-wash: rgb(var(--max-warning-rgb) / .08);
4045
+ --max-paper-grain: radial-gradient(circle at 14% 18%, rgb(var(--max-text-rgb) / .055) 0 1px, transparent 1.4px), radial-gradient(circle at 72% 64%, rgb(var(--max-danger-rgb) / .07) 0 1px, transparent 1.5px);
4046
+ --max-paper-bg: var(--max-surface-strong);
4047
+ --max-poster-fill: var(--max-primary);
4048
+ --max-label-bg: var(--max-primary);
4049
+ --max-label-fg: var(--max-on-primary);
4050
+ --max-pop-shadow: 5px 5px 0 var(--max-ink);
4051
+ --max-sticker-shadow: 3px 3px 0 var(--max-ink);
4052
+ --max-shadow-sm: 3px 3px 0 var(--max-ink);
4053
+ --max-shadow-md: 5px 5px 0 var(--max-ink);
4054
+ --max-theme-bg-size: 9rem 9rem, 13rem 13rem, auto;
4055
+ --max-theme-bg: radial-gradient(circle at 16% 24%, rgb(var(--max-secondary-rgb) / .09) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 68%, rgb(var(--max-danger-rgb) / .08) 0 1px, transparent 1.6px), var(--max-bg);
4056
+ --max-card-bg: var(--max-paper-grain), var(--max-surface);
4057
+ --max-control-bg: var(--max-surface-strong);
3652
4058
  --max-spinner-track: rgb(var(--max-border-rgb) / max(.28, calc(var(--max-border-alpha) * .7)));
3653
4059
  --max-spinner-stroke: var(--max-primary);
3654
4060
  --max-spinner-accent: var(--max-accent);
3655
4061
  }
3656
4062
 
3657
4063
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="maximalist"][data-theme][data-mode] {
4064
+ [data-ui="maximalist"][data-mode] {
3659
4065
  --max-border: color-mix(in srgb, rgb(var(--max-border-rgb) / max(var(--max-border-alpha), var(--usk-border-min-alpha))), var(--max-text) var(--usk-border-text-mix));
3660
4066
  }
3661
4067
  }
3662
4068
 
3663
4069
  [data-ui="maximalist"] {
3664
- background: radial-gradient(circle at 10% 10%,rgb(var(--max-primary-rgb)/.18),transparent 20rem),radial-gradient(circle at 90% 0%,rgb(var(--max-secondary-rgb)/.2),transparent 22rem),var(--max-bg);
4070
+ background: repeating-linear-gradient(135deg,rgb(var(--max-primary-rgb)/.12)0 1rem,transparent 1rem 2rem),radial-gradient(circle at 90% 0%,rgb(var(--max-secondary-rgb)/.2),transparent 22rem),var(--max-bg);
3665
4071
  color: var(--max-text);
3666
4072
  font-family: var(--max-font-body);
3667
4073
  text-rendering: optimizelegibility;
@@ -3674,21 +4080,24 @@
3674
4080
  box-sizing: border-box;
3675
4081
  }
3676
4082
 
3677
- [data-ui="maximalist"][data-theme][data-mode] {
4083
+ [data-ui="maximalist"][data-mode] {
3678
4084
  background: var(--max-theme-bg);
3679
4085
  background-size: var(--max-theme-bg-size);
3680
4086
  }
3681
4087
 
3682
4088
  .max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-badge, :where([data-ui="maximalist"]) .ui-nav-link {
3683
4089
  font-family: var(--max-font-heading);
4090
+ text-transform: uppercase;
3684
4091
  }
3685
4092
 
3686
4093
  .max-title {
3687
4094
  color: var(--max-text);
3688
- letter-spacing: -.04em;
4095
+ letter-spacing: .015em;
4096
+ text-transform: uppercase;
3689
4097
  margin: 0;
3690
- font-size: clamp(2rem, 5vw, 3.7rem);
3691
- line-height: 1.02;
4098
+ font-size: clamp(2.4rem, 7vw, 5.8rem);
4099
+ font-weight: 950;
4100
+ line-height: .86;
3692
4101
  }
3693
4102
 
3694
4103
  @supports (text-wrap: balance) {
@@ -3699,25 +4108,33 @@
3699
4108
 
3700
4109
  .max-heading {
3701
4110
  color: var(--max-text);
3702
- letter-spacing: -.03em;
4111
+ letter-spacing: .02em;
4112
+ text-transform: uppercase;
3703
4113
  margin: 0;
3704
- font-size: clamp(1.2rem, 2.5vw, 2rem);
3705
- line-height: 1.15;
4114
+ font-size: clamp(1.35rem, 3vw, 2.45rem);
4115
+ font-weight: 950;
4116
+ line-height: .95;
3706
4117
  }
3707
4118
 
3708
4119
  .max-kicker {
3709
- color: var(--max-primary);
3710
- letter-spacing: .12em;
4120
+ background: var(--max-label-bg);
4121
+ width: fit-content;
4122
+ color: var(--max-label-fg);
4123
+ border: 2px solid var(--max-ink);
4124
+ letter-spacing: .08em;
3711
4125
  text-transform: uppercase;
3712
4126
  margin: 0;
3713
- font-size: .82rem;
3714
- font-weight: 850;
4127
+ padding: .18rem .6rem;
4128
+ font-size: .8rem;
4129
+ font-weight: 950;
4130
+ display: inline-flex;
4131
+ transform: rotate(-1deg);
3715
4132
  }
3716
4133
 
3717
4134
  .max-subtitle, .max-copy {
3718
4135
  color: var(--max-text-muted);
3719
4136
  margin: 0;
3720
- line-height: 1.65;
4137
+ line-height: 1.5;
3721
4138
  }
3722
4139
 
3723
4140
  .max-text-muted {
@@ -3725,18 +4142,19 @@
3725
4142
  }
3726
4143
 
3727
4144
  .max-divider {
3728
- background: var(--max-border);
3729
- border: 0;
4145
+ background: var(--max-ink);
3730
4146
  width: 100%;
3731
4147
  height: 3px;
4148
+ box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb)/.72);
4149
+ border: 0;
3732
4150
  }
3733
4151
 
3734
4152
  .max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap, :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap {
3735
- background: linear-gradient(135deg,rgb(var(--max-accent-rgb)/.18),transparent 42%),var(--max-surface);
4153
+ background: var(--max-card-bg);
3736
4154
  color: var(--max-text);
3737
- border: 3px solid var(--max-border);
4155
+ border: 3px solid var(--max-ink);
3738
4156
  border-radius: var(--max-radius-lg);
3739
- box-shadow: 8px 8px 0 rgb(var(--max-border-rgb)/.86);
4157
+ box-shadow: var(--max-pop-shadow);
3740
4158
  transition: transform var(--max-transition-base),box-shadow var(--max-transition-base),border-color var(--max-transition-base),background var(--max-transition-base);
3741
4159
  position: relative;
3742
4160
  }
@@ -3756,26 +4174,26 @@
3756
4174
 
3757
4175
  .max-surface-sm {
3758
4176
  border-radius: var(--max-radius-md);
3759
- box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--max-shadow-alpha)*.72));
4177
+ box-shadow: var(--max-shadow-sm);
3760
4178
  }
3761
4179
 
3762
4180
  .max-surface-lg {
3763
4181
  border-radius: var(--max-radius-xl);
3764
- box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--max-shadow-alpha) + .08));
4182
+ box-shadow: var(--max-shadow-md);
3765
4183
  }
3766
4184
 
3767
4185
  .max-well, .max-inset {
3768
- background: var(--max-surface-soft);
4186
+ background: var(--max-paper-bg);
3769
4187
  color: var(--max-text);
3770
- border: 3px solid rgb(var(--max-border-rgb)/calc(var(--max-border-alpha)*.7));
4188
+ border: 2px solid var(--max-ink);
3771
4189
  border-radius: var(--max-radius-md);
3772
4190
  padding: var(--max-space-5);
3773
- box-shadow: inset 0 1px 3px #00000014;
4191
+ box-shadow: .22rem .22rem 0 rgb(var(--max-primary-rgb)/.5);
3774
4192
  }
3775
4193
 
3776
4194
  .max-hover-lift:hover {
3777
- box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--max-shadow-alpha) + .12));
3778
- transform: translate(-2px, -2px);
4195
+ box-shadow: .55rem .55rem 0 var(--max-ink);
4196
+ transform: translate(-3px, -3px) rotate(-.4deg);
3779
4197
  }
3780
4198
 
3781
4199
  .max-button, .max-icon-button, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button {
@@ -3783,49 +4201,40 @@
3783
4201
  justify-content: center;
3784
4202
  align-items: center;
3785
4203
  gap: var(--max-space-2);
3786
- background: var(--max-surface);
4204
+ background: var(--max-paper-bg);
3787
4205
  min-height: 2.75rem;
3788
4206
  color: var(--max-text);
3789
- border: 3px solid var(--max-border);
3790
- border-radius: var(--max-radius-md);
3791
- box-shadow: 0 6px 18px rgb(0 0 0 / var(--max-shadow-alpha));
4207
+ border: 3px solid var(--max-ink);
4208
+ border-radius: var(--max-radius-sm);
4209
+ box-shadow: .26rem .26rem 0 var(--max-ink);
3792
4210
  font: inherit;
4211
+ letter-spacing: .035em;
3793
4212
  cursor: pointer;
3794
4213
  -webkit-user-select: none;
3795
4214
  user-select: none;
4215
+ text-transform: uppercase;
3796
4216
  transition: color var(--max-transition-fast),background var(--max-transition-fast),border-color var(--max-transition-fast),box-shadow var(--max-transition-fast),transform var(--max-transition-fast);
3797
- padding: .75rem 1.1rem;
3798
- font-weight: 800;
3799
- line-height: 1;
4217
+ padding: .72rem 1.08rem;
4218
+ font-weight: 950;
4219
+ line-height: .95;
3800
4220
  text-decoration: none;
3801
4221
  display: inline-flex;
3802
4222
  }
3803
4223
 
3804
4224
  .max-button:hover, .max-icon-button:hover, :where([data-ui="maximalist"]) .ui-button:hover, :where([data-ui="maximalist"]) .ui-icon-button:hover {
3805
- border-color: var(--max-primary);
3806
- transform: translateY(-1px);
4225
+ border-color: var(--max-ink);
4226
+ box-shadow: .4rem .4rem 0 rgb(var(--max-secondary-rgb)/.76);
4227
+ transform: translate(-2px, -2px);
3807
4228
  }
3808
4229
 
3809
4230
  .max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active, :where([data-ui="maximalist"]) .ui-button:active, :where([data-ui="maximalist"]) .ui-icon-button:active, :where([data-ui="maximalist"]) .ui-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-button.is-active, :where([data-ui="maximalist"]) .ui-icon-button.is-active {
3810
- transform: translateY(1px);
3811
- box-shadow: inset 0 3px 10px #0000002e;
3812
- }
3813
-
3814
- .max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
3815
- background: var(--max-primary);
3816
- color: var(--max-on-primary);
3817
- border-color: var(--max-primary);
4231
+ box-shadow: .12rem .12rem 0 var(--max-ink);
4232
+ transform: translate(.12rem, .12rem);
3818
4233
  }
3819
4234
 
3820
4235
  .max-button-primary:hover, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]):hover {
3821
- background: var(--max-primary-hover);
3822
- border-color: var(--max-primary-hover);
3823
- }
3824
-
3825
- .max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
3826
- background: var(--max-secondary);
3827
- color: var(--max-on-secondary);
3828
- border-color: var(--max-secondary);
4236
+ background: linear-gradient(110deg,var(--max-primary-hover),var(--max-danger),var(--max-accent));
4237
+ border-color: var(--max-ink);
3829
4238
  }
3830
4239
 
3831
4240
  .max-button-secondary:hover, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]):hover {
@@ -3833,20 +4242,15 @@
3833
4242
  border-color: var(--max-secondary-hover);
3834
4243
  }
3835
4244
 
3836
- .max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
3837
- background: var(--max-danger);
3838
- color: var(--max-on-danger);
3839
- border-color: var(--max-danger);
3840
- }
3841
-
3842
4245
  .max-button-ghost, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="ghost"]) {
3843
4246
  color: var(--max-text);
3844
4247
  box-shadow: none;
3845
4248
  background: none;
4249
+ border-style: dashed;
3846
4250
  }
3847
4251
 
3848
4252
  .max-icon-button, :where([data-ui="maximalist"]) .ui-icon-button {
3849
- border-radius: var(--max-radius-pill);
4253
+ border-radius: var(--max-radius-sm);
3850
4254
  width: 2.75rem;
3851
4255
  padding: 0;
3852
4256
  }
@@ -3861,7 +4265,7 @@
3861
4265
  background: var(--max-card-bg);
3862
4266
  }
3863
4267
 
3864
- .max-toolbar, .max-table-wrap, .max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-ghost), .max-icon-button, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .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="maximalist"]) .ui-icon-button {
4268
+ .max-toolbar, .max-table-wrap, .max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-warning):not(.max-button-ghost):not(.max-button-outline-heavy), .max-icon-button, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .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"])):not(.max-button-outline-heavy), :where([data-ui="maximalist"]) .ui-icon-button {
3865
4269
  background: var(--max-control-bg);
3866
4270
  }
3867
4271
 
@@ -3877,26 +4281,29 @@
3877
4281
 
3878
4282
  .max-label, :where([data-ui="maximalist"]) .ui-label {
3879
4283
  color: var(--max-text);
3880
- font-size: .925rem;
3881
- font-weight: 800;
4284
+ letter-spacing: .06em;
4285
+ text-transform: uppercase;
4286
+ font-size: .82rem;
4287
+ font-weight: 950;
3882
4288
  }
3883
4289
 
3884
4290
  .max-input, .max-textarea, .max-select, :where([data-ui="maximalist"]) .ui-input, :where([data-ui="maximalist"]) .ui-textarea, :where([data-ui="maximalist"]) .ui-select {
3885
- background: var(--max-surface-soft);
4291
+ background: var(--max-paper-bg);
3886
4292
  width: 100%;
3887
- min-height: 2.875rem;
4293
+ min-height: 2.75rem;
3888
4294
  color: var(--max-text);
3889
- border: 3px solid var(--max-border);
3890
- border-radius: var(--max-radius-md);
4295
+ border: 2px solid var(--max-ink);
4296
+ border-radius: var(--max-radius-sm);
4297
+ box-shadow: .16rem .16rem 0 rgb(var(--max-secondary-rgb)/.45);
3891
4298
  font: inherit;
3892
4299
  transition: background var(--max-transition-fast),border-color var(--max-transition-fast),box-shadow var(--max-transition-fast);
3893
4300
  outline: none;
3894
- padding: .75rem 1rem;
4301
+ padding: .68rem .9rem;
3895
4302
  }
3896
4303
 
3897
4304
  .max-textarea, :where([data-ui="maximalist"]) .ui-textarea {
3898
4305
  resize: vertical;
3899
- min-height: 8rem;
4306
+ min-height: 7rem;
3900
4307
  }
3901
4308
 
3902
4309
  .max-input::placeholder, .max-textarea::placeholder, :where([data-ui="maximalist"]) .ui-input::placeholder, :where([data-ui="maximalist"]) .ui-textarea::placeholder {
@@ -3904,15 +4311,6 @@
3904
4311
  opacity: .82;
3905
4312
  }
3906
4313
 
3907
- .max-input:hover, .max-textarea:hover, .max-select:hover, :where([data-ui="maximalist"]) .ui-input:hover, :where([data-ui="maximalist"]) .ui-textarea:hover, :where([data-ui="maximalist"]) .ui-select:hover {
3908
- border-color: rgb(var(--max-primary-rgb)/.58);
3909
- }
3910
-
3911
- .max-input:focus, .max-textarea:focus, .max-select:focus, :where([data-ui="maximalist"]) .ui-input:focus, :where([data-ui="maximalist"]) .ui-textarea:focus, :where([data-ui="maximalist"]) .ui-select:focus {
3912
- border-color: var(--max-focus);
3913
- box-shadow: var(--max-focus-ring);
3914
- }
3915
-
3916
4314
  .max-help-text, :where([data-ui="maximalist"]) .ui-help-text {
3917
4315
  color: var(--max-text-muted);
3918
4316
  font-size: .875rem;
@@ -3934,10 +4332,11 @@
3934
4332
  }
3935
4333
 
3936
4334
  .max-check-control, .max-radio-control, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-radio-control {
3937
- background: var(--max-surface-soft);
3938
- border: 3px solid var(--max-border);
3939
- width: 1.35rem;
3940
- height: 1.35rem;
4335
+ background: var(--max-paper-bg);
4336
+ border: 2px solid var(--max-ink);
4337
+ width: 1.25rem;
4338
+ height: 1.25rem;
4339
+ box-shadow: .12rem .12rem 0 rgb(var(--max-secondary-rgb)/.52);
3941
4340
  transition: background var(--max-transition-fast),box-shadow var(--max-transition-fast);
3942
4341
  place-items: center;
3943
4342
  display: inline-grid;
@@ -3953,8 +4352,8 @@
3953
4352
 
3954
4353
  .max-check input:checked + .max-check-control, .max-radio input:checked + .max-radio-control, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control, :where([data-ui="maximalist"]) .ui-radio input:checked+.ui-radio-control {
3955
4354
  background: var(--max-primary);
3956
- border-color: var(--max-primary);
3957
- box-shadow: var(--max-focus-ring);
4355
+ border-color: var(--max-ink);
4356
+ box-shadow: .12rem .12rem 0 var(--max-ink),var(--max-focus-ring);
3958
4357
  }
3959
4358
 
3960
4359
  .max-check input:checked + .max-check-control:after, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control:after {
@@ -3987,49 +4386,54 @@
3987
4386
  }
3988
4387
 
3989
4388
  .max-switch-track, :where([data-ui="maximalist"]) .ui-switch-track {
3990
- background: var(--max-surface-soft);
3991
- border: 3px solid var(--max-border);
4389
+ background: linear-gradient(90deg,var(--max-success),var(--max-warning),var(--max-danger));
4390
+ border: 2px solid var(--max-ink);
3992
4391
  border-radius: var(--max-radius-pill);
3993
- width: 3.5rem;
3994
- height: 1.9rem;
4392
+ width: 3.4rem;
4393
+ height: 1.7rem;
4394
+ box-shadow: .18rem .18rem 0 var(--max-ink);
3995
4395
  transition: background var(--max-transition-fast),box-shadow var(--max-transition-fast);
3996
4396
  position: relative;
3997
4397
  }
3998
4398
 
3999
4399
  .max-switch-thumb, :where([data-ui="maximalist"]) .ui-switch-thumb {
4000
- background: var(--max-surface-strong);
4001
- border: 3px solid var(--max-border);
4002
- width: 1.34rem;
4003
- height: 1.34rem;
4004
- box-shadow: 0 4px 12px rgb(0 0 0 / var(--max-shadow-alpha));
4400
+ background: var(--max-paper-bg);
4401
+ border: 2px solid var(--max-ink);
4402
+ width: 1.1rem;
4403
+ height: 1.1rem;
4404
+ box-shadow: .08rem .08rem 0 rgb(var(--max-secondary-rgb)/.72);
4005
4405
  transition: left var(--max-transition-fast),background var(--max-transition-fast);
4006
4406
  border-radius: 50%;
4007
4407
  position: absolute;
4008
- top: .22rem;
4009
- left: .22rem;
4408
+ top: .18rem;
4409
+ left: .18rem;
4010
4410
  }
4011
4411
 
4012
4412
  .max-switch input:checked + .max-switch-track, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track {
4013
4413
  background: var(--max-primary);
4014
- border-color: var(--max-primary);
4414
+ border-color: var(--max-ink);
4015
4415
  }
4016
4416
 
4017
4417
  .max-switch input:checked + .max-switch-track .max-switch-thumb, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
4018
4418
  background: var(--max-on-primary);
4019
- left: calc(100% - 1.56rem);
4419
+ left: calc(100% - 1.28rem);
4020
4420
  }
4021
4421
 
4022
4422
  .max-badge, :where([data-ui="maximalist"]) .ui-badge {
4023
4423
  align-items: center;
4024
4424
  gap: var(--max-space-1);
4025
- background: var(--max-surface-soft);
4026
- min-height: 1.75rem;
4425
+ background: var(--max-paper-bg);
4426
+ min-height: 1.7rem;
4027
4427
  color: var(--max-text);
4028
- border: 3px solid var(--max-border);
4029
- border-radius: var(--max-radius-pill);
4030
- padding: .35rem .7rem;
4031
- font-size: .8125rem;
4032
- font-weight: 850;
4428
+ border: 2px solid var(--max-ink);
4429
+ border-radius: var(--max-radius-xs);
4430
+ box-shadow: .14rem .14rem 0 rgb(var(--max-secondary-rgb)/.62);
4431
+ clip-path: polygon(.32rem 0, 100% 0, calc(100% - .32rem) 100%, 0 100%);
4432
+ letter-spacing: .055em;
4433
+ text-transform: uppercase;
4434
+ padding: .35rem .78rem;
4435
+ font-size: .78rem;
4436
+ font-weight: 950;
4033
4437
  line-height: 1;
4034
4438
  display: inline-flex;
4035
4439
  }
@@ -4037,54 +4441,56 @@
4037
4441
  .max-badge-primary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="primary"]) {
4038
4442
  background: var(--max-primary);
4039
4443
  color: var(--max-on-primary);
4040
- border-color: var(--max-primary);
4444
+ border-color: var(--max-ink);
4041
4445
  }
4042
4446
 
4043
4447
  .max-badge-secondary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="secondary"]) {
4044
4448
  background: var(--max-secondary);
4045
4449
  color: var(--max-on-secondary);
4046
- border-color: var(--max-secondary);
4450
+ border-color: var(--max-ink);
4047
4451
  }
4048
4452
 
4049
4453
  .max-badge-success, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="success"]) {
4050
4454
  background: var(--max-success);
4051
4455
  color: var(--max-on-success);
4052
- border-color: var(--max-success);
4456
+ border-color: var(--max-ink);
4053
4457
  }
4054
4458
 
4055
4459
  .max-badge-warning, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
4056
4460
  background: var(--max-warning);
4057
4461
  color: var(--max-on-warning);
4058
- border-color: var(--max-warning);
4462
+ border-color: var(--max-ink);
4059
4463
  }
4060
4464
 
4061
4465
  .max-badge-danger, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="danger"]) {
4062
4466
  background: var(--max-danger);
4063
4467
  color: var(--max-on-danger);
4064
- border-color: var(--max-danger);
4468
+ border-color: var(--max-ink);
4065
4469
  }
4066
4470
 
4067
4471
  .max-nav, :where([data-ui="maximalist"]) .ui-nav {
4068
4472
  align-items: center;
4069
4473
  gap: var(--max-space-2);
4070
4474
  padding: var(--max-space-2);
4071
- background: var(--max-surface);
4072
- border: 3px solid var(--max-border);
4073
- border-radius: var(--max-radius-xl);
4074
- box-shadow: 0 10px 30px rgb(0 0 0 / var(--max-shadow-alpha));
4475
+ background: var(--max-label-bg);
4476
+ border: 3px solid var(--max-ink);
4477
+ border-radius: var(--max-radius-lg);
4478
+ box-shadow: var(--max-pop-shadow);
4075
4479
  flex-wrap: wrap;
4076
4480
  display: flex;
4077
4481
  }
4078
4482
 
4079
4483
  .max-nav-link, :where([data-ui="maximalist"]) .ui-nav-link {
4080
- min-height: 2.5rem;
4081
- color: var(--max-text-muted);
4082
- border-radius: var(--max-radius-pill);
4083
- transition: color var(--max-transition-fast),background var(--max-transition-fast),box-shadow var(--max-transition-fast);
4484
+ min-height: 2.45rem;
4485
+ color: var(--max-label-fg);
4486
+ border-radius: var(--max-radius-sm);
4487
+ letter-spacing: .045em;
4488
+ text-transform: uppercase;
4489
+ transition: color var(--max-transition-fast),background var(--max-transition-fast),box-shadow var(--max-transition-fast),transform var(--max-transition-fast);
4084
4490
  justify-content: center;
4085
4491
  align-items: center;
4086
- padding: .65rem 1rem;
4087
- font-weight: 850;
4492
+ padding: .62rem 1rem;
4493
+ font-weight: 950;
4088
4494
  text-decoration: none;
4089
4495
  display: inline-flex;
4090
4496
  }
@@ -4097,14 +4503,16 @@
4097
4503
  .max-nav-link[aria-current="page"], .max-nav-link.is-active, :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active {
4098
4504
  color: var(--max-on-primary);
4099
4505
  background: var(--max-primary);
4506
+ box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb)/.75);
4507
+ transform: rotate(-1deg);
4100
4508
  }
4101
4509
 
4102
4510
  .max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
4103
- background: linear-gradient(135deg,var(--max-primary),var(--max-accent));
4511
+ background: var(--max-label-bg);
4104
4512
  max-inline-size: 16rem;
4105
- color: var(--max-on-primary);
4106
- border: 3px solid var(--max-border);
4107
- border-radius: var(--max-radius-pill);
4513
+ color: var(--max-label-fg);
4514
+ border: 3px solid var(--max-ink);
4515
+ border-radius: var(--max-radius-sm);
4108
4516
  box-shadow: .32rem .32rem 0 rgb(var(--max-secondary-rgb)/.68);
4109
4517
  text-transform: uppercase;
4110
4518
  letter-spacing: .04em;
@@ -4119,7 +4527,7 @@
4119
4527
 
4120
4528
  .max-tooltip-arrow {
4121
4529
  background: var(--max-warning);
4122
- border: 2px solid var(--max-border);
4530
+ border: 2px solid var(--max-ink);
4123
4531
  flex: none;
4124
4532
  block-size: .62rem;
4125
4533
  inline-size: .62rem;
@@ -4127,47 +4535,55 @@
4127
4535
  }
4128
4536
 
4129
4537
  .max-progress, :where([data-ui="maximalist"]) .ui-progress {
4130
- background: var(--max-surface-soft);
4131
- border: 3px solid var(--max-border);
4132
- border-radius: var(--max-radius-pill);
4538
+ background: var(--max-paper-bg);
4539
+ border: 2px solid var(--max-ink);
4540
+ border-radius: var(--max-radius-sm);
4133
4541
  width: 100%;
4134
- height: .9rem;
4542
+ height: 1.05rem;
4543
+ box-shadow: .2rem .2rem 0 var(--max-ink);
4544
+ padding: .12rem;
4135
4545
  overflow: hidden;
4136
4546
  }
4137
4547
 
4138
4548
  .max-progress-bar, :where([data-ui="maximalist"]) .ui-progress-bar {
4139
4549
  height: 100%;
4140
4550
  width: var(--max-progress-value, 50%);
4141
- background: linear-gradient(90deg,var(--max-primary),var(--max-accent));
4142
- border-radius: inherit;
4551
+ background: repeating-linear-gradient(90deg,rgb(var(--max-text-rgb)/.24)0 .08rem,transparent .08rem 2rem),linear-gradient(90deg,var(--max-warning),var(--max-accent),var(--max-primary));
4552
+ border-radius: var(--max-radius-xs);
4143
4553
  }
4144
4554
 
4145
4555
  .max-alert, :where([data-ui="maximalist"]) .ui-alert {
4146
4556
  gap: var(--max-space-2);
4147
4557
  padding: var(--max-space-4);
4148
- background: var(--max-surface);
4558
+ background: var(--max-paper-bg);
4149
4559
  color: var(--max-text);
4150
- border: 3px solid var(--max-border);
4560
+ border: 3px solid var(--max-ink);
4151
4561
  border-radius: var(--max-radius-lg);
4152
- box-shadow: 0 10px 30px rgb(0 0 0 / var(--max-shadow-alpha));
4562
+ box-shadow: var(--max-pop-shadow);
4153
4563
  display: grid;
4154
4564
  }
4155
4565
 
4156
4566
  .max-alert-success, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="success"]) {
4157
- border-left-color: var(--max-success);
4567
+ background: linear-gradient(90deg,rgb(var(--max-success-rgb)/.18),transparent 42%),var(--max-paper-bg);
4568
+ border-left: .7rem solid var(--max-success);
4158
4569
  }
4159
4570
 
4160
4571
  .max-alert-warning, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="warning"]) {
4161
- border-left-color: var(--max-warning);
4572
+ background: linear-gradient(90deg,rgb(var(--max-warning-rgb)/.2),transparent 42%),var(--max-paper-bg);
4573
+ border-left: .7rem solid var(--max-warning);
4162
4574
  }
4163
4575
 
4164
4576
  .max-alert-danger, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="danger"]) {
4165
- border-left-color: var(--max-danger);
4577
+ background: linear-gradient(90deg,rgb(var(--max-danger-rgb)/.2),transparent 42%),var(--max-paper-bg);
4578
+ border-left: .7rem solid var(--max-danger);
4166
4579
  }
4167
4580
 
4168
4581
  .max-alert-title, :where([data-ui="maximalist"]) .ui-alert-title {
4582
+ font-family: var(--max-font-heading);
4583
+ letter-spacing: .04em;
4584
+ text-transform: uppercase;
4169
4585
  margin: 0;
4170
- font-weight: 900;
4586
+ font-weight: 950;
4171
4587
  }
4172
4588
 
4173
4589
  .max-alert-body, :where([data-ui="maximalist"]) .ui-alert-body {
@@ -4176,10 +4592,6 @@
4176
4592
  line-height: 1.55;
4177
4593
  }
4178
4594
 
4179
- .max-table-wrap, :where([data-ui="maximalist"]) .ui-table-wrap {
4180
- overflow: auto;
4181
- }
4182
-
4183
4595
  .max-table, :where([data-ui="maximalist"]) .ui-table {
4184
4596
  border-collapse: collapse;
4185
4597
  width: 100%;
@@ -4187,17 +4599,18 @@
4187
4599
 
4188
4600
  .max-table th, .max-table td, :where([data-ui="maximalist"]) .ui-table th, :where([data-ui="maximalist"]) .ui-table td {
4189
4601
  text-align: left;
4190
- border-bottom: 3px solid var(--max-border);
4191
- padding: .95rem 1rem;
4602
+ border-bottom: 2px solid var(--max-ink);
4603
+ padding: .85rem 1rem;
4192
4604
  }
4193
4605
 
4194
4606
  .max-table th, :where([data-ui="maximalist"]) .ui-table th {
4195
- color: var(--max-text);
4607
+ color: var(--max-label-fg);
4608
+ font-family: var(--max-font-heading);
4196
4609
  text-transform: uppercase;
4197
4610
  letter-spacing: .08em;
4198
- background: rgb(var(--max-primary-rgb)/.08);
4199
- font-size: .82rem;
4200
- font-weight: 900;
4611
+ background: var(--max-label-bg);
4612
+ font-size: .8rem;
4613
+ font-weight: 950;
4201
4614
  }
4202
4615
 
4203
4616
  .max-table td, :where([data-ui="maximalist"]) .ui-table td {
@@ -4243,7 +4656,7 @@
4243
4656
  }
4244
4657
 
4245
4658
  .max-border {
4246
- border: 3px solid var(--max-border);
4659
+ border: 3px solid var(--max-ink);
4247
4660
  }
4248
4661
 
4249
4662
  .max-rounded {
@@ -4294,11 +4707,15 @@
4294
4707
  .max-sticker {
4295
4708
  background: var(--max-accent);
4296
4709
  color: var(--max-on-accent);
4297
- border: 3px solid var(--max-border);
4298
- border-radius: var(--max-radius-pill);
4299
- box-shadow: 5px 5px 0 rgb(var(--max-border-rgb)/.8);
4710
+ border: 3px solid var(--max-ink);
4711
+ border-radius: var(--max-radius-xs);
4712
+ box-shadow: var(--max-sticker-shadow);
4713
+ clip-path: polygon(.42rem 0, 100% 0, calc(100% - .32rem) 100%, 0 100%);
4714
+ font-family: var(--max-font-heading);
4715
+ letter-spacing: .05em;
4716
+ text-transform: uppercase;
4300
4717
  align-items: center;
4301
- padding: .45rem .8rem;
4718
+ padding: .42rem .85rem;
4302
4719
  font-weight: 950;
4303
4720
  display: inline-flex;
4304
4721
  transform: rotate(-2deg);
@@ -4306,11 +4723,12 @@
4306
4723
 
4307
4724
  .max-callout {
4308
4725
  padding: var(--max-space-6);
4309
- background: linear-gradient(135deg,var(--max-primary),var(--max-accent));
4726
+ background: var(--max-poster-fill);
4310
4727
  color: var(--max-on-primary);
4311
- border: 3px solid var(--max-border);
4312
- border-radius: var(--max-radius-xl);
4313
- box-shadow: 10px 10px 0 rgb(var(--max-border-rgb)/.85);
4728
+ border: 3px solid var(--max-ink);
4729
+ border-radius: var(--max-radius-lg);
4730
+ box-shadow: .5rem .5rem 0 var(--max-ink),.78rem .78rem 0 rgb(var(--max-secondary-rgb)/.72);
4731
+ clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
4314
4732
  }
4315
4733
 
4316
4734
  .max-wiggle:hover {
@@ -4382,9 +4800,10 @@
4382
4800
  .max-card-media {
4383
4801
  aspect-ratio: 16 / 9;
4384
4802
  object-fit: cover;
4385
- border: 1px solid rgb(var(--max-border-rgb)/.72);
4386
- border-radius: var(--max-radius-lg);
4803
+ border: 2px solid var(--max-ink);
4804
+ border-radius: var(--max-radius-sm);
4387
4805
  inline-size: 100%;
4806
+ box-shadow: .22rem .22rem 0 rgb(var(--max-primary-rgb)/.52);
4388
4807
  display: block;
4389
4808
  }
4390
4809
 
@@ -4416,7 +4835,7 @@
4416
4835
  }
4417
4836
 
4418
4837
  .max-card-accent-edge {
4419
- border-inline-start: .35rem solid var(--max-primary);
4838
+ border-inline-start: .6rem solid var(--max-primary);
4420
4839
  }
4421
4840
 
4422
4841
  .max-icon-medallion {
@@ -4424,13 +4843,15 @@
4424
4843
  block-size: 3.75rem;
4425
4844
  inline-size: 3.75rem;
4426
4845
  color: var(--max-on-primary);
4427
- border: 2px solid rgb(var(--max-border-rgb)/.82);
4428
- border-radius: 50%;
4846
+ border: 3px solid var(--max-ink);
4847
+ border-radius: var(--max-radius-sm);
4848
+ box-shadow: .18rem .18rem 0 var(--max-ink),.34rem .34rem 0 rgb(var(--max-secondary-rgb)/.65);
4429
4849
  flex: none;
4430
4850
  place-items: center;
4431
4851
  padding: .7rem;
4432
4852
  line-height: 1;
4433
4853
  display: inline-grid;
4854
+ transform: rotate(-4deg);
4434
4855
  }
4435
4856
 
4436
4857
  .max-icon-medallion > :where(svg, img) {
@@ -4440,7 +4861,7 @@
4440
4861
  }
4441
4862
 
4442
4863
  .max-button.max-button-cut, .max-button-cut, :where([data-ui="maximalist"]) .ui-button.max-button-cut {
4443
- clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
4864
+ clip-path: polygon(.75rem 0, 100% 0, calc(100% - .75rem) 100%, 0 100%);
4444
4865
  border-radius: 0;
4445
4866
  }
4446
4867
 
@@ -4449,12 +4870,12 @@
4449
4870
  }
4450
4871
 
4451
4872
  .max-button.max-button-outline-heavy, .max-button-outline-heavy, :where([data-ui="maximalist"]) .ui-button.max-button-outline-heavy {
4452
- color: var(--max-primary);
4873
+ background: var(--max-label-bg);
4874
+ color: var(--max-label-fg);
4453
4875
  border-style: solid;
4454
- border-width: 2px;
4455
- border-color: var(--max-primary);
4456
- box-shadow: none;
4457
- background: none;
4876
+ border-width: 3px;
4877
+ border-color: var(--max-ink);
4878
+ box-shadow: -.24rem .24rem 0 rgb(var(--max-primary-rgb)/.68);
4458
4879
  }
4459
4880
 
4460
4881
  .max-button.max-button-outline-heavy:hover, .max-button-outline-heavy:hover, :where([data-ui="maximalist"]) .ui-button.max-button-outline-heavy:hover {
@@ -4465,11 +4886,12 @@
4465
4886
 
4466
4887
  .max-badge-seal {
4467
4888
  aspect-ratio: 1;
4468
- background: var(--max-surface-strong);
4889
+ background: var(--max-warning);
4469
4890
  inline-size: 5rem;
4470
4891
  min-inline-size: 5rem;
4471
4892
  color: var(--max-text);
4472
- border: 2px solid var(--max-primary);
4893
+ border: 3px solid var(--max-ink);
4894
+ box-shadow: .18rem .18rem 0 var(--max-ink),.38rem .38rem 0 rgb(var(--max-accent-rgb)/.65);
4473
4895
  text-align: center;
4474
4896
  font-family: var(--max-font-heading);
4475
4897
  letter-spacing: .04em;
@@ -4481,16 +4903,17 @@
4481
4903
  font-weight: 900;
4482
4904
  line-height: 1.05;
4483
4905
  display: inline-grid;
4906
+ transform: rotate(4deg);
4484
4907
  }
4485
4908
 
4486
4909
  .max-feature-strip {
4487
4910
  background: var(--max-card-bg);
4488
4911
  color: var(--max-text);
4489
- border: 1px solid var(--max-border);
4912
+ border: 2px solid var(--max-ink);
4490
4913
  border-radius: var(--max-radius-lg);
4914
+ box-shadow: var(--max-pop-shadow);
4491
4915
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4492
4916
  display: grid;
4493
- overflow: hidden;
4494
4917
  }
4495
4918
 
4496
4919
  .max-feature-item {
@@ -4498,7 +4921,7 @@
4498
4921
  gap: var(--max-space-3);
4499
4922
  min-inline-size: 0;
4500
4923
  padding: var(--max-space-4);
4501
- border-inline-end: 1px solid rgb(var(--max-border-rgb)/.62);
4924
+ border-inline-end: 2px solid var(--max-ink);
4502
4925
  grid-template-columns: auto minmax(0, 1fr);
4503
4926
  display: grid;
4504
4927
  }
@@ -4518,8 +4941,9 @@
4518
4941
  padding: var(--max-space-4) var(--max-space-5);
4519
4942
  background: var(--max-card-bg);
4520
4943
  color: var(--max-text);
4521
- border: 1px solid var(--max-border);
4944
+ border: 3px solid var(--max-ink);
4522
4945
  border-radius: var(--max-radius-lg);
4946
+ box-shadow: var(--max-pop-shadow);
4523
4947
  grid-template-columns: auto minmax(0, 1fr) auto;
4524
4948
  display: grid;
4525
4949
  }
@@ -4533,22 +4957,28 @@
4533
4957
  }
4534
4958
 
4535
4959
  .max-eyebrow {
4536
- color: var(--max-primary);
4960
+ background: var(--max-label-bg);
4961
+ width: fit-content;
4962
+ color: var(--max-label-fg);
4963
+ border: 2px solid var(--max-ink);
4537
4964
  font-family: var(--max-font-heading);
4538
- letter-spacing: .14em;
4965
+ letter-spacing: .08em;
4539
4966
  text-transform: uppercase;
4540
4967
  margin: 0;
4968
+ padding: .16rem .58rem;
4541
4969
  font-size: .76rem;
4542
- font-weight: 900;
4970
+ font-weight: 950;
4543
4971
  line-height: 1.2;
4972
+ transform: rotate(-1deg);
4544
4973
  }
4545
4974
 
4546
4975
  .max-media-scrim {
4547
4976
  isolation: isolate;
4548
4977
  background: var(--max-surface-soft);
4549
- border: 1px solid var(--max-border);
4978
+ border: 3px solid var(--max-ink);
4550
4979
  border-radius: var(--max-radius-lg);
4551
4980
  min-block-size: 12rem;
4981
+ box-shadow: var(--max-pop-shadow);
4552
4982
  position: relative;
4553
4983
  overflow: hidden;
4554
4984
  }
@@ -4564,6 +4994,8 @@
4564
4994
  .max-media-scrim > :where(figcaption, [data-media-caption]) {
4565
4995
  z-index: 1;
4566
4996
  color: #fff;
4997
+ font-family: var(--max-font-heading);
4998
+ text-transform: uppercase;
4567
4999
  background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
4568
5000
  padding: clamp(1rem, 4vw, 2rem);
4569
5001
  position: absolute;
@@ -4587,7 +5019,7 @@
4587
5019
 
4588
5020
  .max-feature-item {
4589
5021
  border-inline-end: 0;
4590
- border-block-end: 1px solid rgb(var(--max-border-rgb)/.62);
5022
+ border-block-end: 2px solid var(--max-ink);
4591
5023
  }
4592
5024
 
4593
5025
  .max-feature-item:last-child {
@@ -4596,57 +5028,55 @@
4596
5028
  }
4597
5029
 
4598
5030
  .max-card-service, .max-card-feature {
4599
- box-shadow: .45rem .45rem 0 rgb(var(--max-primary-rgb)/.22);
4600
- border-width: 2px;
4601
- }
4602
-
4603
- .max-icon-medallion {
4604
- box-shadow: .25rem .25rem 0 rgb(var(--max-secondary-rgb)/.5);
4605
- transform: rotate(-3deg);
5031
+ box-shadow: var(--max-pop-shadow);
5032
+ border-width: 3px;
4606
5033
  }
4607
5034
 
4608
5035
  .max-button-cut {
4609
- clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
4610
- }
4611
-
4612
- .max-callout-bar {
4613
- background: linear-gradient(120deg,rgb(var(--max-primary-rgb)/.18),rgb(var(--max-secondary-rgb)/.15)),var(--max-card-bg);
5036
+ clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
4614
5037
  }
4615
5038
 
4616
5039
  .max-button.max-button-cut, .max-button-cut, :where([data-ui="maximalist"]) .ui-button.max-button-cut {
4617
5040
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
5041
+ min-block-size: 2.75rem;
4618
5042
  min-inline-size: 6rem;
4619
5043
  max-inline-size: 100%;
4620
- box-shadow: .35rem .35rem 0 rgb(var(--max-secondary-rgb)/.52);
5044
+ box-shadow: .22rem .22rem 0 var(--max-ink),.44rem .44rem 0 rgb(var(--max-secondary-rgb)/.72);
4621
5045
  justify-content: center;
4622
5046
  justify-self: end;
4623
5047
  }
4624
5048
 
4625
5049
  .max-button.max-button-outline-heavy, .max-button-outline-heavy, :where([data-ui="maximalist"]) .ui-button.max-button-outline-heavy {
4626
5050
  clip-path: polygon(0 0, 91% 0, 100% 100%, 9% 100%);
4627
- box-shadow: -.28rem .28rem 0 rgb(var(--max-primary-rgb)/.32);
4628
- border-width: 2px;
5051
+ box-shadow: -.28rem .28rem 0 rgb(var(--max-primary-rgb)/.68);
5052
+ border-width: 3px;
4629
5053
  border-radius: 0;
4630
5054
  }
4631
5055
 
4632
5056
  .max-card-service, .max-media-scrim, .max-feature-strip, .max-callout-bar, .max-well {
4633
- background: linear-gradient(125deg,rgb(var(--max-primary-rgb)/.12),rgb(var(--max-secondary-rgb)/.1)),var(--max-card-bg);
4634
- border: 2px solid var(--max-border);
5057
+ background: linear-gradient(125deg,rgb(var(--max-primary-rgb)/.14),rgb(var(--max-secondary-rgb)/.12)),var(--max-card-bg);
5058
+ border: 3px solid var(--max-ink);
4635
5059
  border-radius: var(--max-radius-sm);
4636
- box-shadow: .42rem .42rem 0 rgb(var(--max-secondary-rgb)/.28);
5060
+ box-shadow: .3rem .3rem 0 var(--max-ink),.56rem .56rem 0 rgb(var(--max-secondary-rgb)/.62);
4637
5061
  }
4638
5062
 
4639
- [data-ui="maximalist"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4640
- border: 2px solid var(--max-primary);
5063
+ [data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5064
+ background: var(--max-poster-fill);
5065
+ color: var(--max-on-primary);
5066
+ border: 3px solid var(--max-ink);
4641
5067
  border-radius: var(--max-radius-sm);
4642
- box-shadow: .28rem .28rem 0 rgb(var(--max-secondary-rgb)/.42);
5068
+ box-shadow: .26rem .26rem 0 var(--max-ink);
5069
+ font-family: var(--max-font-control);
5070
+ letter-spacing: .035em;
5071
+ text-transform: uppercase;
5072
+ font-weight: 950;
4643
5073
  }
4644
5074
 
4645
- [data-ui="maximalist"][data-theme][data-mode] :where(dialog) {
4646
- background: linear-gradient(135deg,rgb(var(--max-primary-rgb)/.1),rgb(var(--max-secondary-rgb)/.08)),var(--max-surface-strong);
4647
- border: 2px solid var(--max-border);
5075
+ [data-ui="maximalist"][data-mode] :where(dialog) {
5076
+ background: linear-gradient(135deg,rgb(var(--max-primary-rgb)/.1),rgb(var(--max-secondary-rgb)/.08)),var(--max-paper-bg);
5077
+ border: 3px solid var(--max-ink);
4648
5078
  border-radius: var(--max-radius-sm);
4649
- box-shadow: .5rem .5rem 0 rgb(var(--max-secondary-rgb)/.32);
5079
+ box-shadow: .36rem .36rem 0 var(--max-ink),.68rem .68rem 0 rgb(var(--max-secondary-rgb)/.58);
4650
5080
  }
4651
5081
 
4652
5082
  .max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :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="maximalist"]) .ui-button[aria-busy="true"]:after, :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"]:after {
@@ -4658,11 +5088,166 @@
4658
5088
  animation: .82s ease-in-out infinite max-spin;
4659
5089
  }
4660
5090
 
4661
- @media (prefers-reduced-motion: reduce) {
4662
- [data-ui="maximalist"] *, [data-ui="maximalist"] :before, [data-ui="maximalist"] :after {
4663
- scroll-behavior: auto !important;
4664
- transition-duration: 1ms !important;
4665
- animation-duration: 1ms !important;
5091
+ [data-ui="maximalist"][data-mode] {
5092
+ --usk-native-font-control: var(--max-font-heading);
5093
+ --usk-native-control-min-block-size: 3rem;
5094
+ --usk-native-control-padding-block: .74rem;
5095
+ --usk-native-control-padding-inline: 1.05rem;
5096
+ --usk-native-border-width: 3px;
5097
+ --usk-native-radius-sm: .08rem;
5098
+ --usk-native-radius: .14rem;
5099
+ --usk-native-radius-lg: .22rem;
5100
+ --usk-native-shadow: .24rem .24rem 0 var(--max-ink);
5101
+ --usk-native-shadow-md: .34rem .34rem 0 var(--max-ink), .58rem .58rem 0 rgb(var(--max-secondary-rgb) / .58);
5102
+ --usk-native-focus-ring: 0 0 0 3px var(--max-warning), .2rem .2rem 0 var(--max-ink);
5103
+ --usk-native-subcontrol-padding-block: .57rem;
5104
+ --usk-native-subcontrol-padding-inline: .79rem;
5105
+ --usk-native-choice-size: 1.45rem;
5106
+ --usk-native-choice-background: linear-gradient(135deg, var(--max-paper-bg), var(--max-surface-soft));
5107
+ --usk-native-choice-border: 3px solid var(--max-ink);
5108
+ --usk-native-checkbox-radius: .08rem;
5109
+ --usk-native-radio-radius: 44% 56% 48% 52%;
5110
+ --usk-native-choice-shadow: .16rem .16rem 0 rgb(var(--max-secondary-rgb) / .72);
5111
+ --usk-native-choice-checked-background: linear-gradient(135deg, var(--max-primary), var(--max-accent));
5112
+ --usk-native-choice-mark-color: var(--max-on-primary);
5113
+ --usk-native-select-indicator-image: linear-gradient(35deg, transparent 43%, var(--max-ink) 44% 56%, transparent 57%), linear-gradient(145deg, transparent 43%, var(--max-ink) 44% 56%, transparent 57%);
5114
+ --usk-native-select-indicator-size: .52rem .52rem, .52rem .52rem;
5115
+ --usk-native-select-indicator-position: calc(100% - 1.32rem) 48%, calc(100% - .92rem) 52%;
5116
+ --usk-native-select-padding-inline-end: 3.15rem;
5117
+ --usk-native-range-track-size: .82rem;
5118
+ --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--max-warning) 0 .9rem, var(--max-accent) .9rem 1.8rem, var(--max-primary) 1.8rem 2.7rem);
5119
+ --usk-native-range-track-border: 3px solid var(--max-ink);
5120
+ --usk-native-range-track-radius: 999px;
5121
+ --usk-native-range-track-shadow: .2rem .2rem 0 var(--max-ink);
5122
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--max-success), var(--max-warning), var(--max-danger), var(--max-accent));
5123
+ --usk-native-range-thumb-size: 1.78rem;
5124
+ --usk-native-range-thumb-background: conic-gradient(var(--max-warning), var(--max-primary), var(--max-accent), var(--max-warning));
5125
+ --usk-native-range-thumb-border: 3px solid var(--max-ink);
5126
+ --usk-native-range-thumb-radius: 42% 58% 46% 54%;
5127
+ --usk-native-range-thumb-shadow: .16rem .16rem 0 var(--max-ink), .28rem .28rem 0 rgb(var(--max-secondary-rgb) / .62);
5128
+ --usk-native-progress-size: 1.1rem;
5129
+ --usk-native-progress-track-background: repeating-linear-gradient(90deg, var(--max-paper-bg) 0 1.25rem, var(--max-surface-soft) 1.25rem 1.4rem);
5130
+ --usk-native-progress-track-border: 3px solid var(--max-ink);
5131
+ --usk-native-progress-track-radius: .14rem;
5132
+ --usk-native-progress-track-shadow: .2rem .2rem 0 var(--max-ink);
5133
+ --usk-native-progress-value-background: repeating-linear-gradient(90deg, rgb(var(--max-text-rgb) / .22) 0 .1rem, transparent .1rem 1.55rem), linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary));
5134
+ --usk-native-progress-value-radius: .08rem;
5135
+ --usk-native-progress-value-shadow: .14rem 0 0 rgb(var(--max-text-rgb) / .42);
5136
+ --usk-native-scrollbar-size: 1.1rem;
5137
+ --usk-native-scrollbar-track: linear-gradient(var(--max-surface-soft), var(--max-paper-bg));
5138
+ --usk-native-scrollbar-thumb: linear-gradient(135deg, var(--max-primary), var(--max-accent));
5139
+ --usk-native-scrollbar-radius: .12rem;
5140
+ }
5141
+
5142
+ .max-title {
5143
+ letter-spacing: max(.028em, .5px);
5144
+ margin-block: .75rem;
5145
+ font-weight: 950;
5146
+ }
5147
+
5148
+ .max-label, :where([data-ui="maximalist"]) .ui-label {
5149
+ font-size: .73rem;
5150
+ font-weight: 900;
5151
+ }
5152
+
5153
+ .max-button, :where([data-ui="maximalist"]) .ui-button {
5154
+ background: linear-gradient(115deg,var(--max-primary),var(--max-accent));
5155
+ min-height: 3rem;
5156
+ box-shadow: .24rem .24rem 0 var(--max-ink);
5157
+ border-radius: .12rem;
5158
+ padding: .74rem 1.05rem;
5159
+ font-weight: 950;
5160
+ }
5161
+
5162
+ .max-input, :where([data-ui="maximalist"]) .ui-input {
5163
+ border-radius: .08rem;
5164
+ min-height: 3.2rem;
5165
+ padding: .78rem .95rem;
5166
+ }
5167
+
5168
+ .max-card, :where([data-ui="maximalist"]) .ui-card {
5169
+ background: linear-gradient(128deg,rgb(var(--max-primary-rgb)/.13),rgb(var(--max-secondary-rgb)/.11)),var(--max-card-bg);
5170
+ border: 3px solid var(--max-ink);
5171
+ box-shadow: .3rem .3rem 0 var(--max-ink),.54rem .54rem 0 rgb(var(--max-secondary-rgb)/.58);
5172
+ border-radius: .18rem;
5173
+ padding: 1.35rem;
5174
+ }
5175
+
5176
+ .max-well {
5177
+ background: repeating-linear-gradient(-8deg,rgb(var(--max-accent-rgb)/.09)0 .3rem,transparent .3rem .75rem),var(--max-surface-soft);
5178
+ border: 3px solid var(--max-ink);
5179
+ box-shadow: -.22rem .22rem 0 rgb(var(--max-primary-rgb)/.62);
5180
+ }
5181
+
5182
+ .max-badge, :where([data-ui="maximalist"]) .ui-badge {
5183
+ border-radius: 999px;
5184
+ min-height: 1.7rem;
5185
+ padding: .22rem .62rem;
5186
+ }
5187
+
5188
+ .max-alert, :where([data-ui="maximalist"]) .ui-alert {
5189
+ background: linear-gradient(105deg,rgb(var(--max-warning-rgb)/.2),rgb(var(--max-primary-rgb)/.1)),var(--max-card-bg);
5190
+ border: 3px solid var(--max-ink);
5191
+ box-shadow: .24rem .24rem 0 var(--max-ink);
5192
+ border-radius: .08rem;
5193
+ }
5194
+
5195
+ .max-progress, :where([data-ui="maximalist"]) .ui-progress {
5196
+ background: repeating-linear-gradient(90deg,var(--max-paper-bg)0 1.25rem,var(--max-surface-soft) 1.25rem 1.4rem);
5197
+ height: 1.1rem;
5198
+ }
5199
+
5200
+ .max-table-wrap, :where([data-ui="maximalist"]) .ui-table-wrap {
5201
+ background: linear-gradient(132deg,rgb(var(--max-secondary-rgb)/.1),transparent),var(--max-card-bg);
5202
+ box-shadow: .28rem .28rem 0 var(--max-ink);
5203
+ border-radius: .08rem;
5204
+ }
5205
+
5206
+ .max-table th, :where([data-ui="maximalist"]) .ui-table th {
5207
+ background: linear-gradient(100deg,var(--max-primary),var(--max-accent));
5208
+ padding: .72rem .88rem;
5209
+ font-weight: 950;
5210
+ }
5211
+
5212
+ .max-table td, :where([data-ui="maximalist"]) .ui-table td {
5213
+ padding: .74rem .86rem;
5214
+ }
5215
+
5216
+ .max-nav, .max-panel, .max-toolbar, .max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), .max-card-service, .max-feature-strip, .max-callout-bar, :where([data-ui="maximalist"]) .ui-nav, :where([data-ui="maximalist"]) .ui-toolbar {
5217
+ box-shadow: .28rem .28rem 0 var(--max-ink);
5218
+ border-width: 3px;
5219
+ border-radius: .12rem;
5220
+ }
5221
+
5222
+ .max-card-service:nth-of-type(odd), .max-feature-item:nth-of-type(odd) {
5223
+ transform: rotate(-.22deg);
5224
+ }
5225
+
5226
+ .max-card-service:nth-of-type(2n), .max-feature-item:nth-of-type(2n) {
5227
+ transform: rotate(.22deg);
5228
+ }
5229
+
5230
+ .max-callout-bar {
5231
+ background: linear-gradient(104deg,var(--max-warning)0 18%,transparent 18% 21%,var(--max-primary) 21% 72%,var(--max-accent) 72%),var(--max-card-bg);
5232
+ }
5233
+
5234
+ .max-check-control, .max-radio-control, .max-switch-track, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-radio-control, :where([data-ui="maximalist"]) .ui-switch-track {
5235
+ border-width: 3px;
5236
+ }
5237
+
5238
+ .max-tooltip-arrow {
5239
+ transform: rotate(7deg);
5240
+ }
5241
+
5242
+ .max-progress-bar, :where([data-ui="maximalist"]) .ui-progress-bar {
5243
+ background: linear-gradient(90deg,var(--max-warning),var(--max-accent),var(--max-primary));
5244
+ }
5245
+
5246
+ @media (prefers-reduced-motion: reduce) {
5247
+ [data-ui="maximalist"] *, [data-ui="maximalist"] :before, [data-ui="maximalist"] :after {
5248
+ scroll-behavior: auto !important;
5249
+ transition-duration: 1ms !important;
5250
+ animation-duration: 1ms !important;
4666
5251
  animation-iteration-count: 1 !important;
4667
5252
  }
4668
5253
  }
@@ -4702,4 +5287,740 @@
4702
5287
  color: #000 !important;
4703
5288
  }
4704
5289
  }
5290
+
5291
+ .max-input[aria-invalid="true"], .max-textarea[aria-invalid="true"], .max-select[aria-invalid="true"], :where([data-ui="maximalist"]) .ui-input[aria-invalid="true"], :where([data-ui="maximalist"]) .ui-textarea[aria-invalid="true"], :where([data-ui="maximalist"]) .ui-select[aria-invalid="true"] {
5292
+ border-color: var(--max-danger);
5293
+ box-shadow: 3px 3px 0 rgb(var(--max-danger-rgb)/.38);
5294
+ }
5295
+
5296
+ .max-input[readonly], .max-textarea[readonly], :where([data-ui="maximalist"]) .ui-input[readonly], :where([data-ui="maximalist"]) .ui-textarea[readonly] {
5297
+ filter: saturate(.72);
5298
+ opacity: .78;
5299
+ border-style: dashed;
5300
+ }
5301
+
5302
+ .max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
5303
+ background: linear-gradient(112deg,var(--max-primary),var(--max-accent));
5304
+ color: var(--max-on-primary);
5305
+ border-color: var(--max-ink);
5306
+ }
5307
+
5308
+ .max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
5309
+ background: linear-gradient(112deg,var(--max-secondary),var(--max-warning));
5310
+ color: var(--max-on-secondary);
5311
+ border-color: var(--max-ink);
5312
+ }
5313
+
5314
+ .max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
5315
+ background: linear-gradient(112deg,var(--max-danger),var(--max-primary));
5316
+ color: var(--max-on-danger);
5317
+ border-color: var(--max-ink);
5318
+ }
5319
+
5320
+ .max-button-ghost, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="ghost"]) {
5321
+ color: var(--max-primary);
5322
+ background: none;
5323
+ border-color: #0000;
5324
+ }
5325
+
5326
+ .max-feature-item > .max-icon-medallion {
5327
+ font-size: 1.5rem;
5328
+ line-height: 1;
5329
+ }
5330
+
5331
+ .max-callout-bar > .max-icon-medallion {
5332
+ min-block-size: 4.5rem;
5333
+ min-inline-size: 4.5rem;
5334
+ font-size: 2rem;
5335
+ font-weight: 800;
5336
+ line-height: 1;
5337
+ }
5338
+
5339
+ .max-heading {
5340
+ letter-spacing: max(.04em, .65px);
5341
+ line-height: 1.08;
5342
+ }
5343
+
5344
+ .max-button, .max-icon-button, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button {
5345
+ letter-spacing: max(.055em, .8px);
5346
+ line-height: 1.15;
5347
+ }
5348
+
5349
+ .max-badge, :where([data-ui="maximalist"]) .ui-badge {
5350
+ letter-spacing: max(.06em, .75px);
5351
+ min-height: 1.9rem;
5352
+ font-size: .875rem;
5353
+ font-weight: 850;
5354
+ line-height: 1.15;
5355
+ }
5356
+
5357
+ .max-table th, :where([data-ui="maximalist"]) .ui-table th {
5358
+ letter-spacing: max(.065em, .8px);
5359
+ font-size: 1rem;
5360
+ line-height: 1.15;
5361
+ }
5362
+
5363
+ [data-ui="maximalist"] :where(h1, h2, h3, h4, h5, h6):not([class]) {
5364
+ color: var(--max-text);
5365
+ letter-spacing: max(.03em, .5px);
5366
+ line-height: 1.12;
5367
+ }
5368
+
5369
+ .max-spinner, .max-loading-spinner, [data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
5370
+ border: .22rem solid var(--max-ink);
5371
+ background: conic-gradient(var(--max-primary)0 18%,transparent 18% 30%,var(--max-accent) 30% 52%,transparent 52% 64%,var(--max-warning) 64% 86%,transparent 86% 100%);
5372
+ box-shadow: .16rem .16rem 0 var(--max-ink),.34rem .34rem 0 rgb(var(--max-secondary-rgb)/.68);
5373
+ border-radius: 50%;
5374
+ animation-timing-function: linear;
5375
+ position: relative;
5376
+ }
5377
+
5378
+ .max-check input:checked + .max-check-control:after, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control:after {
5379
+ -webkit-text-stroke: .035rem currentColor;
5380
+ place-items: center;
5381
+ block-size: 100%;
5382
+ inline-size: 100%;
5383
+ font-family: Arial, sans-serif;
5384
+ font-size: 1rem;
5385
+ font-weight: 900;
5386
+ line-height: 1rem;
5387
+ display: grid;
5388
+ transform: translateY(-.025rem);
5389
+ }
5390
+
5391
+ [data-ui="maximalist"][data-mode] {
5392
+ --usk-native-select-indicator-position: calc(100% - 1.7rem) 48%, calc(100% - 1.25rem) 52%;
5393
+ --usk-native-select-padding-inline-end: 3.5rem;
5394
+ }
5395
+
5396
+ .max-select, :where([data-ui="maximalist"]) .ui-select {
5397
+ appearance: none;
5398
+ background-image: var(--usk-native-select-indicator-image);
5399
+ background-repeat: no-repeat;
5400
+ background-position: var(--usk-native-select-indicator-position);
5401
+ background-size: var(--usk-native-select-indicator-size);
5402
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
5403
+ }
5404
+
5405
+ .max-badge-seal {
5406
+ color: var(--max-on-warning);
5407
+ }
5408
+
5409
+ .max-badge-seal * {
5410
+ color: inherit;
5411
+ }
5412
+
5413
+ [data-ui="maximalist"][data-mode] .max-button.max-button-outline-heavy, [data-ui="maximalist"][data-mode] .max-button-outline-heavy, :where([data-ui="maximalist"])[data-mode] .ui-button.max-button-outline-heavy {
5414
+ background-color: var(--max-primary);
5415
+ color: var(--max-on-primary);
5416
+ border-color: var(--max-ink);
5417
+ background-image: none;
5418
+ }
5419
+
5420
+ .max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5421
+ border-color: var(--max-warning);
5422
+ }
5423
+
5424
+ .max-tooltip-arrow {
5425
+ border-color: var(--max-on-warning);
5426
+ box-shadow: 0 0 0 1px var(--max-warning);
5427
+ }
5428
+
5429
+ .max-callout-bar > div {
5430
+ border-inline-start: .25rem solid var(--max-ink);
5431
+ padding-inline-start: 1rem;
5432
+ }
5433
+
5434
+ .max-media-scrim > :where(figcaption, [data-media-caption]) {
5435
+ background: linear-gradient(to top, #000000f5, #000000c2 64%, #0000002e);
5436
+ }
5437
+
5438
+ .max-media-scrim > :where(figcaption, [data-media-caption]) strong {
5439
+ letter-spacing: max(.055em, .8px);
5440
+ text-shadow: 0 2px 3px #000000e6;
5441
+ font-size: 1.05rem;
5442
+ line-height: 1.2;
5443
+ display: block;
5444
+ }
5445
+
5446
+ [data-ui="maximalist"][data-mode] {
5447
+ --max-paper-wash: rgb(var(--max-warning-rgb) / .08);
5448
+ --max-paper-grain: radial-gradient(circle at 14% 18%, rgb(var(--max-text-rgb) / .045) 0 1px, transparent 1.4px),
5449
+ radial-gradient(circle at 72% 64%, rgb(var(--max-danger-rgb) / .055) 0 1px, transparent 1.5px);
5450
+ --max-paper-bg: var(--max-surface-strong);
5451
+ --max-poster-fill: var(--max-primary);
5452
+ --max-label-bg: var(--max-primary);
5453
+ --max-label-fg: var(--max-on-primary);
5454
+ --max-pop-shadow: 5px 5px 0 var(--max-ink);
5455
+ --max-sticker-shadow: 3px 3px 0 var(--max-ink);
5456
+ --max-shadow-sm: 3px 3px 0 var(--max-ink);
5457
+ --max-shadow-md: 5px 5px 0 var(--max-ink);
5458
+ --max-theme-bg-size: 9rem 9rem, 13rem 13rem, auto;
5459
+ --max-theme-bg: radial-gradient(circle at 16% 24%, rgb(var(--max-secondary-rgb) / .09) 0 1px, transparent 1.5px),
5460
+ radial-gradient(circle at 82% 68%, rgb(var(--max-danger-rgb) / .08) 0 1px, transparent 1.6px),
5461
+ var(--max-bg);
5462
+ --max-card-bg: var(--max-paper-grain), var(--max-surface);
5463
+ --max-control-bg: var(--max-surface-strong);
5464
+ --usk-native-radius-sm: 0;
5465
+ --usk-native-radius: 0;
5466
+ --usk-native-radius-lg: 0;
5467
+ --usk-native-shadow: 3px 3px 0 var(--max-ink);
5468
+ --usk-native-shadow-md: 5px 5px 0 var(--max-ink);
5469
+ --usk-native-focus-ring: 0 0 0 3px var(--max-focus), 3px 3px 0 var(--max-ink);
5470
+ --usk-native-border-width: 3px;
5471
+ --usk-native-choice-background: var(--max-surface-strong);
5472
+ --usk-native-choice-border: 3px solid var(--max-ink);
5473
+ --usk-native-checkbox-radius: 0;
5474
+ --usk-native-choice-shadow: 2px 2px 0 var(--max-ink);
5475
+ --usk-native-choice-checked-background: var(--max-danger);
5476
+ --usk-native-choice-mark-color: var(--max-on-danger);
5477
+ --usk-native-range-track-background: var(--max-warning);
5478
+ --usk-native-range-track-border: var(--usk-native-border-width) solid var(--max-ink);
5479
+ --usk-native-range-track-radius: 0;
5480
+ --usk-native-range-track-shadow: 3px 3px 0 var(--max-ink);
5481
+ --usk-native-range-progress-background: var(--max-warning);
5482
+ --usk-native-range-thumb-background: var(--max-accent);
5483
+ --usk-native-range-thumb-border: 3px solid var(--max-ink);
5484
+ --usk-native-range-thumb-radius: 50%;
5485
+ --usk-native-range-thumb-shadow: 2px 2px 0 var(--max-ink);
5486
+ --usk-native-progress-track-background: var(--max-surface-strong);
5487
+ --usk-native-progress-track-border: 3px solid var(--max-ink);
5488
+ --usk-native-progress-track-radius: 0;
5489
+ --usk-native-progress-track-shadow: 3px 3px 0 var(--max-ink);
5490
+ --usk-native-progress-value-background: var(--max-accent);
5491
+ --usk-native-progress-value-radius: 0;
5492
+ --usk-native-progress-value-shadow: none;
5493
+ --usk-native-file-button-background: var(--max-secondary);
5494
+ --usk-native-file-button-border: 3px solid var(--max-ink);
5495
+ --usk-native-file-button-radius: 0;
5496
+ --usk-native-file-button-shadow: 3px 3px 0 var(--max-ink);
5497
+ --usk-native-color-swatch-border: 3px solid var(--max-ink);
5498
+ --usk-native-color-swatch-radius: 0;
5499
+ --usk-native-scrollbar-thumb: var(--max-primary);
5500
+ --usk-native-scrollbar-radius: 0;
5501
+ }
5502
+
5503
+ [data-ui="maximalist"][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
5504
+ box-sizing: border-box;
5505
+ }
5506
+
5507
+ [data-ui="maximalist"][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
5508
+ box-sizing: border-box;
5509
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size))/2 - var(--usk-native-border-width));
5510
+ }
5511
+
5512
+ [data-ui="maximalist"][data-mode] :where(input[type="range"])::-moz-range-track {
5513
+ box-sizing: border-box;
5514
+ }
5515
+
5516
+ [data-ui="maximalist"][data-mode] :where(input[type="range"])::-moz-range-thumb {
5517
+ box-sizing: border-box;
5518
+ }
5519
+
5520
+ .max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap, .max-well, .max-inset, .max-alert, .max-tooltip, .max-progress, .max-nav, .max-card-service, .max-card-feature, .max-feature-strip, .max-callout-bar, .max-media-scrim, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), [data-ui="maximalist"] :where(dialog, details), :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .ui-alert, :where([data-ui="maximalist"]) .ui-progress, :where([data-ui="maximalist"]) .ui-nav {
5521
+ border-radius: 0;
5522
+ }
5523
+
5524
+ .max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap, .max-alert, .max-nav, .max-card-service, .max-card-feature, .max-feature-strip, .max-callout-bar, .max-media-scrim, [data-ui="maximalist"] dialog, :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .ui-alert, :where([data-ui="maximalist"]) .ui-nav {
5525
+ border: 3px solid var(--max-ink);
5526
+ box-shadow: var(--max-pop-shadow);
5527
+ }
5528
+
5529
+ .max-card, .max-panel, .max-surface, .max-table-wrap, .max-card-service, .max-card-feature, .max-feature-strip, :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-table-wrap {
5530
+ background: var(--max-card-bg);
5531
+ }
5532
+
5533
+ .max-toolbar, .max-well, .max-inset, :where([data-ui="maximalist"]) .ui-toolbar {
5534
+ background: var(--max-surface-strong);
5535
+ }
5536
+
5537
+ .max-button, .max-icon-button, [data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])), :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button {
5538
+ background-color: var(--max-surface-strong);
5539
+ min-block-size: 3rem;
5540
+ color: var(--max-text);
5541
+ border: 3px solid var(--max-ink);
5542
+ box-shadow: 4px 4px 0 var(--max-ink);
5543
+ font-family: var(--max-font-control);
5544
+ letter-spacing: .055em;
5545
+ text-transform: uppercase;
5546
+ background-image: none;
5547
+ border-radius: 0;
5548
+ font-weight: 900;
5549
+ line-height: 1.15;
5550
+ }
5551
+
5552
+ .max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
5553
+ background-color: var(--max-primary);
5554
+ color: var(--max-on-primary);
5555
+ background-image: none;
5556
+ }
5557
+
5558
+ .max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
5559
+ background-color: var(--max-secondary);
5560
+ color: var(--max-on-secondary);
5561
+ background-image: none;
5562
+ }
5563
+
5564
+ .max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
5565
+ background-color: var(--max-danger);
5566
+ color: var(--max-on-danger);
5567
+ background-image: none;
5568
+ }
5569
+
5570
+ .max-button-ghost, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="ghost"]) {
5571
+ color: var(--max-link);
5572
+ box-shadow: none;
5573
+ background-color: #0000;
5574
+ border-color: #0000;
5575
+ }
5576
+
5577
+ .max-button:hover, .max-icon-button:hover, [data-ui="maximalist"] .max-button.is-hover, :where([data-ui="maximalist"]) .ui-button:hover, :where([data-ui="maximalist"]) .ui-icon-button:hover, :where([data-ui="maximalist"]) .ui-button.is-hover {
5578
+ box-shadow: 6px 6px 0 var(--max-ink);
5579
+ transform: translate(-2px, -2px);
5580
+ }
5581
+
5582
+ [data-ui="maximalist"] .max-button.is-focus, :where([data-ui="maximalist"]) .ui-button.is-focus {
5583
+ outline: 3px solid var(--max-focus);
5584
+ outline-offset: 3px;
5585
+ box-shadow: 4px 4px 0 var(--max-ink);
5586
+ }
5587
+
5588
+ .max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-button:active, :where([data-ui="maximalist"]) .ui-icon-button:active, :where([data-ui="maximalist"]) .ui-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-icon-button[aria-pressed="true"] {
5589
+ box-shadow: 1px 1px 0 var(--max-ink);
5590
+ transform: translate(3px, 3px);
5591
+ }
5592
+
5593
+ .max-input, .max-textarea, .max-select, :where([data-ui="maximalist"]) .ui-input, :where([data-ui="maximalist"]) .ui-textarea, :where([data-ui="maximalist"]) .ui-select {
5594
+ background-color: var(--max-surface-strong);
5595
+ min-block-size: 3rem;
5596
+ color: var(--max-text);
5597
+ border: 3px solid var(--max-ink);
5598
+ box-shadow: 3px 3px 0 var(--max-ink);
5599
+ background-image: none;
5600
+ border-radius: 0;
5601
+ }
5602
+
5603
+ .max-input:hover, .max-textarea:hover, .max-select:hover, :where([data-ui="maximalist"]) .ui-input:hover, :where([data-ui="maximalist"]) .ui-textarea:hover, :where([data-ui="maximalist"]) .ui-select:hover {
5604
+ border-color: var(--max-secondary);
5605
+ }
5606
+
5607
+ .max-input:focus, .max-textarea:focus, .max-select:focus, :where([data-ui="maximalist"]) .ui-input:focus, :where([data-ui="maximalist"]) .ui-textarea:focus, :where([data-ui="maximalist"]) .ui-select:focus {
5608
+ border-color: var(--max-focus);
5609
+ box-shadow: var(--max-focus-ring);
5610
+ }
5611
+
5612
+ .max-check-control, .max-radio-control, .max-switch-track, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-radio-control, :where([data-ui="maximalist"]) .ui-switch-track {
5613
+ background: var(--max-surface-strong);
5614
+ border: 3px solid var(--max-ink);
5615
+ box-shadow: 2px 2px 0 var(--max-ink);
5616
+ }
5617
+
5618
+ .max-check-control, .max-switch-track, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-switch-track {
5619
+ border-radius: 0;
5620
+ }
5621
+
5622
+ .max-check input:checked + .max-check-control, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control {
5623
+ background: var(--max-danger);
5624
+ color: var(--max-on-danger);
5625
+ }
5626
+
5627
+ .max-radio input:checked + .max-radio-control, .max-switch input:checked + .max-switch-track, :where([data-ui="maximalist"]) .ui-radio input:checked+.ui-radio-control, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track {
5628
+ background: var(--max-secondary);
5629
+ }
5630
+
5631
+ .max-badge, :where([data-ui="maximalist"]) .ui-badge {
5632
+ background: var(--max-surface-strong);
5633
+ min-block-size: 1.75rem;
5634
+ color: var(--max-text);
5635
+ border: 2px solid var(--max-ink);
5636
+ box-shadow: 3px 3px 0 var(--max-ink);
5637
+ clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%);
5638
+ border-radius: 0;
5639
+ }
5640
+
5641
+ .max-badge-primary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="primary"]) {
5642
+ background: var(--max-primary);
5643
+ color: var(--max-on-primary);
5644
+ }
5645
+
5646
+ .max-badge-warning, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
5647
+ background: var(--max-warning);
5648
+ color: var(--max-on-warning);
5649
+ }
5650
+
5651
+ .max-kicker {
5652
+ background: var(--max-primary);
5653
+ color: var(--max-on-primary);
5654
+ box-shadow: 3px 3px 0 var(--max-ink);
5655
+ border-radius: 0;
5656
+ }
5657
+
5658
+ .max-panel:nth-of-type(3n+2) > .max-heading .max-kicker {
5659
+ background: var(--max-accent);
5660
+ color: var(--max-on-accent);
5661
+ transform: rotate(1deg);
5662
+ }
5663
+
5664
+ .max-panel:nth-of-type(3n) > .max-heading .max-kicker {
5665
+ background: var(--max-warning);
5666
+ color: var(--max-on-warning);
5667
+ transform: rotate(-1.5deg);
5668
+ }
5669
+
5670
+ .max-progress, :where([data-ui="maximalist"]) .ui-progress {
5671
+ background: var(--max-surface-strong);
5672
+ border: 3px solid var(--max-ink);
5673
+ block-size: 1rem;
5674
+ box-shadow: 3px 3px 0 var(--max-ink);
5675
+ border-radius: 0;
5676
+ padding: 0;
5677
+ }
5678
+
5679
+ .max-progress-bar, :where([data-ui="maximalist"]) .ui-progress-bar {
5680
+ background: var(--max-accent);
5681
+ border-radius: 0;
5682
+ }
5683
+
5684
+ .max-alert, :where([data-ui="maximalist"]) .ui-alert {
5685
+ background: var(--max-secondary);
5686
+ color: var(--max-on-secondary);
5687
+ border-inline-start-width: 3px;
5688
+ }
5689
+
5690
+ .max-alert .max-alert-body, :where([data-ui="maximalist"]) .ui-alert .ui-alert-body {
5691
+ color: inherit;
5692
+ }
5693
+
5694
+ .max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5695
+ background: var(--max-ink);
5696
+ color: var(--max-on-ink);
5697
+ border: 3px solid var(--max-warning);
5698
+ box-shadow: 4px 4px 0 var(--max-ink);
5699
+ }
5700
+
5701
+ .max-tooltip-arrow {
5702
+ background: var(--max-warning);
5703
+ border-color: var(--max-on-warning);
5704
+ }
5705
+
5706
+ .max-spinner, .max-loading-spinner, [data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :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="maximalist"]) .ui-button[aria-busy="true"]:after, :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"]:after {
5707
+ background: conic-gradient(var(--max-accent)0 28%,transparent 28% 100%);
5708
+ border: 5px solid var(--max-surface-soft);
5709
+ box-shadow: none;
5710
+ border-radius: 50%;
5711
+ animation: .8s linear infinite max-spin;
5712
+ }
5713
+
5714
+ .max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :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="maximalist"]) .ui-button[aria-busy="true"]:after, :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"]:after {
5715
+ clip-path: none;
5716
+ border-width: .12em;
5717
+ flex-shrink: 0;
5718
+ }
5719
+
5720
+ .max-nav, :where([data-ui="maximalist"]) .ui-nav {
5721
+ background: var(--max-ink);
5722
+ border-color: var(--max-ink);
5723
+ padding: .5rem;
5724
+ }
5725
+
5726
+ .max-nav-link, :where([data-ui="maximalist"]) .ui-nav-link {
5727
+ color: var(--max-on-ink);
5728
+ border-radius: 0;
5729
+ }
5730
+
5731
+ .max-nav-link[aria-current="page"], .max-nav-link.is-active, :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active {
5732
+ background: var(--max-warning);
5733
+ color: var(--max-on-warning);
5734
+ box-shadow: 3px 3px 0 var(--max-secondary);
5735
+ }
5736
+
5737
+ .max-table-wrap, :where([data-ui="maximalist"]) .ui-table-wrap {
5738
+ overflow: auto;
5739
+ }
5740
+
5741
+ .max-table th, :where([data-ui="maximalist"]) .ui-table th {
5742
+ background-color: var(--max-warning);
5743
+ color: var(--max-on-warning);
5744
+ border-color: var(--max-ink);
5745
+ background-image: none;
5746
+ }
5747
+
5748
+ .max-table td, :where([data-ui="maximalist"]) .ui-table td {
5749
+ color: var(--max-text);
5750
+ border-color: var(--max-ink);
5751
+ }
5752
+
5753
+ .max-card-service, .max-card-feature {
5754
+ transform: rotate(-.35deg);
5755
+ }
5756
+
5757
+ .max-card-service:nth-of-type(2n), .max-card-feature:nth-of-type(2n) {
5758
+ transform: rotate(.35deg);
5759
+ }
5760
+
5761
+ .max-icon-medallion {
5762
+ background: var(--max-secondary);
5763
+ color: var(--max-on-secondary);
5764
+ border-radius: 0;
5765
+ }
5766
+
5767
+ .max-feature-strip {
5768
+ background: var(--max-surface-strong);
5769
+ }
5770
+
5771
+ .max-callout-bar .max-copy {
5772
+ color: inherit;
5773
+ }
5774
+
5775
+ [data-ui="maximalist"][data-mode] :where(dialog) {
5776
+ background: var(--max-surface-strong);
5777
+ color: var(--max-text);
5778
+ border: 3px solid var(--max-ink);
5779
+ box-shadow: 5px 5px 0 var(--max-danger);
5780
+ border-radius: 0;
5781
+ }
5782
+
5783
+ [data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5784
+ background-color: var(--max-primary);
5785
+ color: var(--max-on-primary);
5786
+ background-image: none;
5787
+ }
5788
+
5789
+ [data-ui="maximalist"][data-mode] :where(table:not([class]) th) {
5790
+ background: var(--max-warning);
5791
+ color: var(--max-on-warning);
5792
+ border: 2px solid var(--max-ink);
5793
+ }
5794
+
5795
+ [data-ui="maximalist"] :where(details) {
5796
+ border: 3px solid var(--max-ink);
5797
+ box-shadow: 3px 3px 0 var(--max-ink);
5798
+ }
5799
+
5800
+ [data-ui="maximalist"] :where(summary) {
5801
+ font-family: var(--max-font-heading);
5802
+ letter-spacing: .05em;
5803
+ text-transform: uppercase;
5804
+ font-weight: 900;
5805
+ }
5806
+
5807
+ [data-ui="maximalist"] :where(:focus-visible) {
5808
+ outline: 3px solid var(--max-focus);
5809
+ outline-offset: 3px;
5810
+ }
5811
+
5812
+ [data-ui="maximalist"][data-mode] .max-button.max-button-warning, :where([data-ui="maximalist"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
5813
+ background: var(--max-warning);
5814
+ color: var(--max-on-warning);
5815
+ border-color: var(--max-warning);
5816
+ text-shadow: none;
5817
+ }
5818
+
5819
+ :root {
5820
+ --max-poster-dark-ink: #09090b;
5821
+ --max-poster-light-ink: #fffaf0;
5822
+ }
5823
+
5824
+ [data-ui="maximalist"][data-mode] {
5825
+ --max-poster-warning-deep: var(--max-warning);
5826
+ --max-poster-secondary-deep: var(--max-secondary);
5827
+ --max-poster-success-deep: var(--max-success);
5828
+ --usk-native-select-indicator-image: linear-gradient(38deg, transparent 38%, var(--max-ink) 39% 66%, transparent 67%),
5829
+ linear-gradient(142deg, transparent 38%, var(--max-ink) 39% 66%, transparent 67%);
5830
+ --usk-native-select-indicator-size: .68rem .68rem, .68rem .68rem;
5831
+ --usk-native-select-indicator-position: calc(100% - 1.7rem) 48%, calc(100% - 1.16rem) 52%;
5832
+ }
5833
+
5834
+ @supports (color: color-mix(in srgb,black,white)) {
5835
+ [data-ui="maximalist"][data-mode] {
5836
+ --max-poster-warning-deep: color-mix(in srgb, var(--max-warning) 48%, var(--max-poster-dark-ink));
5837
+ --max-poster-secondary-deep: color-mix(in srgb, var(--max-secondary) 64%, var(--max-poster-dark-ink));
5838
+ --max-poster-success-deep: color-mix(in srgb, var(--max-success) 70%, var(--max-poster-dark-ink));
5839
+ }
5840
+ }
5841
+
5842
+ [data-ui="maximalist"][data-mode] h1:not([class]) {
5843
+ letter-spacing: max(.045em, .8px);
5844
+ }
5845
+
5846
+ .max-button-primary, .max-button-secondary, .max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]), :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
5847
+ color: var(--max-poster-dark-ink);
5848
+ }
5849
+
5850
+ .max-nav-link[aria-current="page"], .max-nav-link.is-active, .max-table th, [data-ui="maximalist"][data-mode] :where(table:not([class]) th), :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active, :where([data-ui="maximalist"]) .ui-table th {
5851
+ background: var(--max-poster-warning-deep);
5852
+ color: var(--max-poster-light-ink);
5853
+ }
5854
+
5855
+ .max-badge-seal {
5856
+ background: var(--max-poster-warning-deep);
5857
+ color: var(--max-poster-light-ink);
5858
+ }
5859
+
5860
+ .max-badge-secondary, .max-badge-success, .max-badge-danger, .max-kicker, .max-card-service > .max-kicker, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="secondary"]), :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="success"]), :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="danger"]) {
5861
+ color: var(--max-poster-dark-ink);
5862
+ }
5863
+
5864
+ .max-badge-warning, .max-heading > .max-kicker, .max-panel:nth-of-type(3n) > .max-heading .max-kicker, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
5865
+ background: var(--max-poster-warning-deep);
5866
+ color: var(--max-poster-light-ink);
5867
+ }
5868
+
5869
+ .max-sticker {
5870
+ font-weight: 700;
5871
+ }
5872
+
5873
+ .max-kicker + .max-heading {
5874
+ margin-block-start: .75rem;
5875
+ }
5876
+
5877
+ .max-icon-button :where(svg), :where([data-ui="maximalist"]) .ui-icon-button :where(svg) {
5878
+ stroke-width: 2.75px;
5879
+ block-size: 1.5rem;
5880
+ inline-size: 1.5rem;
5881
+ font-size: 1.5rem;
5882
+ font-weight: 800;
5883
+ }
5884
+
5885
+ .max-card-service > .max-icon-medallion :where(svg) {
5886
+ stroke-width: 3.25px;
5887
+ block-size: 1.75rem;
5888
+ inline-size: 1.75rem;
5889
+ font-size: 1.75rem;
5890
+ font-weight: 800;
5891
+ }
5892
+
5893
+ .max-feature-item > .max-icon-medallion > :where(svg), .max-callout-bar > .max-icon-medallion > :where(svg) {
5894
+ stroke-width: 3.25px;
5895
+ }
5896
+
5897
+ .max-icon-button > :where(span), :where([data-ui="maximalist"]) .ui-icon-button>:where(span) {
5898
+ block-size: 1.5rem;
5899
+ inline-size: 1.5rem;
5900
+ }
5901
+
5902
+ .max-card-service > .max-icon-medallion > :where(span) {
5903
+ block-size: 1.75rem;
5904
+ inline-size: 1.75rem;
5905
+ }
5906
+
5907
+ .max-callout-bar {
5908
+ background: var(--max-poster-dark-ink);
5909
+ color: var(--max-poster-light-ink);
5910
+ }
5911
+
5912
+ .max-callout-bar > div {
5913
+ border-inline-start-color: var(--max-poster-light-ink);
5914
+ }
5915
+
5916
+ .max-callout-bar > div > strong {
5917
+ color: inherit;
5918
+ letter-spacing: .02em;
5919
+ font-weight: 800;
5920
+ line-height: 1.25;
5921
+ }
5922
+
5923
+ .max-callout-bar .max-copy {
5924
+ color: inherit;
5925
+ font-family: var(--max-font-sans);
5926
+ font-weight: 600;
5927
+ line-height: 1.55;
5928
+ }
5929
+
5930
+ [data-ui="maximalist"][data-mode] {
5931
+ --usk-native-font-heading: var(--max-font-heading);
5932
+ --usk-native-font-control: var(--max-font-control);
5933
+ }
5934
+
5935
+ .max-title {
5936
+ letter-spacing: max(.045em, .8px);
5937
+ font-weight: 800;
5938
+ line-height: 1.02;
5939
+ }
5940
+
5941
+ .max-heading, [data-ui="maximalist"][data-mode] :where(h1, h2, h3, h4, h5, h6):not([class]) {
5942
+ font-family: var(--max-font-heading);
5943
+ letter-spacing: max(.04em, .65px);
5944
+ font-weight: 800;
5945
+ line-height: 1.12;
5946
+ }
5947
+
5948
+ .max-kicker, .max-button, .max-icon-button, .max-badge, .max-badge-seal, .max-nav-link, .max-label, .max-alert-title, .max-table th, .max-tooltip, .max-sticker, .max-eyebrow, .max-skip-link, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), [data-ui="maximalist"] :where(summary), [data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])), :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button, :where([data-ui="maximalist"]) .ui-badge, :where([data-ui="maximalist"]) .ui-nav-link, :where([data-ui="maximalist"]) .ui-label, :where([data-ui="maximalist"]) .ui-alert-title, :where([data-ui="maximalist"]) .ui-table th {
5949
+ font-family: var(--max-font-control);
5950
+ letter-spacing: max(.045em, .8px);
5951
+ font-weight: 700;
5952
+ line-height: 1.2;
5953
+ }
5954
+
5955
+ [data-ui="maximalist"][data-mode] :where(strong, b, dt, legend, output, [aria-current="page"]), .max-callout-bar > div > strong, .max-media-scrim > :where(figcaption, [data-media-caption]) strong {
5956
+ font-weight: 700;
5957
+ }
5958
+
5959
+ .max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
5960
+ background: var(--max-primary);
5961
+ color: var(--max-on-primary);
5962
+ }
5963
+
5964
+ .max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
5965
+ background: var(--max-secondary);
5966
+ color: var(--max-on-secondary);
5967
+ }
5968
+
5969
+ .max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
5970
+ background: var(--max-danger);
5971
+ color: var(--max-on-danger);
5972
+ }
5973
+
5974
+ :where(.max-button-primary, .max-button-secondary, .max-button-danger) :where(svg), :where(.max-button-primary, .max-button-secondary, .max-button-danger)[aria-busy="true"]:after, :where([data-ui="maximalist"]) :where(.ui-button:where([data-ui-variant="primary"]),.ui-button:where([data-ui-variant="secondary"]),.ui-button:where([data-ui-variant="danger"])) :where(svg), :where([data-ui="maximalist"]) :where(.ui-button:where([data-ui-variant="primary"]),.ui-button:where([data-ui-variant="secondary"]),.ui-button:where([data-ui-variant="danger"]))[aria-busy="true"]:after {
5975
+ color: inherit;
5976
+ }
5977
+
5978
+ .max-nav-link[aria-current="page"], .max-nav-link.is-active, .max-table th, [data-ui="maximalist"][data-mode] :where(table:not([class]) th), .max-badge-seal, .max-badge-warning, .max-heading > .max-kicker, .max-panel:nth-of-type(3n) > .max-heading .max-kicker, :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active, :where([data-ui="maximalist"]) .ui-table th, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
5979
+ background: var(--max-warning);
5980
+ color: var(--max-on-warning);
5981
+ }
5982
+
5983
+ .max-alert, :where([data-ui="maximalist"]) .ui-alert {
5984
+ background: var(--max-secondary);
5985
+ color: var(--max-on-secondary);
5986
+ }
5987
+
5988
+ .max-alert-success, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="success"]) {
5989
+ background: var(--max-success);
5990
+ color: var(--max-on-success);
5991
+ }
5992
+
5993
+ .max-alert-warning, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="warning"]) {
5994
+ background: var(--max-warning);
5995
+ color: var(--max-on-warning);
5996
+ }
5997
+
5998
+ .max-alert-danger, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="danger"]) {
5999
+ background: var(--max-danger);
6000
+ color: var(--max-on-danger);
6001
+ }
6002
+
6003
+ .max-alert .max-alert-title, .max-alert .max-alert-body, :where([data-ui="maximalist"]) .ui-alert .ui-alert-title, :where([data-ui="maximalist"]) .ui-alert .ui-alert-body {
6004
+ color: inherit;
6005
+ }
6006
+
6007
+ .max-badge-primary, .max-kicker, .max-card-service > .max-kicker, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="primary"]) {
6008
+ background: var(--max-primary);
6009
+ color: var(--max-on-primary);
6010
+ }
6011
+
6012
+ .max-badge-secondary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="secondary"]) {
6013
+ background: var(--max-secondary);
6014
+ color: var(--max-on-secondary);
6015
+ }
6016
+
6017
+ .max-badge-success, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="success"]) {
6018
+ background: var(--max-success);
6019
+ color: var(--max-on-success);
6020
+ }
6021
+
6022
+ .max-badge-danger, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="danger"]) {
6023
+ background: var(--max-danger);
6024
+ color: var(--max-on-danger);
6025
+ }
4705
6026
  }