:root, .light, .light-theme {
  --cyan-1: #fafdfe;
  --cyan-2: #f2fafb;
  --cyan-3: #def7f9;
  --cyan-4: #caf1f6;
  --cyan-5: #b5e9f0;
  --cyan-6: #9ddde7;
  --cyan-7: #7dcedc;
  --cyan-8: #3db9cf;
  --cyan-9: #00a2c7;
  --cyan-10: #0797b9;
  --cyan-11: #107d98;
  --cyan-12: #0d3c48;
  --cyan-a1: #0099cc05;
  --cyan-a2: #009db10d;
  --cyan-a3: #00c2d121;
  --cyan-a4: #00bcd435;
  --cyan-a5: #01b4cc4a;
  --cyan-a6: #00a7c162;
  --cyan-a7: #009fbb82;
  --cyan-a8: #00a3c0c2;
  --cyan-a9: #00a2c7;
  --cyan-a10: #0094b7f8;
  --cyan-a11: #007491ef;
  --cyan-a12: #00323ef2;
  --cyan-surface: #eff9facc;
  --cyan-indicator: var(--cyan-9);
  --cyan-track: var(--cyan-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --cyan-1: color(display-p3 .982 .992 .996);
      --cyan-2: color(display-p3 .955 .981 .984);
      --cyan-3: color(display-p3 .888 .965 .975);
      --cyan-4: color(display-p3 .821 .941 .959);
      --cyan-5: color(display-p3 .751 .907 .935);
      --cyan-6: color(display-p3 .671 .862 .9);
      --cyan-7: color(display-p3 .564 .8 .854);
      --cyan-8: color(display-p3 .388 .715 .798);
      --cyan-9: color(display-p3 .282 .627 .765);
      --cyan-10: color(display-p3 .264 .583 .71);
      --cyan-11: color(display-p3 .08 .48 .63);
      --cyan-12: color(display-p3 .108 .232 .277);
      --cyan-a1: color(display-p3 .02 .608 .804 / .02);
      --cyan-a2: color(display-p3 .02 .557 .647 / .044);
      --cyan-a3: color(display-p3 .004 .694 .796 / .114);
      --cyan-a4: color(display-p3 .004 .678 .784 / .181);
      --cyan-a5: color(display-p3 .004 .624 .733 / .248);
      --cyan-a6: color(display-p3 .004 .584 .706 / .33);
      --cyan-a7: color(display-p3 .004 .541 .667 / .436);
      --cyan-a8: color(display-p3 0 .533 .667 / .612);
      --cyan-a9: color(display-p3 0 .482 .675 / .718);
      --cyan-a10: color(display-p3 0 .435 .608 / .738);
      --cyan-a11: color(display-p3 .08 .48 .63);
      --cyan-a12: color(display-p3 .108 .232 .277);
      --cyan-surface: color(display-p3 .9412 .9765 .9804 / .8);
    }
  }
}

.dark, .dark-theme {
  --cyan-1: #0b161a;
  --cyan-2: #101b20;
  --cyan-3: #082c36;
  --cyan-4: #003848;
  --cyan-5: #004558;
  --cyan-6: #045468;
  --cyan-7: #12677e;
  --cyan-8: #11809c;
  --cyan-9: #00a2c7;
  --cyan-10: #23afd0;
  --cyan-11: #4ccce6;
  --cyan-12: #b6ecf7;
  --cyan-a1: #0091f70a;
  --cyan-a2: #02a7f211;
  --cyan-a3: #00befd28;
  --cyan-a4: #00baff3b;
  --cyan-a5: #00befd4d;
  --cyan-a6: #00c7fd5e;
  --cyan-a7: #14cdff75;
  --cyan-a8: #11cfff95;
  --cyan-a9: #00cfffc3;
  --cyan-a10: #28d6ffcd;
  --cyan-a11: #52e1fee5;
  --cyan-a12: #bbf3fef7;
  --cyan-surface: #11252d80;
  --cyan-indicator: var(--cyan-9);
  --cyan-track: var(--cyan-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --cyan-1: color(display-p3 .053 .085 .098);
      --cyan-2: color(display-p3 .072 .105 .122);
      --cyan-3: color(display-p3 .073 .168 .209);
      --cyan-4: color(display-p3 .063 .216 .277);
      --cyan-5: color(display-p3 .091 .267 .336);
      --cyan-6: color(display-p3 .137 .324 .4);
      --cyan-7: color(display-p3 .186 .398 .484);
      --cyan-8: color(display-p3 .23 .496 .6);
      --cyan-9: color(display-p3 .282 .627 .765);
      --cyan-10: color(display-p3 .331 .675 .801);
      --cyan-11: color(display-p3 .446 .79 .887);
      --cyan-12: color(display-p3 .757 .919 .962);
      --cyan-a1: color(display-p3 0 .647 .992 / .034);
      --cyan-a2: color(display-p3 .133 .733 1 / .059);
      --cyan-a3: color(display-p3 .122 .741 .996 / .152);
      --cyan-a4: color(display-p3 .051 .725 1 / .227);
      --cyan-a5: color(display-p3 .149 .757 1 / .29);
      --cyan-a6: color(display-p3 .267 .792 1 / .358);
      --cyan-a7: color(display-p3 .333 .808 1 / .446);
      --cyan-a8: color(display-p3 .357 .816 1 / .572);
      --cyan-a9: color(display-p3 .357 .82 1 / .748);
      --cyan-a10: color(display-p3 .4 .839 1 / .786);
      --cyan-a11: color(display-p3 .446 .79 .887);
      --cyan-a12: color(display-p3 .757 .919 .962);
      --cyan-surface: color(display-p3 .0784 .1412 .1725 / .5);
    }
  }
}

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