/* Accessibility and bug report controls for the static pages (about, help,
   blog, guides, Cruise Control). Ported from the app's
   src/app/components/AccessibilityQuickAccess.tsx and AlphaBugButton.tsx: the
   sizes, colors, radii, shadows and type scale below are the computed values
   of those components and of the dialog, accordion, switch, checkbox, input,
   textarea and button primitives they use. The accessibility attributes and
   their CSS are copied from src/styles/theme.css so a reader's choice looks
   the same here as in the app. Dialog titles use the app's heading face. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap');

:root {
  --destructive: #d11f3a;
  --accent: #22222b;
  --ring: #6f00ff;
  --switch-background: #22222b;
  --input: rgba(255, 255, 255, 0.05);
  --input-background: #15151b;
  --primary-foreground: #ffffff;
  --cruush-gradient: linear-gradient(90deg, #FF0072 6.08%, #6F00FF 43.11%, #3826FF 58.46%, #004BFF 73.81%, #1181FF 100%);
}

/* Header placement. The controls sit at the end of the header row and keep
   the row at the wordmark's height, so the header does not grow. Below the
   width where the whole row fits, the nav takes its own full-width row (the
   layout blog pages already use on phones) and the controls stay on the
   wordmark row. */
header.site .site-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  margin-block: calc((2.4rem - 2.75rem) / 2);
}

@media (max-width: 52rem) {
  header.site .site-controls { order: 1; margin-left: auto; }
  header.site nav.site {
    order: 2;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 0.75rem;
  }
}

.site-accessibility-button,
.site-bug-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-accessibility-button {
  gap: 0.5rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: color-mix(in oklab, var(--background) 82%, transparent);
  color: var(--foreground);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-accessibility-button:hover { background-color: var(--accent); }
.site-accessibility-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring), 0 14px 38px rgba(0, 0, 0, 0.4); }
.site-accessibility-button svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.site-accessibility-button span { display: none; font-size: 1.09375rem; line-height: 1.5625rem; }
@media (min-width: 40rem) {
  .site-accessibility-button span { display: inline; }
}

.site-bug-button {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--destructive) 45%, transparent);
  background-color: var(--destructive);
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-bug-button:hover { background-color: color-mix(in oklab, var(--destructive) 90%, transparent); }
.site-bug-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--destructive), 0 18px 44px rgba(0, 0, 0, 0.42); }
.site-bug-button svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
@media (min-width: 64rem) {
  .site-bug-button svg { width: 1.75rem; height: 1.75rem; }
}

/* While a dialog is open the bug button docks in that dialog's header, as in
   the app, so the header's own copy steps aside. */
html.site-controls-open body { overflow: hidden; }
html.site-controls-open header.site .site-bug-button { visibility: hidden; }

/* Dialogs */
.sc-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.5);
  animation: sc-fade-in 0.15s;
}
.sc-overlay.sc-bug-overlay { z-index: 1602; }

.sc-dialog {
  box-sizing: border-box;
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 1rem;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 1.5rem;
  color: var(--foreground);
  font-family: 'Spectral', serif;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 400;
  text-align: left;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  animation: sc-dialog-in 0.2s;
}
.sc-dialog *, .sc-dialog *::before, .sc-dialog *::after { box-sizing: border-box; }
.sc-dialog:focus { outline: none; }

/* Accessibility: a full-height sheet on phones, a centred dialog from 640px. */
.sc-sheet {
  inset: 0;
  height: 100dvh;
  max-height: none;
  width: calc(100% - 2rem);
  max-width: 24rem;
  border: 0;
  border-radius: 0;
  padding-top: calc(1.5rem + env(safe-area-inset-top));
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--background);
}
@media (min-width: 40rem) {
  .sc-sheet {
    inset: auto;
    top: 50%;
    left: 50%;
    height: auto;
    max-height: calc(100dvh - 2rem);
    width: 100%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Bug report: a floating glass dialog at every width. */
.sc-floating {
  z-index: 1603;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 28rem;
  max-height: calc(100dvh - 2rem);
  transform: translate(-50%, -50%);
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.48);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
}
@media (min-width: 40rem) {
  .sc-floating { max-width: 32rem; padding: 1.5rem; }
}

@keyframes sc-fade-in { from { opacity: 0; } }
@keyframes sc-dialog-in { from { opacity: 0; scale: 0.95; } }

.sc-header { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
@media (min-width: 40rem) { .sc-header { text-align: left; } }

.sc-title {
  margin: 0;
  min-height: 28px;
  padding: 0 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.40625rem;
  font-weight: 600;
  line-height: 1;
}

.sc-header .site-bug-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
}

.sc-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--foreground);
  opacity: 0.7;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-close:hover { opacity: 1; }
