:root {
  color-scheme: dark;

  --bg: #0d0710;
  --bg-2: #1a0b1b;

  --surface: rgba(255, 190, 226, 0.06);
  --surface-2: rgba(255, 190, 226, 0.11);
  --border: rgba(255, 190, 226, 0.12);
  --border-2: rgba(255, 190, 226, 0.22);

  --text: #fff6fb;
  --text-2: rgba(255, 246, 251, 0.68);
  --text-3: rgba(255, 246, 251, 0.46);

  --accent: #ff6fb5;
  --accent-2: #ffa6d5;
  --accent-3: #c084fc;
  --verified: #3da5ff;
  --live: #34d399;

  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 200ms;
  --med: 450ms;

  --page-max: 540px;
  --gutter: 20px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --pad-top: clamp(12px, 3vh, 40px);
  --pad-bottom: clamp(10px, 2vh, 24px);
  --section-gap: clamp(12px, 2.6vh, 32px);
  --avatar: clamp(80px, 14vh, 148px);
  --avatar-gap: clamp(8px, 1.4vh, 14px);
  --name-size: clamp(24px, 4vh, 36px);
  --meta-gap: clamp(6px, 1.2vh, 12px);
  --chip-pad-y: clamp(5px, 0.9vh, 7px);
  --stats-gap: clamp(8px, 1.6vh, 18px);
  --stat-pad-y: clamp(6px, 1.1vh, 10px);
  --stat-size: clamp(17px, 2.6vh, 20px);
  --tile: min(clamp(40px, 6.4vh, 56px), 13vw);
  --tile-icon: clamp(20px, 3.2vh, 28px);
  --card-pad-y: clamp(8px, 1.3vh, 18px);
  --card-gap: clamp(8px, 1.3vh, 14px);
  --arrow: min(clamp(32px, 4.6vh, 40px), 10vw);

  --card-pad-x: clamp(12px, 4vw, 22px);
  --row-gap: clamp(10px, 3.5vw, 18px);
}

@supports (height: 1svh) {
  :root {
    --pad-top: clamp(12px, 3svh, 40px);
    --pad-bottom: clamp(10px, 2svh, 24px);
    --section-gap: clamp(12px, 2.6svh, 32px);
    --avatar: clamp(80px, 14svh, 148px);
    --avatar-gap: clamp(8px, 1.4svh, 14px);
    --name-size: clamp(24px, 4svh, 36px);
    --meta-gap: clamp(6px, 1.2svh, 12px);
    --chip-pad-y: clamp(5px, 0.9svh, 7px);
    --stats-gap: clamp(8px, 1.6svh, 18px);
    --stat-pad-y: clamp(6px, 1.1svh, 10px);
    --stat-size: clamp(17px, 2.6svh, 20px);
    --tile: min(clamp(40px, 6.4svh, 56px), 13vw);
    --tile-icon: clamp(20px, 3.2svh, 28px);
    --card-pad-y: clamp(8px, 1.3svh, 18px);
    --card-gap: clamp(8px, 1.3svh, 14px);
    --arrow: min(clamp(32px, 4.6svh, 40px), 10vw);
  }
}