ui-style-kit-css 2.1.0 → 2.3.0

package/styles/retro-glass.css

@@ -1,7 +1,7 @@
 /* =========================================================
    Glassmorphism + Retrofuturism Hybrid Theme System
    Includes:
-   - 10 color schemes
+   - 20 color schemes
    - light / dark / contrast modes
    - themed UI components and utilities
 
@@ -143,7 +143,7 @@
   --rg-fg: var(--rg-text);
   --rg-surface-fg: var(--rg-text);
   --rg-muted: var(--rg-text-muted);
-  --rg-border: rgb(var(--rg-border-rgb) / var(--rg-border-alpha));
+  --rg-border: rgb(var(--rg-border-rgb) / max(var(--rg-border-alpha), var(--usk-border-min-alpha)));
   --rg-control-fg: var(--rg-text);
   --rg-primary: rgb(var(--rg-primary-rgb));
   --rg-primary-hover: rgb(var(--rg-primary-hover-rgb));
@@ -178,6 +178,10 @@
   --rg-spinner-accent: var(--rg-accent);
 }
 
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="retro-glass"][data-theme][data-mode] { --rg-border: color-mix(in srgb, rgb(var(--rg-border-rgb) / max(var(--rg-border-alpha), var(--usk-border-min-alpha))), var(--rg-text) var(--usk-border-text-mix)); }
+}
+
 /* =========================================================
    1. Midnight Gold
 ========================================================= */
@@ -333,6 +337,241 @@
 @keyframes rg-spin { to { transform: rotate(360deg); } }
 
 
