:root, .light, .light-theme {
  --bronze-1: #fdfcfc;
  --bronze-2: #fdf7f5;
  --bronze-3: #f6edea;
  --bronze-4: #efe4df;
  --bronze-5: #e7d9d3;
  --bronze-6: #dfcdc5;
  --bronze-7: #d3bcb3;
  --bronze-8: #c2a499;
  --bronze-9: #a18072;
  --bronze-10: #957468;
  --bronze-11: #7d5e54;
  --bronze-12: #43302b;
  --bronze-a1: #55000003;
  --bronze-a2: #cc33000a;
  --bronze-a3: #92250015;
  --bronze-a4: #80280020;
  --bronze-a5: #7423002c;
  --bronze-a6: #7324003a;
  --bronze-a7: #6c1f004c;
  --bronze-a8: #671c0066;
  --bronze-a9: #551a008d;
  --bronze-a10: #4c150097;
  --bronze-a11: #3d0f00ab;
  --bronze-a12: #1d0600d4;
  --bronze-surface: #fdf5f3cc;
  --bronze-indicator: var(--bronze-9);
  --bronze-track: var(--bronze-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --bronze-1: color(display-p3 .991 .988 .988);
      --bronze-2: color(display-p3 .989 .97 .961);
      --bronze-3: color(display-p3 .958 .932 .919);
      --bronze-4: color(display-p3 .929 .894 .877);
      --bronze-5: color(display-p3 .898 .853 .832);
      --bronze-6: color(display-p3 .861 .805 .778);
      --bronze-7: color(display-p3 .812 .739 .706);
      --bronze-8: color(display-p3 .741 .647 .606);
      --bronze-9: color(display-p3 .611 .507 .455);
      --bronze-10: color(display-p3 .563 .461 .414);
      --bronze-11: color(display-p3 .471 .373 .336);
      --bronze-12: color(display-p3 .251 .191 .172);
      --bronze-a1: color(display-p3 .349 .024 .024 / .012);
      --bronze-a2: color(display-p3 .71 .22 .024 / .04);
      --bronze-a3: color(display-p3 .482 .2 .008 / .083);
      --bronze-a4: color(display-p3 .424 .133 .004 / .122);
      --bronze-a5: color(display-p3 .4 .145 .004 / .169);
      --bronze-a6: color(display-p3 .388 .125 .004 / .224);
      --bronze-a7: color(display-p3 .365 .11 .004 / .295);
      --bronze-a8: color(display-p3 .341 .102 .004 / .393);
      --bronze-a9: color(display-p3 .29 .094 0 / .546);
      --bronze-a10: color(display-p3 .255 .082 0 / .585);
      --bronze-a11: color(display-p3 .471 .373 .336);
      --bronze-a12: color(display-p3 .251 .191 .172);
      --bronze-surface: color(display-p3 .9843 .9608 .9529 / .8);
    }
  }
}

.dark, .dark-theme {
  --bronze-1: #141110;
  --bronze-2: #1c1917;
  --bronze-3: #262220;
  --bronze-4: #302a27;
  --bronze-5: #3b3330;
  --bronze-6: #493e3a;
  --bronze-7: #5a4c47;
  --bronze-8: #6f5f58;
  --bronze-9: #a18072;
  --bronze-10: #ae8c7e;
  --bronze-11: #d4b3a5;
  --bronze-12: #ede0d9;
  --bronze-a1: #d1110004;
  --bronze-a2: #fbbc910c;
  --bronze-a3: #faceb817;
  --bronze-a4: #facdb622;
  --bronze-a5: #ffd2c12d;
  --bronze-a6: #ffd1c03c;
  --bronze-a7: #fdd0c04f;
  --bronze-a8: #ffd6c565;
  --bronze-a9: #fec7b09b;
  --bronze-a10: #fecab5a9;
  --bronze-a11: #ffd7c6d1;
  --bronze-a12: #fff1e9ec;
  --bronze-surface: #27211d80;
  --bronze-indicator: var(--bronze-9);
  --bronze-track: var(--bronze-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --bronze-1: color(display-p3 .076 .067 .063);
      --bronze-2: color(display-p3 .106 .097 .093);
      --bronze-3: color(display-p3 .147 .132 .125);
      --bronze-4: color(display-p3 .185 .166 .156);
      --bronze-5: color(display-p3 .227 .202 .19);
      --bronze-6: color(display-p3 .278 .246 .23);
      --bronze-7: color(display-p3 .343 .302 .281);
      --bronze-8: color(display-p3 .426 .374 .347);
      --bronze-9: color(display-p3 .611 .507 .455);
      --bronze-10: color(display-p3 .66 .556 .504);
      --bronze-11: color(display-p3 .81 .707 .655);
      --bronze-12: color(display-p3 .921 .88 .854);
      --bronze-a1: color(display-p3 .941 .067 0 / .009);
      --bronze-a2: color(display-p3 .98 .8 .706 / .043);
      --bronze-a3: color(display-p3 .988 .851 .761 / .085);
      --bronze-a4: color(display-p3 .996 .839 .78 / .127);
      --bronze-a5: color(display-p3 .996 .863 .773 / .173);
      --bronze-a6: color(display-p3 1 .863 .796 / .227);
      --bronze-a7: color(display-p3 1 .867 .8 / .295);
      --bronze-a8: color(display-p3 1 .859 .788 / .387);
      --bronze-a9: color(display-p3 1 .82 .733 / .585);
      --bronze-a10: color(display-p3 1 .839 .761 / .635);
      --bronze-a11: color(display-p3 .81 .707 .655);
      --bronze-a12: color(display-p3 .921 .88 .854);
      --bronze-surface: color(display-p3 .1412 .1255 .1176 / .5);
    }
  }
}

:root {
  --bronze-contrast: white;
}