.sc-close:focus { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.sc-close svg { width: 1rem; height: 1rem; pointer-events: none; }

.sc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sc-dialog button { font-family: inherit; }
.sc-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--muted-foreground); }

/* Accessibility list */
.sc-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.sc-accordion { border-bottom: 1px solid var(--border); }
.sc-accordion h3 { display: flex; margin: 0; font: inherit; }
.sc-accordion-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.875rem;
  text-align: left;
  outline: none;
}
.sc-accordion-trigger:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.sc-accordion-label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 0.75rem; text-align: left; }
.sc-accordion-name { flex: 1; min-width: 0; }
.sc-accordion-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.09375rem;
  line-height: 1.5625rem;
  color: var(--muted-foreground);
}
.sc-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
  pointer-events: none;
  transform: translateY(0.125rem);
  transition: transform 0.2s;
}
.sc-accordion-trigger[aria-expanded="true"] .sc-chevron { transform: translateY(0.125rem) rotate(180deg); }
.sc-accordion-panel { overflow: hidden; padding: 0 1rem 1rem; }
.sc-accordion-panel[hidden] { display: none; }
.sc-radio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.sc-radio {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--background);
  color: var(--foreground);
  font-size: 1.09375rem;
  font-weight: 500;
  line-height: 1.5625rem;
}
.sc-radio[aria-checked="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }

.sc-row { display: flex; min-height: 3.5rem; align-items: center; gap: 0.75rem; padding: 1rem; }
.sc-row + .sc-row { border-top: 1px solid var(--border); }
.sc-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.09375rem;
  font-weight: 500;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.sc-row .sc-label { flex: 1; }

.sc-switch {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: 2rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--switch-background);
  outline: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-switch[aria-checked="true"] { background: var(--primary); }
.sc-switch:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.sc-switch-thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--card);
  pointer-events: none;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-switch[aria-checked="true"] .sc-switch-thumb { transform: translateX(calc(100% - 2px)); }

/* Bug report form */
.sc-dialog [hidden] { display: none !important; }
.sc-form { margin: 0; }
.sc-form > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.sc-dialog .sc-field > * + * { margin-top: 0.5rem; }
.sc-input,
.sc-textarea {
  display: flex;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--input);
  border-radius: 14px;
  background: var(--input-background);
  color: var(--foreground);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  outline: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-input { height: 2.25rem; padding: 0.25rem 0.75rem; }
.sc-textarea { min-height: 132px; padding: 0.5rem 0.75rem; resize: none; field-sizing: content; }
.sc-input::placeholder, .sc-textarea::placeholder { color: var(--muted-foreground); }
.sc-input:focus-visible, .sc-textarea:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.sc-input:disabled, .sc-textarea:disabled { cursor: not-allowed; opacity: 0.5; }
@media (min-width: 48rem) {
  .sc-input, .sc-textarea { font-size: 1.09375rem; }
}

.sc-note { margin: 0; font-size: 0.9375rem; line-height: 1.25rem; color: var(--muted-foreground); }
.sc-count { text-align: right; }

