/*
 * Whitelists UI — shared design system for whitelists.top and its project sites.
 * Served from /account-assets/ by the portal so every participating site uses the same
 * tokens. Local system fonts only; no remote fonts, icons or images.
 *
 * Layers
 *   1. Tokens (color, type, space, radius, elevation, motion, glass) for light and dark.
 *   2. Per-site tint via html[data-site].
 *   3. Low-specificity base (:where) so site stylesheets can refine anything.
 *   4. Components (.wl-*) used by the portal, account pages and new shared states.
 *   5. Accessibility and graceful degradation: reduced motion, reduced transparency,
 *      increased contrast, no backdrop-filter, forced colors and print.
 */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --wl-font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
    "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans", Arial, sans-serif;
  --wl-font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI",
    Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
    "Noto Sans CJK SC", Arial, sans-serif;
  --wl-font-rounded:
    ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
    "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --wl-font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale (iOS-like hierarchy, web sized) */
  --wl-fs-caption: 0.75rem;
  --wl-fs-footnote: 0.8125rem;
  --wl-fs-subhead: 0.9375rem;
  --wl-fs-body: 1rem;
  --wl-fs-body-lg: 1.0625rem;
  --wl-fs-title-3: 1.25rem;
  --wl-fs-title-2: 1.375rem;
  --wl-fs-title-1: 1.75rem;
  --wl-fs-large: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
  --wl-fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
  --wl-lh-tight: 1.08;
  --wl-lh-title: 1.2;
  --wl-lh-body: 1.55;
  --wl-tracking-display: -0.035em;
  --wl-tracking-title: -0.022em;
  --wl-tracking-body: -0.006em;
  --wl-weight-regular: 400;
  --wl-weight-medium: 510;
  --wl-weight-semibold: 600;
  --wl-weight-bold: 700;

  /* Space, size, radius */
  --wl-space-1: 4px;
  --wl-space-2: 8px;
  --wl-space-3: 12px;
  --wl-space-4: 16px;
  --wl-space-5: 20px;
  --wl-space-6: 24px;
  --wl-space-7: 32px;
  --wl-space-8: 40px;
  --wl-space-9: 48px;
  --wl-space-10: 64px;
  --wl-space-11: 80px;
  --wl-space-12: 112px;
  --wl-max: 1180px;
  --wl-gutter: clamp(16px, 4vw, 32px);
  --wl-touch: 44px;
  --wl-radius-xs: 8px;
  --wl-radius-sm: 10px;
  --wl-radius-md: 14px;
  --wl-radius-lg: 20px;
  --wl-radius-xl: 28px;
  --wl-radius-2xl: 36px;
  --wl-radius-pill: 999px;

  /* Motion */
  --wl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wl-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --wl-dur-1: 120ms;
  --wl-dur-2: 200ms;
  --wl-dur-3: 320ms;
  --wl-dur-4: 520ms;

  /* Light palette */
  --wl-brand-ink: #1e2c3f;
  --wl-bg: #f3f5f8;
  --wl-bg-elevated: #ffffff;
  --wl-surface: #ffffff;
  --wl-surface-2: #f7f8fb;
  --wl-surface-3: #eef1f5;
  --wl-fill: rgba(116, 124, 142, 0.14);
  --wl-fill-2: rgba(116, 124, 142, 0.09);
  --wl-fill-3: rgba(116, 124, 142, 0.05);
  --wl-separator: rgba(30, 44, 63, 0.12);
  --wl-separator-strong: rgba(30, 44, 63, 0.22);
  --wl-text: #0c1424;
  --wl-text-2: #465166;
  --wl-text-3: #5f6a80;
  --wl-text-inverse: #ffffff;
  --wl-link: #1257d6;
  --wl-tint: #1f63e0;
  --wl-tint-strong: #164fb8;
  --wl-tint-contrast: #ffffff;
  --wl-tint-soft: rgba(31, 99, 224, 0.11);
  --wl-tint-ring: rgba(31, 99, 224, 0.34);
  --wl-success: #117a43;
  --wl-success-soft: rgba(17, 122, 67, 0.12);
  --wl-warning: #995000;
  --wl-warning-soft: rgba(204, 116, 0, 0.14);
  --wl-danger: #c4262e;
  --wl-danger-strong: #a81e25;
  --wl-danger-soft: rgba(196, 38, 46, 0.11);
  --wl-info: var(--wl-tint);
  --wl-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
  --wl-shadow-2: 0 6px 20px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.06);
  --wl-shadow-3: 0 22px 60px rgba(16, 24, 40, 0.14), 0 6px 16px rgba(16, 24, 40, 0.08);
  --wl-shadow-tint: 0 8px 24px color-mix(in srgb, var(--wl-tint) 28%, transparent);

  /* Liquid glass */
  --wl-glass-bg: rgba(255, 255, 255, 0.66);
  --wl-glass-bg-strong: rgba(255, 255, 255, 0.82);
  --wl-glass-solid: #fbfcfe;
  --wl-glass-edge: rgba(255, 255, 255, 0.78);
  --wl-glass-hairline: rgba(30, 44, 63, 0.1);
  --wl-glass-highlight: rgba(255, 255, 255, 0.9);
  --wl-glass-shade: rgba(30, 44, 63, 0.06);
  --wl-glass-blur: 22px;
  --wl-glass-saturate: 175%;

  /* Ambient page light (static gradients; no blur filters) */
  --wl-aurora-1: rgba(31, 99, 224, 0.12);
  --wl-aurora-2: rgba(23, 168, 140, 0.1);
  --wl-aurora-3: rgba(240, 150, 90, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --wl-bg: #05080e;
  --wl-bg-elevated: #0e1420;
  --wl-surface: #101722;
  --wl-surface-2: #151e2c;
  --wl-surface-3: #1b2637;
  --wl-fill: rgba(140, 152, 178, 0.22);
  --wl-fill-2: rgba(140, 152, 178, 0.15);
  --wl-fill-3: rgba(140, 152, 178, 0.08);
  --wl-separator: rgba(190, 204, 230, 0.13);
  --wl-separator-strong: rgba(190, 204, 230, 0.24);
  --wl-text: #f2f5fa;
  --wl-text-2: #b6c0cf;
  --wl-text-3: #95a0b2;
  --wl-text-inverse: #05080e;
  --wl-link: #7cb4ff;
  --wl-tint: #5aa2ff;
  --wl-tint-strong: #84baff;
  --wl-tint-contrast: #03101f;
  --wl-tint-soft: rgba(90, 162, 255, 0.16);
  --wl-tint-ring: rgba(90, 162, 255, 0.45);
  --wl-success: #3ed183;
  --wl-success-soft: rgba(62, 209, 131, 0.16);
  --wl-warning: #ffb547;
  --wl-warning-soft: rgba(255, 181, 71, 0.16);
  --wl-danger: #ff6b6b;
  --wl-danger-strong: #ff8a8a;
  --wl-danger-soft: rgba(255, 107, 107, 0.16);
  --wl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --wl-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --wl-shadow-3: 0 26px 70px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
  --wl-glass-bg: rgba(20, 27, 39, 0.58);
  --wl-glass-bg-strong: rgba(20, 27, 39, 0.78);
  --wl-glass-solid: #141b27;
  --wl-glass-edge: rgba(255, 255, 255, 0.12);
  --wl-glass-hairline: rgba(255, 255, 255, 0.08);
  --wl-glass-highlight: rgba(255, 255, 255, 0.14);
  --wl-glass-shade: rgba(0, 0, 0, 0.3);
  --wl-aurora-1: rgba(64, 128, 255, 0.16);
  --wl-aurora-2: rgba(32, 190, 160, 0.09);
  --wl-aurora-3: rgba(140, 90, 255, 0.1);
}

