:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --admin-bg: #202020;
  --admin-bg-raised: #252525;
  --admin-surface: #2b2b2b;
  --admin-surface-soft: #313131;
  --admin-ink: #f2ead8;
  --admin-muted: #c1b9a8;
  --admin-faint: #9f988a;
  --admin-accent: #dfc584;
  --admin-accent-strong: #f0d999;
  --admin-line: rgba(223, 197, 132, 0.18);
  --admin-line-strong: rgba(223, 197, 132, 0.42);
  --admin-danger: #ef9188;
  --admin-warning: #e3bd6e;
  --admin-success: #76c9a2;
  --admin-info: #8bb9de;
  --admin-focus: #f5d68d;
  --admin-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
  --admin-radius: 0;
  --admin-font-display: "Cormorant Garamond", Georgia, serif;
  --admin-font-body: "Manrope", system-ui, sans-serif;
  --bg: var(--admin-bg);
  --surface: var(--admin-surface);
  --surface-strong: var(--admin-bg-raised);
  --text: var(--admin-ink);
  --text-muted: var(--admin-muted);
  --text-faint: var(--admin-faint);
  --forest: var(--admin-accent);
  --gold: var(--admin-accent);
  --line: var(--admin-line);
  --line-strong: var(--admin-line-strong);
  --dash-bg: var(--admin-bg);
  --dash-card: var(--admin-surface);
  --dash-card-strong: var(--admin-surface);
  --dash-border: var(--admin-line);
  --dash-border-hot: var(--admin-line-strong);
  --dash-text: var(--admin-ink);
  --dash-muted: var(--admin-muted);
  --dash-faint: var(--admin-faint);
  --dash-gold: var(--admin-accent);
  --dash-green: var(--admin-success);
  --dash-red: var(--admin-danger);
  --dash-blue: var(--admin-info);
  --dash-shadow: none;
  --admin-panel-bg: transparent;
}

:root[data-theme="light"] {
  color-scheme: light;
  --admin-bg: #f3eddf;
  --admin-bg-raised: #fbf7ee;
  --admin-surface: #fffaf0;
  --admin-surface-soft: #ece3d1;
  --admin-ink: #1d1b16;
  --admin-muted: #655f53;
  --admin-faint: #8a8273;
  --admin-accent: #94752f;
  --admin-accent-strong: #755817;
  --admin-line: rgba(91, 72, 32, 0.18);
  --admin-line-strong: rgba(91, 72, 32, 0.4);
  --admin-danger: #9b3e38;
  --admin-warning: #8a631b;
  --admin-success: #236747;
  --admin-info: #315f82;
  --admin-focus: #74510f;
  --admin-shadow: 0 22px 55px rgba(66, 51, 19, 0.12);
  --bg: var(--admin-bg);
  --surface: var(--admin-surface);
  --surface-strong: var(--admin-bg-raised);
  --text: var(--admin-ink);
  --text-muted: var(--admin-muted);
  --text-faint: var(--admin-faint);
  --forest: var(--admin-accent);
  --gold: var(--admin-accent);
  --line: var(--admin-line);
  --line-strong: var(--admin-line-strong);
  --dash-bg: var(--admin-bg);
  --dash-card: var(--admin-surface);
  --dash-card-strong: var(--admin-surface);
  --dash-border: var(--admin-line);
  --dash-border-hot: var(--admin-line-strong);
  --dash-text: var(--admin-ink);
  --dash-muted: var(--admin-muted);
  --dash-faint: var(--admin-faint);
  --dash-gold: var(--admin-accent);
  --dash-green: var(--admin-success);
  --dash-red: var(--admin-danger);
  --dash-blue: var(--admin-info);
  --dash-shadow: none;
  --admin-panel-bg: transparent;
}

html { background: var(--admin-bg); }
body {
  background: var(--admin-bg) !important;
  color: var(--admin-ink) !important;
  font-family: var(--admin-font-body) !important;
  text-rendering: optimizeLegibility;
}

.skip-nav {
  position: fixed;
  z-index: 99999;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 14px;
  color: var(--admin-bg);
  background: var(--admin-accent-strong);
  border-radius: 0;
}
.skip-nav:focus { transform: translateY(0); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--admin-focus) !important;
  outline-offset: 3px !important;
}