+
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+
+.rg-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid rgb(var(--rg-border-rgb) / .72);
+  border-radius: var(--rg-radius-lg);
+}
+
+.rg-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--rg-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.rg-card-service > .rg-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.rg-card-service > .rg-card-media + .rg-icon-medallion { margin-block-start: -2.15rem; }
+
+.rg-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--rg-space-4);
+  align-items: start;
+}
+
+.rg-card-accent-edge {
+  border-inline-start: .35rem solid var(--rg-primary);
+}
+
+.rg-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--rg-primary);
+  color: var(--rg-on-primary);
+  border: 2px solid rgb(var(--rg-border-rgb) / .82);
+  border-radius: 50%;
+  line-height: 1;
+}
+.rg-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+
+.rg-button.rg-button-cut,
+.rg-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
+}
+.rg-button.rg-button-cut:focus-visible,
+.rg-button-cut:focus-visible { outline-offset: -3px; }
+
+.rg-button.rg-button-outline-heavy,
+.rg-button-outline-heavy {
+  background: transparent;
+  color: var(--rg-primary);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--rg-primary);
+  box-shadow: none;
+}
+.rg-button.rg-button-outline-heavy:hover,
+.rg-button-outline-heavy:hover {
+  background: var(--rg-primary);
+  color: var(--rg-on-primary);
+  border-color: var(--rg-primary-hover);
+}
+
+.rg-badge-seal {
+  display: inline-grid;
+  place-items: center;
+  align-content: center;
+  inline-size: 5rem;
+  min-inline-size: 5rem;
+  aspect-ratio: 1;
+  padding: .65rem;
+  background: var(--rg-surface-strong);
+  color: var(--rg-text);
+  border: 2px solid var(--rg-primary);
+  border-radius: 50%;
+  text-align: center;
+  font-family: var(--rg-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+}
+
+.rg-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  overflow: hidden;
+  background: var(--rg-card-bg);
+  color: var(--rg-text);
+  border: 1px solid var(--rg-border);
+  border-radius: var(--rg-radius-lg);
+}
+
+.rg-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--rg-space-3);
+  min-inline-size: 0;
+  padding: var(--rg-space-4);
+  border-inline-end: 1px solid rgb(var(--rg-border-rgb) / .62);
+}
+.rg-feature-item:last-child { border-inline-end: 0; }
+.rg-feature-item > :where(p, small) { margin: 0; color: var(--rg-text-muted); }
+
+.rg-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--rg-space-4);
+  padding: var(--rg-space-4) var(--rg-space-5);
+  background: var(--rg-card-bg);
+  color: var(--rg-text);
+  border: 1px solid var(--rg-border);
+  border-radius: var(--rg-radius-lg);
+}
+.rg-callout-bar > :where(p, div) { min-inline-size: 0; }
+.rg-callout-bar > :where(.rg-button, a, button):last-child { justify-self: end; }
+
+.rg-eyebrow {
+  margin: 0;
+  color: var(--rg-primary);
+  font-family: var(--rg-font-heading);
+  font-size: .76rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+
+.rg-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--rg-surface-soft);
+  border: 1px solid var(--rg-border);
+  border-radius: var(--rg-radius-lg);
+}
+.rg-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.rg-media-scrim > :where(figcaption, [data-media-caption]) {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: clamp(1rem, 4vw, 2rem);
+  color: #fff;
+  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
+}
+.rg-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+
+@media (max-width: 42rem) {
+  .rg-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .rg-callout-bar > :where(.rg-button, a, button):last-child { justify-self: stretch; }
+  .rg-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--rg-border-rgb) / .62); }
+  .rg-feature-item:last-child { border-block-end: 0; }
+}
+
+.rg-card-service, .rg-card-feature, .rg-feature-strip, .rg-callout-bar { background: linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / .03)), var(--rg-card-bg); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--rg-shadow-md), 0 0 1.8rem rgb(var(--rg-primary-rgb) / .18); }
+.rg-icon-medallion, .rg-badge-seal { background: linear-gradient(145deg, rgb(255 255 255 / .3), rgb(255 255 255 / .05)), rgb(var(--rg-primary-rgb) / .72); border-color: rgb(255 255 255 / .32); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 0 1.35rem rgb(var(--rg-primary-rgb) / .28); }
+.rg-button-outline-heavy { background: rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
+
+/* Filled and framed actions use complementary frosted tabs and inner highlights. */
+.rg-button.rg-button-cut, .rg-button-cut {
+  inline-size: min(100%, 16rem);
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: center;
+  justify-content: center;
+  clip-path: polygon(.8rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .8rem) 100%, 0 100%, 0 .35rem);
+}
+.rg-button.rg-button-outline-heavy, .rg-button-outline-heavy {
+  border-width: 1px;
+  border-radius: 0;
+  background: rgb(var(--rg-surface-strong-rgb) / .2);
+  clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .35rem, 100% 100%, .8rem 100%, 0 calc(100% - .35rem));
+  box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .78), 0 .45rem 1rem rgb(var(--rg-primary-rgb) / .14);
+}
+
+/* Marketing and native surfaces repeat the frosted shell and inner highlight. */
+.rg-card-service, .rg-media-scrim, .rg-feature-strip, .rg-callout-bar, .rg-well {
+  background: rgb(var(--rg-surface-strong-rgb) / .34);
+  border: 1px solid rgb(var(--rg-border-rgb) / .72);
+  border-radius: .75rem 1.35rem .75rem 1.15rem;
+  box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .78), 0 .8rem 1.6rem rgb(var(--rg-primary-rgb) / .14);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+[data-ui="retro-glass"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  color: var(--rg-text);
+  background: rgb(var(--rg-surface-strong-rgb) / .24);
+  border: 1px solid var(--rg-primary);
+  border-radius: .55rem .9rem .55rem .78rem;
+  box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .78), 0 .35rem .85rem rgb(var(--rg-primary-rgb) / .14);
+}
+[data-ui="retro-glass"][data-theme][data-mode] :where(dialog) {
+  background: rgb(var(--rg-surface-strong-rgb) / .72);
+  border: 1px solid rgb(var(--rg-border-rgb) / .78);
+  border-radius: .85rem 1.45rem .85rem 1.2rem;
+  box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .8), 0 1rem 2.2rem rgb(var(--rg-primary-rgb) / .18);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+}
+
+/* Busy indicators retain the irregular frosted-glass tab silhouette. */
+.rg-button[aria-busy="true"]::after, .rg-icon-button[aria-busy="true"]::after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
+  border: .09em solid rgb(255 255 255 / .45); border-block-start-color: currentColor; border-radius: 38% 62% 48% 52%; background: linear-gradient(135deg, rgb(255 255 255 / .35), transparent 45%), conic-gradient(currentColor, transparent 44%, currentColor); box-shadow: 0 0 .42em currentColor, inset 0 0 .2em rgb(255 255 255 / .26); clip-path: none; animation: rg-spin .96s linear infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
 }