/* 2. Site tints ---------------------------------------------------------------- */
:root[data-site="german"] {
  --wl-tint: #13784f;
  --wl-tint-strong: #0d5e3d;
  --wl-tint-soft: rgba(19, 120, 79, 0.12);
  --wl-tint-ring: rgba(19, 120, 79, 0.34);
  --wl-link: #0f6b46;
  --wl-aurora-1: rgba(19, 140, 90, 0.12);
  --wl-aurora-3: rgba(240, 150, 80, 0.09);
}
:root[data-site="german"][data-theme="dark"] {
  --wl-tint: #4fd39a;
  --wl-tint-strong: #7be2b5;
  --wl-tint-contrast: #021a10;
  --wl-tint-soft: rgba(79, 211, 154, 0.15);
  --wl-tint-ring: rgba(79, 211, 154, 0.42);
  --wl-link: #7be2b5;
  --wl-aurora-1: rgba(40, 190, 120, 0.13);
}
:root[data-site="velophi"] {
  --wl-tint: #4b44d4;
  --wl-tint-strong: #3a33b3;
  --wl-tint-soft: rgba(75, 68, 212, 0.12);
  --wl-tint-ring: rgba(75, 68, 212, 0.34);
  --wl-link: #4840cc;
  --wl-aurora-1: rgba(105, 95, 255, 0.15);
  --wl-aurora-2: rgba(245, 179, 36, 0.09);
  --wl-aurora-3: rgba(140, 90, 255, 0.1);
}
:root[data-site="velophi"][data-theme="dark"] {
  --wl-tint: #a39dff;
  --wl-tint-strong: #bdb8ff;
  --wl-tint-contrast: #0b0830;
  --wl-tint-soft: rgba(163, 157, 255, 0.17);
  --wl-tint-ring: rgba(163, 157, 255, 0.45);
  --wl-link: #b6b1ff;
  --wl-aurora-1: rgba(120, 100, 255, 0.2);
  --wl-aurora-2: rgba(251, 191, 36, 0.08);
}
:root[data-site="security"] {
  --wl-tint: #c0283f;
  --wl-tint-strong: #9e1f33;
  --wl-tint-soft: rgba(192, 40, 63, 0.1);
  --wl-tint-ring: rgba(192, 40, 63, 0.32);
  --wl-link: #b0233a;
  --wl-aurora-1: rgba(200, 40, 70, 0.1);
  --wl-aurora-2: rgba(40, 110, 220, 0.08);
  --wl-aurora-3: rgba(255, 160, 60, 0.07);
}
:root[data-site="security"][data-theme="dark"] {
  --wl-tint: #ff7a8c;
  --wl-tint-strong: #ff9eab;
  --wl-tint-contrast: #24020a;
  --wl-tint-soft: rgba(255, 122, 140, 0.15);
  --wl-tint-ring: rgba(255, 122, 140, 0.42);
  --wl-link: #ff9eab;
  --wl-aurora-1: rgba(255, 70, 100, 0.13);
}
:root[data-site="weather"] {
  --wl-tint: #0a7f86;
  --wl-tint-strong: #07646a;
  --wl-tint-soft: rgba(10, 127, 134, 0.12);
  --wl-tint-ring: rgba(10, 127, 134, 0.34);
}
:root[data-site="weather"][data-theme="dark"] {
  --wl-tint: #43d1d6;
  --wl-tint-strong: #78e1e4;
  --wl-tint-contrast: #011b1d;
  --wl-tint-soft: rgba(67, 209, 214, 0.15);
  --wl-tint-ring: rgba(67, 209, 214, 0.42);
}