.app-shell.ready { display: block !important; }
.shell-sidebar {
  width: 208px !important;
  background: var(--admin-bg-raised) !important;
  border-right: 1px solid var(--admin-line) !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
.shell-main {
  margin-left: 208px !important;
  width: calc(100% - 208px) !important;
  min-width: 0;
  background: transparent !important;
}
.app-shell.sidebar-collapsed .shell-sidebar { width: 72px !important; }
.app-shell.sidebar-collapsed .shell-main { margin-left: 72px !important; width: calc(100% - 72px) !important; }

.sidebar-brand {
  min-height: 76px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--admin-line) !important;
  background: transparent !important;
}
.sidebar-brand img { border-radius: 50% !important; box-shadow: none !important; }
.sidebar-brand-title { color: var(--admin-ink) !important; font-family: var(--admin-font-display) !important; font-size: 1.18rem !important; }
.sidebar-brand-copy { color: var(--admin-muted) !important; }
.sidebar-section-label {
  margin: 20px 16px 7px !important;
  color: var(--admin-faint) !important;
  font-size: .63rem !important;
  letter-spacing: .14em !important;
}
.tab-row { gap: 2px !important; padding: 0 8px !important; }
.tab-button {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--admin-muted) !important;
  box-shadow: none !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease !important;
}
.tab-button:hover { color: var(--admin-ink) !important; background: color-mix(in srgb, var(--admin-accent) 8%, transparent) !important; transform: translateX(2px); }
.tab-button.active {
  color: var(--admin-ink) !important;
  background: color-mix(in srgb, var(--admin-accent) 12%, transparent) !important;
  border-left: 2px solid var(--admin-accent) !important;
}
.tab-button-icon { color: var(--admin-accent) !important; }