@@ -340,7 +579,7 @@
   [data-ui="retro-glass"] { --rg-border-alpha: 1; }
 }
 @media (forced-colors: active) {
-  [data-ui="retro-glass"] * { forced-color-adjust: auto; }
+  @supports (forced-color-adjust: auto) { [data-ui="retro-glass"] * { forced-color-adjust: auto; } }
   [data-ui="retro-glass"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
 }
 @media print {

package/styles/retrofuturism.css

@@ -1,6 +1,6 @@
 /* =========================================================
    UI Style Kit CSS — Retrofuturism Theme System
-   Includes 10 color schemes, light/dark/contrast modes,
+   Includes 20 color schemes, light/dark/contrast modes,
    component classes, native element coverage, and CSS-only
    accessibility presentation helpers.
 
@@ -132,7 +132,7 @@
   --retro-fg: var(--retro-text);
   --retro-surface-fg: var(--retro-text);
   --retro-muted: var(--retro-text-muted);
-  --retro-border: rgb(var(--retro-border-rgb) / var(--retro-border-alpha));
+  --retro-border: rgb(var(--retro-border-rgb) / max(var(--retro-border-alpha), var(--usk-border-min-alpha)));
   --retro-control-fg: var(--retro-text);
   --retro-primary: rgb(var(--retro-primary-rgb));
   --retro-primary-hover: rgb(var(--retro-primary-hover-rgb));
@@ -162,6 +162,10 @@
   --retro-spinner-accent: var(--retro-accent);
 }
 
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="retrofuturism"][data-theme][data-mode] { --retro-border: color-mix(in srgb, rgb(var(--retro-border-rgb) / max(var(--retro-border-alpha), var(--usk-border-min-alpha))), var(--retro-text) var(--usk-border-text-mix)); }
+}
+
 
 
 
@@ -443,6 +447,232 @@
 @keyframes retro-spin { to { transform: rotate(360deg); } }
 
 
+
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+
+.retro-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid rgb(var(--retro-border-rgb) / .72);
+  border-radius: var(--retro-radius-lg);
+}
+
+.retro-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--retro-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.retro-card-service > .retro-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.retro-card-service > .retro-card-media + .retro-icon-medallion { margin-block-start: -2.15rem; }
+
+.retro-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--retro-space-4);
+  align-items: start;
+}
+
+.retro-card-accent-edge {
+  border-inline-start: .35rem solid var(--retro-primary);
+}
+
+.retro-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--retro-primary);
+  color: var(--retro-on-primary);
+  border: 2px solid rgb(var(--retro-border-rgb) / .82);
+  border-radius: 50%;
+  line-height: 1;
+}
+.retro-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+
+.retro-button.retro-button-cut,
+.retro-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
+}
+.retro-button.retro-button-cut:focus-visible,
+.retro-button-cut:focus-visible { outline-offset: -3px; }
+
+.retro-button.retro-button-outline-heavy,
+.retro-button-outline-heavy {
+  background: transparent;
+  color: var(--retro-primary);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--retro-primary);
+  box-shadow: none;
+}
+.retro-button.retro-button-outline-heavy:hover,
+.retro-button-outline-heavy:hover {
+  background: var(--retro-primary);
+  color: var(--retro-on-primary);
+  border-color: var(--retro-primary-hover);
+}
+
+.retro-badge-seal {
+  display: inline-grid;
+  place-items: center;
+  align-content: center;
+  inline-size: 5rem;
+  min-inline-size: 5rem;
+  aspect-ratio: 1;
+  padding: .65rem;
+  background: var(--retro-surface-strong);
+  color: var(--retro-text);
+  border: 2px solid var(--retro-primary);
+  border-radius: 50%;
+  text-align: center;
+  font-family: var(--retro-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+}
+
+.retro-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  overflow: hidden;
+  background: var(--retro-card-bg);
+  color: var(--retro-text);
+  border: 1px solid var(--retro-border);
+  border-radius: var(--retro-radius-lg);
+}
+
+.retro-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--retro-space-3);
+  min-inline-size: 0;
+  padding: var(--retro-space-4);
+  border-inline-end: 1px solid rgb(var(--retro-border-rgb) / .62);
+}
+.retro-feature-item:last-child { border-inline-end: 0; }
+.retro-feature-item > :where(p, small) { margin: 0; color: var(--retro-text-muted); }
+
+.retro-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--retro-space-4);
+  padding: var(--retro-space-4) var(--retro-space-5);
+  background: var(--retro-card-bg);
+  color: var(--retro-text);
+  border: 1px solid var(--retro-border);
+  border-radius: var(--retro-radius-lg);
+}
+.retro-callout-bar > :where(p, div) { min-inline-size: 0; }
+.retro-callout-bar > :where(.retro-button, a, button):last-child { justify-self: end; }
+
+.retro-eyebrow {
+  margin: 0;
+  color: var(--retro-primary);
+  font-family: var(--retro-font-heading);
+  font-size: .76rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+
+.retro-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--retro-surface-soft);
+  border: 1px solid var(--retro-border);
+  border-radius: var(--retro-radius-lg);
+}
+.retro-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.retro-media-scrim > :where(figcaption, [data-media-caption]) {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: clamp(1rem, 4vw, 2rem);
+  color: #fff;
+  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
+}
+.retro-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+
+@media (max-width: 42rem) {
+  .retro-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .retro-callout-bar > :where(.retro-button, a, button):last-child { justify-self: stretch; }
+  .retro-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--retro-border-rgb) / .62); }
+  .retro-feature-item:last-child { border-block-end: 0; }
+}
+
+.retro-card-service, .retro-card-feature, .retro-feature-strip, .retro-callout-bar { border-width: 2px; box-shadow: 0 0 0 2px rgb(var(--retro-primary-rgb) / .18), 0 1rem 2rem rgb(0 0 0 / .22); }
+.retro-icon-medallion, .retro-badge-seal { border: .2rem double var(--retro-border); box-shadow: 0 0 0 .18rem rgb(var(--retro-primary-rgb) / .18); }
+.retro-eyebrow { letter-spacing: .2em; }
+
+/* Filled and framed actions read as paired instrument-panel controls. */
+.retro-button.retro-button-cut, .retro-button-cut {
+  inline-size: min(100%, 18rem);
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: center;
+  justify-content: center;
+  clip-path: polygon(.9rem 0, calc(100% - .9rem) 0, 100% 50%, calc(100% - .9rem) 100%, .9rem 100%, 0 50%);
+}
+.retro-button.retro-button-outline-heavy, .retro-button-outline-heavy {
+  border: 3px double var(--retro-primary);
+  border-radius: 0;
+  clip-path: polygon(1.1rem 0, calc(100% - .55rem) 0, 100% 50%, calc(100% - .55rem) 100%, 1.1rem 100%, 0 50%);
+  box-shadow: inset 0 0 0 1px rgb(var(--retro-surface-strong-rgb) / .78), 0 .25rem .8rem rgb(var(--retro-primary-rgb) / .18);
+}
+
+/* Marketing and native surfaces share an instrument rim and metallic inner line. */
+.retro-card-service, .retro-media-scrim, .retro-feature-strip, .retro-callout-bar, .retro-well {
+  border: 3px double var(--retro-border);
+  border-radius: var(--retro-radius-lg);
+  box-shadow: inset 0 0 0 1px rgb(var(--retro-surface-strong-rgb) / .7), 0 .75rem 1.6rem rgb(var(--retro-text-rgb) / .18);
+}
+[data-ui="retrofuturism"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  border: 3px double var(--retro-primary);
+  border-radius: var(--retro-radius-pill);
+  box-shadow: inset 0 0 0 1px rgb(var(--retro-surface-strong-rgb) / .72), 0 .3rem .8rem rgb(var(--retro-primary-rgb) / .2);
+}
+[data-ui="retrofuturism"][data-theme][data-mode] :where(dialog) {
+  border: 3px double var(--retro-border);
+  border-radius: var(--retro-radius-lg);
+  box-shadow: inset 0 0 0 1px rgb(var(--retro-surface-strong-rgb) / .72), 0 1rem 2.2rem rgb(var(--retro-text-rgb) / .24);
+}
+
+/* Busy indicators become a luminous console dial with a central locator. */
+.retro-button[aria-busy="true"]::after, .retro-icon-button[aria-busy="true"]::after, [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
+  border: .09em solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 0 .1em, transparent .12em), conic-gradient(currentColor, transparent 45%, currentColor); box-shadow: 0 0 0 .1em rgb(var(--retro-primary-rgb) / .2), 0 0 .45em rgb(var(--retro-accent-rgb) / .6); clip-path: circle(50%); animation: retro-spin 1.08s linear infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-ui="retrofuturism"] *, [data-ui="retrofuturism"] *::before, [data-ui="retrofuturism"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
 }
@@ -450,7 +680,7 @@
   [data-ui="retrofuturism"] { --retro-border-alpha: 1; --retro-focus-alpha: .75; }
 }
 @media (forced-colors: active) {
-  [data-ui="retrofuturism"] * { forced-color-adjust: auto; }
+  @supports (forced-color-adjust: auto) { [data-ui="retrofuturism"] * { forced-color-adjust: auto; } }
   [data-ui="retrofuturism"] :where(:focus-visible) { outline: 3px solid CanvasText; }
 }
 @media print {