/* 3. Base --------------------------------------------------------------------- */
:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:where(body) {
  margin: 0;
  min-width: 320px;
  background: var(--wl-bg);
  color: var(--wl-text);
  font-family: var(--wl-font);
  font-size: var(--wl-fs-body);
  line-height: var(--wl-lh-body);
  letter-spacing: var(--wl-tracking-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:where(*, *::before, *::after) {
  box-sizing: border-box;
}
:where(img, svg, video, canvas) {
  max-width: 100%;
}
:where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
}
:where(a, button, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}
:where(h1, h2, h3, h4) {
  text-wrap: balance;
}
:where(p, li) {
  text-wrap: pretty;
}
::selection {
  background: color-mix(in srgb, var(--wl-tint) 26%, transparent);
}
:where(:focus-visible) {
  outline: 3px solid var(--wl-tint-ring);
  outline-offset: 2px;
}

/* Ambient background used by html.wl-ambient pages (static gradients, GPU friendly). */
.wl-ambient body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 36rem at 8% -10%, var(--wl-aurora-1), transparent 70%),
    radial-gradient(48rem 30rem at 100% 8%, var(--wl-aurora-2), transparent 70%),
    radial-gradient(52rem 34rem at 60% 110%, var(--wl-aurora-3), transparent 70%), var(--wl-bg);
}

/* 4. Components ------------------------------------------------------------- */
.wl-sr-only,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.wl-skip-link {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  top: 12px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-text);
  color: var(--wl-text-inverse);
  font-weight: var(--wl-weight-semibold);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--wl-dur-2) var(--wl-ease);
}
.wl-skip-link:focus {
  transform: translateY(0);
}
.wl-container {
  width: min(var(--wl-max), 100% - 2 * var(--wl-gutter));
  margin-inline: auto;
}

/* Glass material: navigation, toolbars, floating panels and dialogs. */
.wl-glass {
  position: relative;
  background: var(--wl-glass-bg);
  border: 1px solid var(--wl-glass-hairline);
  box-shadow:
    inset 0 1px 0 var(--wl-glass-highlight),
    inset 0 -1px 0 var(--wl-glass-shade),
    var(--wl-shadow-2);
  -webkit-backdrop-filter: blur(var(--wl-glass-blur)) saturate(var(--wl-glass-saturate));
  backdrop-filter: blur(var(--wl-glass-blur)) saturate(var(--wl-glass-saturate));
}
.wl-glass--strong {
  background: var(--wl-glass-bg-strong);
}

/* Navigation bar */
.wl-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
}
.wl-navbar__bar {
  display: flex;
  align-items: center;
  gap: var(--wl-space-3);
  width: min(var(--wl-max) + 24px, 100% - 2 * max(8px, var(--wl-gutter) - 12px));
  min-height: 60px;
  margin: 10px auto 0;
  padding: 8px 10px 8px 14px;
  border-radius: var(--wl-radius-pill);
}
.wl-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--wl-touch);
  padding-right: 6px;
  color: var(--wl-text);
  font-weight: var(--wl-weight-semibold);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.wl-navbar__brand .whitelists-mark {
  --brand-mark-size: 32px;
  --brand-mark-radius: 9px;
  box-shadow: 0 0 0 1px var(--wl-separator);
}
.wl-navbar__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
}
.wl-navbar__links > a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--wl-radius-pill);
  color: var(--wl-text-2);
  font-size: var(--wl-fs-subhead);
  font-weight: var(--wl-weight-medium);
  text-decoration: none;
  transition:
    background var(--wl-dur-2) var(--wl-ease),
    color var(--wl-dur-2) var(--wl-ease);
}
.wl-navbar__links > a:hover {
  background: var(--wl-fill-2);
  color: var(--wl-text);
}
.wl-navbar__links > a[aria-current]:not([aria-current="false"]),
.wl-navbar__links > a.active {
  background: var(--wl-tint-soft);
  color: var(--wl-tint);
}
.wl-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--wl-space-2);
}