.sc-check-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.09375rem;
  font-weight: 500;
  line-height: 1.5625rem;
  color: var(--foreground);
  cursor: pointer;
}
.sc-check-label.sc-start { align-items: flex-start; }
.sc-checkbox {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-background);
  color: var(--primary-foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-checkbox svg { display: none; width: 0.875rem; height: 0.875rem; }
.sc-checkbox[aria-checked="true"] { border-color: var(--primary); background: var(--primary); }
.sc-checkbox[aria-checked="true"] svg { display: block; }
.sc-checkbox:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.sc-checkbox:disabled { cursor: not-allowed; opacity: 0.5; }

.sc-button {
  display: inline-flex;
  width: 100%;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 14px;
  font-size: 1.09375rem;
  font-weight: 500;
  line-height: 1.5625rem;
  white-space: nowrap;
  outline: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-button:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.sc-button:disabled { pointer-events: none; opacity: 0.5; }
.sc-submit { background: var(--cruush-gradient); color: var(--primary-foreground); }
.sc-outline {
  margin-top: 1rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
}
.sc-outline:hover { background: var(--accent); }

.sc-error {
  padding: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
  font-size: 1.09375rem;
  line-height: 1.5625rem;
}
.sc-error p { margin: 0; }
.sc-error .sc-error-code {
  margin-top: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

.sc-success {
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  font-size: 1.09375rem;
  line-height: 1.5625rem;
}
.sc-success-line { display: flex; align-items: center; gap: 0.5rem; }
.sc-success-line svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }

/* Applied accessibility settings, copied from src/styles/theme.css. The app's
   larger text step raises the root size from 16px to 20px; these pages size
   everything in rem, so the same step applies here. */
html[data-cruush-larger-text] {
  font-size: 20px;
}

html[data-cruush-high-contrast] {
  --background: #000000;
  --foreground: #ffffff;
  --card: #09090c;
  --card-foreground: #ffffff;
  --popover: #09090c;
  --popover-foreground: #ffffff;
  --secondary: #111117;
  --secondary-foreground: #ffffff;
  --muted: #111117;
  --muted-foreground: #dedee5;
  --accent: #1c1c24;
  --accent-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.34);
  --input: rgba(255, 255, 255, 0.2);
  --input-background: #09090c;
  --switch-background: #555568;
  --ring: #ff4aa1;
}

html[data-cruush-color-blind] {
  --cruush-cv-primary: #E69F00;
  --cruush-cv-secondary: #CC79A7;
  --cruush-cv-current: #0072B2;
  --cruush-cv-current-dark: #004D73;
  --cruush-cv-current-light: #56B4E9;
  --cruush-cv-positive: #009E73;
  --cruush-cv-destructive: #D55E00;
  --cruush-cv-nearby-light: #F7C95C;
  --cruush-cv-nearby-dark: #A66D00;
  --cruush-cv-mutual-light: #E5A5C6;
  --cruush-cv-mutual-dark: #8E416C;
  --cruush-cv-logo-filter: hue-rotate(38deg) saturate(0.88) brightness(1.08);
  --cruush-pink: var(--cruush-cv-primary);
  --cruush-magenta: var(--cruush-cv-secondary);
  --cruush-purple: var(--cruush-cv-current);
  --cruush-indigo: var(--cruush-cv-current-dark);
  --cruush-blue: var(--cruush-cv-current-light);
  --primary: var(--cruush-cv-primary);
  --destructive: var(--cruush-cv-destructive);
  --ring: var(--cruush-cv-current);
  --chart-1: var(--cruush-cv-primary);
  --chart-2: var(--cruush-cv-current-light);
  --chart-3: var(--cruush-cv-positive);
  --chart-4: var(--cruush-cv-destructive);
  --chart-5: var(--cruush-cv-secondary);
  --sidebar-primary: var(--cruush-cv-primary);
  --sidebar-ring: var(--cruush-cv-current);
  --cruush-logo: linear-gradient(90deg, var(--cruush-cv-primary) 6.08%, var(--cruush-cv-secondary) 43.11%, var(--cruush-cv-current) 73.81%, var(--cruush-cv-current-light) 100%);
  --cruush-gradient: linear-gradient(90deg, var(--cruush-cv-primary) 6.08%, var(--cruush-cv-secondary) 43.11%, var(--cruush-cv-current) 73.81%, var(--cruush-cv-current-light) 100%);
  --cruush-logo-gradient: var(--cruush-logo);
  --cruush-gradient-soft-18: linear-gradient(rgba(5, 5, 6, 0.82), rgba(5, 5, 6, 0.82)), var(--cruush-gradient);
  --cruush-gradient-soft-28: linear-gradient(rgba(5, 5, 6, 0.72), rgba(5, 5, 6, 0.72)), var(--cruush-gradient);
  --cruush-heart-photo-gradient: linear-gradient(90deg, var(--cruush-cv-nearby-light) 0%, var(--cruush-cv-primary) 48.5577%, var(--cruush-cv-nearby-dark) 100%);
  --cruush-heart-pin-red-gradient: var(--cruush-heart-photo-gradient);
  --cruush-heart-pin-blue-gradient: linear-gradient(90deg, var(--cruush-cv-current-light) 0%, var(--cruush-cv-current) 48.5577%, var(--cruush-cv-current-dark) 100%);
  --cruush-dark-room-dark: var(--cruush-cv-current-dark);
  --cruush-dark-room-middle: var(--cruush-cv-current);
  --cruush-dark-room-light: var(--cruush-cv-current-light);
  --crimson-bright: var(--cruush-cv-destructive);
  --crimson-mid: color-mix(in srgb, var(--cruush-cv-destructive) 72%, black);
  --crimson-dark: color-mix(in srgb, var(--cruush-cv-destructive) 48%, black);
}

html[data-cruush-color-vision='deuteranomaly'] {
  --cruush-cv-primary: #F0B43C;
  --cruush-cv-secondary: #D98FB8;
  --cruush-cv-logo-filter: hue-rotate(28deg) saturate(0.92) brightness(1.06);
}

html[data-cruush-color-vision='protanomaly'] {
  --cruush-cv-primary: #F0E442;
  --cruush-cv-secondary: #9AD9F5;
  --cruush-cv-mutual-light: #D7F1FC;
  --cruush-cv-mutual-dark: #3B83A5;
  --cruush-cv-logo-filter: hue-rotate(92deg) saturate(0.92) brightness(1.08);
}

html[data-cruush-color-vision='protanopia'] {
  --cruush-cv-primary: #F0E442;
  --cruush-cv-secondary: #FFFFFF;
  --cruush-cv-current: #0072B2;
  --cruush-cv-current-dark: #003B5C;
  --cruush-cv-current-light: #8DD3FF;
  --cruush-cv-positive: #56B4E9;
  --cruush-cv-mutual-light: #FFFFFF;
  --cruush-cv-mutual-dark: #949494;
  --cruush-cv-logo-filter: hue-rotate(108deg) saturate(0.8) brightness(1.12);
}

html[data-cruush-color-vision='tritanomaly'] {
  --cruush-cv-primary: #FF4F8B;
  --cruush-cv-secondary: #F39B36;
  --cruush-cv-current: #3F6FFF;
  --cruush-cv-current-dark: #183A9E;
  --cruush-cv-current-light: #8EA8FF;
  --cruush-cv-positive: #FFCF56;
  --cruush-cv-logo-filter: hue-rotate(-18deg) saturate(1.04) brightness(1.06);
}

html[data-cruush-color-vision='tritanopia'] {
  --cruush-cv-primary: #D55E00;
  --cruush-cv-secondary: #FFFFFF;
  --cruush-cv-current: #005AB5;
  --cruush-cv-current-dark: #002F63;
  --cruush-cv-current-light: #7AB8FF;
  --cruush-cv-positive: #F0E442;
  --cruush-cv-nearby-light: #FFD29B;
  --cruush-cv-nearby-dark: #874000;
  --cruush-cv-mutual-light: #FFFFFF;
  --cruush-cv-mutual-dark: #8A8A8A;
  --cruush-cv-logo-filter: hue-rotate(-42deg) saturate(0.92) brightness(1.08);
}

html[data-cruush-color-vision='monochromacy'] {
  --cruush-cv-primary: #FFFFFF;
  --cruush-cv-secondary: #C7C7C7;
  --cruush-cv-current: #FFFFFF;
  --cruush-cv-current-dark: #777777;
  --cruush-cv-current-light: #E1E1E1;
  --cruush-cv-positive: #D8D8D8;
  --cruush-cv-destructive: #FFFFFF;
  --cruush-cv-nearby-light: #B8B8B8;
  --cruush-cv-nearby-dark: #555555;
  --cruush-cv-mutual-light: #E8E8E8;
  --cruush-cv-mutual-dark: #858585;
  --cruush-cv-logo-filter: grayscale(1) contrast(1.2) brightness(1.08);
  --primary-foreground: #000000;
}

html[data-cruush-reduce-motion] *,
html[data-cruush-reduce-motion] *::before,
html[data-cruush-reduce-motion] *::after {
  animation-delay: 0s !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-delay: 0s !important;
  transition-duration: 0.01ms !important;
}