.topbar {
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 55 !important;
  min-height: 126px !important;
  padding: 12px clamp(18px, 3vw, 46px) 18px !important;
  background: color-mix(in srgb, var(--admin-bg) 88%, transparent) !important;
  border-bottom: 1px solid var(--admin-line) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
}
.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--admin-accent), transparent);
  opacity: .42;
}
.topbar-bar { min-height: 42px; }
.topbar-head { margin-top: 10px; }
.topbar-title h1 {
  margin: 0 !important;
  color: var(--admin-ink) !important;
  font-family: var(--admin-font-display) !important;
  font-size: clamp(1.8rem, 3vw, 2.7rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.025em !important;
}
.topbar .eyebrow { color: var(--admin-accent) !important; }
.topbar-copy { color: var(--admin-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .78rem !important; }
.topbar-search-input {
  min-height: 40px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--admin-line) !important;
  border-radius: 0 !important;
  color: var(--admin-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.user-chip { border: 0 !important; background: transparent !important; color: var(--admin-muted) !important; box-shadow: none !important; }

.page {
  padding: clamp(22px, 3.2vw, 52px) clamp(18px, 3.2vw, 48px) 70px !important;
  gap: 26px !important;
  max-width: 1680px !important;
  margin: 0 auto !important;
  background: transparent !important;
  background-image: none !important;
}
.section { gap: 22px !important; }
.section.active { animation: adminSectionIn 240ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes adminSectionIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Campaigns stay in normal document flow; no legacy floating settings strip. */
#section-campaigns {
  --admin-bg-raised: #1b1d1e;
  --admin-surface: #222426;
  --admin-surface-soft: #292b2d;
}
#section-campaigns > .panel:first-child .toolbar {
  margin: 0 !important;
  padding: 14px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#section-campaigns .status-card {
  background: var(--admin-surface) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

h1, h2, h3, .auth-title { color: var(--admin-ink) !important; }
.section h2,
.panel h2,
.modal-head h2 {
  font-family: var(--admin-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}
.section h2 { font-size: clamp(1.35rem, 2vw, 1.85rem) !important; }
.section-heading-copy, .table-secondary, .staff-kpi-note, .modal-copy, .lede { color: var(--admin-muted) !important; }

.panel,
.staff-board,
.staff-card,
.financial-card,
.performance-card,
.metric,
.insight-panel,
.section-log-list > article,
.section-log-list > .panel {
  color: var(--admin-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.section > .panel:first-child,
.section > .stack > .panel:first-child {
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--admin-line) !important;
}
.section-log-list { gap: 18px !important; }
.metric,
.staff-kpi-card,
.financial-card,
.performance-card {
  min-height: 108px !important;
  padding: 16px 18px !important;
  background: color-mix(in srgb, var(--admin-surface) 58%, transparent) !important;
  border-top: 1px solid var(--admin-line-strong) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.metric-value, .staff-kpi-value, .financial-card-value { color: var(--admin-ink) !important; font-family: var(--admin-font-display) !important; font-weight: 600 !important; }
.metric-label, .staff-kpi-label, .financial-card-label { color: var(--admin-muted) !important; }

.button,
.mini-button,
.icon-button,
.install-button,
.topbar-menu,
.modal-close,
.staff-tab {
  min-height: 40px !important;
  border: 1px solid var(--admin-line-strong) !important;
  border-radius: 0 !important;
  color: var(--admin-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--admin-font-body) !important;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}
.button:hover, .mini-button:hover, .icon-button:hover, .staff-tab:hover { background: color-mix(in srgb, var(--admin-accent) 10%, transparent) !important; border-color: var(--admin-accent) !important; transform: translateY(-1px); }
.button.primary, .mini-button.primary {
  color: #14120d !important;
  background: var(--admin-accent) !important;
  border-color: var(--admin-accent) !important;
}
.button.danger, .mini-button.danger { color: var(--admin-danger) !important; border-color: color-mix(in srgb, var(--admin-danger) 55%, transparent) !important; }
.theme-toggle { min-width: 42px !important; padding-inline: 10px !important; }

.input, .select, textarea, input[type="date"], input[type="number"] {
  min-height: 42px !important;
  color: var(--admin-ink) !important;
  background: color-mix(in srgb, var(--admin-surface) 60%, transparent) !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.input::placeholder, textarea::placeholder { color: var(--admin-faint) !important; }
label { color: var(--admin-muted) !important; }

.table-shell {
  overflow: auto;
  border: 0 !important;
  border-top: 1px solid var(--admin-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.data-table { color: var(--admin-ink) !important; background: transparent !important; }
.data-table th {
  color: var(--admin-muted) !important;
  background: var(--admin-bg-raised) !important;
  border-bottom: 1px solid var(--admin-line-strong) !important;
  letter-spacing: .06em !important;
}
.data-table td { color: var(--admin-ink) !important; background: transparent !important; border-bottom: 1px solid var(--admin-line) !important; }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--admin-accent) 5%, transparent) !important; }

:root[data-theme="light"] :where(
  .payment-panel,
  .attendee-card,
  .financial-chart-shell,
  .financial-donut-shell,
  .financial-projection-shell,
  .financial-freshness-shell,
  .financial-demographics-shell,
  .performance-shell .perf-panel,
  .marketing-dashboard-shell .perf-panel,
  .campaign-stats-shell .perf-panel,
  .calendar-shell,
  .calendar-grid,
  .calendar-day-header,
  .calendar-corner,
  .calendar-time-axis,
  .calendar-day-track,
  .therapist-side-rail,
  .therapist-rail-card
) {
  color: var(--admin-ink) !important;
  background-color: color-mix(in srgb, var(--admin-surface) 68%, transparent) !important;
  background-image: none !important;
  border-color: var(--admin-line) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .page :where(h1, h2, h3, h4, strong, .table-primary, .staff-rail-name, .staff-rail-total) {
  color: var(--admin-ink) !important;
}
:root[data-theme="light"] .page :where(p, .section-heading-copy, .table-secondary, .staff-review-sub, .staff-rail-meta, .staff-payout-kpi span, .staff-insight span) {
  color: var(--admin-muted) !important;
}

.status-banner {
  border: 0 !important;
  border-left: 2px solid var(--admin-info) !important;
  border-radius: 0 !important;
  color: var(--admin-muted) !important;
  background: color-mix(in srgb, var(--admin-info) 7%, transparent) !important;
  box-shadow: none !important;
}
.status-banner:empty { display: none !important; }
.status-banner.ok { border-left-color: var(--admin-success) !important; color: var(--admin-success) !important; }
.status-banner.error { border-left-color: var(--admin-danger) !important; color: var(--admin-danger) !important; }
.badge, .staff-status-chip, .sync-status-pill {
  border-radius: 0 !important;
  background: transparent !important;
  border-color: var(--admin-line-strong) !important;
  color: var(--admin-muted) !important;
}
.badge.ok, .staff-status-chip.ok { color: var(--admin-success) !important; border-color: color-mix(in srgb, var(--admin-success) 45%, transparent) !important; }
.staff-status-chip.warn { color: var(--admin-warning) !important; }
.staff-status-chip.error { color: var(--admin-danger) !important; }

.modal-backdrop { background: rgba(3, 3, 2, .7) !important; backdrop-filter: blur(7px); }
.modal-card, .staff-drawer-card {
  color: var(--admin-ink) !important;
  background: var(--admin-bg-raised) !important;
  border: 1px solid var(--admin-line-strong) !important;
  border-radius: var(--admin-radius) !important;
  box-shadow: var(--admin-shadow) !important;
}
.staff-tabs { border-bottom: 1px solid var(--admin-line) !important; background: transparent !important; }
.staff-tab { border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }
.staff-tab.active { color: var(--admin-accent) !important; border-bottom-color: var(--admin-accent) !important; background: transparent !important; }

.admin-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(18px, 3.2vw, 48px) calc(22px + env(safe-area-inset-bottom, 0px));
  color: var(--admin-faint);
  border-top: 1px solid var(--admin-line);
  font-size: .72rem;
}
.admin-footer strong { color: var(--admin-muted); font-weight: 600; }

/* Staff review workspace */
.staff-workspace-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.staff-workspace-tabs { display: flex; gap: 4px; padding-top: 14px; border-top: 1px solid var(--admin-line); }
.staff-workspace-tab {
  min-height: 38px;
  padding: 8px 13px;
  color: var(--admin-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: 600 .76rem var(--admin-font-body);
  cursor: pointer;
}
.staff-workspace-tab.active { color: var(--admin-accent); border-bottom-color: var(--admin-accent); }
.staff-review-layout { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); min-height: 620px; border-top: 1px solid var(--admin-line); }
.staff-review-rail { padding: 16px 14px 16px 0; border-right: 1px solid var(--admin-line); }
.staff-review-main { padding: 16px 0 16px clamp(18px, 2.4vw, 34px); min-width: 0; }
.staff-rail-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  gap: 10px;
  width: 100%;
  padding: 11px 8px;
  text-align: left;
  color: var(--admin-muted);
  border: 0;
  border-bottom: 1px solid var(--admin-line);
  background: transparent;
  cursor: pointer;
}
.staff-rail-item:hover, .staff-rail-item.active { color: var(--admin-ink); background: color-mix(in srgb, var(--admin-accent) 7%, transparent); }
.staff-rail-item.active { border-left: 2px solid var(--admin-accent); }
.staff-rail-item .staff-avatar { width: 36px !important; height: 36px !important; background: color-mix(in srgb, var(--admin-accent) 12%, transparent) !important; color: var(--admin-accent) !important; }
.staff-rail-name { display: block; color: var(--admin-ink); font-weight: 650; }
.staff-rail-meta { display: block; margin-top: 3px; color: var(--admin-faint); font-size: .69rem; }
.staff-rail-total { color: var(--admin-ink); font: 600 1rem var(--admin-font-display); }
.staff-review-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--admin-line); }
.staff-review-header h3 { margin: 0; font: 600 clamp(1.6rem,3vw,2.25rem) var(--admin-font-display); }
.staff-review-sub { margin-top: 5px; color: var(--admin-muted); font-size: .78rem; }
.staff-payout-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.staff-payout-kpi { min-height: 86px; padding: 14px 0; border-top: 1px solid var(--admin-line-strong); }
.staff-payout-kpi span { display: block; color: var(--admin-muted); font-size: .7rem; }
.staff-payout-kpi strong { display: block; margin-top: 7px; color: var(--admin-ink); font: 600 1.45rem var(--admin-font-display); }
.staff-insight-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.staff-insight { padding: 14px 0; border-bottom: 1px solid var(--admin-line); }
.staff-insight span { color: var(--admin-muted); font-size: .7rem; }
.staff-insight strong { display: block; margin-top: 5px; font-size: 1rem; }
.staff-report-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 28px; margin: 24px 0; }
.staff-report-block { min-width: 0; }
.staff-report-block h4 { margin: 0 0 12px; color: var(--admin-ink); font: 600 1.18rem var(--admin-font-display); }
.staff-trend { display: grid; gap: 9px; }
.staff-trend-row { display: grid; grid-template-columns: 76px minmax(80px,1fr) 78px; gap: 9px; align-items: center; font-size: .68rem; color: var(--admin-muted); }
.staff-trend-row > div { height: 5px; background: color-mix(in srgb, var(--admin-accent) 10%, transparent); overflow: hidden; }
.staff-trend-row i { display: block; height: 100%; background: var(--admin-accent); }
.staff-trend-row strong { color: var(--admin-ink); text-align: right; font-size: .72rem; }
.staff-payroll-table td:nth-last-child(-n+2), .staff-payroll-table th:nth-last-child(-n+2) { text-align: right; }
.staff-review-flag { color: var(--admin-warning); font-size: .68rem; font-weight: 700; }
.staff-period-list, .staff-contract-list { display: grid; gap: 0; border-top: 1px solid var(--admin-line); }
.staff-period-row, .staff-contract-row { padding: 18px 0; border-bottom: 1px solid var(--admin-line); }
.staff-period-head, .staff-contract-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.staff-period-statements { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; margin-top: 14px; }
.staff-period-statement { padding: 12px; background: color-mix(in srgb, var(--admin-surface) 60%, transparent); border-top: 1px solid var(--admin-line-strong); }
.contract-rule-grid { display: grid; grid-template-columns: minmax(160px,1.6fr) repeat(3,minmax(100px,.7fr)) auto; gap: 8px; align-items: end; margin-top: 10px; }
.contract-rule-grid .field { min-width: 0; }

/* Staff uses Financial Dashboard's square tile rhythm without a nested page theme. */
#section-staff .compact-section-header { background: transparent !important; }
#section-staff .staff-payout-kpis { gap: 8px; margin: 22px 0 14px; }
#section-staff .staff-payout-kpi {
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--admin-line);
  border-top-color: var(--admin-line-strong);
  background: var(--admin-surface);
}
#section-staff .staff-insight-row { gap: 8px; margin-bottom: 18px; }
#section-staff .staff-insight {
  min-height: 84px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  background: var(--admin-bg-raised);
}
#section-staff .staff-report-grid {
  gap: 8px;
  margin: 18px 0 24px;
  padding: 0;
  border: 0;
  background: transparent;
}
#section-staff .staff-report-block {
  padding: 18px;
  border: 1px solid var(--admin-line);
  background: var(--admin-surface);
}