/* Buttons */
.wl-btn {
  --wl-btn-bg: var(--wl-fill);
  --wl-btn-fg: var(--wl-text);
  --wl-btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--wl-touch);
  padding: 0 20px;
  border: 1px solid var(--wl-btn-border);
  border-radius: var(--wl-radius-md);
  background: var(--wl-btn-bg);
  color: var(--wl-btn-fg);
  font-size: var(--wl-fs-body);
  font-weight: var(--wl-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--wl-dur-1) var(--wl-ease),
    background var(--wl-dur-2) var(--wl-ease),
    box-shadow var(--wl-dur-2) var(--wl-ease),
    opacity var(--wl-dur-2) var(--wl-ease);
}
.wl-btn:hover {
  background: color-mix(in srgb, var(--wl-btn-bg) 86%, var(--wl-text));
}
.wl-btn:active {
  transform: scale(0.97);
}
.wl-btn:disabled,
.wl-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.wl-btn--primary {
  --wl-btn-bg: var(--wl-tint);
  --wl-btn-fg: var(--wl-tint-contrast);
  box-shadow: var(--wl-shadow-tint);
}
.wl-btn--primary:hover {
  background: var(--wl-tint-strong);
}
.wl-btn--tinted {
  --wl-btn-bg: var(--wl-tint-soft);
  --wl-btn-fg: var(--wl-tint);
}
.wl-btn--tinted:hover {
  background: color-mix(in srgb, var(--wl-tint) 18%, transparent);
}
.wl-btn--glass {
  --wl-btn-bg: var(--wl-glass-bg-strong);
  --wl-btn-border: var(--wl-glass-hairline);
  box-shadow: inset 0 1px 0 var(--wl-glass-highlight);
}
.wl-btn--plain {
  --wl-btn-bg: transparent;
  --wl-btn-fg: var(--wl-tint);
  padding-inline: 10px;
}
.wl-btn--plain:hover {
  background: var(--wl-tint-soft);
}
.wl-btn--danger {
  --wl-btn-bg: var(--wl-danger);
  --wl-btn-fg: #fff;
}
.wl-btn--danger:hover {
  background: var(--wl-danger-strong);
}
:root[data-theme="dark"] .wl-btn--danger {
  --wl-btn-fg: #1d0204;
}
.wl-btn--danger-soft {
  --wl-btn-bg: var(--wl-danger-soft);
  --wl-btn-fg: var(--wl-danger);
}
.wl-btn--sm {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--wl-radius-sm);
  font-size: var(--wl-fs-subhead);
}
.wl-btn--lg {
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--wl-radius-lg);
  font-size: var(--wl-fs-body-lg);
}
.wl-btn--pill {
  border-radius: var(--wl-radius-pill);
}
.wl-btn--block {
  width: 100%;
}
.wl-icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--wl-touch);
  height: var(--wl-touch);
  padding: 0;
  border: 1px solid var(--wl-glass-hairline);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-glass-bg-strong);
  color: var(--wl-text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--wl-glass-highlight);
  transition:
    transform var(--wl-dur-1) var(--wl-ease),
    background var(--wl-dur-2) var(--wl-ease);
}
.wl-icon-btn:hover {
  background: var(--wl-fill);
}
.wl-icon-btn:active {
  transform: scale(0.94);
}
.wl-icon-btn svg,
.wl-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.wl-btn[aria-busy="true"]::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wl-spin 0.8s linear infinite;
}

