@font-face {
  font-family: "Casalta Montserrat Experiments";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-v58/Montserrat-V58.ttf") format("truetype");
}

:root {
  --experiment-black: #171716;
  --experiment-grey: #666663;
  --experiment-mid: #a6a6a2;
  --experiment-line: #ddddda;
  --experiment-paper: #f4f4f2;
  --experiment-white: #ffffff;
  background: var(--experiment-white);
  color: var(--experiment-black);
  font-family: "Casalta Montserrat Experiments", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.button-experiments :focus-visible {
  outline: 2px solid var(--experiment-black);
  outline-offset: 3px;
}

.experiment-header {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  align-items: center;
  background: rgba(250, 250, 252, .8);
  display: flex;
  height: 72px;
  justify-content: space-between;
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.experiment-brand { display: block; line-height: 0; }
.experiment-brand img { display: block; height: 38px; width: auto; }
.experiment-back { border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 400; text-decoration: none; }

.button-experiments main { margin: 0 auto; max-width: 1440px; padding: 0 48px 180px; }

.experiment-intro { display: grid; gap: 28px; min-height: 620px; padding: 112px 0 96px; }
.experiment-kicker { color: var(--experiment-grey); font-size: 12px; font-weight: 600; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.experiment-intro h1 { font-size: clamp(60px, 7vw, 100px); font-weight: 385; letter-spacing: -.025em; line-height: .96; margin: 0; max-width: 980px; }
.experiment-intro > p:not(.experiment-kicker) { color: var(--experiment-grey); font-size: clamp(20px, 2vw, 28px); font-weight: 400; line-height: 1.45; margin: 0; max-width: 980px; text-wrap: pretty; }
.experiment-rules { border-bottom: 1px solid var(--experiment-line); border-top: 1px solid var(--experiment-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
.experiment-rules div { border-right: 1px solid var(--experiment-line); display: grid; gap: 8px; padding: 20px; }
.experiment-rules div:first-child { padding-left: 0; }
.experiment-rules div:last-child { border-right: 0; }
.experiment-rules span { color: var(--experiment-grey); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.experiment-rules strong { font-size: 15px; font-weight: 500; }

.live-preview { border-top: 1px solid var(--experiment-black); padding: 96px 0 120px; }
.experiment-heading { align-items: end; display: flex; gap: 40px; justify-content: space-between; margin-bottom: 48px; }
.experiment-heading > div { display: grid; gap: 12px; }
.experiment-heading h2 { font-size: clamp(38px, 4vw, 60px); font-weight: 385; line-height: 1; margin: 0; }
.experiment-heading > p { color: var(--experiment-grey); font-size: 14px; margin: 0; }
.preview-stage { background: var(--experiment-paper); border: 1px solid var(--experiment-line); border-radius: 28px; display: grid; gap: 32px; padding: clamp(24px, 4vw, 56px); }
.preview-toolbar { align-items: end; display: flex; gap: 32px; justify-content: space-between; }
.preview-toolbar > div:first-child { display: grid; gap: 8px; }
.preview-toolbar strong { font-size: 28px; font-weight: 400; }
.preview-label { color: var(--experiment-grey); font-size: 12px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.preview-actions, .preview-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.preview-story { align-items: end; background: #fff; border-radius: 20px; display: grid; gap: 32px; grid-template-columns: 1fr auto; padding: 32px; }
.preview-story > div { display: grid; gap: 10px; }
.preview-story h3 { font-size: 30px; font-weight: 385; line-height: 1.05; margin: 0; }
.preview-story p { color: var(--experiment-grey); font-size: 16px; line-height: 1.5; margin: 0; }

.preview-button,
.option-sample,
.custom-sample,
.tray-reset,
.tray-view {
  -webkit-appearance: none;
  appearance: none;
  -webkit-backdrop-filter: var(--casalta-button-filter, none);
  backdrop-filter: var(--casalta-button-filter, none);
  align-items: center;
  background: var(--casalta-button-surface, #fff);
  border: 1px solid #000;
  border-radius: 999px;
  box-shadow: none;
  color: var(--casalta-button-text-color, #171716);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--casalta-button-size, 16px);
  font-weight: var(--casalta-button-weight, 400);
  justify-content: center;
  letter-spacing: var(--casalta-button-tracking, 0);
  line-height: var(--casalta-button-line-height, 1);
  min-height: var(--casalta-button-height, 48px);
  padding: var(--casalta-button-pad-y, 0) var(--casalta-button-pad, 24px);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.preview-button--primary,
.option-sample--primary,
.custom-sample--primary,
.tray-view {
  background: var(--casalta-button-surface, #fff);
  border-color: #000;
  color: var(--casalta-button-text-color, #171716);
}

@media (hover: hover) and (pointer: fine) {
  .preview-button:hover,
  .option-sample:hover,
  .custom-sample:hover,
  .tray-reset:hover,
  .tray-view:hover { background: #000; border-color: #000; color: #fff; }

  .preview-button--outline:hover,
  .option-sample--outline:hover,
  .tray-reset:hover { background: var(--experiment-black); border-color: var(--experiment-black); color: #fff; }
}

.preview-button:active,
.option-sample:active,
.custom-sample:active,
.tray-reset:active,
.tray-view:active { background: #000; border-color: #000; color: #fff; }

.preview-button--outline:active,
.option-sample--outline:active,
.tray-reset:active { background: var(--experiment-black); border-color: var(--experiment-black); color: #fff; }

.experiment-form { display: grid; gap: 112px; }
.custom-builder {
  --casalta-button-size: 16px;
  --casalta-button-weight: 400;
  --casalta-button-tracking: 0;
  --casalta-button-height: 48px;
  --casalta-button-pad: 24px;
  --casalta-button-border: 1px;
  --casalta-button-border-color: var(--experiment-black);
  --casalta-button-surface: #fff;
  --casalta-button-text-color: #171716;
  --casalta-button-filter: none;
  border-top: 1px solid var(--experiment-black);
  display: grid;
  gap: 48px;
  padding-top: 48px;
  scroll-margin-top: 88px;
}
.custom-builder-heading { align-items: start; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); }
.custom-builder-heading > div:first-child { display: grid; gap: 14px; }
.custom-builder-heading h2 { font-size: clamp(38px, 4vw, 60px); font-weight: 385; line-height: 1; margin: 0; }
.custom-builder-heading > div:first-child > p:last-child { color: var(--experiment-grey); font-size: 17px; line-height: 1.55; margin: 0; max-width: 760px; }
.custom-state { background: var(--experiment-paper); border-left: 2px solid var(--experiment-black); color: var(--experiment-grey); font-size: 14px; line-height: 1.5; margin: 0; padding: 16px 18px; }
.custom-activate {
  align-items: center;
  background: #fff;
  border: 1px solid var(--experiment-line);
  cursor: pointer;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-width: 280px;
  padding: 18px 20px;
}
.custom-activate > span { display: grid; gap: 5px; }
.custom-activate strong { font-size: 15px; font-weight: 500; }
.custom-activate small { color: var(--experiment-grey); font-size: 12px; }
.custom-builder:has(#button-option-custom:checked) .custom-activate { box-shadow: inset 0 0 0 2px var(--experiment-black); }
.custom-builder-layout { align-items: start; display: grid; gap: 48px; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); }
.custom-controls { border-left: 1px solid var(--experiment-line); border-top: 1px solid var(--experiment-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.custom-control-group { border: 0; border-bottom: 1px solid var(--experiment-line); border-right: 1px solid var(--experiment-line); margin: 0; min-width: 0; padding: 24px; }
.custom-control-group legend { float: left; font-size: 20px; font-weight: 500; margin: 0 0 22px; padding: 0; width: 100%; }
.custom-control-grid { clear: both; display: grid; gap: 16px; }
.custom-control,
.custom-fixed-value { display: grid; gap: 8px; }
.custom-control > span,
.custom-fixed-value > span { color: var(--experiment-grey); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.custom-control select,
.custom-fixed-value strong {
  background: #fff;
  border: 1px solid var(--experiment-mid);
  border-radius: 0;
  color: var(--experiment-black);
  font-size: 15px;
  font-weight: 400;
  min-height: 48px;
  padding: 10px 12px;
  width: 100%;
}
.custom-fixed-value strong { align-items: center; display: flex; font-weight: 500; }
.custom-control:has(select:disabled) { opacity: .42; }
.custom-control select:disabled { cursor: not-allowed; }
.custom-preview { align-self: start; display: grid; gap: 18px; position: sticky; top: 100px; }
.custom-preview-stage {
  align-content: center;
  align-items: center;
  background:
    linear-gradient(120deg, transparent 0 28%, rgba(23, 23, 22, .09) 28% 48%, transparent 48% 67%, rgba(23, 23, 22, .16) 67% 82%, transparent 82%),
    #efefec;
  border: 1px solid var(--experiment-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 230px;
  padding: 32px;
}
.custom-sample { cursor: default; }
.custom-summary { color: var(--experiment-black); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.55; }
.custom-fixed-note { color: var(--experiment-grey); font-size: 13px; line-height: 1.55; margin: 0; }
.custom-basis { color: var(--experiment-grey); font-size: 12px; margin: -8px 0 0; }
.custom-reset {
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--experiment-black);
  cursor: pointer;
  font-size: 13px;
  justify-self: start;
  min-height: 48px;
  padding: 6px 0;
}
.experiment-form fieldset { border: 0; border-top: 1px solid var(--experiment-black); margin: 0; min-width: 0; padding: 48px 0 0; }
.custom-builder .custom-control-group { border: 0; border-bottom: 1px solid var(--experiment-line); border-right: 1px solid var(--experiment-line); padding: 24px; }
.custom-builder .custom-control-group legend { font-size: 20px; font-weight: 500; margin-bottom: 22px; }
.experiment-form legend { float: left; font-size: clamp(34px, 4vw, 52px); font-weight: 385; line-height: 1; margin: 0 0 16px; padding: 0; width: 100%; }
.group-description { clear: both; color: var(--experiment-grey); font-size: 17px; line-height: 1.55; margin: 0 0 36px; max-width: 800px; }
.option-grid { border-left: 1px solid var(--experiment-line); border-top: 1px solid var(--experiment-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-grid--designs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
.option-card { border-bottom: 1px solid var(--experiment-line); border-right: 1px solid var(--experiment-line); display: grid; min-height: 250px; position: relative; }
.option-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--experiment-black); }
.option-card label {
  /*
   * Specimen variables are deliberately local to each option card. The root
   * variables belong to the selected live preview and homepage only; allowing
   * them to cascade into this matrix would make every specimen look selected.
   */
  --casalta-button-size: 16px;
  --casalta-button-weight: 400;
  --casalta-button-tracking: 0;
  --casalta-button-height: 48px;
  --casalta-button-pad: 24px;
  --casalta-button-border: 1px;
  --casalta-button-border-color: var(--experiment-black);
  --casalta-button-surface: #fff;
  --casalta-button-text-color: #171716;
  --casalta-button-filter: none;
  cursor: pointer;
  display: grid;
  gap: 28px;
  grid-template-rows: auto 1fr auto;
  padding: 24px;
}

/*
 * The Current card is an honest snapshot of the present production control.
 * It predates the experiment's 48px minimum, so it remains 40px here instead
 * of being silently normalised to the laboratory baseline.
 */
:root[data-casalta-button-style="current"] .button-experiments :is(.preview-button, .tray-reset, .tray-view),
.option-card label[for="button-option-current"] {
  --casalta-button-size: 16px;
  --casalta-button-weight: 400;
  --casalta-button-tracking: 0;
  --casalta-button-height: 40px;
  --casalta-button-line-height: 1.45;
  --casalta-button-pad-y: 9px;
  --casalta-button-pad: 18px;
  --casalta-button-border: 1px;
  --casalta-button-border-color: #0d0d0d;
  --casalta-button-text-color: #0d0d0d;
  --casalta-button-surface: #fff;
  --casalta-button-filter: none;
}

.option-card label[for="button-option-a1"] { --casalta-button-size: 15px; --casalta-button-weight: 300; }
.option-card label[for="button-option-a2"] { --casalta-button-weight: 300; }
.option-card label[for="button-option-a3"] { --casalta-button-size: 17px; --casalta-button-weight: 300; }
.option-card label[for="button-option-b1"] { --casalta-button-size: 15px; }
.option-card label[for="button-option-b2"] { --casalta-button-size: 16px; --casalta-button-weight: 400; }
.option-card label[for="button-option-b3"] { --casalta-button-size: 17px; }
.option-card label[for="button-option-c1"] { --casalta-button-size: 15px; --casalta-button-weight: 500; }
.option-card label[for="button-option-c2"] { --casalta-button-weight: 500; }
.option-card label[for="button-option-c3"] { --casalta-button-size: 17px; --casalta-button-weight: 500; }
.option-card label[for="button-option-t10"] { --casalta-button-size: 15px; --casalta-button-weight: 450; }
.option-card label[for="button-option-t11"] { --casalta-button-weight: 450; }
.option-card label[for="button-option-t12"] { --casalta-button-size: 17px; --casalta-button-weight: 450; }
.option-card label[for="button-option-t13"] { --casalta-button-tracking: .01em; }
.option-card label[for="button-option-t14"] { --casalta-button-tracking: .02em; }
.option-card label[for="button-option-t15"] { --casalta-button-weight: 500; --casalta-button-tracking: .01em; }
.option-card label[for="button-option-t16"] { --casalta-button-weight: 600; }
.option-card label[for="button-option-g1"] { --casalta-button-pad: 20px; }
.option-card label[for="button-option-g2"] { --casalta-button-height: 48px; --casalta-button-pad: 24px; }
.option-card label[for="button-option-g3"] { --casalta-button-pad: 32px; }
.option-card label[for="button-option-g4"] { --casalta-button-height: 52px; --casalta-button-pad: 26px; }
.option-card label[for="button-option-g5"] { --casalta-button-height: 56px; --casalta-button-pad: 30px; }
.option-card label[for="button-option-g6"] { --casalta-button-pad: 16px; }
.option-card label[for="button-option-g7"] { --casalta-button-height: 52px; --casalta-button-pad: 20px; }
.option-card label[for="button-option-g8"] { --casalta-button-height: 52px; --casalta-button-pad: 32px; }
.option-card label[for="button-option-g9"] { --casalta-button-height: 56px; }
.option-card label[for="button-option-g10"] { --casalta-button-height: 56px; --casalta-button-pad: 36px; }
.option-card label[for="button-option-m2"] { --casalta-button-border: 1.5px; }
.option-card label[for="button-option-m1"] { --casalta-button-border: 1px; --casalta-button-surface: #fff; }
.option-card label[for="button-option-m3"] { --casalta-button-border: 2px; }
.option-card label[for="button-option-m4"] {
  --casalta-button-surface: rgba(255, 255, 255, .72);
  --casalta-button-filter: saturate(180%) blur(18px);
}
.option-card label[for="button-option-m5"] { --casalta-button-surface: transparent; }
.option-card label[for="button-option-m6"] { --casalta-button-surface: #f4f4f2; }
.option-card label[for="button-option-m7"] { --casalta-button-surface: rgba(255, 255, 255, .52); --casalta-button-filter: saturate(140%) blur(12px); }
.option-card label[for="button-option-m8"] { --casalta-button-surface: rgba(255, 255, 255, .84); --casalta-button-filter: saturate(160%) blur(20px); }
.option-card label[for="button-option-m9"] { --casalta-button-surface: rgba(250, 250, 252, .80); --casalta-button-filter: saturate(180%) blur(20px); }
.option-card label[for="button-option-m10"] { --casalta-button-border-color: #5f5f5b; }
.option-card label[for="button-option-m11"] { --casalta-button-border-color: rgba(23, 23, 22, .60); --casalta-button-surface: rgba(255, 255, 255, .72); --casalta-button-filter: saturate(180%) blur(18px); }
.option-card label[for="button-option-d1"] { --casalta-button-size: 16px; --casalta-button-weight: 400; --casalta-button-height: 48px; --casalta-button-pad: 24px; }
.option-card label[for="button-option-d2"] { --casalta-button-size: 15px; --casalta-button-weight: 500; --casalta-button-height: 48px; --casalta-button-pad: 20px; }
.option-card label[for="button-option-d3"] { --casalta-button-size: 16px; --casalta-button-weight: 400; --casalta-button-tracking: .01em; --casalta-button-height: 52px; --casalta-button-pad: 32px; --casalta-button-surface: #f4f4f2; }
.option-card label[for="button-option-d4"] { --casalta-button-size: 17px; --casalta-button-weight: 300; --casalta-button-tracking: .02em; --casalta-button-height: 56px; --casalta-button-pad: 36px; }
.option-card label[for="button-option-d5"] { --casalta-button-size: 16px; --casalta-button-weight: 500; --casalta-button-tracking: .01em; --casalta-button-height: 52px; --casalta-button-pad: 28px; --casalta-button-surface: rgba(255, 255, 255, .72); --casalta-button-filter: saturate(180%) blur(18px); }
.option-card label[for="button-option-d6"] { --casalta-button-size: 16px; --casalta-button-weight: 400; --casalta-button-tracking: 0; --casalta-button-height: 48px; --casalta-button-pad: 24px; --casalta-button-surface: transparent; --casalta-button-filter: none; }
.option-card-top { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.option-identity { display: grid; gap: 6px; }
.option-id { font-size: 13px; font-weight: 600; }
.option-name { color: var(--experiment-grey); font-size: 13px; font-weight: 400; }
.option-radio { accent-color: var(--experiment-black); height: 20px; margin: 0; width: 20px; }
.option-samples { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
[data-option-group="material"] .option-samples {
  background:
    linear-gradient(120deg, transparent 0 28%, rgba(23, 23, 22, .09) 28% 48%, transparent 48% 67%, rgba(23, 23, 22, .16) 67% 82%, transparent 82%),
    #efefec;
  border: 1px solid var(--experiment-line);
  min-height: 116px;
  padding: 24px;
}

.option-card label:is([for="button-option-d5"], [for="button-option-d6"]) .option-samples {
  background:
    linear-gradient(120deg, transparent 0 28%, rgba(23, 23, 22, .09) 28% 48%, transparent 48% 67%, rgba(23, 23, 22, .16) 67% 82%, transparent 82%),
    #efefec;
  border: 1px solid var(--experiment-line);
  min-height: 88px;
  padding: 16px;
}
.option-spec { color: var(--experiment-grey); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.45; }
.option-selected { color: var(--experiment-black); display: none; font-weight: 600; }
.option-card:has(input:checked) .option-selected { display: inline; }

.experiment-tray {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  align-items: center;
  background: rgba(250, 250, 252, .88);
  bottom: 0;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  left: 0;
  min-height: 92px;
  padding: 16px 32px max(16px, env(safe-area-inset-bottom));
  position: fixed;
  right: 0;
  z-index: 30;
}
.experiment-tray > div:first-child { display: grid; gap: 5px; }
.experiment-tray span { color: var(--experiment-grey); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.experiment-tray strong { font-size: 15px; font-weight: 500; }
.experiment-tray-actions { display: flex; gap: 10px; }
.tray-reset, .tray-view { min-width: 0; }

@media (max-width: 900px) {
  .button-experiments main { padding-left: 24px; padding-right: 24px; }
  .experiment-intro { min-height: auto; padding-top: 88px; }
  .experiment-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experiment-rules div:nth-child(2) { border-right: 0; }
  .experiment-rules div:nth-child(-n + 2) { border-bottom: 1px solid var(--experiment-line); }
  .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-builder-layout { grid-template-columns: 1fr; }
  .custom-preview { position: static; }
}

@media (max-width: 700px) {
  .experiment-header { padding-left: 16px; padding-right: 16px; }
  .experiment-brand img { height: 34px; }
  .button-experiments main { padding-left: 18px; padding-right: 18px; }
  .experiment-intro { gap: 22px; padding: 72px 0 72px; }
  .experiment-intro h1 { font-size: clamp(48px, 15vw, 72px); }
  .experiment-heading { align-items: start; flex-direction: column; gap: 14px; }
  .preview-toolbar { align-items: start; flex-direction: column; }
  .preview-story { align-items: start; grid-template-columns: 1fr; }
  .custom-builder-heading { grid-template-columns: 1fr; }
  .custom-activate { min-width: 0; width: 100%; }
  .custom-controls { grid-template-columns: 1fr; }
  .custom-preview-stage { min-height: 180px; }
  .option-grid { grid-template-columns: 1fr; }
  .option-card { min-height: 220px; }
  .experiment-tray { align-items: stretch; flex-direction: column; gap: 12px; padding-left: 18px; padding-right: 18px; }
  .experiment-tray-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .tray-reset, .tray-view { width: 100%; }
}

@media (max-width: 360px) {
  .button-experiments main {
    padding-bottom: calc(230px + env(safe-area-inset-bottom));
  }
  .experiment-tray-actions { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .experiment-rules { grid-template-columns: 1fr; }
  .experiment-rules div,
  .experiment-rules div:first-child { border-bottom: 1px solid var(--experiment-line); border-right: 0; padding: 16px 0; }
  .experiment-rules div:last-child { border-bottom: 0; }
  .option-samples { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preview-button, .option-sample, .custom-sample, .tray-reset, .tray-view { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .experiment-header, .experiment-tray { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fafafc; }
  .option-card label:is(
    [for="button-option-m4"],
    [for="button-option-m7"],
    [for="button-option-m8"],
    [for="button-option-m9"],
    [for="button-option-m11"],
    [for="button-option-d5"]
  ) { --casalta-button-surface: #fff; --casalta-button-filter: none; }
  .custom-builder[data-custom-material="glass"] { --casalta-button-surface: #fff !important; --casalta-button-filter: none !important; }
}

@media (forced-colors: active) {
  .option-card:has(input:checked) { outline: 3px solid Highlight; outline-offset: -3px; }
  .preview-button, .option-sample, .custom-sample, .tray-reset, .tray-view { -webkit-backdrop-filter: none; backdrop-filter: none; background: ButtonFace; border-color: ButtonText; color: ButtonText; forced-color-adjust: auto; }
}