.auth-shell, .loading-shell { background: var(--admin-bg) !important; }
.login-card, .loading-card { background: transparent !important; border: 0 !important; box-shadow: none !important; }

@media (max-width: 980px) {
  html, body { max-width: 100%; overflow-x: hidden !important; }
  .app-shell:not(.drawer-open) .shell-sidebar { transform: translateX(-105%) !important; }
  .app-shell.drawer-open .shell-sidebar { transform: translateX(0) !important; }
  .shell-main { margin-left: 0 !important; width: 100vw !important; max-width: 100vw !important; }
  .topbar { min-height: 108px !important; padding-inline: 16px !important; }
  .page { padding-inline: 14px !important; padding-bottom: 96px !important; }
  .staff-review-layout { grid-template-columns: 1fr; }
  .staff-review-rail { border-right: 0; border-bottom: 1px solid var(--admin-line); padding-right: 0; max-height: 260px; overflow: auto; }
  .staff-review-main { padding-left: 0; }
  .staff-workspace-tabs { overflow-x: auto; }
  .staff-payout-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .staff-report-grid { grid-template-columns: 1fr; }
  .admin-footer { padding-bottom: 94px; }
}

@media (max-width: 640px) {
  .topbar-search, .topbar-copy, #sidebar-collapse-button, #command-palette-open-button, .build-chip { display: none !important; }
  .topbar { min-height: 88px !important; }
  .topbar-title h1 { font-size: 1.7rem !important; }
  .staff-payout-kpis, .staff-insight-row { grid-template-columns: 1fr 1fr; }
  .staff-review-header, .staff-period-head, .staff-contract-head { flex-direction: column; }
  .contract-rule-grid { grid-template-columns: 1fr 1fr; }
  .admin-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}