/* Forms */
.wl-field {
  display: grid;
  gap: 6px;
}
.wl-label {
  color: var(--wl-text);
  font-size: var(--wl-fs-subhead);
  font-weight: var(--wl-weight-semibold);
}
.wl-hint {
  margin: 0;
  color: var(--wl-text-3);
  font-size: var(--wl-fs-footnote);
}
.wl-input,
.wl-select,
.wl-textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--wl-touch);
  padding: 10px 14px;
  border: 1px solid var(--wl-separator);
  border-radius: var(--wl-radius-md);
  background: var(--wl-surface);
  color: var(--wl-text);
  font-size: var(--wl-fs-body);
  transition:
    border-color var(--wl-dur-2) var(--wl-ease),
    box-shadow var(--wl-dur-2) var(--wl-ease),
    background var(--wl-dur-2) var(--wl-ease);
}
.wl-input::placeholder,
.wl-textarea::placeholder {
  color: var(--wl-text-3);
}
.wl-input:hover,
.wl-select:hover,
.wl-textarea:hover {
  border-color: var(--wl-separator-strong);
}
.wl-input:focus,
.wl-select:focus,
.wl-textarea:focus {
  border-color: var(--wl-tint);
  outline: none;
  box-shadow: 0 0 0 4px var(--wl-tint-ring);
}
.wl-input[aria-invalid="true"],
.wl-input:user-invalid {
  border-color: var(--wl-danger);
}
.wl-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* Cards, lists and grouping */
.wl-card {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--wl-separator);
  border-radius: var(--wl-radius-xl);
  background: var(--wl-surface);
  box-shadow: var(--wl-shadow-1);
}
.wl-card--raised {
  box-shadow: var(--wl-shadow-2);
}
.wl-card--glass {
  background: var(--wl-glass-bg-strong);
  border-color: var(--wl-glass-hairline);
  box-shadow:
    inset 0 1px 0 var(--wl-glass-highlight),
    var(--wl-shadow-2);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.wl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--wl-radius-lg);
  background: var(--wl-surface);
  border: 1px solid var(--wl-separator);
  overflow: hidden;
}
.wl-list > li {
  display: flex;
  align-items: center;
  gap: var(--wl-space-3);
  min-height: 52px;
  padding: 10px 16px;
}
.wl-list > li + li {
  border-top: 1px solid var(--wl-separator);
}
.wl-eyebrow {
  margin: 0 0 var(--wl-space-2);
  color: var(--wl-tint);
  font-size: var(--wl-fs-footnote);
  font-weight: var(--wl-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wl-title {
  margin: 0;
  font-family: var(--wl-font-display);
  font-size: var(--wl-fs-large);
  font-weight: var(--wl-weight-bold);
  line-height: var(--wl-lh-title);
  letter-spacing: var(--wl-tracking-title);
}
.wl-lede {
  margin: 0;
  color: var(--wl-text-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
}

/* Badges and chips */
.wl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-fill-2);
  color: var(--wl-text-2);
  font-size: var(--wl-fs-caption);
  font-weight: var(--wl-weight-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.wl-badge--tint {
  background: var(--wl-tint-soft);
  color: var(--wl-tint);
}
.wl-badge--success {
  background: var(--wl-success-soft);
  color: var(--wl-success);
}
.wl-badge--warning {
  background: var(--wl-warning-soft);
  color: var(--wl-warning);
}
.wl-badge--danger {
  background: var(--wl-danger-soft);
  color: var(--wl-danger);
}
.wl-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* Segmented control */
.wl-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: calc(var(--wl-radius-sm) + 3px);
  background: var(--wl-fill);
}
.wl-segmented > button,
.wl-segmented > label {
  position: relative;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--wl-radius-sm);
  background: transparent;
  color: var(--wl-text);
  font-size: var(--wl-fs-subhead);
  font-weight: var(--wl-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--wl-dur-2) var(--wl-ease),
    box-shadow var(--wl-dur-2) var(--wl-ease);
}
.wl-segmented > [aria-pressed="true"],
.wl-segmented > [aria-selected="true"],
.wl-segmented > label:has(input:checked) {
  background: var(--wl-surface);
  box-shadow:
    var(--wl-shadow-1),
    0 0 0 0.5px var(--wl-separator);
  font-weight: var(--wl-weight-semibold);
}
:root[data-theme="dark"] .wl-segmented > [aria-pressed="true"],
:root[data-theme="dark"] .wl-segmented > [aria-selected="true"],
:root[data-theme="dark"] .wl-segmented > label:has(input:checked) {
  background: var(--wl-surface-3);
}
.wl-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wl-segmented > label:has(input:focus-visible) {
  outline: 3px solid var(--wl-tint-ring);
}

/* Switch (checkbox) */
.wl-switch {
  appearance: none;
  position: relative;
  width: 51px;
  height: 31px;
  flex: none;
  margin: 0;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-fill);
  cursor: pointer;
  transition: background var(--wl-dur-2) var(--wl-ease);
}
.wl-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform var(--wl-dur-3) var(--wl-ease-spring);
}
.wl-switch:checked {
  background: var(--wl-success);
}
.wl-switch:checked::after {
  transform: translateX(20px);
}

/* Alerts and inline status */
.wl-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--wl-radius-md);
  background: var(--wl-fill-2);
  color: var(--wl-text);
  font-size: var(--wl-fs-subhead);
  line-height: 1.45;
}
.wl-alert:empty {
  display: none;
}
.wl-alert--info {
  background: var(--wl-tint-soft);
}
.wl-alert--success {
  background: var(--wl-success-soft);
}
.wl-alert--warning {
  background: var(--wl-warning-soft);
}
.wl-alert--danger {
  background: var(--wl-danger-soft);
}
.wl-alert__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.wl-alert--info .wl-alert__icon {
  color: var(--wl-tint);
}
.wl-alert--success .wl-alert__icon {
  color: var(--wl-success);
}
.wl-alert--warning .wl-alert__icon {
  color: var(--wl-warning);
}
.wl-alert--danger .wl-alert__icon {
  color: var(--wl-danger);
}

/* Full panel states: loading, empty, offline, timeout, signed-out, error */
.wl-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 520px;
  margin: clamp(32px, 8vh, 96px) auto;
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
}
.wl-state__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--wl-tint-soft);
  color: var(--wl-tint);
}
.wl-state__icon svg {
  width: 30px;
  height: 30px;
}
.wl-state--danger .wl-state__icon {
  background: var(--wl-danger-soft);
  color: var(--wl-danger);
}
.wl-state--warning .wl-state__icon {
  background: var(--wl-warning-soft);
  color: var(--wl-warning);
}
.wl-state h1,
.wl-state h2 {
  margin: 4px 0 0;
  font-size: var(--wl-fs-title-2);
  line-height: var(--wl-lh-title);
  letter-spacing: var(--wl-tracking-title);
}
.wl-state p {
  margin: 0;
  color: var(--wl-text-2);
}
.wl-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

/* Loading */
.wl-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--wl-fill);
  border-top-color: var(--wl-tint);
  border-radius: 50%;
  animation: wl-spin 0.9s linear infinite;
}
.wl-skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--wl-radius-sm);
  background:
    linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--wl-surface) 70%, transparent) 50%,
        transparent 100%
      )
      0 0 / 200% 100% no-repeat,
    var(--wl-fill-2);
  animation: wl-shimmer 1.4s var(--wl-ease) infinite;
}
.wl-progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-fill);
}
.wl-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wl-tint);
  transition: width var(--wl-dur-3) var(--wl-ease-out);
}

/* Toasts */
.wl-toast-region {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 200;
  display: grid;
  gap: 8px;
  width: min(440px, calc(100% - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}
.wl-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--wl-radius-lg);
  color: var(--wl-text);
  font-size: var(--wl-fs-subhead);
  font-weight: var(--wl-weight-medium);
  pointer-events: auto;
  animation: wl-rise var(--wl-dur-3) var(--wl-ease-out);
}
.wl-toast[data-tone="danger"] .wl-dot {
  color: var(--wl-danger);
}
.wl-toast[data-tone="success"] .wl-dot {
  color: var(--wl-success);
}
.wl-toast[data-tone="info"] .wl-dot {
  color: var(--wl-tint);
}

/* Dialogs (native <dialog>) */
.wl-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: min(86vh, 720px);
  padding: 0;
  border: 1px solid var(--wl-glass-hairline);
  border-radius: var(--wl-radius-xl);
  background: var(--wl-glass-bg-strong);
  color: var(--wl-text);
  box-shadow:
    inset 0 1px 0 var(--wl-glass-highlight),
    var(--wl-shadow-3);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
.wl-dialog[open] {
  animation: wl-pop var(--wl-dur-3) var(--wl-ease-out);
}
.wl-dialog::backdrop {
  background: rgba(8, 12, 20, 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wl-dialog__body {
  display: grid;
  gap: 10px;
  padding: 26px 24px 8px;
  text-align: center;
}
.wl-dialog__body h2 {
  margin: 0;
  font-size: var(--wl-fs-title-3);
  line-height: 1.25;
  letter-spacing: var(--wl-tracking-title);
}
.wl-dialog__body p {
  margin: 0;
  color: var(--wl-text-2);
  font-size: var(--wl-fs-subhead);
}
.wl-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 20px 20px;
}

/* Offline banner (shown by wl-ui.js) */
.wl-offline {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 9px 16px;
  border-radius: var(--wl-radius-pill);
  color: var(--wl-text);
  font-size: var(--wl-fs-footnote);
  font-weight: var(--wl-weight-semibold);
  transform: translateX(-50%);
  animation: wl-drop var(--wl-dur-3) var(--wl-ease-out);
}
.wl-offline .wl-dot {
  color: var(--wl-warning);
}

/* Theme toggle icons managed by wl-ui.js */
.wl-theme-icon {
  width: 20px;
  height: 20px;
}

@keyframes wl-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wl-shimmer {
  from {
    background-position:
      150% 0,
      0 0;
  }
  to {
    background-position:
      -50% 0,
      0 0;
  }
}
@keyframes wl-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes wl-drop {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
}
@keyframes wl-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* 5. Accessibility and graceful degradation --------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --wl-glass-bg: var(--wl-glass-solid);
    --wl-glass-bg-strong: var(--wl-glass-solid);
  }
}
/* Reduced transparency: OS preference or the Whitelists appearance setting. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --wl-glass-bg: var(--wl-glass-solid);
    --wl-glass-bg-strong: var(--wl-glass-solid);
    --wl-glass-blur: 0px;
  }
  .wl-glass,
  .wl-card--glass,
  .wl-dialog,
  .wl-dialog::backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
:root[data-transparency="reduce"] {
  --wl-glass-bg: var(--wl-glass-solid);
  --wl-glass-bg-strong: var(--wl-glass-solid);
  --wl-glass-blur: 0px;
}
:root[data-transparency="reduce"]
  :is(.wl-glass, .wl-card--glass, .wl-dialog, .wl-dialog::backdrop) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (prefers-contrast: more) {
  :root {
    --wl-separator: rgba(12, 20, 36, 0.42);
    --wl-separator-strong: rgba(12, 20, 36, 0.6);
    --wl-glass-hairline: rgba(12, 20, 36, 0.42);
    --wl-text-2: #2c3546;
    --wl-text-3: #3c4558;
    --wl-glass-bg: var(--wl-glass-solid);
    --wl-glass-bg-strong: var(--wl-glass-solid);
  }
  :root[data-theme="dark"] {
    --wl-separator: rgba(240, 245, 255, 0.45);
    --wl-separator-strong: rgba(240, 245, 255, 0.65);
    --wl-glass-hairline: rgba(240, 245, 255, 0.45);
    --wl-text-2: #d7deea;
    --wl-text-3: #c3cbd9;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --wl-dur-1: 1ms;
    --wl-dur-2: 1ms;
    --wl-dur-3: 1ms;
    --wl-dur-4: 1ms;
  }
  .wl-skeleton,
  .wl-spinner,
  .wl-btn[aria-busy="true"]::after {
    animation-duration: 2.4s;
  }
  .wl-skeleton {
    animation: none;
  }
  .wl-toast,
  .wl-offline,
  .wl-dialog[open] {
    animation: none;
  }
}
@media (forced-colors: active) {
  .wl-glass,
  .wl-card,
  .wl-dialog,
  .wl-btn,
  .wl-icon-btn,
  .wl-input,
  .wl-select,
  .wl-textarea {
    border: 1px solid CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .wl-btn--primary {
    forced-color-adjust: none;
    background: ButtonText;
    color: ButtonFace;
  }
}
@media print {
  .wl-navbar,
  .wl-toast-region,
  .wl-offline,
  .wl-skip-link {
    display: none !important;
  }
  .wl-ambient body::before {
    display: none;
  }
}

/* Whitelists shield mark (light/dark artwork swap; the artwork itself is unchanged). */
.whitelists-mark {
  display: inline-grid;
  width: var(--brand-mark-size, 48px);
  height: var(--brand-mark-size, 48px);
  flex: 0 0 var(--brand-mark-size, 48px);
  overflow: hidden;
  border-radius: var(--brand-mark-radius, 22%);
  vertical-align: middle;
  line-height: 0;
}
.whitelists-mark > img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.whitelists-mark .whitelists-mark-dark {
  display: none;
}
:root[data-theme="dark"] .whitelists-mark .whitelists-mark-light {
  display: none;
}
:root[data-theme="dark"] .whitelists-mark .whitelists-mark-dark {
  display: block;
}

/* 6. Language, scene and motion (release 20261021) ---------------------------- */
/* Markup is authored in English; other languages stay hidden until translated.
   The animation reveals the page anyway if the script never runs. */
html.wl-i18n-pending body {
  visibility: hidden;
  animation: wl-i18n-reveal 0s 2.5s forwards;
}
@keyframes wl-i18n-reveal {
  to {
    visibility: visible;
  }
}

.wl-lang {
  position: relative;
  display: inline-flex;
  flex: none;
}
.wl-lang__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  height: 36px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--wl-separator);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-fill);
  color: var(--wl-text);
  font-size: var(--wl-fs-footnote);
  font-weight: var(--wl-weight-semibold);
  cursor: pointer;
  transition:
    background var(--wl-dur-2) var(--wl-ease),
    transform var(--wl-dur-2) var(--wl-ease-spring);
}
.wl-lang__button:hover {
  background: var(--wl-fill-2);
}
.wl-lang__button:active {
  transform: scale(0.96);
}
.wl-lang__button svg {
  width: 17px;
  height: 17px;
}
.wl-lang__code {
  min-width: 1.4em;
  text-align: center;
}
.wl-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border-radius: var(--wl-radius-lg);
  transform-origin: top right;
  animation: wl-pop var(--wl-dur-3) var(--wl-ease-spring);
}
.wl-lang__menu[hidden] {
  display: none;
}
.wl-lang__menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--wl-radius-md);
  background: transparent;
  color: var(--wl-text);
  font-size: var(--wl-fs-subhead);
  text-align: left;
  cursor: pointer;
}
.wl-lang__menu button:hover,
.wl-lang__menu button:focus-visible {
  background: var(--wl-fill);
}
.wl-lang__check {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--wl-tint);
  opacity: 0;
}
.wl-lang__menu [aria-checked="true"] .wl-lang__check {
  opacity: 1;
}
.wl-lang__menu [aria-checked="true"] {
  font-weight: var(--wl-weight-semibold);
}

/* Scene: decorative, behind everything, never interactive. */
:root {
  --wl-cloud: rgba(255, 255, 255, 0.9);
  --wl-cloud-shade: rgba(120, 150, 200, 0.18);
  --wl-cloud-opacity: 0.85;
  --wl-star-opacity: 0;
  --wl-sky: linear-gradient(180deg, rgba(180, 214, 255, 0.34), rgba(255, 255, 255, 0) 62%);
}
:root[data-theme="dark"] {
  --wl-cloud: rgba(150, 170, 230, 0.11);
  --wl-cloud-shade: transparent;
  --wl-cloud-opacity: 0.55;
  --wl-star-opacity: 1;
  --wl-sky: linear-gradient(180deg, rgba(14, 22, 58, 0.75), rgba(5, 8, 20, 0) 70%);
}
.wl-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.wl-scene__sky {
  position: absolute;
  inset: 0;
  background: var(--wl-sky);
}
.wl-scene__layer {
  position: absolute;
  inset: -10vh -6vw;
  will-change: transform;
}
.wl-scene__stars {
  opacity: var(--wl-star-opacity);
  transition: opacity 600ms var(--wl-ease);
  transform: translate3d(
    calc(var(--wl-px, 0) * -6px),
    calc(var(--wl-scroll, 0) * -0.04px + var(--wl-py, 0) * -6px),
    0
  );
}
.wl-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  animation: wl-twinkle 5.5s ease-in-out infinite alternate;
}
.wl-stars--near {
  width: 2px;
  height: 2px;
  animation-duration: 3.8s;
  animation-delay: -1.3s;
}
.wl-shooting {
  position: absolute;
  top: 14%;
  left: 62%;
  width: 140px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  opacity: 0;
  transform: rotate(-24deg);
  animation: wl-shoot 11s ease-in 3s infinite;
}
.wl-shooting--late {
  top: 32%;
  left: 18%;
  width: 100px;
  animation-delay: 8.5s;
  animation-duration: 17s;
}
.wl-scene__clouds {
  bottom: auto;
  height: 130vh;
  opacity: var(--wl-cloud-opacity);
  transform: translate3d(calc(var(--wl-px, 0) * -12px), calc(var(--wl-scroll, 0) * -0.12px), 0);
}
.wl-cloud {
  position: absolute;
  left: 0;
  width: 220px;
  height: auto;
  fill: var(--wl-cloud);
  filter: drop-shadow(0 10px 18px var(--wl-cloud-shade));
  animation: wl-drift 120s linear infinite;
}
.wl-cloud--1 {
  top: 7%;
  width: 260px;
  animation-delay: -22s;
}
.wl-cloud--2 {
  top: 19%;
  width: 170px;
  animation-duration: 150s;
  animation-delay: -95s;
}
.wl-cloud--3 {
  top: 36%;
  width: 320px;
  opacity: 0.7;
  animation-duration: 180s;
  animation-delay: -40s;
}
.wl-cloud--4 {
  top: 54%;
  width: 140px;
  opacity: 0.6;
  animation-duration: 135s;
  animation-delay: -110s;
}
.wl-cloud--5 {
  top: 72%;
  width: 230px;
  opacity: 0.5;
  animation-duration: 200s;
  animation-delay: -150s;
}
.wl-scene__orbs {
  transform: translate3d(calc(var(--wl-px, 0) * -18px), calc(var(--wl-scroll, 0) * -0.22px), 0);
}
.wl-orb {
  position: absolute;
  width: 34vmax;
  height: 34vmax;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--wl-aurora-1), transparent 66%);
  animation: wl-bob 18s ease-in-out infinite;
}
.wl-orb--1 {
  top: -6vmax;
  left: -8vmax;
}
.wl-orb--2 {
  top: 30vh;
  right: -12vmax;
  background: radial-gradient(circle at 50% 50%, var(--wl-aurora-2), transparent 66%);
  animation-duration: 24s;
  animation-delay: -6s;
}
.wl-orb--3 {
  top: 90vh;
  left: 20vw;
  background: radial-gradient(circle at 50% 50%, var(--wl-aurora-3), transparent 66%);
  animation-duration: 21s;
  animation-delay: -11s;
}

/* Floating mini windows, parallax helpers and scroll reveals. */
.wl-float {
  animation: wl-bob 7s ease-in-out infinite;
  animation-delay: var(--wl-float-delay, 0s);
}
[data-parallax] {
  transform: translate3d(0, var(--wl-parallax, 0px), 0);
  transition: transform 120ms linear;
}
[data-reveal] {
  transition:
    opacity 700ms var(--wl-ease-out),
    transform 700ms var(--wl-ease-out);
  transition-delay: calc(var(--wl-reveal-index, 0) * 70ms);
}
.wl-js [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
}

@keyframes wl-twinkle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@keyframes wl-shoot {
  0%,
  92% {
    opacity: 0;
    transform: rotate(-24deg) translateX(0);
  }
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-24deg) translateX(-260px);
  }
}
@keyframes wl-drift {
  from {
    transform: translate3d(-30vw, 0, 0);
  }
  to {
    transform: translate3d(125vw, 0, 0);
  }
}
@keyframes wl-bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -10px, 0) rotate(-0.6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-scene *,
  .wl-float {
    animation: none !important;
  }
  .wl-scene__layer,
  [data-parallax] {
    transform: none !important;
  }
  .wl-js [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  .wl-cloud--1 {
    transform: translateX(8vw);
  }
  .wl-cloud--2 {
    transform: translateX(62vw);
  }
  .wl-cloud--3 {
    transform: translateX(30vw);
  }
  .wl-cloud--4 {
    transform: translateX(80vw);
  }
  .wl-cloud--5 {
    transform: translateX(14vw);
  }
}
:root[data-motion="reduce"] :is(.wl-scene *, .wl-float) {
  animation: none !important;
}
:root[data-motion="reduce"] :is(.wl-scene__layer, [data-parallax]) {
  transform: none !important;
}
:root[data-motion="reduce"].wl-js [data-reveal]:not(.is-in) {
  opacity: 1;
  transform: none;
}
:root[data-motion="reduce"] .wl-cloud--1 {
  transform: translateX(8vw);
}
:root[data-motion="reduce"] .wl-cloud--2 {
  transform: translateX(62vw);
}
:root[data-motion="reduce"] .wl-cloud--3 {
  transform: translateX(30vw);
}
:root[data-motion="reduce"] .wl-cloud--4 {
  transform: translateX(80vw);
}
:root[data-motion="reduce"] .wl-cloud--5 {
  transform: translateX(14vw);
}
@media (forced-colors: active) {
  .wl-scene {
    display: none;
  }
}
@media print {
  .wl-scene,
  .wl-lang {
    display: none !important;
  }
  .wl-js [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}

/* Very narrow phones: keep the navbar on one line (brand mark + icon-only language). */
@media (max-width: 380px) {
  .wl-navbar__brand > span:not(.whitelists-mark) {
    display: none;
  }
  .wl-navbar .wl-lang__code {
    display: none;
  }
  .wl-navbar .wl-lang__button {
    padding: 0 9px;
  }
}